提高网站性能之 如何对待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 sudoku 数独智力游戏生成代码
Mar 27 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
ztree+ajax实现文件树下载功能
May 18 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 smarty函数扩展
2010/03/15 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python中几种自动微分库解析
2019/08/29 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
小学生操行评语大全
2014/04/22 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
网络研修心得体会
2016/01/08 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
golang特有程序结构入门教程
2021/06/02 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android