优化jQuery实践：25步提升速度与效率

186 浏览量更新于2024-08-29 收藏 139KB PDF 举报

"本文档提供了25个实用建议，帮助开发者提升使用jQuery的效率，优化网页性能。首先，建议从Google Code而非本地服务器加载jQuery，利用Google的内容分发网络(CDN)加速库的加载，并利用浏览器缓存减少重复请求。这种方法可以节省服务器带宽，提高用户体验。其次，推荐使用jQuery的备忘单或参考资料，如Graeme Scott Olson和ColorCharge.com提供的详细文档，便于快速查阅函数用法，提高开发效率。合并和压缩脚本是另一个关键点，特别是当项目包含多个jQuery插件时。由于浏览器并发加载限制，一次性加载过多脚本会降低页面加载速度。通过整合和压缩脚本，可以显著减小文件大小，提升加载速度。Packer by Dean Edwards是一个值得推荐的工具，用于合并和压缩JavaScript代码。利用Firebug这样的浏览器扩展，如其强大的控制台日志功能，能有效帮助开发者调试JavaScript代码，发现问题并优化。 Firebug不仅可以检查HTTP传输、解决CSS问题，还能提供丰富的日志功能，是前端开发人员的必备神器。此外，文中还可能涉及到其他知识点，如熟练掌握CSS选择器、DOM操作、HTML代码的优化、jQuery事件处理、动画效果、文档操作、特定插件如panel、ue、ul的使用，以及变量管理等。通过实施这些建议，开发者可以在不影响用户体验的前提下，实现jQuery应用的高效运行，从而提升整个网站的性能和可用性。"

改善你的改善你的jQuery的的25个步骤个步骤千倍级效率提升千倍级效率提升

1. 从从Google Code加载加载jQuery

Google Code上已经托管了多种JavaScript类库，从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了节省了

你服务器上的带宽你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在

Google Code上的站点后它会被缓存下来。缓存下来。

这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本，而这些很容易做到,引入:

2. 使用备忘单使用备忘单

不仅仅是jQuery，很多编程语言也有类似的备忘单，在一张A4的纸上就可以很容易看到每个函数的用法。幸运的是已经有好

心的家伙把jQuery的备忘单做得很完善了：

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

http://colorcharge.com/jquery/

3. 整合所有的脚本并缩减它们整合所有的脚本并缩减它们

不错，这是JavaScript的一个常见技巧。可是一个使用了jQuery的大项目可能使用了很多相关的jQuery插件(本站就使用了

easing,localScroll,lightbox,preload)，因此它通常是适用的。浏览器不能同时加载JS脚本（大多数情况下），这意味着如果你

同一时间加载很多脚本的话，将减缓页面的加载速度。因此，如果每个页面都要加载这些脚本，你应该考虑在发布之前将这些

脚本整合成一个稍大的JS脚本。一些jQuery插件已经最小化了，但是你应该打包你的JS脚本和那些没有缩减过的脚本，这仅

需要几秒的时间就可以完成。

就个人而言，我推荐Packer by Dean Edwards

4. 使用使用Firebug出色的控制台日志工具出色的控制台日志工具

如果你还没有安装Firebug，那么你真的应该把它装上。除了许多其它有用的特性（比如允许你检查http传输情况、发现你的

CSS问题），它也有极好的日志命令，允许你很容易调试JS脚本。

这里有Firebug所有特性的详细说明。

我最喜欢的特性有”console.info“，通过它你可以把信息和变量值输出到控制台上，而不必使用alert；”console.time”则允许你

在一组代码上设置定时器，从而计算出JS脚本运行所花费的时间。这一切都很容易做到:

代码如下:

console.time(‘create list’);

for (i = 0; i < 1000; i++) {

var myList = $(‘.myList’);

myList.append(‘This is list item ‘ + i);

}

console.timeEnd(‘create list’);

5. 通过缓存最小化选择操作通过缓存最小化选择操作

jQuery的选择器棒极了。它们可以在页面上以极其简单的方法找到任何元素，但是在内部它们必须通过大量的步骤才可以实现

选择操作，如果你错误的使用它们，那么你可能发现一切都变得相当慢。

如果你一次又一次的选择相同元素(例如在一个循环中)，那么你可以一次选择出它并放入内存中，同时你可以在核心内容里操

作它。看下面的例子，这里我们利用循环往UL里添加条目：

代码如下:

for (i = 0; i < 1000; i++) {

var myList = $(‘.myList’);

myList.append(‘This is list item ‘ + i);

}

这在我的PC上Firefox 3花费了1066毫秒时间（可以设想一下在IE6中的情况！），对JavaScript而言这个操作相当慢。现在让

我们来看看下面的代码，这里我们仅使用了一次选择操作：

代码如下:

var myList = $(‘.myList’);

for (i = 0; i < 1000; i++) {

myList.append(‘This is list item ‘ + i);

}

仅仅用了224毫秒，通过移动一行代码就快了将近4倍。

下载后可阅读完整内容，剩余7页未读，立即下载

weixin_38734361

粉丝: 6

优化jQuery实践：25步提升速度与效率

改善你的jQuery的25个步骤

jQuery工作流程步骤进度插件

提升jQuery性能的25个关键步骤

Jquery优化效率 提升性能解决方案

jquery步骤进度条

Jquery 步骤实例

掌握jQuery库3.4.1，提升前端开发效率

jQuery入门：提升JavaScript编程效率与兼容性的轻量级库

jquery-steps：轻量级jQuery步骤向导插件特性与安装指南

jQuery：从入门到精通——提升JavaScript开发效率的轻量级库

最新资源

Jquery优化效率提升性能解决方案