确保代码尽量简洁

  不要什么都依赖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

  "codetitle">复制代码 代码如下:
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/

标签:
js性能优化

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。