渲染性能优化相关补充

目录

DOM性能优化

重绘与重排

数据量太大，DOM节点加载过多，怎样保证前端在渲染时页面不卡顿

DOM性能优化

假设有一个很多元素的数组data[]，需要将其每个值生成一个li元素插入到一个id为container的ul元素中，请优化如下代码（DOM性能优化）：

let liNode,m;

for(let i=0,m=data.length;i<m;i++){

    liNode=document.createElement("li")

    liNode.innerHTML=data[i]

    document.getElementByID("container").appengChild(liNode)

}

缓存DOM对象

 这里的每一次循环都会去查找id为container的元素，效率自然非常低下，所以可以将元素在循环前查询完毕，在循环中仅仅是引用就可以了。代码修改为：

var ulNode=document.getElementByID("container")
let liNode,m;

for(let i=0,m=data.length;i<m;i++){

    liNode=document.creatElement("li")

    liNode.innerHTML=data[i]

    ulNode.appengChild(liNode)

}

缓存DOM对象的方式也经常被用在元素的查找中，查找元素应该是DOM操作中最频繁的操作了，其效率优化也是大头。在一般情况下，我们会根据需要，将一些频繁被查找的元素缓存起来，在查找它或查找它的子孙元素时，以它为起点进行查找，就能提高查找效率了。

在内存中操作元素

由于DOM操作会导致浏览器的回流，回流需要花费大量的时间进行样式计算和节点重绘与渲染，所以应当尽量减少回流次数。一种可靠的方法就是加入元素时不要修改页面上已经存在的元素，而是在内存中的节点进行大量的操作，最后再一并将修改运用到页面上。DOM操作本身提供一个创建内存节点片段的功能:document.createDocumentFragment()，我们可以将其运用于上述代码中：

var ulNode = document.getElementById("container");
var liNode, i, m;
var fragment = document.createDocumentFragment();
for (i = 0, m = data.length; i < m; i++) {
    liNode = document.createElement("li");
    liNode.innerText = data[i];
    fragment.appendChild(liNode);
}
ulNode.appendChild(fragment);

这样就只会触发一次回流，效率会得到很大的提升。如果需要对一个元素进行复杂的操作（删减、添加子节点），那么我们应当先将元素从页面中移除，然后再对其进行操作，或者将其复制一个（cloneNode()），在内存中进行操作后再替换原来的节点。

一次性DOM节点生成

在这里我们每次都需要生成节点（document.createElement("li")），然后将其加入到内存片段中，我们可以通过innerHTML属性来一次性生成节点，具体的思路就是使用字符串拼接的方式，先生成相应的HTML字符串，最后一次性写入到ul的innerHTML中。修改代码为：

var ulNode = document.getElementById("container");
var fragmentHtml = "", i, m;
for (i = 0, m = data.length; i < m; i++) {
    fragmentHtml += "<li>" + data[i] + "</li>";
}
ulNode.innerHTML = fragmentHtml;

这样效率也会有所提升，不过手动拼接字符串是一件麻烦事。

通过类修改样式

有时候需要通过JavaScript给元素增加样式，比如：

element.style.fontWeight = 'bold';
element.style.backgroundImage = 'url(back.gif)';
element.style.backgroundColor = 'white';
element.style.color = 'white';
//...

这样效率很低，每次修改style属性后都会触发元素的重绘，如果修改了的属性涉及大小和位置，将会导致回流。所以我们应当尽量避免多次为一个元素设置style属性，应当通过给其添加新的CSS类，来修改其CSS：

element.className += " element";

.element {
    background-image: url(back.gif);
    background-color: #fff;
    color: #fff;
    font-weight: 'bold';
    /*...*/
}

通过事件代理批量操作事件

还是之前那个ul和添加li，如果我们需要给每个li都绑定一个click事件，就可能写出类似如下代码：

var ulNode = document.getElementById("container");
var fragment = document.createDocumentFragment();
var liNode, i, m;
var liFnCb = function(evt){
    //do something
};
for (i = 0, m = data.length; i < m; i++) {
    liNode = document.createElement("li");
    liNode.innerText = data[i];
    liNode.addEventListener("click", liFnCb, false);
    fragment.appendChild(liNode);
}
ulNode.appendChild(fragment);

这里每个li元素都需要执行一次addEventListener()方法，如果li元素数量一多，就会降低效率。所以我们可以通过事件代理的方式，将事件绑定在ul上，然后通过event.target来确定被点击的元素是否是li元素，同时我们也可以使用innerHTML属性一次性创建节点了，修改代码为：

var ulNode = document.getElementById("container");
var fragmentHtml = "", i, m;
var liFnCb = function(evt){
    //do something
};
for (i = 0, m = data.length; i < m; i++) {
    fragmentHtml += "<li>" + data[i] + "</li>";
}
ulNode.innerHTML = fragmentHtml;
ulNode.addEventListener("click", function(evt){
    if(evt.target.tagName.toLowerCase() === 'li') {
        liFnCb.call(evt.target, evt);
    }
}, false);

这样事件绑定的代码就只要执行一次，可以监听所有li元素的事件了。当然如果需要移除事件回调函数，我们也不需要循环遍历所有的li元素，只需要移除ul元素上的事件处理就行了。

重绘与重排

什么是dom重排，什么又是dom重绘呢？这就要从dom树说起了。

浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。

在文档初次加载时，浏览器引擎通过解析 html文档 构建一棵DOM树，之后根据DOM元素的几何属性构建一棵用于展示渲染的渲染树。渲染树中的节点被称为“帧”或“盒",符合CSS模型的定义，可理解为（包括理解页面元素为一个具有大小，填充，边距，边框和位置的盒子）。由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素（知道这点有用）。 当渲染树构建完成，浏览器把每一个元素放到正确的位置上，然后再根据每一个元素的其他样式，绘制页面。

由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

重绘：是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性（上面说到的其他属性）。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。

重排：当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。重排一定伴随着重绘。

数据量太大，DOM节点加载过多，怎样保证前端在渲染时页面不卡顿

一、定时器分批次渲染

既然一次渲染10万条数据会造成页面加载速度缓慢，那么我们可以不要一次性渲染这么多数据，而是分批次渲染， 比如一次10000条，分10次来完成， 这样或许会对页面的渲染速度有提升。 然而，如果这13次操作在同一个代码执行流程中运行，那似乎不但无法解决糟糕的页面卡顿问题，反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用多线程，JavaScript虽然没有多线程，但是setTimeout和setInterval两个函数却能起到和多线程差不多的效果。 因此，要解决这个问题， 其中的setTimeout便可以大显身手。 setTimeout函数的功能可以看作是在指定时间之后启动一个新的线程来完成任务。

function loadAll(response) {
	//将10万条数据分组， 每组500条，一共200组
	var groups = group(response);
	for (var i = 0; i < groups.length; i++) {
		//闭包， 保持i值的正确性
		window.setTimeout(function () {
			var group = groups[i];
			var index = i + 1;
			return function () {
				//分批渲染
				loadPart( group, index );
			}
		}(), 1);
	}
}

//数据分组函数（每组500条）
function group(data) {
	var result = [];
	var groupItem;
	for (var i = 0; i < data.length; i++) {
		if (i % 500 == 0) {
			groupItem != null && result.push(groupItem);
			groupItem = [];
		}
		groupItem.push(data[i]);
	}
	result.push(groupItem);
	return result;
}
var currIndex = 0;
//加载某一批数据的函数
function loadPart( group, index ) {
	var html = “”;
	for (var i = 0; i < group.length; i++) {
		var item = group[i];
		html += “title:” + item.title + index + " content:" +item.content+ index + “”;
	}
//保证顺序不错乱
while (index - currIndex == 1) {
	$(“#content”).append(html);
		currIndex = index;
	}
}

二、document.createDocumentFragment()

document.createDocumentFragment()用来创建一个虚拟的节点对象，节点对象不属于文档树。
当需要添加多个DOM元素时，可以先把DOM添加到这个虚拟节点中。然后再统一将虚拟节点添加到页面，这会减少页面渲染DOM的次数。

window.requestAnimationFrame
接受参数为函数，比起setTimeout和setInterval有以下优点：
1.把每一帧中的所有DOM操作集中起来，在一次的重排/重绘中完成。每秒60帧。
2.在隐藏或者不可见的元素中，requestAnimationFrame将不会重绘/重排。

//总数据
const total = 10000;
//每次插入的数据
const once = 20;
//需要插入的次数
const times = Math.ceil(total/once)
//当前插入的次数
const curTimes = 0;
//需要插入的位置
const ul = document.querySelector(‘ul’)
function add(){
	let frag = document.createDocumetFragment()
	for(let i = 0;i<once;i++){
		let li = document.createElement(‘li’)
		li.innerHTML = Math.floor(i+curTimes*once)
		frag.appendChild(li)
	}
	curTimes++;
	ul.appendChild(frag)
	if(curTimes<times){
		window.requestAnimationFrag(add)
	}
}
window.requestAnimationFrag(add)