xccjk / x-blog

学习笔记

17 stars 2 forks source link

浏览器如何渲染页面? #6

Closed xccjk closed 2 years ago

xccjk commented 3 years ago

浏览器如何渲染页面

从HTML到DOM

浏览器通过HTTP协议请求到的文档内容是字节数据，类似0a 43 6f...
浏览器把得到的字节数据通过‘编码嗅探算法’来确定字符编码(即16进制字节码对应什么字符)，然后根据字符编码将字节数据流进行解码，生成字符数据
把字节流数据解码成字符数据的过程称为‘字节流解码’

输入预处理

将解码得到的字符流数据解析为规范化的字符流数据，这个把字符数据进行统一格式化的过程称为‘输入流预处理’

令牌化

第一步：将字符串数据转化成令牌token
- 遇到script标签的处理方式
- 如果是script种直接编写代码
  - 解析过程会暂停，JavaScript脚本引擎开始工作，执行结束后再由渲染引擎继续解析
  - JavaScript引擎执行时，渲染引擎会停止工作，由此会导致页面，动画卡顿的性能问题出现
  - 优化点
    - script标签内容放在文档底部渲染
  - - 当代码中含有改变文档DOM的操作，比如document.write(),append()等时，会先重新生成字节流，再进行解析
- 如果是script外部链接
  - 会根据标签属性执行对应的操作
第二步：解析HTML生成DOM树

构建DOM树

浏览器的解析器会创建一个document对象，树的构建阶段，document会作为根节点被修改与扩充
在HTML5标准中，没类令牌对应DOM元素，树的构建器接收到某个令牌时根据令牌对应的DOM元素并将该元素插入到DOM树中

构建流程图

字节 -> 字节流解码 -> 字符 -> 输入流预处理 -> 统一字符 -> 令牌化 -> 令牌 -> 构建DOM树 -> DOM树
3c 86 .. -> <html><head> -> <html><head> -> 开启标签html，开启标签head -> html元素 - body元素 - 文本节点

从CSS到CSSOM

CSSOM树 = 自定义样式解析的CSSOM + 浏览器默认样式(User Agent样式)的CSSOM
CSSOM树的节点具有继承的特性，就是会先继承父节点样式作为当前样式，然后再进行补充或者覆盖

从DOM到渲染

渲染引擎会先生成两颗树，DOM和CSSOM

构建渲染树

由于DOM树和CSSOM树是相互独立的，在渲染之前会合并为一颗渲染树
合并过程为从DOM树根节点开始遍历，然后在CSSOM树上找到对应的每个节点的样式(CSSOM中是自下而上的进行查找匹配)
- 某些节点会自动忽略，比如脚本标记，元标记，设置了display: none的不可见节点
- 需要显示的伪类元素会加到渲染树中
- 浏览器进行CSS选择器匹配时，是从右到左进行的(自下而上)

布局

渲染树之后，会来计算元素的大小和位置，简称布局
- 某些操作会导致重复的计算元素的大小和位置，导致回流和重绘的出现
布局完成后会输出对应的盒模型，会显示出每个元素的确切位置和大小

绘制

绘制：将渲染树中的每个节点转换成屏幕上实际像素的过程
绘制是有顺序的
- 对于使用z-index属性的元素，如果没有按照正确的顺序绘制，将导致渲染结果与预期不符
绘制过程第一步会先遍历布局树，生成绘制记录，然后渲染引擎会根据绘制记录去绘制相应的内容