DOM优化

1、什么是DOM

      用于操作XML和HTML文档的应用程序

     DOM节点

     DOM树

     DOM API

整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点

2、DOM与Javascript

     浏览器会把DOM和JS独立实现

                       -像两个独立的小岛

     JS操作DOM

                       -从一个岛到另一个岛

      DOM性能

                       -岛与岛之间的桥，每次类似收取“过桥费”

                       -尽量减少过桥的次数

Demo1:

<div id="demo1"></div> <script> window.οnlοad=function(){ var oDemo = document.getElementById('demo1'); console.time('hello'); for(var i=0; i<3000;i++){ oDemo.innerHTML+='a'; //频繁的与dom操作 浪费性能 } console.timeEnd('hello'); //大致耗时100ms多 } </script>

     

Demo2:

console.time('hello'); var str=''; for(var i=0; i<3000;i++){ str+='a'; //减少与dom操作 提高性能 } oDemo.innerHTML = str; console.timeEnd('hello') //耗时大致不到1ms

Demo3:

<ul id="ul"></ul> <script> /* * chrome下：dom 操作要比 innerHTML 性能要好 ,标准浏览器下则相反,可以选择性使用 * */ window.οnlοad=function(){ var oDemo = document.getElementById('ul'); var str=''; console.time('hello'); for(var i=0; i<3000; i ++){ var oLi = document.createElement('li'); oDemo.appendChild(oLi); } console.timeEnd('hello'); console.time('hello'); for(var i=0; i<3000; i ++){ str+='<li></li>'; } oDemo.innerHTML = str; console.timeEnd('hello'); } </script>

3、减少DOM操作

    节点克隆

            -cloneNode

    访问元素集合

            -尽量用局部变量

    选择API

            -利用querySelector, querySelectorAll 

Demo4:

<ul id="ul"></ul> <script> /*减少DOM操作 * cloneNode方法 * */ window.οnlοad=function(){ var oDemo = document.getElementById('ul'); console.time('hello'); for(var i =0; i<3000; i++){ var oLi = document.createElement('li'); oLi.innerHTML=i; oDemo.appendChild(oLi); } console.timeEnd('hello'); console.time('hello'); var oLi = document.createElement('li'); oLi.innerHTML = 'li'; for(var i=0; i<3000; i++){ var oNewLi = oLi.cloneNode(true); //true ： 表示连li内子元素也克隆 oDemo.appendChild(oNewLi); } console.timeEnd('hello'); } </script>

Demo5:

<ul id="ul"></ul> <script> /*减少DOM操作 * 用局部变量 * */ window.οnlοad=function(){ var oDemo = document.getElementById('ul'); var aLi = oDemo.getElementsByTagName('li'); for(var i=0; i<3000; i++){ var oLi = document.createElement('li'); oDemo.appendChild(oLi); } /* console.time('hello'); for(var i=0;i<aLi.length;i++){ //aLi.length 会不停的每次去获取一次，浪费性能, 最好给存一个变量 aLi[i].innerHTML ='li'; } console.timeEnd('hello'); */ console.time('hello'); var len = aLi.length; //会提高一些 比如 var doc= document; for(var i=0; i<len; i++){ aLi[i].innerHTML = 'li'; } console.timeEnd('hello'); } </script> Demo6:

//querySelctor(), querySelectorAll(); var oUl = document.getElementById('ul'); var aLi = oUl.getElementsByTagName('li'); //利用query... var aLi = document.querySelectorAll('#ul li');// 一次dom 操作就解决了很方便，但IE8之前不支持，

4、DOM与浏览器

      重排：改变页面内容

      重会：浏览器显示内容

      添加顺序：

                -尽量在appendChild 之前添加操作

      合并dom操作

                -利用cssText

       文档碎片

                 - createDocumentFragment();

for(var i = 0; i<3000; i++){ var oLi = document.createElement('li'); oLi.innerHTML = 'li'; //尽量在appendChild之前添加 oDemo.appendChild(oLi); } var oFrag = document.createDocumentFragment(); for(var i=0; i<3000; i++){ var oLi = document.createElement('li'); oFrag.appendChild(oLi); } oDemo.appendChild(oFrag);