精华内容
下载资源
问答
  • 浏览器渲染过程

    2020-11-03 16:34:01
    浏览器渲染过程 浏览器通过浏览器内核对html文件进行解析来生成网页,通过学习其渲染过程可以理解html文件时如何呈现为网页的,怎样优化它。 浏览器工作过程简述 形象的说,假设有一个html文档,它在<head>中...

    浏览器渲染过程

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

    浏览器工作过程简述

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

    1. 浏览器向服务器发出请求,服务器返回html文件
    2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
    3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
    4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
    5. 浏览器发现<img>标签引用了一张图片,向服务器发出请求。浏览器不会等到图片下载完,而会继续渲染后面的代码;
    6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要重新渲染这部分代码。
    7. 到达文档尾部,渲染结束

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

    抽象的说,网页渲染过程如下:

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

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

    展开全文
  • 浏览器渲染过程

    浏览器渲染过程


    在这里插入图片描述

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,875
精华内容 1,950
关键字:

浏览器渲染过程