高性能 JavaScript 读书笔记（二）

数据存取

字面量、本地变量、数组元素、对象成员

字面量只代表自身，不存储在特定的位置。JavaScript 中的字面量有：字符串、数字、布尔值、对象、数组、函数、正则表达式以及特殊的 null 和 undefined 值。

一般来说，访问本地变量和字面量的事件较少，访问数组元素和对象成员花费时间较多。

访问局部变量的时间比全局变量的时间少。

还有一点，从服务器获取的数据、数组的长度之类的变量最好用一个变量存储起来，这样再次访问的时候就相当于直接访问局部变量，否则计算会消耗部分性能。

浏览器中的 DOM

DOM 和 JavaScript 相当于两个岛屿，因此 ECMAScript 每次访问 DOM ,都需要耗费时间和精力。

因此想要提高性能，减少 ECMAScript 和 DOM 之间的交互也是知识点的一部分。

DOM 访问与修改

在不影响功能的情况下，尽可能减少对 DOM 的访问，能只访问一次决不访问多次。

innerHTML 对比 DOM 方法

最新研究表明，innerHTML 比 document.createElement() 方法快。

HTML 集合

昂贵的集合

document.getElementsByName()

document.getElementsByClassName()

document.getElementsByTagName()

document.images 页面中所有 img 元素

document.links 所有 a 元素

document.forms 所有表单元素

document.forms[0].elements 页面中第一个表单种的所有字段

以上方法和属性的返回值就是 HTML 集合对象，是一个类似数组的列表。他们并不是真正的数组，因为他们没有 push() 或者 slice() 之类的方法。

但他们提供了一个类似数组中的 length 属性，可以通过数字索引的方式访问列表种的元素。

***** 但实际上，这种方法非常昂贵。这样最意味着 javascript 和 dom 元素一直保持着连接。每次需要最新信息时，都会重复执行查询的过程。即使你只是想获取集合的长度，也会查询。因此，这种做法非常低效****

我们可以接收一个集合，将它放到数组中。

var coll = document.getElementsByTagName('div');

var ar = toArray(coll);

访问集合元素时使用局部变量

当遍历一个集合时，第一优化原则是把集合存储在局部变量中，并把 length 缓存在循环外部，然后，使用局部变量替代这些需要多此读取的元素。

function collectionNodeLocal(){

    var coll = document.getElementsByTagName('div'),
    len = coll.length,
    name = '',
    el = '',
    
    for(var count = 0; count < len; count ++){
        el = coll[count];
        name = el.nodeName;
        name = el.nodeType;
        name = el.tagName;
    }

    return name;
}

// 其实我感觉 这段 name 的代码好像有点错误，但是书上原文是这样子。意思表达的就是尽可能的化遍历量为常量，减少循环次数吧

获取 DOM 元素

新提供的 querySelectorAll() 比 getElementById() 和 getElementsByTagName() 更好控制。

例如如下代码：

var elements = document.querySelectorAll('#menu a');

elements 的值包含一个引用列表，指向位于 id = "menu" 的元素之中的所有 a 元素。

待续。