前端面试题-HTML、HTTP、web综合问题（一）

⼀、HTML、HTTP、web综合问题

1 前端需要注意哪些SEO

• 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减⼩， title值强调重点即可，重要关键词出现不要超过2次，⽽且要靠前，不同⻚⾯ title 要有所不同； description 把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同； keywords 列举出重要关键词即可
• 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解⽹⻚
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取重要内容不要⽤ js 输出：爬⾍不会执⾏js获取内容
• 少⽤ iframe ：搜索引擎不会抓取 iframe 中的内容
• ⾮装饰性图⽚必须加 alt
• 提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标

2 的 title 和 alt 有什么区别

• 通常当⿏标滑动到元素上的时候显示
• alt 是 的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会重点分析。

3 HTTP的⼏种请求⽅法⽤途

• GET ⽅法
  • 发送⼀个请求来取得服务器上的某⼀资源
• POST ⽅法
  • 向 URL 指定的资源提交数据或附加新的数据
• PUT ⽅法
  • 跟 POST ⽅法很像，也是想服务器提交数据。但是，它们之间有不同。 PUT 指定了资源在服务器上的位置，⽽ POST 没有
• HEAD ⽅法
  • 只请求⻚⾯的⾸部
• DELETE ⽅法
  • 删除服务器上的某资源
• OPTIONS ⽅法
  • 它⽤于获取当前 URL 所⽀持的⽅法。如果请求成功，会有⼀个 Allow 的头包含类似 “GET,POST” 这样的信息
• TRACE ⽅法
  • TRACE ⽅法被⽤于激发⼀个远程的，应⽤层的请求消息回路
• CONNECT ⽅法
  • 把请求连接转换到透明的 TCP/IP 通道

4 从浏览器地址栏输⼊url到显示⻚⾯的步骤

基础版本

• 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构（如 HTML 的 DOM ）；
• 载⼊解析到的资源⽂件，渲染⻚⾯，完成。

详细版

1. 在浏览器地址栏输⼊URL

2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
   2.1. 如果资源未缓存，发起新请求
   2.2. 如果已缓存，检验是否⾜够新鲜，⾜够新鲜直接提供给客户端，否则与服务器进⾏验证。
   2.3. 检验新鲜通常有两个HTTP头进⾏控制 Expires 和 Cache-Control ：
   * HTTP1.0提供Expires，值为⼀个绝对时间表示缓存新鲜⽇期
   * HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最⼤新鲜时间

3. 浏览器解析URL获取协议，主机，端⼝，path

4. 浏览器组装⼀个HTTP（GET）请求报⽂

5. 浏览器获取主机ip地址，过程如下：
   5.1. 浏览器缓存
   5.2. 本机缓存
   5.3. hosts⽂件
   5.4. 路由器缓存
   5.5. ISP DNS缓存
   5.6. DNS递归查询（可能存在负载均衡导致每次IP不⼀样）

6. 打开⼀个socket与⽬标IP地址，端⼝建⽴TCP链接，三次握⼿如下：
   6.1. 客户端发送⼀个TCP的SYN=1，Seq=X的包到服务器端⼝
   6.2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
   6.3. 客户端发送ACK=Y+1， Seq=Z

7. TCP链接建⽴后发送HTTP请求

8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使⽤HTTP Host头部判断请求的服务程序

9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码

10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作

11. 服务器将响应报⽂通过TCP连接发送回浏览器

12. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重⽤，关闭TCP连接的四次握⼿如下：
    12.1. 主动⽅发送Fin=1， Ack=Z， Seq= X报⽂
    12.2. 被动⽅发送ACK=X+1， Seq=Z报⽂
    12.3. 被动⽅发送Fin=1， ACK=X， Seq=Y报⽂
    12.4. 主动⽅发送ACK=Y， Seq=X报⽂

13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同

14. 如果资源可缓存，进⾏缓存

15. 对响应进⾏解码（例如gzip压缩）

16. 根据资源类型决定如何处理（假设资源为HTML⽂档）

17. 解析HTML⽂档，构件DOM树，下载资源，构造CSSOM树，执⾏js脚本，这些操作没有严
    格的先后顺序，以下分别解释

18. 构建DOM树：
    18.1. Tokenizing：根据HTML规范将字符流解析为标记
    18.2. Lexing：词法分析将标记转换为对象并定义属性和规则
    18.3. DOM construction：根据HTML标记关系将对象组成DOM树

19. 解析过程中遇到图⽚、样式表、js⽂件，启动下载

20. 构建CSSOM树：
    20.1. Tokenizing：字符流转换为标记流
    20.2. Node：根据标记创建节点
    20.3. CSSOM：节点创建CSSOM树

21. 根据DOM树和CSSOM树构建渲染树 :
    21.1. 从DOM树的根节点遍历所有可⻅节点，不可⻅节点包括：1） script , meta 这样本身不可⻅的标签。2)被css隐藏的节点，如 display: none
    21.2. 对每⼀个可⻅节点，找到恰当的CSSOM规则并应⽤
    21.3. 发布可视节点的内容和计算样式

22. js解析如下：
    22.1. 浏览器创建Document对象并解析HTML，将解析到的元素和⽂本节点添加到⽂档中，此时document.readystate为loading
    22.2. HTML解析器遇到没有async和defer的script时，将他们添加到⽂档中，然后执⾏⾏内或外部脚本。这些脚本会同步执⾏，并且在脚本下载和执⾏时解析器会暂停。这样就可以⽤document.write()把⽂本插⼊到输⼊流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的⽂档内容
    22.3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析⽂档。脚本会在它下载完成后尽快执⾏，但是解析器不会停下来等它下载。异步脚本禁⽌使⽤document.write()，它们可以访问⾃⼰script和之前的⽂档元素
    22.4. 当⽂档完成解析，document.readState变成interactive
    22.5. 所有defer脚本会按照在⽂档出现的顺序执⾏，延迟脚本能访问完整⽂档树，禁⽌使⽤document.write()
    22.6. 浏览器在Document对象上触发DOMContentLoaded事件
    22.7. 此时⽂档完全解析完成，浏览器可能还在等待如图⽚等内容加载，等这些内容完成载⼊并且所有异步脚本完成载⼊和执⾏，document.readState变为complete，window触发load事件

23. 显示⻚⾯（HTML解析过程中会逐步显示⻚⾯）
    详细简版
    23.1. 从浏览器接收 url 到开启⽹络请求线程（这⼀部分可以展开浏览器的机制以及进程与线程之间的关系）
    23.2. 开启⽹络线程到发出⼀个完整的 HTTP 请求（这⼀部分涉及到dns查询， TCP/IP 请求，五层因特⽹协议栈等知识）
    23.3. 从服务器接收到请求到对应后台接收到请求（这⼀部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
    23.4. 后台和前台的 HTTP 交互（这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知识，可以提下静态资源的 cookie 优化，以及编码解码，如 gzip 压缩等）

23.5. 单独拎出来的缓存问题， HTTP 的缓存（这部分包括http缓存头部， ETag ， catch-control 等）
23.6. 浏览器接收到 HTTP 数据包后的解析流程（解析 html -词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成 render 树，然后 layout 、 painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等）
23.7. CSS 的可视化格式模型（元素的渲染规则，如包含块，控制框， BFC ， IFC 等概念）
23.8. JS 引擎解析过程（ JS 的解释阶段，预处理阶段，执⾏阶段⽣成执⾏上下⽂， VO ，作⽤域链、回收机制等等）
23.9. 其它（可以拓展不同的知识模块，如跨域，web安全， hybrid 模式等等内容）

5 如何进⾏⽹站性能优化

• content ⽅⾯
  • 减少 HTTP 请求：合并⽂件、 CSS 精灵、 inline Image
  • 减少 DNS 查询： DNS 缓存、将资源分布到恰当数量的主机名
  • 减少 DOM 元素数量
• Server ⽅⾯
  • 使⽤ CDN
  • 配置 ETag
  • 对组件使⽤ Gzip 压缩
• Cookie ⽅⾯
  • 减⼩ cookie ⼤⼩
• css ⽅⾯
  • 将样式表放到⻚⾯顶部
  • 不使⽤ CSS 表达式
  • 使⽤ 不使⽤ @import
• Javascript ⽅⾯
  • 将脚本放到⻚⾯底部
  • 将 javascript 和 css 从外部引⼊
  • 压缩 javascript 和 css
  • 删除不需要的脚本
  • 减少 DOM 访问
• 图⽚⽅⾯
  • 优化图⽚：根据实际颜⾊需要选择⾊深、压缩
  • 优化 css 精灵
  • 不要在 HTML 中拉伸图⽚
    6 HTTP状态码及其含义
• 1XX ：信息状态码
  • 100 Continue 继续，⼀般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息
• 2XX ：成功状态码
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
  • 202 Accepted 服务器已接受请求，但尚未处理
• 3XX ：重定向
  • 301 Moved Permanently 请求的⽹⻚已永久移动到新位置。
  • 302 Found 临时性重定向。
  • 303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI 。
  • 304 Not Modified ⾃从上次请求后，请求的⽹⻚未修改过。
• 4XX ：客户端错误
  • 400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内容发起请求。
  • 401 Unauthorized 请求未授权。
  • 403 Forbidden 禁⽌访问。
  • 404 Not Found 找不到如何与 URI 相匹配的资源。
• 5XX: 服务器错误
  • 500 Internal Server Error 最常⻅的服务器端错误。
  • 503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。

7 语义化的理解

• ⽤正确的标签做正确的事情！
• HTML 语义化就是让⻚⾯的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式 CSS 情况下也以⼀种⽂档格式显示，并且是容易阅读的。
• 搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO 。
• 使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解

8 介绍⼀下你对浏览器内核的理解？

• 主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎
• 渲染引擎：负责取得⽹⻚的内容（ HTML 、 XML 、图像等等）、整理讯息（例如加⼊CSS 等），以及计算⽹⻚的显示⽅式，然后会输出⾄显示器或打印机。浏览器的内核的不同对于⽹⻚的语法解释会有不同，所以渲染的效果也不相同。所有⽹⻚浏览器、电⼦邮件客户端以及其它需要编辑、显示⽹络内容的应⽤程序都需要内核
• JS 引擎则：解析和执⾏ javascript 来实现⽹⻚的动态效果
• 最开始渲染引擎和 JS 引擎并没有区分的很明确，后来JS引擎越来越独⽴，内核就倾向于只指渲染引擎

9 html5有哪些新特性、移除了那些元素？

• HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加
  • 绘画 canvas
  • ⽤于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失
  • sessionStorage 的数据在浏览器关闭后⾃动删除
  • 语意化更好的内容元素，⽐如 article 、 footer 、 header 、 nav 、 section
  • 表单控件， calendar 、 date 、 time 、 email 、 url 、 search
  • 新的技术 webworker 、 websocket 、 Geolocation
• 移除的元素：
  • 纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
  • 对可⽤性产⽣负⾯影响的元素： frame 、 frameset 、 noframes
• ⽀持 HTML5 新标签：
  • IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产⽣的标签
  • 可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签
  • 浏览器⽀持新标签后，还需要添加标签默认的样式
• 当然也可以直接使⽤成熟的框架、⽐如 html5shim

10 HTML5 的离线储存怎么使⽤，⼯作原理能不能解释⼀下？

• 在⽤户没有与因特⽹连接时，可以正常访问站点或应⽤，在⽤户与因特⽹连接时，更新⽤户机器上的缓存⽂件
• 原理： HTML5 的离线存储是基于⼀个新建的 .appcache ⽂件的缓存机制(不是存储技术)，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下来。之后当⽹络在处于离线状态下时，浏览器会通过被离线存储的数据进⾏⻚⾯展示
• 如何使⽤：
  • ⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性；
  • 在 cache.manifest ⽂件的编写离线存储的资源
  • 在离线状态时，操作 window.applicationCache 进⾏需求实现

11 浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢

• 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如果是第⼀次访问 app ，那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的资源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没有发⽣改变，就不做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏离线存储。
• 离线的情况下，浏览器就直接使⽤离线存储的资源。

 CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/offline.html
json

12 请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？

• cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常经过加密）
• cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
• sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存
  *存储⼤⼩：
  • cookie 数据⼤⼩不能超过4k
  • sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤
• 有期时间：
  • localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据
  • sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除
  • cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

13 iframe有那些缺点？

• iframe 会阻塞主⻚⾯的 Onload 事件
• 搜索引擎的检索程序⽆法解读这种⻚⾯，不利于 SEO
  iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载
• 使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ，最好是通过javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题