重绘和回流

重绘：重新绘画 比如颜色的改变会引发页面重绘

回流： 比如插队 display:none / block，任何的DOM操作都会引发回流

重绘和回流都影响页面的响应速度，回流的代价大于重绘，只能优化，不能解决

for(var i = 0 ; i < 100 ; i++) {

var oP = document.createElement('p') ;

oP.innerHTML = i ;

document.body.appendChild(oP) }  //dom操作了100次

优化成一次

var res = ''

for(var i = 0 ; i < 100 ; i++) {res += '<p>' + i + '</p>'}

document.body.innerHTML += res ;

文档碎片 fragment 和上面设置空字符串一样优化重复的dom操作

var ft = document.createDocumentFragment() ;

for(var i = 0 ; i < 100 ; i++) {

var oP = document.createElement('p') ;

oP.innerHTML = i ;

ft.appendChild(oP) }

document.body.appendChild(ft) ；

相对麻烦的优化方法 字符串不能接受标签，因为是对象只有地址，复杂的操作用上面方法好点。

str = '' ;

for(var i = 0 ; i < 100 ; i++){ str += '<p>'+i+'</p>'; } 

document.body.innerHTML = str ;