浏览器渲染过程

最新推荐文章于 2024-07-25 10:18:55 发布

weixin_44197665

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量104

点赞数

分类专栏： Web前端入门笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_44197665/article/details/109472492

版权

11 篇文章 1 订阅

订阅专栏

浏览器通过浏览器内核对html文件进行解析来生成网页，通过学习其渲染过程可以理解html文件时如何呈现为网页的，怎样优化它。

形象的说，假设有一个html文档，它在<head>中具有一个<link>标签,<body>中具有一个<img>标签且引用了一张图片，那么浏览器工作过程如下：

如上所述，当浏览器发现某个部分需要改变且这个改变会影响布局，它就得倒回去重新渲染，这个过程称为’reflow’，有些reflow是可以避免的，上面这个例子的reflow就可以通过规定图片的长宽属性避免。

抽象的说，网页渲染过程如下：

解析HTML以重建DOM树（Parsing HTML to construct the DOM tree ）：渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为“内容树”。
构建渲染树（Render tree construction）：解析CSS（包括外部CSS文件和样式元素），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
布局渲染树（Layout of the render tree）: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
绘制渲染树（Painting the render tree） : 遍历渲染树，每个节点将使用UI后端层来绘制。

每当一个新元素加入到dom树当中，浏览器便会通过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上，这个查找过程对每条规则都是按从右向左的顺序进行的，当我们编写css样式表时应注意这一点————选择器的顺序要和最快查找顺序倒着写。

关注