提高网站性能之 如何对待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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
详解JavaScript匿名函数和闭包
Jul 10 Javascript
Vue跨域请求问题解决方案过程解析
Aug 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编程语言开发动态WAP页面
2006/10/09 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
dojo 之基础篇
2007/03/24 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python实现微信自动回复功能
2018/04/11 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
自主招生自荐信格式
2013/12/03 职场文书
企业党员公开承诺书
2014/03/26 职场文书
购房协议书范本
2014/04/11 职场文书
超市收银员岗位职责
2015/04/07 职场文书
未中标通知书
2015/04/17 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
python创建字典及相关管理操作
2022/04/13 Python
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js