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

近期主要研究前端优化方案，将网上各种前端优化技巧进行分类整理总结。

本次主要介绍一些好的编码习惯。

使用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即可。