优化网站性能：JavaScript加载策略与代码精简指南

JavaScript加载阻塞与优化方案

特别是JavaScript文件，在浏览器下载此类资源时，通常会禁用并行下载机制，并且这一过程还会阻塞页面的渲染呈现。

JavaScript下载机制解析

当浏览器开始下载JavaScript脚本文件时，它不会并行启动其他资源的下载，而是等待该脚本完全下载完毕后，才会继续处理其他请求。这种串行加载方式对页面的整体加载性能造成了显著负面影响，因此需要采取相应的优化措施。

解决方案一：将JavaScript脚本直接内联嵌入到HTML页面中，也就是将脚本代码直接编写在HTML标签内部。

该方案的优势在于加载速度最快。对于大型网站的首页，合理地将部分JavaScript脚本直接内联在HTML标签中，可以有效提升首屏渲染效率。

然而，这种方式存在明显缺陷：JavaScript脚本无法被单独缓存，导致其他页面无法共享和重用该脚本资源。

解决方案二：将JavaScript脚本的引用链接放置在HTML文档标签的底部。

实施此方案的前提条件是：脚本中不能包含使用document.write()方法动态改写页面的代码。

解决方案三：使用延迟（Deferred）脚本。即在script标签中添加defer属性，以此声明该JS脚本不包含document.write()方法，允许浏览器异步加载。

该方案的局限性在于，在Firefox浏览器中使用延迟脚本后，JavaScript脚本仍然会阻塞页面呈现以及并行下载过程。

此外，在IE浏览器中，该方案的优化效果也不够明显。

总结而言，如果一个脚本能够应用延迟（Deferred）脚本技术，那么它必然可以移动到页面底部加载。

这意味着“解决方案三”的功能完全可以通过“解决方案二”来实现，后者是更通用的替代方案。

解决方案四：采用加载后下载机制。即在JavaScript脚本随页面加载完毕后，通过onload事件动态发起下载请求（此方法同样适用于CSS文件）。

该方案的优点在于：既不会阻塞HTML页面的呈现过程，又能实现JavaScript脚本的重用，因为脚本会被正常缓存在浏览器中。

其缺点在于：需要编写额外的JavaScript代码来实现动态加载功能，从而增加了程序的复杂度。

潜在问题：可能导致脚本被加载两次，一次是内联加载，另一次是外部动态加载。

可以通过在IFrame中嵌套一个页面并加载JavaScript脚本来解决上述重复加载问题。

参考示例：http://stevesouders.com/hpws/post-onload.php

解决方案五：动态内联。根据cookie中的指示器，利用代码判断是否将外部JS文件内联到页面中。

动态内联技术是对“加载后下载”方案的进一步完善，但同时也进一步增加了程序的复杂度。

需要注意的是，虽然JavaScript脚本推荐放置在页面底部，但CSS样式表则应当放置在页面的顶部，以确保样式优先加载。

JavaScript代码精简与压缩工具

JavaScript代码精简策略

精简（Minification）是指从代码中移除不必要的字符、注释和空白，以减小JavaScript代码的大小，从而改善JavaScript的下载长度和加载速度。

常用精简工具：JSMin

JSMin主要用于去除JavaScript文件中所有不必要的字符、注释和空白区域。

命令行使用方法：C:\Documents and Settings\xugang>jsmin <openWin.js> js_rerurn.js

操作步骤1：首先指定到jsmin.exe所在的文件夹目录。

操作步骤2：openWin.js为待处理的源文件。

操作步骤3：js_rerurn.js为生成的目标文件。

另一种精简工具：ShrinkSafe（原名：Dojo Compressor），下载地址：http://dojotoolkit.org/docs/shrinksafe

ShrinkSafe用于移除JavaScript文件中的空白，并通过替换方式缩短变量名以进一步优化代码体积。

命令行使用方法：java -jar shrinksafe.jar infile.js > outfile.js

参数说明：shrinksafe.jar为工具执行文件。

参数说明：infile.js为输入的源文件。

参数说明：outfile.js为输出的目标文件。

注意事项：在控制台运行时，必须保证shrinksafe.jar和js.jar位于同一个目录中，并且输入的JS源文件和输出的JS目标文件也会默认保存在同一个目录（通常为C盘根目录）。

建议：通常可以对JavaScript文件同时使用JSMin和ShrinkSafe这两个工具进行精简，以达到最佳压缩效果。

压缩组件配置

同时，不要忘记通过HTTP头部声明，对脚本、样式表和HTML文档进行压缩，以减少响应时间。

浏览器客户端发出的请求头：Accept-Encoding: gzip, deflate

Web服务器端的响应头：Content-Encoding: gzip

gzip是目前流行且理想的有效压缩方法，而deflate的效果略逊且使用较少。