DOM优化

一、DOM与JavaScript

1. 浏览器会把DOM与js独立实现
   -像两个独立的小岛
2. js操作dom
   -从一个岛到另一个岛
3. dom的性能
   -岛与岛之间的桥，每次通过收取“过桥费”；
   -尽量减少过桥次数
4. innerHTML与dom方法对比

//在html中的div中添加5000个a的
var oDiv=document.getElementById('div1')
var str=''；
console.time('hello')
for(var i=0;i<5000;i++){
    oDiv.innerHTML +='a';
}
console.timeEnd('hello')

//下面独立在js完成字符串的累加；与上一个不断操作DOM有较大性能提升
console.time('hello')
for(var i=0;i<5000;i++){
    str +='a';
}
oDiv.innerHTML=str；
console.timeEnd('hello')

二、减少DOM操作

1. 节点克隆
   -chloneNode
2. 访问元素集合
   -尽量用局部变量
3. 元素节点
   -尽量用只获取元素的节点方法

childNodes
children
firstChild
firstElementChild

1. 选择器API
   -利用querySelector、querySelectorAll；

三、DOM与浏览器

1. 重排：改变页面内容；（html）
2. 重绘：浏览器显示内容；（css）

减少浏览器频繁重排与重绘制的过程能提升性能；

1.添加顺序
-尽量在appendChild前添加操作；

var oUl=document.getElementById('ul1');
console.time('hello');
for(var i=0;i<5000;i++){
    var oLi=document.creatElement('li');
     oUl.appendChild(oLi);
    oLi.innerHTML='li';//将此行代码放置到appendChild前性能会大大提升
}

2.合并dom操作
-利用cssText在js中操作样式;

elem.style.width='100px'
elem.style.height='100px'
elem.style.background='red'
//上述三句代码可以换成
elem.style.cssText='width:100px;height:100px;background:red’;

3 缓存布局信息

var oDiv=document.getElementById('div1');
var L=oDiv.offsetLeft;
var T=oDiv.offsetTop;
//注：增加两个局部变量来缓存布局信息比直接操作有性能提升
setIterval(function(){
      L++
      T++
      oDiv.style.left=L+'px';
      oDiv.style.top=T+'px';
},30)

4.文档碎片
-creatDocumentFragment()

var oUl=document.getElementById('ul1');

console.time('hello');
for(var i=0;i<5000;i++){
    var oLi=document.creatElement('li');
     oUl.appendChild(oLi);
}
//上述代码可以通过创建文档碎片来提高性能
var oFrag=document.creatDocumentFragment();
for(var i=0;i<5000;i++){
    var oLi=document.creatElement('li');
     oFrag.appendChild(oLi);
}
     oUl.appendChild(oFrag);

四、dom与事件

• 事件委托

五、dom与前端模板

• 能更好的对逻辑和视图分离，MVC架构的基础

本篇文章为学习秒味课堂的笔记。