一张网页在浏览器中呈现，主要分为五步

一：处理Html和Dom

1：转码（Bytes -> Characters）—— 读取 HTML 二进制数据，按指定编码格式将字节转换为 HTML 字符串

2：Tokens 化（Characters -> Tokens）—— 解析 HTML，将 HTML 字符串转换为结构清晰的 Tokens

3：构建 Nodes（Tokens -> Nodes）—— 每个 Node 都添加特定的属性（或属性访问器），通过指针能够确定 Node 的父、子、兄弟关系和所属 treeScope

4：构建 DOM 树（Nodes -> DOM Tree）—— 建立起每个结点的父子兄弟关系

5：解析器到达script标签的时候，停止解析Html,将控制权交给js引擎，执行js代码，恢复html解析器（js阻塞解析）

二：处理 CSS构建 CSSOM 树。

1：主要来源 link 引用的外部 CSS 文件、style标签内的 CSS、元素的 style 属性内嵌的 CSS

2：通过 Tokens 中的 style 或 link 标签获取 CSS 文件，解析CSS文件，构建CSSOM树

三：将 DOM 与 CSSOM 合并成一个渲染树

1：结合 DOM 树与CSSOM 树

四：根据渲染树来布局，计算每个节点的位置

在渲染树的基础上进行布局，计算每个节点的几何结构，定位坐标和大小，是否换行，各种position, overflow, z-index属性，

如果一些复杂的动画效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree），主要是层叠上下文和裁剪区域

五：调用 GPU 绘制，合成图层，显示在屏幕上

渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting

优化：

1：正确书写html，避免浏览器纠错浪费资源

2：重要样式卸载head中，不重要用link加载

3：script写在末尾，加上defer属性