针对 jQuery 的优化方法有哪些

我一直在寻找有关 jQuery 性能优化方面的小窍门，能让我那臃肿的动态网页应用变得轻便些。找了很多文章后，我决定将最好最常用的一些优化性能的建议列出来

一、选择器性能优化建议

1.总是从 #id 选择器来继承这是 jQuery 选择器的一条黄金法则。jQuery 选择一个元素最快的方法就是用 ID 来选择了。

2.在 class 前面使用 tagjQuery 中第二快的选择器就是 tag 选择器（如 $(‘head’)），因为它和直接来自于原生的 Javascript 方法 getElementByTagName()。所以最好总是用 tag 来修饰 class(并且不要忘了就近的 ID)

jQuery 中 class 选择器是最慢的，因为在 IE 浏览器下它会遍历所有的 DOM 节点。前端培训尽量避免使用 class 选择器。也不要用 tag 来修饰 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(),. g e t J S O N ( ) , .getJSON(),.getJSON(),.post()，因为后面的几个将会调用 $.ajax()。

12.缓存 jQuery 结果，以备后来使用你经常会获得一个 javasript 应用对象——你可以用 App.来保存你经常选择的对象，以备将来使用

13.采用 jQuery 的内部函数 data()来存储状态不要忘了采用.data()函数来存储信息

14.使用 jQuery utility 函数不要忘了简单实用的 jQuery 的 utility 函数 。我最喜欢的是 $.isFunction(), i s A r r a y ( ) 和 isArray()和 isArray()和.each()。

15.为 HTML 块添加“JS”的 class 当 jQuery 载入之后，首先给 HTML 添加一个叫”JS”的 class$(‘HTML’).addClass(‘JS’);只有当用户启用 JavaScript 的时候，你才能添加 CSS 样式。

三、关于优化事件性能的建议

16.推迟到( w i n d o w ) . l o a d 有 时 候 采 用 (window).load 有时候采用(window).load 有时候采用(window).load()比 $(document).ready()更快，因为后者不等所有的 DOM 元素都下载完之前执行。你应该在使用它之前测试它。

17.使用 Event Delegation 当你在一个容器中有许多节点，北京前端培训你想对所有的节点都绑定一个事件，delegation 很适合这样的应用场景。使用 Delegation，我们仅需要在父级绑定事件，然后查看哪个子节点(目标节点)触发了事件。当你有一个很多数据的 table 的时候，你想对 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 元素添加 style 标签要给少数的元素加样式，最好的方法就是使用 jQuey 的 css()函数。然而更 15 个以上的较多的元素添加样式时，直接给 DOM 添加 style 标签更有效些。这个方法可以避免在代码中使用硬编码(hard code)。

24.避免载入多余的代码将 Javascript 代码放在不同的文件中是个好的方法，仅在需要的时候载入它们。这样你不会载入不必要的代码和选择器。也便于管理代码。

25.压缩成一个主 JS 文件，将下载次数保持到最少当你已经确定了哪些文件是应该被载入的，那么将它们打包成一个文件。用一些开源的工具可以自动帮你完成，如使用 Minify (和你的后端代码集成)或者使用 JSCompressor ， YUI Compressor 或 Dean Edwards JS packer 等在线工具可以为你压缩文件。我最喜欢的是 JSCompressor 。

26.需要的时候使用原生的 Javasript 使用 jQuery 是个很棒的事情，但是不要忘了它也是 Javascript 的一个框架。所以你可以在 jQuery 代码有必要的时候也使用原生的 Javascript 函数，这样能获得更好的性能。

27.从 Google 载入 jQuery 框架当你的应用正式上线的时候，请从 Google CDN 载入 jQuery，因为用户可以从最近的地方获取代码。这样你可以减少服务器请求，而用户如果浏览其他网站，而它也使用 Google CDN 的 jQuery 时，浏览器就会立即从缓存中调出 jQuery 代码。

28.缓慢载入内容不仅能提高载入速度，也能提高 SEO 优化，使用 Ajax 来载入你的网站吧，这样可以节约服务器端载入时间。你可以从一个常见的侧边栏 widget 开始。

作者：尚硅谷

链接：https://juejin.cn/post/7052901500011413511/

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。