浏览器渲染 ​

1. DNS 解析，然后走 https 协议，TCP 协议，ip 协议，获取静态资源
2. 浏览器会使用 HMTL 解析器去，从上往下解析 HTML
3. 遇到资源加载

• link 资源，通常是 link 样式和 icon，加载资源时，不影响 HMTL 继续解析，但会阻止页面渲染。link 样式下载完毕，则有 CSS 解析器将文件解析成 CSSOM
• script 获取 js，如果标签没有设置 defer 或者 async 属性，则会停止解析，去加载 js，加载完成立即执行代码，执行完毕再恢复解析。
• 如果 defer 属性，加载 js 不会停止解析，但延迟执行，在文档解析完成DOMContentLoaded执行
• 如果 async 属性，加载 js 不会停止解析，加载完成，HTML 停止解析，立即执行 js

4. 遇到 style，直接用 CSS 解析器解析

5. 等 HMTL 和 CSS 解析完成，会去执行 defer 属性的 js

6. 合并 HMTML 解析的 DOM 和 CSSOM，形成渲染树

7. 解析渲染树，进行布局和计算每个节点的几何信息

8. 将节点渲染到页面上，初始渲染完成

9. 如果后续有做窗口大小修改，元素尺寸位置修改，增加删除元素，字体大小改变，会触发页面的重新布局和节点信息计算，这个动作称之为回流、重排，同时也会重新触发非几何的渲染比如颜色、可见性、布局没变的文本修改，这个动作称之为重绘

10. 如果只修改颜色、可见性、文本，则只触发重绘