「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。
作为一名前端工程师，浏览器是与我们天天打交道的家伙，因此熟悉它的运行原理对于我们的日常开发是大有益处的，所以本篇文章就准备着眼于 渲染过程 来讲解，废话不多说，开搞！
渲染引擎知多少
我们都知道，对于浏览器最重要的部件就是 内核，而内核又是由两部分组成
- js引擎：用于执行我们所写的js代码
- 渲染引擎：用于排版布局并展示页面内容
在不同的浏览器内，所使用的渲染引擎是不同的，列举如下
- IE：Trident
- 火狐：Gecko
- Chrome、Opera：Blink
- Safari：Webkit
渲染的具体过程
在知道了有哪些渲染引擎后，这一节就开始讲讲其具体的渲染过程
在页面渲染过程中，会有三种类型的资源参与
- HTML
- CSS
- JS
接下来就分别讲解它们是如何参与渲染的
HTML
HTML的解析过程如下：
- 字节流: 响应的原始数据格式，0,1串
- 字符串：根据编码方式将其转为可读的字符串
- TOKEN：根据词法分析，生成token
- NODE：消耗生成的TOKEN，生成dom节点
- DOM：由所有生成的dom节点构成dom树
CSS
CSS的解析过程如下：
- 字节流: 响应的原始数据格式，0,1串
- 字符串：根据编码方式将其转为可读的字符串
- TOKEN：根据词法分析，生成token
- NODE：消耗生成的TOKEN，生成cssom节点
- CSSOM：由所有生成的cssom节点构成cssom树
JS
由于js可以修改dom和css，所以在渲染过程中，如果遇到 <script> 标签，那么就会阻塞dom树的构建，转而去加载执行js，这里的阻塞情况又分两种
- cssom树构建完毕，此时就会停止dom树的解析，先去下载执行js，执行完成后才继续构建dom树
- cssom树未构建完毕，我们需要知道，cssom树和dom树的构建两者是 并行的，互不干扰，但是如果遇到js后，首先会停止dom树的构建，然后继续构建cssom树，同时去下载js，等待cssom树构建完毕后，再去执行js，等js执行完毕后，最后才恢复dom树的构建。在这种情况下，cssom树的构建就会阻塞dom树的构建
cssom树和dom树构建完成后的流程
当cssom树和dom树都准备好后，接下来就是一个合并和计算样式的过程了，具体如下
- 将cssom树和dom树合并生成 渲染树
- 利用 flow，计算渲染树中的节点大小和位置，最终生成一棵 布局树
- 布局树生成后，浏览器就知道每一个节点的大小和位置了，随后调用系统api，生成实际的页面展示在显示器中
至此，整个渲染流程就结束了~
结语
对于这些“底层”的知识，虽然平时开发中不会直接涉及到，但是对于性能调优和bug排查是十分有用的，只有让浏览器“透明化”，我们才能真正地去把控它，所以，努力吧，骚年！
