《高性能JavaScript》第三章 DOM编程

3.1 浏览器中的DOM

文档对象模型（DOM）是一个独立于语言的，用于操作XML和HTML文档操作的程序接口（API）。在浏览器中，主要用来与HTML文档打交道，同样也用在Web程序中获取XML文档，并使用DOM API来访问文档中的数据。

天生就慢

简单理解，两个相互独立的功能只要通过接口彼此连接，就会产生消耗。将DOM和JavaScript各自想象成一个岛屿，它们之间用收费桥梁连接，JavaScript每次访问DOM都要途径这座桥，并交纳过桥费。访问DOM次数越多，费用就越高。

性能优化：尽可能减少过桥的次数，努力呆在JavaScript岛上。

3.2 访问与修改

• 描述

访问DOM元素是有代价的，修改元素则更为昂贵，尤其对HTML集合循环操作。

• 原因

它会导致浏览器重新计算页面的几何变化。

• 反例

--------------------------------------------------------------------
注：如果你对python感兴趣，我这有个学习Python基地，里面有很多学习资料，感兴趣的+Q群：895817687
--------------------------------------------------------------------

    // 这个函数每次循环该元素都被访问两次：一次读取innerHTML属性值，另一次是重写它。
    function innerHTMLLoop() {
   
        for (var count = 0; count < 15000; count++) {
   
            document.getElementById('here').innerHTML += 'a'; 
        }
    }

• 正例

    // 用局部变量存储修改中的内容，在循环结束后一次性写入。
    function innerHTMLLoop2() {
   
        var content = '';
        for (var count = 0; count < 15000; count++) {
   
            content += 'a';
        }
        document.getElementById('here').innerHTML += content;
    }

3.2.1 innerHTML对比DOM方法

修改页面区域的最佳方案？
innerHTML：非标准但支持良好；
DOM API：类似document.createElement()原生DOM方法。
答案：性能相差无几。除开WebKit内核（Chrome和Safari）之外的所有浏览器中，innerHTML会更快一些。

性能优化：如果对一个性能有着苛刻要求的操作中更新一大段HTML，推荐使用innerHTML，因为它在绝大部分浏览器中运行的更快。但对于大多数日常操作而言，没有太大的区别。

3.2.2 节点克隆

使用DOM方法更新页面内容的另一个途径是克隆已有元素，而不是创建新元素。即使用element.cloneNode()替代document.createElement()。

性能优化：大多数浏览器中，节点克隆都更有效率，但效果也不是特别明显。

3.2.3 HTML集合

HTML集合是包含了DOM节点引用的类数组对象。HTML集以一种“假定实时态”实时存在，这意味着当底层文档对象更新时，它也会自动更新。

注意：此集合是类似数组的列表，并非数组。但提供了length属性，以及以数字索引方式访问列表中的元素。

    // 以下方法返回的就是HTML集合。
    document.getElementsByName()
    document.getElementsByClassName()
    document.getElementsByTagName_r()
    document.images // 页面中所有的<img>元素
    document.links // 所有的<a>元素
    document.forms // 所有表单
    document.forms[0].elements // 页面中第一个表单的所有字段

低效根源：事实上，HTML集合一直与文档保持着连接，每次你需要最新信息时，都会重复执行查询的过程，哪怕是只获取集合中的元素个数（length）也是如此。

3.2.3.1 昂贵的集合

• 描述

将集合复制到数组中，进行操作数组来代替操作集合。

• 原因

读取集合中的length比读取普通数组中的length要慢很多。

• 反例

    var coll = document