专栏首页九旬大爷DOM优化之重绘和回流

DOM优化之重绘和回流

因为操作DOM要收过路费

把 DOM 和 JavaScript 各自想象成一个岛屿,它们之间用收费桥梁连接。——《高性能 JavaScript》

浏览器内核中的JS 引擎和渲染引擎是独立存在的,当我们用JS去操作DOM时,本质上是JS引擎和渲染引擎之间进行的“跨界交流”。

过“桥”要收费——这个开销本身就是不可忽略的。我们每操作一次 DOM(不管是为了修改还是仅仅为了访问其值),都要过一次“桥”。过“桥”的次数一多,就会产生比较明显的性能问题。因此“减少 DOM 操作”的建议,并非空穴来风。

#回流和重绘

JS操作DOM很慢,而且修改DOM还会引发它的外观、样式、大小、位置的改变,就会触发重流重绘

  • 回流:当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会因此受到影响),然后再将计算的结果绘制出来。这个过程就是回流(也叫重排)。
  • 重绘:当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性(比如修改了颜色或背景色)时,浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式(跳过了上图所示的回流环节)。这个过程叫做重绘。

由此可以看出,重绘不一定导致回流,但是回流一定会导致重绘。

优化的关键,就是把重绘和回流的次数最小化。

#如何优化

知道了DOM慢的原因,我就可以逐步优化了。

#减少DOM操作,将多次操作合并为一次。

假如,我们要将1-1000渲染到box里,如下:

<div id="box"></div>

我们首先想到的可能会这样:

for (var i = 1; i <= 1000; i++) {
    document.getElementById('box').innerHTML += `<p>${i}</p>`
}

虽然最终效果是可以实现的,但是每次for循环都要过一次“桥”,一次两次还好,如果操作几十万、几百万的数据呢?页面就会明显感到卡顿..

能不能优化呢?当然可以,我们可以先设置一个变量,先去操作这个变量,最后一次插入DOM。

var str = ''
for (var i = 1; i <= 1000; i++) {
    str += `<p>${i}</p>`
}
document.getElementById('box').innerHTML = str;

将多次DOM操作整合为一次,这也是一种优化的方式。

#使用DocumentFragment

将DOM多次修改,最后一次性插入到DOM中,这点在DocumentFragment中展现的淋漓尽致,关于DocumentFragment详细操作可以下一章。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从前端的角度来梳理微信支付(小程序、H5、JSAPI)的流程

    使用微信支付的前提必开通微信商户号,要使用到那种的支付方式要前需在商户平台开通(要审核)。

    九旬
  • 小程序-两列瀑布流布局

    新的设计图是按两列瀑布流排版的,类似于花瓣网那种。看到设计图后就在网上找,如何在小程序简单的实现,后来找到了一个特别简单的方法,就是利用wx:if和数组的下标对...

    九旬
  • 小程序-蒙版弹出窗

    九旬
  • Shadow DOM 初探

    Shadow DOM用官方的翻译来说就是影子 DOM,他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文档的时候会给指定的DOM结构插入...

    IMWeb前端团队
  • 从 React 历史的长河里聊虚拟DOM及其价值

    本质上是 JavaScript 对象,这个对象就是更加轻量级的对 DOM 的描述。

    前端劝退师
  • 增量 DOM 与虚拟 DOM 的对比使用

    如果你熟悉 React,你大概听说过虚拟 DOM 的概念。React 受欢迎的主要原因之一就是通过虚拟 DOM 提高用户界面性能。

    桃翁
  • React虚拟DOM的理解

    Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最...

    WindrunnerMax
  • Shadow DOM简介

    一个网页会形成一颗DOM树,树上有很多结点,但过多的结点使结构复杂起来,Shadow DOM允许我们用封装的方式简化这种结构。Shadow DOM是网页DOM树...

    gojam
  • Shadow DOM v1 简介

    Shadow DOM 是 Web Components 定义的四大标准之一。Shadow DOM 解决了构建网络应用的脆弱性问题。脆弱性是由 HTML、CSS ...

    阿宝哥
  • Virtual DOM

    DOM操作太消耗浏览器计算资源,diff算法才有其存在的意义。 DOM操作为什么慢? 1.直观感受:在浏览器控制台,用for循环遍历div属性,会看到有很多...

    城市中的游牧民族

扫码关注云+社区

领取腾讯云代金券