美文网首页
web性能优化 - 重排与重绘

web性能优化 - 重排与重绘

作者: squidbrother | 来源:发表于2019-12-07 22:21 被阅读0次
重排与重绘

重排 [重构/回流/reflow]:
当DOM变化影响了节点的几何属性,浏览器需要重新计算节点的几何属性,并且页面中其他节点的可能受影响,这样渲染树就发生了改变并重新构造渲染树。这个过程称为重排。
引起方式:改变页面布局(width,height,left,top等)

重绘 [repaint或redraw] :
重绘是一个节点的外观发生改变的行为,例如改变color、outline等属性。
浏览器会根据节点的新属性重新绘制,使节点呈现新的外观。重绘不会带来重新布局,并不一定伴随着重排。
引起方式:在页面布局稳定情况下,改变颜色、背景色

两者关系:
重排会引起重绘,重绘不一定一起重排

两者对浏览器的影响:
提升浏览器渲染开支,降低浏览器性能,可视效果就是导致浏览器卡顿缓慢。

降低重排与重绘的手段与方式:

1.减少dom操作
例如:改变一个元素的样式,不要反复获取这个dom进行逐次的css样式修改,而是将dom元素存在变量中,将多个样式放在一个类名下,操作类名

//--css
.box { width:300px; height:200px; background:red; }
//---js
var oBox = document.getElementById('box');
oBox.className = 'box';

不要这么做

document.getElementById('box').style.width = 300+'px';
document.getElementById('box').style.height= 200+'px';
document.getElementById('box').style.backgroundColor = 'red';

2.将大量操作dom元素,引发重排的操作,在文档流外进行
添加10000个li

var oUl = document.getElementById('ul1');
var resultStr = '';
for(var i=0; i<1000; i++){
  var oLi = '<li>'+('hello world'+i)+'</li>';
  resultStr += oLi;
}
 oUl.innerHTML= resultStr;

不要这么做:

var oUl = document.getElementById('ul1');
for(var i=0; i<1000; i++){
  var oLi = document.createElement('li');
  oLi.innerHTML = 'hello world'+i;
  oUl.appendChild(oLi);
}

3.使用文档碎片做DOM操作

var oUl = document.getElementById('ul1');
var fragment = document.createDocumentFragment();
for(var i=0; i<1000; i++){
var oLi = document.createElement('li');
oLi .innerText = 'hello world'+i;
fragment.appendChild(oLi);
}
oUl.appendChild(fragment);

4.通过css方式,降低对文档流的重排
将需要反复操作,且每次操作都会引起重排的DOM元素,开始display设置为none
完整所有操作后,再讲display设置为block

var oUl = document.getElementById('ul1');
oUl.style.display = 'none';
for(var i=0; i<1000; i++){
  var oLi = document.createElement('li');
  oLi.innerHTML = 'hello world'+i;
  oUl.appendChild(oLi);
}
oUl.style.display = 'block';

5.使用cloneNode与replaceChild

var old = document.getElementById('mylist');
var clone = old.cloneNode(true); 
//如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,只复制当前节点。
appendDataToElement(clone, data);
old.parentNode.replaceChild(clone, old);

6.使用transform 替代 position去完成动画,减少重排与重绘
chrome 调试工具 performance中查看 painting; 使用css3要比css2快3倍以上

//--css
#ul1 { left: 0; top: 0; position: absolute; width:100px; height: 100px; background: red; transition: all ease 0.5s;}
body { height: 800px;}
/* body:hover #ul1 { left: 300px; top: 300px;}  */
body:hover #ul1 { -webkit-transform: translate(300px,300px); transform: translate(300px,300px); }

//--html
<ul id="ul1"></ul>

7.给页面图片或者其父级设定一个尺寸
为页面中所有图片指定宽度和高度可以消除不必要的重排和重新绘,使页面渲染速度更快

  • 指定与图片本身相一致的尺寸、如果一个图片文件实际上的大小是60×60像素,不要在HTML或CSS里设置尺寸为30×30像素;提前作2套图,一个是缩略,一个是展示

8.将JS脚本放置最后面,较少阻塞,加快浏览器渲染(排版与绘制)速度
页面加载渲染过程

  • 解析HTML代码并生产一个DOM树
  • 解析CSS文件,顺序为:浏览器默认样式 => 自定义样式 => 页面内样式
  • 生产渲染树。与DOM树不同的是渲染树受样式影响,不包括不可见节点
  • 根据渲染树,浏览器就会在屏幕上绘制出渲染树上的所有节点

相关文章

  • 前端收藏文章

    优化CSS重排重绘与浏览器性能

  • web性能优化 - 重排与重绘

    重排与重绘 重排 [重构/回流/reflow]:当DOM变化影响了节点的几何属性,浏览器需要重新计算节点的几何属性...

  • 重绘和重排性能优化

    重绘和重排 1.1 DOM树和渲染树 浏览器下载完页面中的所有组件、HTML标记,javascript,css图片...

  • 前端性能优化之重绘与重排

    重排与重绘 当DOM的变化引发了元素几何属性的变化,比如改变元素的宽高,元素的位置,导致浏览器不得不重新计算元素的...

  • 逐行分析snabbdom.js源码

    VirtualDOM 是针对 DOM 重排重绘性能瓶颈作出的重要优化方案,其最具价值的核心功能是如何识别并保存新旧...

  • 浏览器的重绘和重排

    重绘和重排 重排是因为元素的几何属性改变,导致渲染树中的节点发生改变,从而影响到其它节点发生重绘。重排对性能影响极...

  • Web性能优化-重绘与回流

    先看概念介绍: 重绘 Paint 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的 外观...

  • 重绘和重排及其性能优化

    了解了浏览器渲染原理之后,我们知道了浏览器听过渲染树计算布局后,就开始绘制页面元素,但是渲染树并不是一成不变的,在...

  • 性能优化第06期 - 重排与重绘的优化

    https://juejin.cn/post/7007257822811553829[https://juejin...

  • 前端性能优化之重排和重绘

    前言,最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》,今天写的文章从“老生常谈”的页面...

网友评论

      本文标题:web性能优化 - 重排与重绘

      本文链接:https://www.haomeiwen.com/subject/gftpgctx.html