JavaScript性能优化：提升页面加载速度的实战指南

JavaScript使用原则与DOM优化

避免过度依赖JavaScript。切勿编写冗余脚本，应将JS视为辅助美化的工具，仅在必要时使用，且必须确保其能切实改善用户体验。

最小化DOM访问次数。

虽然通过JavaScript访问DOM元素能提升代码可读性，但会显著降低执行速度。建议限制JS对网页布局的修饰，并缓存元素引用。若网站涉及大量DOM操作，应考虑简化HTML标记结构，这也是采用HTML5替代旧版XHTML或HTML4的理由之一。可通过Firebug控制台执行document.getElementsByTagName('*').length来统计DOM元素数量。

代码压缩与传输优化

实施代码压缩。

提供经过压缩的JavaScript文件是最有效的优化手段。建议使用压缩工具处理代码，该工具可压缩变量及参数名称，并结合GZip压缩技术输出最终代码。

即使main.js未压缩，也需检查所有jQuery插件是否经过压缩处理。以下列出几种压缩方案供参考。

YUI压缩工具（jQuery开发团队推荐使用），初学者指南。

(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第二指南 (http://vilimpoc.org/research/js-speedup/)和官方网站(http://developer.yahoo.com/yui/compressor/)。

Dean Edwards Packer (http://dean.edwards.name/packer/)。

JSMin (http://crockford.com/JavaScript/jsmin)。

GZip压缩旨在缩短浏览器与服务器间的数据传输时间。客户端需发送Accept-Encoding: gzip,deflate请求头。然而，该方法会消耗服务器和客户端的处理器资源（用于压缩和解压），并占用额外磁盘空间。

避免使用eval()。尽管eval()可能带来短暂的性能提升，但属于不良实践。它会使代码难以维护，且无法被大多数压缩工具处理。

加速加载工具与CDN策略

加速JavaScript加载的工具：Lab.js。

存在多种加速JS加载的优秀工具，其中Lab.js值得推荐。

利用LAB.js（Load And Block JavaScript）可实现JavaScript文件的并行加载，从而加速整体加载过程。同时，可指定脚本加载顺序以确保依赖关系完整。据开发者称，此方法可使网站速度提升两倍。

选用合适的CDN（内容分发网络）。

许多网站采用CDN以优化缓存机制并节省带宽。可通过ping检测或Firebug调试服务器，以确定加速数据的有效途径。选择CDN时需考虑访客地理位置，并优先使用公共存储库。

针对jQuery的几种CDN方案：

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——谷歌Ajax，更多信息见http://code.google.com/apis/libraries/devguide.html#Libraries。

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——微软CDN。

http://code.jquery.com/jquery-1.4.2.min.js——Edgecast (mt)。

页面加载位置与异步处理

将JavaScript置于网页底部加载。

若关注用户体验，尤其是针对网络较慢的用户，将JavaScript置于页面底部是良好实践。易用性和用户优先，JS置后。尽管部分用户可能禁用JS，但仍建议仅在异步加载时于头部放置必要脚本。

异步加载跟踪代码。

此点至关重要。多数网站使用Google Analytics获取统计数据。关键在于跟踪代码的位置：是置于头部还是使用document.write？若未采用异步方式加载Google Analytics，则需自行承担后果。

以下是Google Analytics异步跟踪代码的示例。它使用DOM而非document.write，更适合现代网页。该代码可在页面完全加载前检测事件，这对于防止因用户过早关闭页面而导致的浏览量统计丢失至关重要。

 
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})(); 

若未使用Google Analytics，问题不大。当前多数分析工具提供商均支持异步跟踪。

Ajax性能优化与高级技巧

Ajax优化。

Ajax请求对网站性能影响重大。以下介绍Ajax优化的几个关键点。

缓存Ajax请求。

检查代码，确认Ajax请求是否可缓存。虽然依赖数据，但大多数Ajax请求应支持缓存。在jQuery中，除script和jsonp数据类型外，请求默认已启用缓存。

Ajax请求使用GET方法。

POST请求需发送两个TCP数据包（先标题后数据），而GET请求仅需一个（取决于Cookie数量）。因此，当URL长度小于2K且需请求数据时，建议使用GET。

使用ySlow工具。

在性能优化方面，ySimple既简单又高效。它可对网站评分，指出需改进的方面及关注重点。

另一技巧：将JavaScript打包为PNG文件。

设想将JS和CSS数据附加至图片末尾，通过CSS裁剪，仅需一次HTTP请求即可获取应用所需所有信息。

此方法将JS/CSS数据打包为PNG文件，随后通过Canvas API的getImageData()进行解包。该方法高效且无损，可在不缩小数据的情况下额外压缩约35%。需注意，对于大型脚本，从图片指向Canvas并读取像素的过程可能产生一定的加载时间。英文原文：http://www.1stwebdesigner.com/design/load-JavaScript-faster/。