提高网站性能之 —— 如何对待JavaScript

在一个页面中，每一个外部JavaScript 及CSS文件都会导致一个额外的HTTP请求。所以，如何合理的合并JavaScript 文件及CSS文件也是前端工程师应该考虑的。

尤其是JavaScript 文件，在下载它时，并行下载实际上是被禁用的，并且还会阻塞页面的呈现！

 

关于JavaScript 的下载

在下载JavaScript 脚本文件时，浏览器不会并行启动其它下载，而是让JavaScript 脚本文件单独下载完毕后，再继续其它请求。这将对页面的整体性能是一个很大的问题，解决方案如下：

解决方案1：将JavaScript 脚本内联在页面中，即直接将JavaScript 脚本写在HTML标签中。

                         优点：速度最快。在大型网站的首页中，可以合理的将JavaScript 脚本的一部分直接内联在HTML标签中。

                         缺点：JavaScript 脚本不被单独缓存，其它页面不能共享该JavaScript 脚本（不能重用）。

解决方案2：将JavaScript 脚本标签的链接（link）放在HTML文件标签的底部。

                         要求：脚本中不包含document.write() 方法改写页面。

解决方案3：使用延迟(Defferred) 脚本。即在link标签中添加defer 属性表明JS脚本中不包含document.write() 方法。

                         缺陷：在Firefox 中使用延迟(Defferred ) 脚本后，JavaScript 脚本还是会阻塞呈现、阻塞并行下载。

                                        而在IE中，效果也不明显。

                         总结：如果一个脚本可以使用延迟(Defferred ) 脚本技术，那么它一定可以移到页面的底部！

                                        即“解决方案3”完全可以用“解决方案2”替代。

解决方案4：使用加载后下载。即JavaScript 脚本在页面加载完毕后，通过onload 事件动态下载。(CSS也通用 )

                         优点：既不阻塞HTML页面的呈现，又能实现JavaScript 脚本的重用（脚本将被缓存在浏览器中）。

                         缺点：产生额外的JavaScript 代码用于实现该功能，增加了程序复杂度。

                         问题：可能加载两次（内联一次，外部加载一次）。

                                       可以使用IFrame嵌套一个页面并加载JavaScript 脚本来解决。

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

解决方案5：动态内联。根据cookie做指示器，用代码进行判断，实现将外部JS内联到页面当中。

                           动态内联是对“加载后下载”的进一步完善。也再次增加了程序复杂度。

 

虽然JavaScript 脚本推荐放在页面底部，但CSS样式表则应该放在页面的顶部！

 

关于JavaScript 的精简

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

精简工具：JSMin    http://crockford.com/javascript/jsmin
JSMin 用于去除javascript 文件中所有不必要的字符、注释、空白。

cmd 使用方法：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 文件中的空白，同时还通过替换的方式缩短了变量名。

cmd 使用方法：java -jar shrinksafe.jar infile.js > outfile.js
     shrinksafe.jar是工具名
     infile.js为源文件
     outfile.js为目标文件

注意：在控制台运行时，要保证shrinksafe.jar和js.jar是在同一个目录，并且输入的JS源文件和输出的JS目标文件也会在同一个目录。（默认在C盘根目录）

一般可以对你的JavaScrip文件同时使用JSMin 和 ShrinkSafe 这两个工具进行精简。

 

压缩组件

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

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

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

gzip是目前流行和理想有效压缩方法，deflate效果略逊且不太流行。