javascript提高页面性能

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

使用最新版本的库

精简脚本

  • 压缩自定义脚本
    uglify等工具,去掉空行。减小js文件体积。

  • 引入min脚本


<script src = "jquery.min.js"></script>

尽量减少使用$.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> 

你可能感兴趣的:(JavaScript,css,APP,移动设备,hybrid)