javascript提高页面性能-蒲公英云

javascript提高页面性能

在一些移动设备或者在HybridApp中，有时候设备的javascript效率并不高，导致页面卡顿，体验下降。因此需要尽量优化javascript的执行效率。以下是一些搜集的经验。
另CSS也可以起到提高性能的作用。

使用最新版本的库

精简脚本

压缩自定义脚本
uglify等工具，去掉空行。减小js文件体积。
引入min脚本
如

尽量减少使用$.each()

可以改用

for (var i=0; i<array.length; i++) {
        array[i] = 0;
    }

DOM操作

尽量使用id，而不是class搜索。

多次使用的DOM元素要缓存起来。

var item = $(‘#item’);

item.css ('color', '#123456');
item.html ('hello');
item.css ('background-color', '#ffffff');

尽量少的DOM写入操作

//这样操作了1000次

for (var i=0; i<1000; i++) {
    var list = '<li>'+i+'</li>';
    $('#list').append(list);
}
//这样比较快，只操作了一次
for (var i=0; i<1000; i++) {
    list += '<li>'+i+'</li>';
}
$('#list').html (list);

函数执行

return flase

放置函数向上冒泡。。。

//这样比较慢
    $('#item').click (function () { 
        // stuff here
    });
    //这样效率高
    $('#item').click (function () { 
        // stuff here
        return false;
    });

利用CSS调用硬件加速

比如调用CSS3 的3D 接口。

<style> .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } <style>