之前的一篇文章《"天龙八步"细说浏览器输入URL后发生了什么》分享了从浏览器输入网址到最终页面显示的全过程。有读者反馈说最终的浏览器渲染布局不是很清晰，所以本文开篇单独讲解一下浏览器渲染过程，希望大家能有新的收获。浏览器主要组件结构（browsermaincomponent）渲染引擎——webkit和GeckoFirefox使用的是Geoko——Mozilla自研的渲染引擎。Safari和Chrome都使用webkit。Webkit是一个开源渲染引擎，最初是为Linux平台开发的，后来被Apple移植到Mac和Windows。在本文中，我主要使用webkit渲染引擎来进行讲解。虽然webkit和Gecko使用的术语略有不同，但它们的主要流程基本相同。(webkit渲染引擎进程)关键渲染路径关键渲染路径是指浏览器最初接收请求的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现出所请求的界面。客户可以看到整个过程。因此，浏览器的渲染过程主要包括以下步骤：解析HTML生成DOM树。解析CSS生成CSSOM规则树。将DOM树与CSSOM规则树合并以生成渲染树。遍历渲染树开始布局，计算每个节点的位置和大小信息。将渲染树的每个节点绘制到屏幕上。构建DOM树当浏览器收到服务器响应的HTML文档时，遍历文档节点生成DOM树。需要注意的是，DOM树生成过程可能会被CSS和JS的加载和执行阻塞。下面将讨论渲染阻塞问题。构建CSSOM规则树浏览器解析CSS文件，生成CSS规则树。每个CSS文件被解析成一个StyleSheet对象，每个对象包含CSS规则。CSS规则对象包含与CSS语法对应的选择器和声明对象，以及其他对象。渲染阻塞当浏览器遇到脚本标签时，DOM构建会暂停，直到脚本执行完毕，然后继续构建DOM。JavaScript脚本每执行一次，都会严重阻塞DOM树的构建。如果JavaScript脚本还在操作CSSOM，但是CSSOM还没有下载构建，浏览器甚至会延迟脚本的执行和DOM的构建，直到CSSOM下载完成。并建造。因此，script标签的位置非常重要。在实际使用中，可以遵循以下两个原则：CSS优先级：按照引入顺序，CSS资源先于JavaScript资源。JS在后面：我们通常把JS代码放在页面的底部，JavaScript应该尽可能少的影响DOM的构建。解析html时，会往dom树中插入新的元素，同时会查找css，然后对元素应用相应的样式规则。搜索样式表按照从右到左的顺序进行匹配。例如：divp{font-size:16px}，它会先找到所有的p标签，判断其父标签是否为div，再决定是否使用该样式进行渲染）。所以，我们平时写CSS的时候，尽量使用id和class，不要过渡到级联。构建渲染树我们可以通过DOM树和CSS规则树来构建渲染树。浏览器会先从DOM树的根节点开始遍历每一个可见的节点。对于每个可见的节点，找到它匹配的CSS样式规则并应用它。渲染树构建完成后，每个节点都是一个可见的节点，包含了它的内容和对应的规则样式。这也是渲染树和DOM树最大的区别。渲染树是用来展示的，那些不可见的元素当然不会出现在这棵树中，比如。另外，display等于none的元素不会在这棵树中显示，而visibility等于hidden的元素会在这棵树中显示。渲染树布局布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小和位置。布局阶段的输出是一个盒子模型，它会准确捕捉屏幕中每个元素的准确位置和大小。渲染树绘制在绘制阶段遍历渲染树，调用渲染器的paint()方法将其内容显示在屏幕上。渲染树的绘制是由浏览器的UI后端组件完成的。reflow和repaint：根据渲染树布局，计算CSS样式，即页面中每个节点的大小、位置等几何信息。HTML默认是流体布局，CSS和js会打破这种布局，改变DOM的外观样式、大小和位置。这时候要提到两个重要的概念：reply和reflow。Replain：在不影响整体布局的情况下重绘屏幕的一部分。例如，某个CSS的背景颜色发生变化，但元素的几何尺寸和位置保持不变。reflow：表示组件的几何尺寸发生了变化，我们需要重新验证并计算渲染树。渲染树的一部分或全部已更改。这就是回流，或布局。所以我们应该尽量减少reflow和replain，我想这也是现在很少使用tablelayout的原因之一。display:none会触发回流，visibility:hidden属性不被认为是不可见属性，它的语义是隐藏元素，但是元素仍然占据布局空间，它会被渲染成一个空框，所以visibility:hidden只会触发重绘，因为没有发生位置变化。在某些情况下，比如修改一个元素的样式，浏览器不会立即回流或重绘一次，而是会批量累积这样的操作，然后进行一次回流，也称为异步回流或增量异步回流。在某些情况下，例如调整窗口大小，更改页面的默认字体等，对于这些操作，浏览器会立即回流。小结在本文中，我们逐步了解了浏览器渲染过程。我相信每个人都会有新的收获。如果您对浏览器渲染过程有任何疑问，欢迎反馈。我们将一起交流、学习、共同进步。作者：GavinHsueh，QQ/微信：753391279，专注于网站建设、运维和企业Web应用开发技术。更多技术分享，请关注【程序员专区】参考资料：http://taligarsiel.com/Projec...https://segmentfault.com/a/11...https://sylvanassun.github.io...https://www.zybuluo.com/lizla...
