输入URL到页面加载——从服务器接收到响应报文到解析页面
HTML解析，构建DOM
HTML到构建出DOM的过程简述如下
Bytes(字节流) → characters(字符流) → tokens(次元) → nodes(节点对象) → DOM(文档对象模型)
整个过程大致为:
1.Conversion转换: 浏览器将获得的HTML内容(Bytes)基于定义的编码格式进行转换为单个字符(characters)
2.Tokenizing分词: 浏览器按照HTML规范标准将这些字符转换为不同的标记token.每个token都有自己独特的含义以及规则集
3.Lexing词法分析: 将token转换为节点对象,节点对象中定义了他们的属性与规则
4.DOM构建: 根据节点对象的关系,最终形成DOM树
CSS生成规则
与DOM构建的过程类似
Bytes(字节流) → characters(字符流) → tokens(次元) → nodes(节点对象) → CSSOM(样式表对象模型)
构建渲染树及渲染
当有了DOM和CSSOM后，两者会对应组合起来。但是比如有一些display: none的元素是不会生成在渲染树中的。
渲染的大致流程如下：
1.计算CSS样式
2.构建渲染树
3.根据定位坐标,大小,层叠关系将进行布局
4.绘制图像
回流和重绘
- Layout也称Reflow，即回流。一般意味着元素的内容，结构，位置和尺寸发生了变化，需要重新计算样式生成渲染树。
- Repaint，即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候，只需要重新绘制这个元素就可以了。
回流的成本是高于重绘的，优化方案中一般避免回流。
1.减少逐项改变样式，最好一次性将样式改变。
2.避免循环操作dom，可以创建一个documentFragment，先应用DOM上的操作再进行添加。
3.避免多次读取Offset等属性，无法避免则缓存变量。
4.将复杂的元素绝对定位或固定定位，使其脱离文档流。
loaded和DOMContentLoaded
- DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片
- load事件触发时，页面上所有的DOM，样式表，脚本，图片都已经加载完成了
总结
接上文，当浏览器接收到服务器的响应报文后，首先会进行HTML解析，将字节流通过定义的编码格式转为字符流，然后根据HTML规范将字符分词，每个字符都有自己的属性和规则，最后将次元进行词法分析生成节点对象，将节点对象组成DOM树。此时如果遇见JS外链请求将阻塞DOM树的生成，遇见CSS和图片的外链则不会对其阻塞影响。
解析完DOM后则会触发DOMContentLoaded事件。
CSS的解析步骤跟DOM一样，当计算完CSS样式后，两者会进行组合生成渲染树，渲染树会进行图像的绘制，此时如果全部文件已经加载完毕将触发loaded事件。
下面会等待JS解释引擎的触发。