这里会贴一下...前端面试常见的一些问题的自己的总结，背 api 的就不放了，找的是那种可能要讲一小段的那种。

浏览器地址栏输入 URL 后发生了什么

首先 URL 由 协议 + 域名 + 端口 ++ 路径 + 查询参数 + 锚点 组成。

• 网络传输
  输入 URL 后，浏览器通过 DNS 解析域名，找到对应的服务器 IP 地址，建立 TCP 连接

  • DNS
  • TCP 发送 HTTP 协议发送请求，服务器接收到请求后，通过 HTTP 协议返回响应
  • cdn
    • cdn 来处理一些常用资源，cdn 服务会根据用户的地理位置，选择离用户最近的服务器，加速资源的加载。
  • http 缓存
    • 常见的做法是将主页 index.html 做协商缓存，其他静态资源文件名打包加 hash 后做强缓存。
    • 强缓存是指浏览器直接从本地缓存中读取资源，不需要发送请求到服务器。可以通过设置响应头中的 Cache-Control 和 Expires 来设置强缓存。
    • 协商缓存是指浏览器发送请求到服务器，服务器根据请求头中的 If-None-Match 和 If-Modified-Since 来判断是否命中缓存。可以通过设置响应头中的 ETag 和 Last-Modified 来设置协商缓存。304 意味着命中缓存。

• 渲染
  浏览器接收到响应后，通过 HTML 解析出 DOM 树，然后通过 CSS 解析出 CSSOM 树，然后通过 DOM 树和 CSSOM 树合成渲染树， 然后通过渲染树和布局树合成布局树，然后通过布局树和绘制树合成绘制树，然后通过绘制树绘制到屏幕上。

  • 其中有两个比较重要的概念是，重排和重绘。
  • 重排是指改变了 DOM 结构或文档流布局，需要重新计算布局，比较耗费性能。
  • 重绘是指改变了元素的样式，但是没有改变布局，只需要重新绘制，而不需要重新计算布局，性能开销较小。