javascript的一些最佳实践

一、缓存需要多次读取的 DOM元素,对象属性,数组值

var obj = { arr: [1, 2, 3] };
A:
for (var i = 0; i < obj.arr.length; i++) {
    document.getElementById("Grid" + obj.arr[i]).Condition = '';
    document.getElementById("Grid" + obj.arr[i]).DataBand();
}

B:
var arr = obj.arr,
    i = 0,
    len = arr.length,
    item = null;

for (; i < len; i++) {
    item = arr[i];
    var grid = document.getElementById("Grid" + item);
    grid.Condition = '';
    grid.DataBand();
}

二、尽量缩小DOM元素查询范围

有如下DOM结构
<body>
    <ul id="ul">
        <li>a</li>
        <li class='li'>b</li>
        <li>c</li>
    </ul>
    ……
</body>
使用$('#ul').find('.li')替代$('.li')
注:现代浏览器都实现了getElementByClassName,querySelector和querySelectorAll,class选择器的速度只比id选择器稍慢,但是针对低版本的IE浏览器,速度差距很大。

三、减少页面回流(reflow)

重绘(repaint):当一个元素只有外观发生改变,但不影响布局。主要为以下样式:visibility,outline,visibility, background-color。 
回流(reflow):当一个元素发生改变的时候,导致文档流中的其他元素变动。一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流。
有如下DOM结构
<body>
    <div>
        <p id="p1">1</p>
        <p>2</p>
        <p>3</p>
    </div>
    ……
</body>
修改p1的的高度,会导致 
1.p1的高度变化
2.p1后面的p元素定位变化
3.父容器高度变化
4.重复以上过程。

常见导致回流的操作:
1.添加删除可见DOM元素。
2.修改DOM元素的可见性,位置,大小,内容。
3.浏览器将 reflow 放进一个队列,达到一定程度或时限就进行操作,但是在读取以下属性时,会强制提交relow操作
[offset|scroll|client][Top|Left|Width|Height], getComputedStyle(),currentStyle(IE)

回流是无法避免的,但是可以尽量避免:
1.一次性添加元素,事先拼接好html代码,使用innterHTML插入或者使用DocumentFragment添加。
2.尽量通过className或者cssText一次性修改元素的样式,或者将元素删除/隐藏,处理完成之后再加回到文档中。
3.针对上面提到到Layout属性值,事先缓存,避免每次读取属性时造成浏览器的渲染。
4.设置元素的position为absolute或fixed,使元素从文档流中脱离,浏览器只需要渲染该元素 以及位于该元素下方的元素,动画方面尤其值得考虑。

四、使用事件委托替代事件绑定。

针对列表和表格的事件绑定,可以利用冒泡的原理,将事件绑定到父级上。
<ul id="ul">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
A:
$('#ul').find('li').click(function(){
    
});

B:
$('#ul').delegate('li','click',function(){
    
});

五、其他

1.使用原生js代码替代jquery

$checkeboxs.each(function () {
    var checked = $(this).prop('checked');
    var checked = this.checked;
});
了解原生js,才能更好的使用其他框架和库。
2.针对耗时js操作,使用setTimeout定时释放UI线程,防止浏览器假死
function processArray(items, process) {
    if (items && items.length){
        var todo = items.concat();
        (function () {
            var start = new Date();
            do {
                process(todo.shift());
            }
            while (todo.length && (new Date() - start < 100));
            if (todo.length) {
                setTimeout(arguments.callee, 25);
            }
        })();
    }
}
3.尽量避免全局变量
4.使用jslint/jshite 检查代码
5.参考书籍《高性能JavaScript》
posted @ 2014-10-14 14:59  YLWS  阅读(267)  评论(1编辑  收藏  举报