浏览器解析服务器返回数据到呈现在用户眼前,浏览器内部进行了什么操作?
解析HTML文档,构建DOM树,下载资源,构建CSSOM树,执行js脚本,这些操作没有严格的先后顺序。
1.html词法解析、DOM树的生成
Bytes(二进制字符)➡️Characters()➡️Tokens➡Nodes➡️DOM
构建DOM树
1.Tokenizing:根据HTML规范将字符流解析为标记
2.Lexing:词法分析将标记转换为对象并定义属性值和规则
3.DOM construction:根据HTML标记关系将对象组成DOM树
在解析的过程中遇到图片、样式表、js文件,都会直接启动下载
2.CSS词法解析,CSSOM树的生成
构建CSSOM树:
1.Tokenizing:字符流转换为标记流
2.Node:根据标记创建节点
3.CSSOM:节点创建CSSOM树
3.DOM树结合CSSOM树构建 Render树
构建渲染树
1.从DOM树的根节点遍历所有所有可见节点,不可见节点包括:1)script,meta这样本身不见的标签。2)被css隐藏的节点,如 display:none;
2.对每一个可见节点,找到恰当的CSSOM规则并应用
3.发布可视节点的内容和计算样式
4.layout
在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置,以及确定页面上每个对象的大小和位置的过程。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定
5.point
在绘制或光栅化阶段,浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘画包括将元素的每个可视部分绘制到屏幕上,包括文本、颜色、边框、阴影和替换的元素(如按钮和图像)。浏览器需要非常快地完成这项工作。
js解析过程
1.浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
2.HTML解析器遇到没有async和defer的script时,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以便利和操作script和他们之前的文档内容
3.当解析器遇到设置了async属性的script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等他下载。异步脚本禁止使用document.write(),它们可以访问自己script和之前的文档元素
4.当文档完成解析,document.readState变成interactive
5.所有defer脚本会按照文档出现的顺序执行,延迟脚本能访问完整的文档树,禁止使用document.write()
6.浏览器在Document对象上触发DOMContentLoaded事件
7.此时文档完全解析完成,浏览器可能还在等待如图片等内容下载,等这些内容载入并且所有异步脚本完成载入和执行,document.readState变成complete,window触发load事件