从浏览器工作原理出发,进行性能优化

2019/09/20 web

大部分 web 网页都是跑在浏览器环境中的

也有小部分前端,是跑在其他环境中的。本文主要讲述的是运行在浏览器上的网页,很久以前一直想要了解网页是如何在浏览器运行的,在网上看过很多文章,只可惜最后都没有在我脑子里面留下深刻的印象,我也没有真正的理解。当被问到有关于网页性能优化,我只能张口就背,很遗憾,在实际的开发过程中也没有深入骨子里,以至于我写了很多糟糕冗余的代码,让领导同事看着难受。关于这个问题我反思自己,到如今我才有一个比较清晰的概念。如果你也想了解,推荐你看一系列文章 浏览器工作原理与实践 ,目前我就是基于这个写一写自己的理解。

浏览器是如何渲染网页的?

DOM 生成

从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的。所以要通过 HTML 解析器转化为 DOM 结构。 HTML 解析器并不是等整个文档加载完成之后在解析,而是网络进程加载了多少数据, HTML 解析器便解析多少数据 ,当渲染进程准备好了之后,网络进程和渲染进程之间会建立一个共享数据的管道,网络进程接受到数据后就往这个管道里面放,渲染进程则从管道的另外一端不断的读取数据,并同时将读取到的数据喂给 HTML 解析器。

因为 javaScript 可能会修改 DOM,所以 HTML 解析器就会暂停 DOM 的解析。又因为javaScript 有可能是用来操作 CSSOM ,所以在执行 javaScript 之前,还需要等待外部的 CSS 文件下载完成,并解析生成 CSSOM 对象之后,才能执行 javaScript

虽然现在浏览器默认已经做了各种性能优化了,但是在本质上面 javaScript 会阻塞 DOM 的生成,而样式又会阻塞 javaScript 的执行。

题外话:我们在发送请求的时候带上了多余的用户信息,比如一些不必要的 cookie ,服务器接收到这些信息可能需要对每一项都做处理,这样加大了服务器的处理时间

所以在实际工程中需要重点关注 javaScript 文件和样式表文件,使用不当会影响到页面性能

样式计算

首先把 css 理解成浏览器能够理解的结构 styleSheets。转换样式表中的属性,使其标准化,这里可以涉及到性能优化,平时写代码的时候尽量标准化,可以加快浏览器渲染。举个例子:vw,color:blue 都会转化为渲染引擎容易理解的 px,color:rgb(0,0,255)。所以是不是我们可以在标准化这里注意代码书写,提高渲染速度呢??

最后就是计算每一个 DOM 树中每一个节点的具体样式了。

布局

完成之后并不是直接渲染到页面,并不是,只是把这些信息保存在布局树中,接下来是进行分层

分层,你没有听错?

因为在页面中有很多复杂的效果,3D转换,页面滚动,z-index等等,提高了页面的层级,为了更加方便的实现这些效果,渲染引擎还需要为特定的节点生成专用图层,并生成一颗对应的图层树(如果你用过ps,就很好理解图层,分层了,拥有层叠上下文,被剪裁一般都会分层)

图层绘制

就是把前面所生成的东西,画在网页上;每一个画一个 DOM 节点可以看成是执行一个绘制指令,一切准备就绪就可以把绘制指令交给渲染进程去渲染了

栅格化操作

绘制列表只是用来记录绘制顺序和绘制指令的列表,而实际上绘制操作是由渲染引擎中的合成线程来完成的。

为啥会有栅格化?

因为在有些情况下图层可以很大,我们要使用滚动条滚动好久之后才滚动到底部,而我们可视区只有固定的一部分;所以合成线程会按照视口附近的图块来优先生成位图(生成位图的操作就是栅格化来执行的),通常栅格化过程都会使用 GPU 来加速生成

合成和显示

所有的图块都被栅格化,合成线程就会生成一个绘制图块的指令把他交给浏览器进程,浏览器把内容绘制到内存中,然后内存显示在屏幕上。就完成了整个渲染

虽然我们用 webpack 及相关插件进行过各种打包优化,但是如果在我们平时写代码的时候去除一点冗余代码,同事领导自己看着舒服开心,说不定打包速度都提升了。哈哈

关于重排和重绘

关于重排和重绘,网上文章很多,你能理解记住看懂的就是好文章。我写的我看懂了,你懂不懂我不知道

题外话

敬畏每一行代码,敬畏每一份托付。从今以后尽量少些同事看了会吐槽写的代码,毕竟代码首先是写给人看的,其次才是机器。


一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents