jQuery - 提高性能 / 代码

Question

我刚刚开始使用jQuery，一直在寻找如何提高代码速度/性能的资源。我想知道是否有任何技巧或资源可以帮助我。

谢谢,

Bev

- WebDevBev

Answer 1

我曾经收藏了几个关于这个主题的网站，希望它们能帮助你找到所需的内容。（主题从简单到高级）

jQuery 性能规则的主题包括：

1. 总是从#id进行下降
2. 在类之前使用标签
3. 缓存 jQuery 对象
4. 利用链接的强大功能
5. 使用子查询
6. 限制直接的 DOM 操作
7. 利用事件委托（也称为冒泡）
8. 消除查询浪费
9. 延迟到 $(window).load
10. 压缩你的 JS
11. 学习该库

jQuery 性能和优化技巧的主题包括：

1. 保持最新！您是否正在使用过时的方法和技术？
2. 上下文感知 jQuery 代码执行 - 是否正在加载不需要的代码？
3. jQuery 单元测试
4. 基准测试您的 jQuery 代码
5. 使用一个压缩的主 JS 文件尽可能减少下载时间。
6. 上下文与查找
7. 全部使用 window.load
8. 在使用 JavaScript 和 jQuery 之间取得平衡

jQuery 性能调整技巧 - Paul Irish的主题包括：

1. 针对 Sizzle 的“从右到左”的模型优化选择器
2. 使用 live() 而不是 click()
3. 在操作元素时将其从 DOM 中移除
4. 使用find()替代context
5. 使用HTML 5
6. 在样式15个或更多元素时才添加样式标签
7. 使用Google Page Speed测试选择器
8. 即使jQuery没有报错，也要使用对象检测
9. 使用直接函数而不是它们的便利版本
10. 学习较少为人知的方法

通过大数据集提高jQuery性能主题包括：

1. 使用JavaScript原生的for（）循环而不是jQuery的$.each()辅助函数。
2. 不要在循环中将元素附加到DOM中。
3. 如果您有许多要插入到DOM中的元素，请将它们包含在父元素中以获得更好的性能。
4. 不要使用字符串连接，而是使用数组的join（）方法来连接非常长的字符串。
5. 对于您的长列表循环和连接函数，请使用setTimeout（）函数。

希望这些足以让您开始您的jQuery性能之旅。

- Rion Williams

---

+1 很棒的帖子。此外，以教人钓鱼之名，这个链接可能会有所帮助：http://www.google.com/search?q=ways+jquery+performance - Kyle Wild

我认为使用.live()而不是.click()等的建议是很好的，但更好的建议是使用.delegate()。 - Pointy

第二个来源对我来说似乎非常不协调。2.你是否加载了不需要的代码？与“5.使用一个压缩的主JS文件将下载时间保持最短。”相比。还有“7.完全加载窗口。” - 你的用户可能会对此提出异议... - gblazex

事实上，像LabJS这样的花哨JavaScript加载器工具包的粉丝会争辩说，加载两个脚本比仅加载一个组合脚本要快一点。就个人而言，我不确定这是否值得麻烦，但Web客户端性能肯定是一个快速移动的目标。 - Pointy