持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
铃铛说点题外话
上一篇我用大篇幅的说了一下开这个系列博客的目的和浏览器的内核对我们代码的作用，上一篇中也说了这一篇会详细介绍浏览器是怎么解析我们代码之后就变成了一张完美的页面，那就废话少说开始吧！！！
铃铛说正文
这张图是关于浏览器渲染页面的整个过程，但是这里面也有很多细节的地方需要我们多理解。
在这张图上我们能明显的梳理出来一个大概的流程：HTML会被解析生成DOM Tree，style样式会被解析生成CSSOM Tree，这两个会一起合并在一起生成一个Render Tree，最后根据渲染树计算节点位置，调用GPU绘制，合成图层，最终渲染到页面上。
这里面也有一些细节是我们同时也需要注意的
- 解析css生成CSSOM Tree的时候会阻塞渲染，直到CSSOM Tree构建完成。构建CSSOM Tree是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的CSS选择器，执行速度越慢。在开发中，我们需要尽早的、尽快的将它下载到客户端，以便缩减首次渲染的时间。（补充说明：这里涉及到CSS选择器，后续我们也会详细介绍）
- **当HTML解析到
script标签的时候，会暂停构建DOM，完成后才会从暂停的地方重新开始。**如果你想要首屏渲染的越快，就越越不应该在首屏加载的时候就优先加载JS文件。 - CSS也会影响JS的执行，只有当解析完成样式的时候才会执行JS代码，所以也可以认为这种情况下，CSS也会暂停构建DOM。
跟铃铛说再见
这里留下一个问题，我们放在下一篇解释：JS会阻塞DOM树吗？
那我们就下一篇文章见！！
