持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情
上一篇介绍了重绘和重排的性能优化手段，这篇来介绍浏览器渲染引擎与阻塞。
浏览器渲染引擎
主要模块
-
HTML解析器
- 解释HTML文档的解析器，是异步进行解析的
- 作用：将HTML文本解析成DOM树文档对象模型(document Object Model):简称：DOM
-
CSS解析器
- 为DOM中的各个元素对象计算出样式信息，为布局通过基础信息
-
JS引擎
-
布局layout模块
-
绘图模块
渲染过程
- 浏览器渲染页面的整个过程:浏览器会从上到下解析文档
- 遇见HTML标记，调用HTML解析器为对应的token(一个token就是一个标签文本的序列号)并构建DOM树(就是一块内存，保存着token，建立它们之间的关系)
- 遇见style（由HTML解析器解析）link标记(由CSS解析器解析)，调用解析器处理并构建CSS样式树
- 遇见script标记，调用JS解析器处理相关事件
- 将DOM树和CSS树合并成一个Render Tree(渲染树)
- 根据渲染树进行渲染，并将各个节点绘制到屏幕上
阻塞渲染
关于CSS阻塞
注意:只有link引入的外部CSS才能够产生阻塞。
style标签中的样式：
- 由HTML解析器解析，内部的样式是异步解析的
- 不阻塞浏览器的渲染,(可能会产生'闪屏现象'）
- 不阻塞DOM解析
link引入外部的Css样式(推荐使用)：
- 由CSS解析器进行解析，并且是同步的
- 阻塞浏览器的渲染
- 阻塞其后面的JS语句的执行
- 原因:如果后续的JS是获取元素的样式，如果不等CSS样式解析完毕，就执行JS语句，则后面的JS可能会获取到错误的信息
- 注意:现代浏览器注重用户体验，对于webkit内核浏览器而言,仅当JS尝试访问CSS样式属性时，才会禁止JS的执行
- 不阻塞DOM的解析
- 原因:DOM解析和CSS解析是两个并行的进程，两个树都解析完了，最终组成了Render Tree(渲染树),再渲染页面
优化方法：
- 核心:尽可能快的提高外部的CSS加载速度
- 使用CDN节点进行外部资源加速
- 对css进行压缩
- 减少http的请求数，将多个css合并
- 优化样式表的代码
关于JS阻塞
- 阻塞DOM解析：浏览器不知道后续JS的内容，如果想解析下面的DOM，而随后JS就删除了后面的所有DOM，那么就是在做无用功！
- 阻塞页面的渲染：JS可以给DOM设置样式，同样为了避免做无用功！
- 阻塞后续JS的执行：维护依赖关系
备注
- CSS解析和JS的执行是互斥的
- 无论是CSS解析还是JS的执行，都不会干扰到外部资源的请求
