浏览器的渲染过程
当我们浏览一个网页的时候,我们的网页是经过浏览器渲染而成的。渲染的过程如下:
1.解析HTML,生成DOM树;解析CSS代码,生成CSSOM树。
2.将DOM树和CSSOM树结合起来生成渲染树
3.回流:根据渲染树,得到节点的几何信息(位置和大小)
4.重绘:根据回流和渲染树得到的几何信息,转化成实际设备的绝对像素值。
5.Display:将像素值发送给GPU,展示在页面上。
何时进行回流和重绘?
频繁地回流和重绘会影响性能,那么何时会进行回流和重绘呢?
1.页面第一次渲染的时候。
2.页面添加或删除元素。
3.元素的位置信息发生了变化。
4.元素的大小发生了变化。
5.浏览器的窗口发生了变化
6.读取offsetWidth/offsetHeight/offsetTop/offsetLeft、
clientLeft/clientTop/clientWidth/clientHeight、
scrollWidth/scrollHeight/scrollLeft/scrollTop属性
和getComputedStyle()方法的时候会强制进行回流和重绘。
如何减少回流和重绘?
1.针对页面第一次的渲染,我们没法优化
2.当我们想添加元素时,我们可以把元素添加到document fragment中,最后一次性添加到文档中。
以添加li标签为例:
function appendLi(dom,num)
{
for(let i=0;i<num;i++)
{
let li=document.createElement("li");
li.innerText="text";
dom.appendChild(li);
}
}
let ul=document.getElementById("list");
let fragment=document.createDocumentFragment();
appendLi(fragment,5);
ul.appendChild(fragment);
这样就会减少每次循环产生的浏览器的回流和重绘。只会在fragment添加到文档流的时候产生一次回流和重绘。
3.对于需要删除的元素,我们可以使元素先脱离文档流进行删除。
let ul=document.getElementById("list");
ul.style.display="none";
ul.removeChild(ul.firstElementChild);
ul.removeChild(ul.lastElementChild);
ul.removeChild(ul.firstElementChild);
ul.removeChild(ul.firstElementChild);
ul.style.display="block";
这样,只会在元素脱离文档流和重回文档流的时候引起回流和重绘。
4.当元素的的尺寸或位置发生变化的时候,我们可以通过cssText或者为元素添加class属性一次性地对元素进行操作。
const el=document.getElementById("list");
el.style.cssText += 'border-left:1px;border-right:3px;padding:5px;';
或者
const el=document.getElementById("list");
el.className+= ' active';
5.当我们频繁读取到offsetWidth等属性时,可以将offsetWidth属性进行缓存。
假设我想把p标签的宽度设置为一个元素的宽度。
const width=box.offsetWidth;
function initP() {
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = width + 'px';
}
6.对于复杂的动画,由于它会经常发生回流和重绘,因此,我们可以使用绝对定位使它脱离文档流。
如何不产生回流和重绘
这时候CSS3硬件加速就出现了。使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘 。