前端优化总结--编码习惯（一）

近期主要研究前端优化方案，将网上各种前端优化技巧进行分类整理总结。
本次主要介绍一些好的编码习惯。

• 使用DocumentFragement优化DOM
• 使用事件委托减少内存消耗
• 给数据建立索引减少运算压力

1.使用DocumentFragement优化DOM操作

先来看常见的错误示例

var data = [0,1,2,3,4,5]

var list = document.getElementById('list');
data.forEach(function(item) {  
    // 创建<li>元素  
    var li = document.createElement('li');  
    li.innerHTML = item;
    // 迅速将<li>元素注入父级<ul>中
    list.appendChild(li);
});  

功能上是完全正确的，但是如果意识到DOM操作会消耗很多资源的话，就会发现这样的不妥，6个节点进行了6次DOM操作，如果要提高性能的话减少DOM操作的次数就可以了。

var data = [0,1,2,3,4,5];

var list = document.createDocumentFragment();

data.forEach(function(item) {  
    // 创建<li>元素  
    var li = document.createElement('li');  
    li.innerHTML = item;
    // 将<li>元素添加到碎片中  
    list.appendChild(li);  
});  

// 最后将所有的列表对象通过DocumentFragment集中注入DOM  
document.getElementById('list').appendChild(list);

为DocumentFragment追加子元素，然后再将这个DocumentFragment加到父列表中，这一系列操作仅仅是一个DOM操作，因此它比起集中注入要快很多。

如果你不需要将列表对象当做节点来操作，更好的方法是用字符串构建HTML内容：

var data = [0,1,2,3,4,5];
var htmlStr = '';
data.forEach(function(item) {  
    // 构建包含HTML页面内容的字符串  
    htmlStr += '<li>' + item + '</li>';  
});  

// 通过innerHTML设定ul内容  
document.getElementById('list').innerHTML = htmlStr; 

当然还有更简单的方法，使用array原型中的join。
http://www.w3school.com.cn/jsref/jsref_join.asp

var data = [0,1,2,3,4,5];
var list = [];
data.forEach(function(item) {  
    list.push('<li>'+item+'</li>'); 
});  

// 通过innerHTML设定ul内容  
document.getElementById('list').innerHTML = list.join(' ');

这当中也只有一个DOM操作，并且比起DocumentFragment代码量更少。在任何情况下，这三种方法都比在每一次迭代中将元素注入DOM更高效。

2.使用事件委托

当需要给某一类节点绑定事件的时候，使用事件委托可以减少内存消耗

错误示例：

document.getElementsByTagName('LI').addEventListener('click',function(e){
    alert('click');
})

正确示例：

    document.getElementById('list').addEventListener('click',function(e){
    if(e.target.tagName === 'LI'){
        alert('click');
    }
})

假如li节点有1000个，错误示例中的做法实际上是在内存中注册了1000个监听事件。使用事件代理后只有一个监听事件。

3.给数组建立索引

常见错误示例

var data = [{username:'caohang',age:23},{username:'zhuliyuan',age:20},{username:'chenlifei',age:21}];

var getUser = function(username){
    //返回data中username与入参相同的user
    var searchResult = data.filter(function(user) {  
        return user.username == username;  
    });  
    return searchResult.length ? searchResult[0] : false;  
}
//每次get一个user的时候都遍历了一遍data
var caohang = getUser('caohang');
var zhuliyuan = getUser('zhuliyuan');
var chenlifei = getUser('chenlifei');

上面的这种处理方法简单易懂，但是低效，原因就是每次获取一个对象都要遍历整个数组。
下面是改进方法：

var data = [{username:'caohang',age:23},{username:'zhuliyuan',age:20},{username:'chenlifei',age:21}];
//用username给data建立索引
var userStore = {};
data.forEach(function(item){
    userStore[item.username] = item;
})

var caohang = userStore.caohang;
var zhuliyuan = userStore.zhuliyuan;
var chenlifei = userStore.chenlifei;

改进方法中，遍历一次data数组，将数组中每个对象的username提取出来，作为索引值存入userStore中，这样以后需要读取某一个对象时，只需要使用 userStore.username即可。