js性能优化 如何更快速加载你的JavaScript页面


Posted in Javascript onMarch 17, 2012

确保代码尽量简洁

不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。

尽量减少DOM访问

使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢。下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来。有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记。这是改用HTML5、舍弃那些原来的XHTML和HTML4的一个充分理由。你可以查看DOM元素的数量,只要在Firebug插件的控制台中输入:document.getElementsByTagName('*').length。

压缩代码

要提供经过压缩的JavaScript页面,最有效的办法就是先用JavaScript压缩工具对你的代码压缩一下,这种压缩工具可以压缩变量和参数名称,然后提供因而获得的代码,使用了gzip压缩。

是的,我没有压缩我的main.js,但你要检查有没有未经压缩的任何jQuery插件,别忘了压缩。下面我列出了压缩方面的几个方案。

◆ YUI压缩工具(jQuery开发团队就使用它),初学者指南

(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第二指南 (http://vilimpoc.org/research/js-speedup/)和官方网站(http://developer.yahoo.com/yui/compressor/)。

◆ Dean Edwards Packer(http://dean.edwards.name/packer/)

◆ JSMin(http://crockford.com/JavaScript/jsmin)

  GZip压缩:其背后的想法是,缩短在浏览器和服务器之间传送数据的时间。缩短时间后,你得到标题是Accept-Encoding: gzip,deflate的一个文件。不过这种压缩方法有一些缺点。它在服务器端和客户端都要占用处理器资源(以便压缩和解压缩),还要占用磁盘空间。

避免eval():虽然有时eval()会在时间方面带来一些效率,但使用它绝对是错误的做法。eval()导致你的代码看起来更脏,而且会逃过大多数压缩工具的压缩。

加快JavaScript装入速度的工具:Lab.js

有许多出色的工具可以加快JavaScript装入的速度。值得一提的一款工具是Lab.js。

借助LAB.js(装入和阻止JavaScript),你就可以并行装入JavaScript文件,加快总的装入过程。此外,你还可以为需要装入的脚本设置某个顺序,那样就能确保依赖关系的完整性。此外,开发者声称其网站上的速度提升了2倍。

使用适当的CDN

现在许多网页使用内容分发网络(CDN)。它可以改进你的缓存机制,因为每个人都可以使用它。它还能为你节省一些带宽。你很容易使用ping检测或使用Firebug调试那些服务器,以便搞清可以从哪些方面加快数据的速度。选择CDN时,要照顾到你网站那些访客的位置。记得尽可能使用公共存储库。

面向jQuery的几个CDN方案:

◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——谷歌Ajax,关于更多库的信息请参阅http://code.google.com/apis/libraries/devguide.html#Libraries。

◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——微软的CDN

•http://code.jquery.com/jquery-1.4.2.min.js——Edgecast (mt)。

网页末尾装入JavaScript

如果你关注用户,用户因互联网连接速度慢而没有离开你的网页,这是一个非常好的做法。易用性和用户放在首位,JavaScript放在末位。这也许很痛苦,但是你应该有所准备,有些用户会禁用JavaScript。可以在头部分放置需要装入的一些JavaScript,但是前提是它以异步方式装入。

异步装入跟踪代码

这一点非常重要。我们大多数人使用谷歌分析工具(Google Analytics)来获得统计数据。这很好。现在看一下你把你的跟踪代码放在哪里。是放在头部分?还是说它使用document.write?然后,如果你没有使用谷歌分析工具异步跟踪代码,那也只能怪你自己。

这就是谷歌分析工具异步跟踪代码的样子。我们必须承认,它使用DOM,而不是使用document.write,这可能更适合你。它可以在网页装入之前检测到其中一些事件,这非常重要。现在想一想这种情况,你的网页甚至还没有装入,所有用户都关闭了网页。已找到了解决页面浏览量错失的办法。

var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']); 
_gaq.push(['_trackPageview']); 
(function() { 
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})();

没有使用谷歌分析工具?这不是问题,今天的分析工具提供商大多允许你使用异步跟踪。

Ajax优化

Ajax请求对你网站的性能有重大影响。下面我介绍关于Ajax优化的几个要点。

缓存你的ajax

先看一下你的代码。你的ajax可以缓存吗?是的,它依赖数据,但是你的ajax请求大多应该可以缓存。在jQuery中,你的请求在默认情况下已被缓存,不包括script和jsonp数据类型。

针对Ajax请求使用GET

POST类型请求要发送两个TCP数据包(先发送标题,然后发送数据)。GET类型请求只需要发送一个数据包(这可能取决于你的cookie数量)。所以,当你的URL长度不到2K,你又想请求一些数据时,不妨使用GET。

使用ySlow

说到性能,ySlow既简单,又极其有效。它可以对你的网站进行评分,显示哪些方面需要改正,以及应关注哪些方面。

另外支一招:把你的JavaScript打包成PNG文件

设想一下:把你的JS和CSS添加到图片的末尾,然后用CSS来裁切,通过一次HTTP请求来获得应用程序中所需的所有信息。

我最近找到了这个方法。它基本上把你的JavaScript/css数据打包成PNG文件。之后,你可以拆包,只要使用画布API的getImageData()。此外,它非常高效。你可以在不缩小数据的情况下,多压缩35%左右。而且是无损压缩!我得指出,对比较庞大的脚本来说,在图片指向画布、读取像素的过程中,你会觉得有“一段”装入时间。
英文原文:http://www.1stwebdesigner.com/design/load-JavaScript-faster/

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
Ionic快速安装教程
Jun 03 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 #Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 #Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 #Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 #Javascript
jquery $.ajax相关用法分享
Mar 16 #Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 #Javascript
3款实用的在线JS代码工具(国外)
Mar 15 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python局部赋值的规则
2013/03/07 Python
使用python统计文件行数示例分享
2014/02/21 Python
Python生成随机密码的方法
2017/06/16 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python中安装easy_install的方法
2018/11/18 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Pytorch转tflite方式
2020/05/25 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
《乞巧》教学反思
2014/02/27 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
数学系毕业生求职信
2014/05/29 职场文书
应急管理培训方案
2014/06/12 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
python处理json数据文件
2022/04/11 Python