深入了解浏览器的重绘与重排

重绘与重排是浏览器渲染的重要动作,对前端性能影响非常大,所以值得多了解一下 什么是重绘与重排? 重绘是一个改变元素外观的行为,例如改变visibility、背景色等属性 重排是浏览器重新计算各个元素的排列位置,需要重新进行布局计算,例如改变元素的宽高、元素内的内容 重绘不会带来重新布局,并不一定伴随重排,但重排一定会导至重绘 哪些操作会引起重排? (1)改变DOM元素的几何属性 某元素的几何属性发生变化时,会触发子节点、兄弟节点、祖先节点重新计算,也就是所有元素都得重新计算大小、位置,整个页面重新渲染,代价非常大 (2)DOM树的结构变化 例如节点的增减、移动等,也会触发重排 这个影响小于第一种情况,因为DOM树的遍历是从上的下,从左到右的,在这个过程中,当前元素不会影响其前面已经遍历过的元素 例如在body最前面插入一个元素,会导致整个文档的重新渲染,而在其后插入一个元素,则不会影响到前面的元素 (3)获取某些属性 当获取一些属性时,浏览器为取得正确的值也会触发重排,这些属性包括: offsetTop、offsetLeft、 offsetWidth、offsetHeight scrollTop、scrollLeft、scrollWidth、scrollHeight clientTop、clientLeft、clientWidth、clientHeight getComputedStyle() 如何减小重绘重排的性能代价? (1)将多次改变样式的操作合并成一次

//bad

var test = document.getElementById('test');
test.style.color = '#000';
test.style.background = '#111'; 

//good

.test {
background: #111;
color: #000;
} 

document.getElementById('test').className = 'test'; 

(2)适当使用绝对定位 在页面逻辑允许的情况下,可以把position属性设为absolute或fixed 这样此元素就脱离了文档流,它的变化不会影响到其他元素 例如淘宝网首页的轮播广告就使用了绝对定位,轮播需要不断修改节点,就会引起大量重排,使用绝对定位可以提高很多性能 (3)把多次对节点的操作合并为一次操作

//bad

for(var i=0; i<10; i++){
$("#test").append('hi'); 
}

//good

var frag = document.createDocumentFragment();

var str = '';
for(var i=0; i<10; i++){
str += 'hi'; 
}

$("#test").appendChild(frag);

(4)临时使用display:none 把要频繁操作的节点先置为隐藏,再对其操作,操作完成后,再显示出来 对隐藏节点的操作是对页面没有任何影响的,只是隐藏和显示这两个动作触发重排 (5)缓存属性值

在需要经常取上面提到的那些引起浏览器重排的属性值时,要缓存到变量

//bad
var a = document.body.scrollTop + 1;
var b = document.body.scrollTop + 2;
//good
var top = document.body.scrollTop;
var a = top + 1;
var b = top + 2;

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-12-09

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

基于 HTML5 Canvas 的属性值点击出现多选项的制作

15720
来自专栏有趣的django

20.DOM

定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getEl...

35450
来自专栏落花落雨不落叶

【被玩坏的博客园】之canvas装饰博客园侧边栏

17320
来自专栏落花落雨不落叶

【被玩坏的博客园】之canvas装饰博客园侧边栏

51370
来自专栏Python研发

DOM

文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的...

10530
来自专栏Python攻城狮

Javascript(2)-js进阶

备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是...

25330
来自专栏wym

见缝插针游戏--实现转圈

14410
来自专栏一“技”之长

Java开发GUI之单复选框 原

    单复选框在处理一些用户选项时十分方便。在Java的GUI体系中,复选框使用Checkbox类来创建,单选框实际上是将多个复选框结合成为组,同一组的复选框...

9320
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

56830
来自专栏超然的博客

CSS 居中

给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实...

12310

扫码关注云+社区

领取腾讯云代金券