加载
放到body底部
<body>
<script></script>
</body>
数据读取
- 访问局部变量 比 全局要快
//bad
let data = {};
(function(){
alert(data);
}())
// goods
let data = {};
(function(){
let l_data = data;
alert( l_data);
}())
- 频繁访问对象属性，请保存到变量中
// bad
if (doucment.querySdocument.querySelector('#root').offsetHeight > '100') {
doucment.querySdocument.querySelector('#root').style.height = '200px';
}
// good
let root = doucment.querySdocument.querySelector('#root');
if (root .offsetHeight > '100') {
root .style.height = '200px';
}
DOM操作
- 最小化DOM的操作次数
// bad
let root = doucment.querySdocument.querySelector('#root');
root.style.height = '100px';
root.style.width= '100px';
root.style.paddingTop= '100px';
// good
let root = doucment.querySdocument.querySelector('#root');
root.style.cssText = 'width:100px;height:100px;padding-top:100px';
// bad
let root = doucment.querySdocument.querySelector('#root');
for (let i=0;i<10;i++) {
root.innerHTML += i;
}
// good
let root = doucment.querySdocument.querySelector('#root');
let container= doucment.querySdocument.createElement('div');
for (let i=0;i<10;i++) {
container.innerHTML += i;
}
root.appendChild(container);
- 使用事件委托
// bad
let lis = document.querySelector('li');
for (let i=0,len=i.length; i<len; i++) {
lis[i].addEventListener('click',function(){ /* ... */ },false);
}
// good
let wrap = document.querySelector('ul');
ul.addEventListener('click',function(e){
let elem = e.target;
switch (elem.id) {
case 'nav':
// ...
break;
}
},false);
for 循环优化
1.保存length属性
// bad
for (let i=0; i<array.length; i++) {}
// good
for (let i=0,len=array.length; i<len; i++) {}
2.与顺序无关的
for (let i=array.length; i-- ;) { }
垃圾回收
- 没用的对象
// 进行回收
obj = null;
- 没用事件处理程序
// DOM0级
elem.onclick = null;
// DOM2级
elem.removeEventListener('click',toggle,false);
字面量代替构造函数
// bad
let obj = new Object();
let arr = new Array();
// good
let obj = {};
let arr = [];
网友评论