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