切换语言为:繁体

从浏览器渲染的角度分析代码的优化空间

  • 爱糖宝
  • 2024-07-20
  • 2069
  • 0
  • 0

前言

当我们在浏览器中输入www.google.com时,他会发生什么?他总共会经历两个过程,一个是浏览器的请求过程,还有一个是浏览器的渲染过程,今天我们简单聊聊浏览器的渲染过程。

浏览器的渲染过程

当我们浏览器拿到请求过来的资源时,首先会将请求数据包的二进制字节数据文件解析为html和css字符串文件,然后浏览器拿到这些字符串数据之后会给这些数据打上token标记即最小代码单位,目的是为了让浏览器更好的分割代码理解语句,打上标记之后紧接着就会生成一些node节点,然后根据这些节点构建dom树,自此浏览器就拿到了一颗dom树。然后浏览器会拿着css字符串文件生成一颗cssom树。现在我们就有两颗树,浏览器会拿着这两棵树去生成一颗rander树,一个小细节,渲染树只会包含显示的节点,也就是说当一段html结构被设置成display为none时,他是不会再渲染树中出现的。然后浏览器就拿着这颗渲染树去计算布局也叫做回流,就是计算元素的位置和大小的过程,然后开始绘制也叫做重绘,即当元素的外观发生变化(如颜色、背景图像、边框样式等)时,浏览器重新绘制元素的过程。自此浏览器的渲染过程到此结束,这是比较简短的描述,里面还包含着非常复杂的过程。

分点方便记忆的话就是这样

  1. 解析数据包得到htlm文件,css文件(将二进制的字节数据解析成字符串)

  2. 字节数据-->字符串-->token标记-->node节点-->构建dom树

  3. 将css文件转化为cssom树

  4. 将dom树和cssom树进行合并,得到render树(渲染树只会包含显示的节点)display:none的节点不会被渲染

  5. 计算布局(回流)

  6. GPU绘制(重绘)

在我们了解浏览器的渲染过程之后,我们可以通过一些规范技巧来提升我们的代码性能。

优化代码

为什么操作dom慢?

我们在学习vue的时候常说,不要在代码里面操作dom元素,因为操作dom是一件非常消耗性能的行为,但是为什么呢?在浏览器中会有两个线程,一个是js引擎线程,一个是渲染线程,这两个线程他是互斥的,为什么要互斥?我们想象一下,当我们在js中操作样式时,把一个盒子的宽度设置为100px,但是我在css中也设置了50px,当这两个线程同时操作这个盒子的宽度时,那就会乱套,浏览器不知道最终盒子的宽度设置为多少,所以这两个线程一定会互斥,也就是说js引擎线程会阻塞渲染线程的加载。结论,当我们频繁的在代码里面操作dom元素时,就势必会涉及到两个线程的通信和切换,造成性能上的损耗。

所以第一个可以优化的点就是尽量减少操作dom元素。

减少回流重绘次数

回流是一个开销较大的操作,因为浏览器需要重新计算页面布局,可能会导致性能问题,尤其是在包含大量 DOM 元素或频繁触发回流的情况下。因此,在开发网页时,尽量减少不必要的回流操作是很重要的。

虽然重绘的开销较小,但频繁的重绘操作仍然可能影响页面性能。因此,在开发网页时,同样需要注意减少不必要的重绘操作。

什么情况下会触发回流
  1. 添加或删除 DOM 元素:在页面中添加或删除元素会导致回流。

  2. 修改元素的尺寸、边距、填充或边框:任何这些属性的变化都可能导致回流。

  3. 修改元素的内容:例如改变文本内容的大小或添加图片。

  4. 调整窗口大小:当用户调整浏览器窗口的大小时,页面布局需要重新计算。

  5. 获取布局信息:访问某些属性(如 offsetWidth、offsetHeight、clientWidth、clientHeight 等)时,浏览器可能需要执行回流以确保返回的值是最新的。

  6. CSS 样式的改变:修改影响布局的 CSS 样式属性(如 display、position、width、height 等)也会触发回流。

回流必定会触发重绘,当时重绘不一定会触发回流。

什么情况下会触发重绘
  1. 改变元素的颜色:例如改变文本颜色、背景颜色或边框颜色。

  2. 改变元素的可见性:例如使用 visibility 属性切换元素的显示状态(与 display 不同,display 会触发回流)。

  3. 改变元素的背景图像:例如更新背景图像或背景图像的位置。

  4. 改变元素的边框样式:例如修改边框的样式、颜色或宽度。

浏览器中回流重绘的优化

浏览器会维护一个渲染队列,当回流发生时,回流行为会被加入到队列中,在达到阈值或者一定时间之后会一次性渲染队列中的所有回流生效。

当在js代码中写下这些属性时,会强制刷新渲染队列,当渲染队列里面有回流时,就会使回流生效,如果没有就仅仅只是刷新渲染队列,而不会触发回流。

  1. offsetWidth/offsetHeight/offsetTop/offsetLeft

  2. clientWidth/clientHeight/clientTop/clientLeft

  3. scorollWidth/scrollHeight/scrollTop/scrollLeft

这个时候就不得不提到字节的一道面试题了,问触发了几次回流重绘?你知道吗?欢迎评论区留言奥。

let box = document.getElementById('box');
box.style.width = (box.offsetWidth+1)+'px';
box.style.width = 100+'px';

代码的优化

  1. 让需要修改几何属性的容器先脱离文档流不显示,修改完几何属性之后再显示。

还记得我们之前说过,当一段html设置display为none时,他是不会再渲染树中出现的。所以也就不会线程互斥了,所以我们可以这么处理。

let ul = document.querySelector('ul');
ul.style.display = 'none';
for(let i=0;i<10000;i++){
     let li = document.createElement('li');
     li.innerHTML = '我是第'+i+'个li';
     ul.appendChild(li);
}
ul.style.display = 'block';

  1. 借助文档碎片Fragment

“文档碎片”(Document Fragment)是一个轻量级的、没有父级的节点,可以用来包含其他节点。它作为一个临时的容器,可以帮助优化 DOM 操作。使用文档碎片可以减少直接对 DOM 的多次操作,从而提高性能。

let frg = document.createDocumentFragment();
let ul = document.querySelector('ul');
for(let i=0;i<10000;i++){
     let li = document.createElement('li');
     li.innerHTML = '我是第'+i+'个li';
     frg.appendChild(li);
}

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.