阅读 70

浏览器渲染机制

当我们请求页面的时候,拿到资源时,浏览器是怎么渲染的呢?这里我们就来了解一些浏览器渲染的过程。

关键词

  • 渲染引擎:包括HTML解释器、CSS解释器、布局layout
  • HTML解释器:解析HTML,构建DOM树
  • CSS解释器:解析css,构建CSSOM
  • 布局layout:对渲染树进行布局绘制
  • js引擎:解析JavaScript

认识完关键词之后,我们来看一下浏览器是怎么将html、css、js文件,渲染到页面上的。

首先当然是请求html文件,拿到html文件之后,浏览器就可以对文件进行解析处理。

构建DOM树

拿到html文件之后,HTML解释器会先对拿到的数据进行响应的编码,转成自己想到的格式。

然后就开始构建DOM树,为什么是树结构呢?前端的同学应该都很好理解,因为html结构本身就是一个树形结构,所以树是html很好的表现形式。

我们来看html的hello world,从锁进格式就可以看出html的DOM树。

<html lang="en">
    <head>
        <title>title</title>
    </head>
    <body>
        <div>hello world</div>
    </body>
</html>
复制代码

构建CSSOM(CSS规则树)

接着,我们来看css,CSSOM是由css规则树来处理的。

拿到css数据之后,CSS解释器就开始构建CSSOM。

因为css的规则是需要给html节点配置的,所以也是一棵树的形状。

html {
    color: #ffffff;
}
body {
    font-size: 14px;
}
复制代码

渲染树

有来DOM树和CSSOM之后,其实还不是最后需要渲染的东西,因为有些标签其实是不需要显示的,比如head内容,比如display:none;的内容。

所以,这里渲染引擎会将DOM树和CSSOM合成一棵渲染树。

我们可以看到下面这张图片,这就是渲染树的组合流程。

布局 & 绘制

有了渲染树之后,浏览器要怎么把渲染树画到浏览器上呢?

渲染树其实是一个树结构,还没有进行实例的结构布局,所以,布局这里就根据渲染树的结构样式,对盒子宽高进行计算,整体结构布局。

布局完成之后,浏览器就要把布局结构绘制到浏览器上。

js文件呢?几乎所有的页面都会有js脚本,不然没有办法与用户/服务器进行交互,下面我们来看看js脚本。

js引擎

js引擎,看到这个名字,我们就可以理解,用来执行js脚本用的。目前chrome用的是javascript v8引擎,node使用的也是javascript v8引擎。

为什么这里要讲到js引擎呢?因为js脚本有可能会阻塞浏览器的渲染。

阻塞渲染

相信前端同学写页面的时候都有一个习惯,就是把js放到html文件的最下面。

为什么呢?为来不阻塞浏览器渲染。

<!--阻塞-->
<html lang="en">
    <head>
        <title>Document</title>
        <script src="./binnie.js"></script>
    </head>
    <body>
        <div>hello world</div>
    </body>
</html>

<!--非阻塞-->
<html lang="en">
    <head>
        <title>Document</title>
        // defer脚本会在页面渲染完成才执行js脚本
        <script src="./binnie.js" defer></script>
    </head>
    <body>
        <div>hello world</div>
        <script src="./binnie.js"></script>
    </body>
</html>
复制代码

我们知道,js脚本可以操作DOM结构,也可以操作CSS,所以执行js脚本时,浏览器会停止DOM和CSSOM的构建。

构建DOM树过程中,如果遇到 script 标签,那么DOM构建过程会停止并且等待js脚本执行完毕。

当js脚本操作css时,由于需要操作CSSOM,所以这里会等到CSSOM完成构建完成之后,才继续执行js脚本。

重绘 & 重排

页面第一次渲染的时候,会绘制初始化的页面,当页面结构发生改变时,浏览器也会重新对页面进行绘制&渲染,也就是重绘&重排。

  • 重排:当盒子位置&大小发生变动时,会触发重排
  • 重绘:当盒子内容发生变化时,会触发重绘

重绘不一定会重排,但是重排一定会触发重绘。

写在最后

了解浏览器的渲染机制,我们在项目优化过程中,可以针对其机制,进行项目优化,加快页面渲染过程~

关注下面的标签,发现更多相似文章
评论