关于浏览器展现页面与Network展现内容不同的原因

最新推荐文章于 2023-10-14 10:00:09 发布

原创最新推荐文章于 2023-10-14 10:00:09 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析浏览器渲染机制，包括HTML和CSS如何被渲染引擎（如Gecko和WebKit）转化为树形结构，以及这些结构如何合并并计算出节点在屏幕上的位置。同时，文章提及了回流和重绘的概念，为读者提供了进一步了解网页渲染过程的资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

network是后端操作完成后得到的数据页面，而浏览器有自己的渲染引擎(Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit),而引擎引入了一个数的概念，会分别把html以及css渲染成树形的数据结构，最后把这两个结构进行合并，这是浏览器就知道了网页中有哪些节点以及对应的从属关系，最后计算出每个节点在屏幕中的位置进行展现（每一次树操作原理都是一次深度遍历）

当然这其中还涉及一些回流以及重绘的概念，可参考https://www.cnblogs.com/slly/p/6640761.html