尤其是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 JS Minifier js压缩 JSMin 用于去除javascript 文件中所有不必要的字符、注释、空白。 cmd 使用方法：C:Documents and Settingsxugang>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效果略逊且不太流行。

　　推荐阅读

　　JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布

主要集合了我写js时一些常用的方法，并参考了prototype.js，jquery，google，百度，有啊等框架。 工具库已经在近几个效果中使用：JavaScript 多级联动浮动菜单 (第二版) JavaScript 浮动定位提示效果 JavaScript T>>>详细阅读

本文标题：提高网站性能之 如何对待JavaScript

地址：http://www.17bianji.com/kaifa2/JS/27811.html

 1/2    1