聊聊关于浏览器渲染过程的那些事儿~

作为一名前端工程师，浏览器是与我们天天打交道的家伙，因此熟悉它的运行原理对于我们的日常开发是大有益处的，所以本篇文章就准备着眼于 渲染过程 来讲解，废话不多说，开搞！

渲染引擎知多少

我们都知道，对于浏览器最重要的部件就是 内核，而内核又是由两部分组成

• js引擎：用于执行我们所写的js代码
• 渲染引擎：用于排版布局并展示页面内容

在不同的浏览器内，所使用的渲染引擎是不同的，列举如下

• IE：Trident
• 火狐：Gecko
• Chrome、Opera：Blink
• Safari：Webkit

渲染的具体过程

在知道了有哪些渲染引擎后，这一节就开始讲讲其具体的渲染过程

在页面渲染过程中，会有三种类型的资源参与

• HTML
• CSS
• JS

接下来就分别讲解它们是如何参与渲染的

HTML

HTML的解析过程如下：

1. 字节流: 响应的原始数据格式，0,1串
2. 字符串：根据编码方式将其转为可读的字符串
3. TOKEN：根据词法分析，生成token
4. NODE：消耗生成的TOKEN，生成dom节点
5. DOM：由所有生成的dom节点构成dom树

CSS

CSS的解析过程如下：

1. 字节流: 响应的原始数据格式，0,1串
2. 字符串：根据编码方式将其转为可读的字符串
3. TOKEN：根据词法分析，生成token
4. NODE：消耗生成的TOKEN，生成cssom节点
5. CSSOM：由所有生成的cssom节点构成cssom树

JS

由于js可以修改dom和css，所以在渲染过程中，如果遇到 <script> 标签，那么就会阻塞dom树的构建，转而去加载执行js，这里的阻塞情况又分两种

1. cssom树构建完毕，此时就会停止dom树的解析，先去下载执行js，执行完成后才继续构建dom树
2. cssom树未构建完毕，我们需要知道，cssom树和dom树的构建两者是 并行的，互不干扰，但是如果遇到js后，首先会停止dom树的构建，然后继续构建cssom树，等待cssom树构建完毕后，再去加载执行js，等js执行完毕后，最后才恢复dom树的构建。在这种情况下，cssom树的构建就会阻塞dom树的构建

cssom树和dom树构建完成后的流程

当cssom树和dom树都准备好后，接下来就是一个合并和计算样式的过程了，具体如下

• 将cssom树和dom树合并生成 渲染树
• 利用 flow，计算渲染树中的节点大小和位置，最终生成一棵 布局树
• 布局树生成后，浏览器就知道每一个节点的大小和位置了，随后调用系统api，生成实际的页面展示在显示器中

至此，整个渲染流程就结束了~

结语

对于这些“底层”的知识，虽然平时开发中不会直接涉及到，但是对于性能调优和bug排查是十分有用的，只有让浏览器“透明化”，我们才能真正地去把控它，所以，努力吧，骚年！