1. 关键渲染路径

指浏览器接受请求来的html、css、js，然后解析，构建树，渲染布局，绘制，最后呈现给用户能看到的界面这个过程

渲染有两个阶段：页面内容加载完成和页面资源加载完成，分别对应DOMContentLoaded和Load

• DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片等
• Load事件触发时，页面上所有的DOM，样式表，脚本，图片都已加载完成

2. 浏览器渲染步骤

1. 浏览器将html解析成dom树
2. 浏览器将css解析成层叠样式表树cssom
3. 浏览器将dom树和cssom树合并成渲染树render tree，代表一系列将要被渲染的对象
4. 渲染树的每个元素包含的内容都是计算过的，它被称为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
5. 将渲染树的各个节点绘制到屏幕上，这一步称为绘制painting

以上5个步骤不一定一次性顺序完成，比如DOM或CSSOM被修改时，亦或者是哪个过程会重复执行，这样才能计算出哪些元素需要在屏幕上进行重新渲染，而在实际情况中，js和css的某些操作往往会多次修改dom或cssom

3. 浏览器渲染网页的具体流程

1.构建DOM树

当浏览器接受到服务器相应的html后，会首先遍历文档节点，生成dom树，需要注意以下几点：

• dom树在构建过程中可能会被css和js的加载而阻塞
• display: none的元素也会在dom树种
• 注释也会在dom树中
• script标签也会在dom树种

无论是DOM还是CSSOM，都要经过Bytes(字节)->characters(字符)->tokens(标记)->nodes(节点)->object model(对象模型)这个过程

只有当前节点所有子节点都构建好过后才会构建下一个兄弟节点

2.构建CSSOM规则树