浏览器的底层是如何完成一次网络请求的？( 三 ) _浏览器

首先在 HTML 中找到 p 标签，一共有两个地方，然后按照样式的继续递归中找具有父节点的 p，我们只好把第二个 p 过滤掉，然后继续向上找父节点 div，匹配成功，然后将样式设置到结点上。

文章插图

我们通过上边的动画，可以知道为什么构建 CSSOM 树的时候非常耗时了，我们在写代码的时候可以做出优化，所以应该避免书写过于具体的 CSS 选择器，少一些添加无意义的 HTML 标签，有利于提高习页面的性能。
5.3 构建渲染树
我们分别将上边生成的 DOM 和 CSSOM 树进行合并，生成我们的渲染树。但是在合并的时候，并不是两者简单的进行结合，因为有些结点我们并不需要显示，还记得有一个 display:none 属性吗？如果某结点的样式有这个属性，就不会出现在渲染树中。

文章插图

5.4合成、绘制
浏览器在生成渲染树的时候，就会根据渲染树进行布局，调用 GPU 进行绘制，然后合成图层，最后显示在屏幕上。

文章插图

小结通过上边的对浏览器工作原理的介绍，相信你对浏览器有了新的认识和简介，但是只看上边的知识还完全不能深入到底层，如果还想要进行深入的对浏览器的工作原理进行研究，可以英文文档《How Browsers Work》，已经有人把它翻译成了中文，但是我自己又翻译了一遍。
第一，提高自己阅读英文文档的能力；
第二，从中学会提取关键的内容。
虽然翻译过程中遇到很多问题，但是相信你翻译完之后，对你又有新的收获和认识，更重要的是你的能力又比别人提升了 —— 更何况我这个英语四级没过的人都坚持翻译下来了呢！

【浏览器的底层是如何完成一次网络请求的？】