JS 网站性能优化笔记

前端  /  管理员 发布于 4年前   226

1. 除去JavaScript注释

除了注释，其他所有的 // or /* */ 注释都可以安全删除，因为它们对于最终使用者来说没有任何意义。

2. 除去JavaScript中的空白区域

如：x = x + 1;  可以简短得写成：x=x+1;  。

3. 进行代码优化

简单的方法如除去暗示的(implied)分号，某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码。一些简略的表达方式也会产生很好的优化，例如：

x=x+1;

可以写成：

x++;

不过得小心谨慎，不然代码很容易出错。

4. 重命名用户自定义的变量和函数

为了阅读方便，我们都知道在脚本中应该使用象sumTotal这样的变量而不是s。不过，考虑到下载的速度，sumTotal这个变量就显得冗长了。这个长度对于最终使用者来说没有意义，但对浏览器下载则是个负担。这个时候s就成为较好的选择了。先写好方便阅读的代码，然后再使用一些工具来处理以供交付。这种处理方式在这里再一次展示了其价值所在。将所有的名称都重新用一个或两个字母来命名将带来显著的改善。

5. 改写内建(built-in)对象

长长用户变量名会造成JavaScript代码过长，除此之外，内建(built-in)对象（比如Window、Document、Navigator等）也是原因之一。例如：

alert(window.navigator.appName);
alert(window.navigator.appVersion);
alert(window.navigator.userAgent);

可以改写成如下简短的代码：

w=window;n=w.navigator;a=alert;
a(n.appName);
a(n.appVersion);
a(n.userAgent);

如果这几个对象使用频繁的话，这样改写带来的好处就不言而喻了。事实上这些对象也的确经常被调用。然而我要提醒的是，如果Window或 Navigator对象仅仅被使用了一次的话，这样的替换反而使代码变得更长。这个技巧带来一个对象更名后脚本执行效率的问题：除了代码长短上带来的好处，这种改写更名实际上还会稍微的提高一点脚本执行的速度，因为这些对象将会被放在所有被调用对象中比较靠前的位置。JavaScript游戏开发程序员使用这个技巧已经有多年了，下载和执行速度都会有所提高，并且对本地浏览器的内存花销也会降低，可谓一石三鸟。

6. 重构

大多数情况下，上述代码应该被简化成：

其中g.js包含了所有供全局使用的函数。虽然把脚本文件分成三份对于维护来说是有道理的，但对于代码的传输则没有意义。单个的脚本下载要比三个分离的请求高效的多，并且这也同时简化了markup代码的长度。

7. 合并你的javascript文件

尽可能的减少HTTP的Request请求数。

8. 将脚本放到网页底部

脚本一般是用来于用户交互的。所以如果页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。

您可能感兴趣的文章:

• Web性能优化系列 10个提升JavaScript性能的技巧
• 整理AngularJS框架使用过程当中的一些性能优化要点
• javascript性能优化之事件委托实例详解
• nodejs的10个性能优化技巧
• JS性能优化笔记搜索整理
• js性能优化技巧
• web性能优化之javascript性能调优
• js性能优化 如何更快速加载你的JavaScript页面
• js 性能优化之算法和流程控制
• js 性能优化之快速响应的用户界面
• CSS 网站性能优化笔记