优化jQuery性能方法汇总

如何优化 jQuery 性能？ 下面这篇文章将为大家介绍一些jQuery的优化方法，希望对大家有所帮助！

我一直在寻找 jQuery 性能优化技巧，以使我臃肿的动态 Web 应用程序更轻。 在找了很多文章之后，我决定列出一些优化性能的最佳和最常用的建议。

一、 Selector 性能优化建议

1.总是从#id选择器继承

这是 jQuery 选择器的黄金法则。 使用 jQuery 选择元素的最快方法是通过其 ID 选择它。

2.在课前使用标签

jQuery 中第二快的选择器是标签选择器（例如 $(‘head’) ），因为它直接来自原生 Javascript 方法 getElementByTagName()。 所以最好总是使用标签来修改类（并且不要忘记最近的ID）

jQuery 中的类选择器是最慢的，因为它遍历 IE 中的所有 DOM 节点。 尽量避免使用类选择器。 也不要使用标签来修改 ID。

3.使用子查询

缓存父对象以备将来使用

4. 优化选择器以配合 Sizzle 的“从右到左”模型

从 1.3 版本开始，jQuery 采用了 Sizzle 库，这与之前版本对选择器引擎的表示有很大不同。 它将“从右到左”模型替换为“从左到右”模型。

5. 使用 find() 代替上下文查找

find() 函数确实更快。 但是如果一个页面有很多 DOM 节点，来回搜索可能需要更多时间：

6. 利用强大的链式操作

使用 jQuery 链接比缓存选择器更有效

7. 编写你自己的选择器

如果您经常在代码中使用选择器，那么扩展 jQuery 的 $.expr[‘:’] 对象并编写您自己的选择器。

二、优化DOM操作的建议

8.缓存jQuery对象

缓存你经常使用的元素

9、当要进行DOM插入时，将所有元素封装成一个元素

这里的基本思想是在内存中构建你真正想要的东西，然后更新 DOM。 这不是 jQuery 的最佳实践，但对于有效的 JavaScript 操作来说是必须的。 直接 DOM 操作很慢 直接 DOM 操作很慢。 尽可能少地更改 HTML 结构。

10.虽然jQuery不会抛出异常，但开发者也应该检查对象

尽管 jQuery 不会向用户抛出很多异常，但开发人员也不应该依赖它。 jQuery 在判断一个对象是否存在之前，通常会执行一堆无用的函数。 所以在对一个对象进行一系列引用之前，首先应该检查该对象是否存在。

11. 使用直接函数，而不是它们的等价物

为了获得更好的性能，您应该使用直接函数，例如 .a j a x ( ) 而不是 .ajax() 而不是 .ajax() 而不是 .get()、.get()、.getJSON ()、.getJSON()、.post( )，因为后面几个会调用 $.ajax()。

12.缓存jQuery结果以备后用

你经常会得到一个 javasript 应用程序对象——你可以使用 App. 保存您经常选择的对象以供将来使用

13.使用jQuery的内部函数data()来存储状态

不要忘记使用 .data() 函数来存储信息

14.使用jQuery实用功能

不要忘记简单实用的 jQuery 实用功能。 我最喜欢的是 $.isFunction()、i s A r r a y ( ) 和 isArray() 以及 isArray() 和 .each()。

15. 在 HTML 块中添加一个“JS”类

加载jQuery时，首先在HTML类中添加一个名为“JS”的类$(‘HTML’).addClass(‘JS’); 如果用户启用了 JavaScript，您只能添加 CSS 样式。

三、优化事件性能的建议
16. 推迟到 (w i n d o w)。 加载

有时使用 (window).load 有时使用 (window).load 有时使用 (window).load() 比 $(document).ready() 更快，因为后者不会等待之前执行的所有 DOM 元素下载。 您应该在使用前对其进行测试。

17. 使用事件委托

当一个容器中有很多节点，并且想将一个事件绑定到所有节点时，委托非常适合这种应用场景。 使用委托，我们只需要在父节点上绑定事件，看看是哪个子节点（目标节点）触发了事件。 当您有一个包含大量数据的表并且您想在 td 节点上设置事件时，这将变得非常方便。

18. 使用 ready 事件的简写

如果你想压缩 js 插件并保存每个字节，你应该避免使用 $(document).onready()

四、 测试 jQuery
19. jQuery 单元测试

测试 JavaSript 代码的最佳方法是让人工对其进行测试。 但是您可以使用一些自动化工具，例如 Selenium 、 Funcunit 、 QUit 、 QMock 来测试您的代码（尤其是插件）。 我想在另一个话题中讨论这个话题，因为有很多话要说。

20.标准化你的jQuery代码

经常标准化你的代码，看看哪个查询更慢，然后替换它。 您可以使用 Firebug 控制台。 您还可以使用 jQuery 的快捷功能使测试更容易

五、其他常用的jQuery性能优化建议
21.使用最新版本的jQuery

最新版本通常是最好的。 不要忘记在更改版本后测试您的代码。 有时也不完全向后兼容。

22. 使用 HMTL5

新的 HTML5 标准带来的是更轻量级的 DOM 结构。 更轻的结构意味着更少的遍历和更好的使用 jQuery 的加载性能。 所以请尽可能使用 HTML5。

23.如果给超过15个元素添加样式，直接给DOM元素添加样式标签

设置一些元素样式的最佳方法是使用 jQuery 的 css() 函数。 但是，当为超过 15 个元素添加样式时，直接将样式标签添加到 DOM 会更有效。 这种方法避免了代码中的硬编码。

24.避免加载冗余代码

将 Javascript 代码放在单独的文件中并仅在需要时加载它们是个好主意。 这样您就不会加载不必要的代码和选择器。 也易于管理代码。

25. 压缩成一个主 JS 文件，以减少下载量

确定应加载哪些文件后，将它们打包到一个文件中。 这可以使用一些开源工具自动为您完成，例如 Minify（与您的后端代码集成）或 JSCompressor、YUI Compressor 或 Dean Edwards JS 打包器等在线工具可以为您压缩文件。 我最喜欢的是 JSCompressor 。

26. 需要时使用本机 Javasript

使用 jQuery 是一件很棒的事情，但不要忘记它也是一个 Javascript 框架。 因此，您还可以在必要时在 jQuery 代码中使用本机 Javascript 函数以获得更好的性能。

27. 从谷歌加载 jQuery 框架

当您的应用上线时，请从 Google CDN 加载 jQuery，因为用户可以从最近的地方获取代码。 这样可以减少服务器请求，并且当用户浏览另一个同样使用 Google CDN 的 jQuery 的站点时，浏览器会立即从缓存中拉取 jQuery 代码。

28、内容加载慢，不仅可以提高加载速度，还可以提高SEO优化。 使用 Ajax 加载您的网站，可以节省服务器端加载时间。 您可以从一个常见的侧边栏小部件开始。