javascript提高页面性能

谁践踏了优雅 2022-08-03 13:53 194阅读 0赞

在一些移动设备或者在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 接口。