高性能javascript(记录三)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高性能javascript(记录三)相关的知识,希望对你有一定的参考价值。

  DOM(文档对象模型)是一个独立的语言,用于操作XML和html文档的程序接口(API)。在游览器中,主要用来与HTML文档打交道,同样也用在Web程序中获取XML文档,并使用DOM API用来访问文档中的数据。尽管DOM是个与语言无关的API,它在游览器中的接口却是用javascript实现的。客户端脚本编程大多数的是在和底层文档打交道。

  DOM的访问和修改是有代价的。打个比方:DOM和js各自为一个岛屿,之间仅有一个收费桥梁连接。每次js访问DOM的时候就相当于途径一次这座桥,并交纳过桥费。访问的次数多了,费用也就高了。这是DOM的访问,而修改的代价就更高了,因为修改DOM会导致游览器重新计算页面的几何变化。最坏的情况就是:在循环中访问或修改元素,尤其是对HTML元素的集合循环操作。

//较慢
function innerHTMLLoop(){
    for(var count = 0;count < 15000;count++){
        document.getElmentById("id").innerHTML += str;
    }  
}
//这种方式问题在于每次循环迭代时,该元素都被访问两次:一次读取innerHTML属性值,另一次重写它。
//较快
function innerHTMLLoop2(){
    var content = ‘ ‘;
    for(var count = 0;count < 15000;count++){
        countent += str;    
    }
    document.getElementById("id").innerHTML += content;
}

  通用法则:减少访问DOM的次数,把运算尽量留在ECMAScript这一端处理。  

  问题:修改页面区域是用innerHTML属性还是document.createElement()的原生DOM方法好?

      答案:相差无几,除开最新版的WebKit内核之外的所有游览器中,innerHTML会更快一些。如果在一个对性能有着苛刻要求的操作中更新一大段HTML,推荐使用innerHTML,因为它在绝大部分游览器中都运行的更快。但大多数日常生活操作而言,并没有太大区别,故应该根据可读性、稳定性、团队习惯、代码风格来综合决定使用哪种方式。

  节点克隆:使用DOM方法更新页面内容的另一个途径是克隆已有的元素,而不是创建新元素--换句话说也就是用element.cloneNode()代替document.createElement()。在大多数游览器,节点克隆都更有效率,但也非明显。

  HTML集合:HTML集合是包含了DOM节点引用的类数组对象。

  以下方法的返回值就是集合:document.getElementsByName() 、document.getElementsByClassName()、document.getElementsByTagName();

  以下属性同样返回HTML集合:document.images、document.links、document.forms、document.forms[0].elements;

  以上的方法和属性返回值都是HTML集合对象,这是个类数组的列表(并非真正的数组,因为没有push()和slice()之类的方法),但提供了一个类似数组的length属性,并且还能以数字索引的方式访问列表中的元素。DOM标准中定义:HTML集以一种“假死实时态”实时存在,意味着当底层文档对象更新时,它也自动更新。事实上,HTML集合一直和文档保持连接,每次当你需要最新消息时,都会重复执行查询的过程,哪怕只是获取集合的元素个数也是,因此导致性能下降。

//一个意外的死循环
var allDivs = document.getElementsByTagName("div");
for(var i = 0;i < allDivs.length;i++){
    document.body.appendChild(document.createElement("div"))
}

  这就是因为html集会自动更新导致的一个死循环allDivs.length反应的是底层文档的当前状态,会随着迭代增加。

//读取一个集合的length比读取一个普通数组的length要慢得多,因为每次都要查询。

function toArray(coll){
    for ( var i = 0,a = [],len = coll.length ;i<len;i++){
        a[i] = coll[i];
   }
    return a;
}
var coll = document.getElementsByTagName("div");
var arr = toArray(coll);

//比较下面两个函数:
//较慢
function loopCollection(){
    for(var count = 0;count < coll.length;count++){
        //代码处理
   }
}
//读取元素集合的length属性会引发集合进行更新,从而提高性能消耗。优化:把集合长度缓存到一个局部变量中,然后在循环的条件退出语句中使用该变量。性能跟loopCoiedArray()一样。
//较快
function loopCopiedArray(){
    for(var count = 0;count < arr.length;count++){
        //代码处理
    }
} 

  很多情况下如果只需要遍历一个相对较小的集合,缓存length就够了。因为虽然遍历数组比遍历集合快,但是也同时会带来额外的消耗,故因考虑是否值得使用数组拷贝。

                                                                                 访问集合元素时使用局部变量:最慢的版本每次都要读取全局document,优化后的版本缓存了一个集合的引用,最快的版本把当前的集合元素存储到一个变量。

//较慢
function collectionGlobal(){
    var coll = document.getElementsByTagName("div"),
          len = coll.length,
          name = ‘ ‘;
    for(var count = 0;count < len;count++){ 
        name = document.getElementsByTagName("div")[count].nodeName;
        name = document.getElementsByTagName("div")[count].nodeType;
        name = document.getElementsByTagName("div")[count].tagName;
    }
     return name;
}
//较快
function collectionLocal(){
    var coll = document.getElementsByTagName("div");
          len = coll.length,
          name = ‘ ‘;
    for(var count = 0;count < len;count++){ 
          name = coll[count].nodeName;
          name = coll[count].nodeType;
          name = coll[count].tagName;
     }
     return name;
}
//最快
function collectionNodesLocal(){
    var coll = document.getElementsByTagName("div");
          len = coll.length,
          name = ‘ ‘,el=null;
    for(var count = 0;count < len;count++){ 
          el = coll[count]
          name = el.nodeName;
          name = el.nodeType;
          name = el.tagName;
     }
     return name;
}

遍历DOM

  获取DOM元素:childNodes得到元素集合,nextSibling来获取每个相邻元素。

  以非递归方式遍历元素子节点:

function testNextSibling(){
    var el = document.getElementById("mydiv"),
          ch = el.firstChild,name = ‘ ‘;
    do {
        name = ch.nodeName;
    }while ( ch = ch.nextSibbling);
    return name;
};

function testChildNodes(){
    var el = document.getElementById("mydiv");
          ch = el.childNodes,
          len = ch.length,name = ‘ ‘;
    for ( var count = 0;count < len;count++){
        name = ch[count].nodeName;  
    }
    return name;
};

  nextSibling和childNode两种方法运行时间几乎相等,只有在IE里,nextSibling性能更高。

  元素节点:在某些情况下,只需访问元素节点,因此在循环中很可能需要检查返回节点的类型并过滤掉非元素节点。这些类型检查和过滤其实是不必要的DOM操作。大部分游览器提供API只返回元素节点。

              技术分享

  使用children替代childNodes会更快,因为集合项更少。

  选择器API:querySelectorAll()(使用CSS选择器定位节点)原生DOM方法比使用JS和DOM来遍历查找元素要快得多。

重绘和重排:

  游览器下载完页面中的所有组件:HTML标记、js、css、图片之后会解析并生成两个内部数据结构:DOM树(表示页面结构)和渲染树(表示DOM节点如何显示)。一旦完成,游览器就开始绘制页面元素。而当DOM的变化影响了元素的几何属性,游览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。这时就发生了重排和重绘。

  重排:游览器会使渲染树中受到影响的部分失效,并重新构造渲染树。

  发生时间:添加或删除可见DOM元素、元素位置改变、元素尺寸改变、内容改变、页面渲染器初始化、游览器窗口尺寸改变。

  重绘:完成重排后,游览器会重新绘制受影响的部分到屏幕中。

  最小化重排和重绘:为了减少发生次数,应该合并多次对DOM和样式的修改,然后一次处理。

  批量修改DOM:当需要对DOM元素进行一系列操作时,可以通过以下方式减少重排和重绘的次数:使元素脱离文档流、对其应用多重改变、把元素带回文档。

//更新指定节点数据的通用函数
function appendDataToElement(appendToElement,data){
    var a,li;
    for (var i = 0;max = data.length;i < max;i++){
        a = document.createElement("a");
        a.href = data.data[i].url;
        a.appendChild(document.createTextNode(data[i].name));
        li = document.createElement("li");
        li.appendChild(a);
        appendToElement.appendChild(li);
    }
};
//不考虑重排问题
var ul = document.getElementById("myul");
appendDataToElement(ul,data);
//优化,使DOM脱离文档,减少重排
//方法一     隐藏元素,应用修改,重新显示
var ul = document.getElementById("myul");
ul.style.display = "none";
appendDataToElement(ul,data);
ul.style.display = "block";
//方法二     使用文档片断(document fragment)在当前DOM之外构建一个子树,再把它拷贝回文档
var fragment = document.createDocumentFragment();
appendDataToElement(fragment,data);
document.getElementById("myul").appendChild(fragment);
//方法三     将原始元素拷贝到一个脱离文档的节点中,修改副本,完成后再替换原始元素
var old = document.getElementById("myul");
var clone = old.cloneNode(true);
appendDataToElement(clone,data);+
old.parentNode.replaceCHhild(clone,old);

注:推荐使用文档片断,因为它们所产生的DOM遍历和重排次数最少。

  还有两种情况下优化重排和重绘的方式:在获取布局信息时,缓存布局信息和处理页面动画时,让元素脱离动画流(注:若是大量使用css中:hover这个伪选择器会明显降低响应速度)。

  事件委托:

  当页面存在大量元素,而且每个都要一次或多次绑定事件处理器时,每绑定一个事件处理器都是有代价的,要么加重了页面负担(更多的代码),要么增加了运行期的执行时间。而一个简单而优雅的处理DOM事件的技术是事件委托。基于:事件逐层冒泡并能被父级元素捕获。

//例如
document.getElementById("menu").onclick = function(e){
   
    //游览器 target
    e = e || window.event;
    var target = e.target || e.srcElement;
    var pageid,hrefparts;
    //只关心hrefs,非链接点击则退出  
    if ( target.nodeName !== "A" ){
        return;
    }

    //从链接中找出页面ID
    hrefparts = target.href.split("/");
    pageid = hrefparts[ hrefparts.length - 1 ];
    pageid = pageid.replace(".html"," ");

    //更新页面
    ajaxRequest("xhr.php?page" + id,updatePageContents);

    //游览器组织默认行为并取消冒泡
    if (typeof e.preventDefault === "function"){
        e.preventDefault();
        e.stopPropagetion();
    }else{
        e.returnValue = false;
        e.cancelBubble = true;
    }
};

 

 



以上是关于高性能javascript(记录三)的主要内容,如果未能解决你的问题,请参考以下文章

你可能不知道的JavaScript代码片段和技巧(上)

2019 书单记录~

高性能JavaScriptの结语 -- 学完了

高性能JavaScriptの结语 -- 学完了

在jQuery和JavaScript中,实现转跳

JavaScript性能优化5——JSBench工具的使用