你一定要经历的 web 页面性能优化之旅 · 03

浏览器输入 URL 后发生了什么，涵盖的知识面非常广，如果只是死记硬背，根本无法理解其中的流程与原理，我学习的方式是，先整体明白有哪些流程，然后逐个流程慢慢理解

整体过程

1. 浏览器缓存

• 彻底理解浏览器的缓存机制

2. DNS 解析

• DNS 域名解析

3. TCP 链接

• TCP 连接

4. HTTP 请求与响应

• HTTP 请求与响应

5. 浏览器解析渲染页面

   

   1. 浏览器自上而下逐行解析 HTML、词法分析、语法分析、构建 DOM 树
   2. 当遇到 CSS 外链时，主线程异步获取资源，继续构建 DOM 树，等待 CSS 下载完毕，解析 CSS 内容，生成 CSSOM 树
   3. 结合 DOM 树与 CSSOM 树，生成 render tree
   4. 当遇到异步请求时，会修改 CSSOM 树和 DOM 树，会造成重绘与回流。回流：DOM节点以盒模型存在，计算盒模型的位置和大小称为回流；重绘：当盒模型的大小、位置、颜色确定下来，浏览器便开始重绘。1. 添加或删除 DOM 或导致重绘与回流；2. display:none 会导致回流和重绘，visibility:hidden 只重绘，不回流； 3. 改变定位元素的 left 与 top，会导致重绘与回流 4。 改变浏览器的窗口尺寸会导致重绘与回流 4. 改变盒模型的背景色和颜色只重绘。回流的成本大，要尽量避免回流。