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


Posted in Javascript onOctober 31, 2009

尤其是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 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效果略逊且不太流行。

Javascript 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
js实现炫酷光感效果
Sep 05 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
JavaScript Sort 表格排序
Oct 31 #Javascript
DOM 脚本编程中的兄弟节点
Oct 31 #Javascript
javascript GUID生成器实现代码
Oct 31 #Javascript
json 实例详细说明教程
Oct 31 #Javascript
json 入门基础教程 推荐
Oct 31 #Javascript
jquery text()要注意啦
Oct 30 #Javascript
CCPry JS类库 代码
Oct 30 #Javascript
You might like
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
canvas雪花效果核心代码分享
2017/02/19 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python支付宝支付示例详解
2019/08/22 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
AJAX的全称是什么
2012/11/06 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
高中体育教学反思
2014/01/24 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
飞屋环游记观后感
2015/06/08 职场文书
好人好事新闻稿
2015/07/17 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏