- 减少 http 请求
- 图片优化
- 使用 CDN
- 样式表和 js 文件的优化
- 使用无 cookie 域名
- 前端代码结构优化
在将 JavaScript 程序部署到服务器上之前应该进行优化,其中之一就是减小 JavaScript 程序所用文档,从而减少网络流量,这就要对文档中的一些无用内容进行删除,包括:
- 删除注释(版权及法律声明部分应保留),运行时不需要注释
- 删除制表符、空格和换行符,这些只是为了程序便于维护,但是与程序的执行无关
- 替换长的变量名为短的变量名
- 使用 0 和 1 替代 false 和 true ,对于 x!=true ,可以使用 !x 代替
- 使用 [] 代替 new Array() ,使用 {} 代替 new Object()
- 如果一次定义多个变量,尽量在一行内定义,例如:
var a,
b = 0,
c = '';
(d = []), (e = {});
优化文档的大小可以通过工具软件来实现,目前有很多这样的实用程序,例如 MicrosoftAjax Minifier 和 Yahoo YUI Compressor
,这两个工具也有在线版本,可以直接使用。使用搜索引擎搜索就能发现很多 JavaScript 程序压缩工具,可以多尝试,找到最优的压缩效果。
通过优化代码也可以提高运行效率,降低资源消耗,下面是几个优化代码的常识:
- 如果函数体内语句较多,应避免从一个循环中多次调用一个函数。将函数分割成较小的函数,然后在循环中包含小函数的内容,可使效果更佳
- 尽可能使用内建函数,内建函数一般是经过优化的,要比用户自定义的函数运行速度更快
- 在开始循环前将 Array.length 赋予变量,将变量作为条件使用,而不是使用 myArray.length 本身
- 使用反转循环来优化执行,这样可以节省一个变量。例如前面的循环可以这样写
- 注重优化循环及所有重复动作。解释引擎会花费许多时间来处理循环(如使用 setInterval() 函数的循环)
- 在局部变量够用时,不要使用类属性或全局变量
- 避免在循环体内声明变量,应该在循环体外声明变量,在循环体内初始化
- 使用 try...catch...finally 语句时,要在 finally 语句中释放占用的资源,否则在 catch 到错误后占用的资源不能释放
- 避免使用递归调用和嵌套循环,它们会严重影响性能,在不得不用的时候才使用
- 继承会增加方法调用的数量,而且会使用更多的内存,包括所需全部功能的类在运行时要比从超类继承某些功能的类更加有效。因此,用户可能需要在类的扩展性和代码有效性间做出一定的设计取舍
- 对于不需要立即运行的脚本,可以在 script 元素里面添加 defer 属性
- 避免使用 with 语句
- setTimeout() 和 setInterval() 函数可以使用一个函数名或一个字符串作为首个参数。如果传递一个字符串,引擎将使用函数构造器创建一个新函数,这在一些浏览器中会非常慢。
不推荐使用下面这种方式:
window.setInterval("someFunction()";, 5000);
而是直接使用下面的函数引用:
window.setInterval(someFunction, 5000);
也可以使用如下匿名函数作为首个参数:
window.setInterval(function () {
/_ 函数体_/;
}, 5000);
- 函数缓存,即将函数或方法赋给一个变量是一个非常好的编程习惯。
例如 jquery 经常使用 $(id) 来根据 ID 获取对元素的引用,就是利用了函数缓存,通过下面的一行代码来实现的:
var $ = document.getElementById;