提高网站性能之 如何对待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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
微信小程序实现页面左右滑动
Nov 16 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的memcache类分享(memcache队列)
2014/03/26 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
微信跳一跳python代码实现
2018/01/05 Python
Python使用wxPython实现计算器
2018/01/30 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Python如何对齐字符串
2020/07/30 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
服装机修工岗位职责
2013/12/26 职场文书
经典演讲稿范文
2013/12/30 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
在职证明书模板
2015/06/15 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
python周期任务调度工具Schedule使用详解
2021/11/23 Python