关于jquery:针对jQuery的优化方法有哪些

我始终在寻找无关 jQuery 性能优化方面的小窍门，能让我那臃肿的动静网页利用变得轻便些。找了很多文章后，我决定将最好最罕用的一些优化性能的倡议列出来
一、选择器性能优化倡议
1. 总是从 #id 选择器来继承
这是 jQuery 选择器的一条黄金法令。jQuery 抉择一个元素最快的办法就是用 ID 来抉择了。
2. 在 class 后面应用 tag
jQuery 中第二快的选择器就是 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 开始。