这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战；
前言
在上篇文章，浏览器是如何渲染HTML、CSS、JavaScript的(上) 中，我们介绍了浏览器渲染流程的前三个阶段，先来简单回顾一下：\
- 浏览器识别到HTML页面内容之后，渲染引擎将HTML解析为浏览器可以理解的DOM树。
- 然后浏览器开始根据css样式表，识别DOM树上所有节点的样式。
- 接着结算出每个元素的几何坐标位置信息，把这些信息保存到布局树中。
经过上边三个阶段，浏览器前期需要准备的也就完成了，那接下来，开始做什么了呢？跟随我，一起来接着看吧。
正文
-
分层
简单来说，就是
分图层。浏览器有自己的一套渲染引擎，需要为特定的节点生成专用的图层，形成图层树（LayerTree）。\特定的节点需要满足以下两种条件的任意一个就行:
-
拥有
层叠上下文属性的元素会被提升为专用的一个图层。比如：z-index、position：fixed等。（这些属性会让平面化的HTML元素具有三维概念，这些属性会根据优先级，分布在平面上。）
-
需要裁剪（clip）的地方会被创建成专用图层。举个例子，如果我们设置了一个div的宽高为200*200像素，但是div里边内容比较多，内容区域会超出外层盒子大小；
这时候就产生了裁剪，浏览器会识别到内容在div盒子区域内的内容部分，然后把这一部分裁剪出来渲染到该图层上。
-
如果出现滚动条，滚动条也会被提升为单独的图层。 当然，如果一个节点没有专属图层，那么他就会从属于它的父节点，总之，最终每一个节点都会直接或者间接的属于一个层
这些图层叠加在一起就构成了最终的页面图像。关于layerTree，有兴趣了解的小伙伴可以F12打开谷歌控制台，选择“layers”标签探究一番，这里就不过多介绍了。
-
-
图层绘制
浏览器渲染机制里有着一套
绘制指令，根据这些指令会生成一个绘制列表。听起来可能会觉得好难懂，打个比方就不难理解了，如下：前边，浏览器绘制成的图层树可以想象成是一幅画蓝天白云的画，接下来我们想要绘制这样一幅画，就需要分解成几个步骤来进行，我们会先绘制一个蓝色背景做蓝天，然后选取合适位置描绘出白云的边框轮廓，接着会在补充淡淡的一抹阳光☀️。
这一过程就好比浏览器的图层绘制，是不是很神奇。图层绘制列表完成之后，浏览器就渲染完成了？
不是的，所谓列表，也只是记录图层的绘制执行顺序和绘制指令的列表，真正的渲染操作是下一步，继续看。
-
栅格化及合成显示
要了解栅格化你需要先了解什么是栅格系统，
栅格系统英文为“grid systems”，相传1692年，新登基的法国国王路易十四感到法国的印刷水平差强人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印 刷版面就有 2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也 是栅格系统最早的雏形。
浏览器中
合成线程首先会做栅格操作，将页面分成256x256或512x512的方块，然后再根据图层绘制列表的数据往方块中填入相应的样式，浏览器就能准确显示接收到的页面了。
总结
好了，到这里，我们就已经分析完了整个浏览器的渲染流程，从HTML到DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。
前端漫漫长途，我们都在路上，希望可以和小伙伴们一起交流，一起进步。持续更新ing.....
