默认情况下,在大部分浏览器中,Javascript代码文件的加载和执行都是以阻塞方式进行的,并且浏览器是以单线程运行Javascript代码和UI更新的,浏览器加载和运行Javascript代码时会暂停页面上的其他响应。
1.加快Javascript文件的加载速度
浏览器不会像下载CSS文件那样并行下载Javascript。默认情况下,浏览器在解析页面时遇到Javascript引用就会停止后续的Html代码解析,直到Javascript加载并运行完毕,而此时,页面一直处于空白状态。
尽管新版本浏览器可以并行下载Js代码文件,或者通过在加载Js代码文件时同时下载页面中的资源来提高性能,但是其阻塞的特性并没有改变。
从代码文件的角度,加快Js加载速度最有效的办法就是减少初始化加载文件的体积和加载的速度。
所以,方法有:
- 压缩和合并代码文件
- 延迟加载和执行
- 异步加载和执行
2.良好编码习惯,提高代码运行速度
- 少用
for-in
循环 - 慎用
eval
- 正确使用数组,使数组保存类型单一的数据,而在其他情况下使用对象
- 正确的内存回收
- 尽量不使用全局变量,因为全局变量在页面的整个生命周期中不会被回收。
- 确保解除已经不需要的事件监听,如那些要移除的DOM对象上绑定的事件。
- 不要在闭包中返回外部不需要的对象。
3.使用高性能的变量或属性值读取方式
作用域就是变量或函数的作用范围,Javascript中最大的作用域是全局作用域。Javascript中不存在块作用域,即一个大括号包含的区域不会成为一个单独的作用域,最小的作用是函数。函数中局部变量的访问最快,因为它是在作用域链的最里层。
所以,最佳实践是:尽量减少变量访问时在作用域链上查找的层级,最好时将变量定义为本作用域的局部变量,尽量不要定义全局变量。如果需要频繁的访问一个外作用于的变量,最好是用一个局部变量保存外部变量,把多次的外部作用域变量访问变为一次外部作用域变量的访问。
//最佳实践
function update(){
var doc = document;
var imgs = doc.getElementsByTagName("img");
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].title = doc.title + " - image -" +i;
}
}