jquery优缺点,jquery的缺点

　　我一直在寻找jQuery性能优化的技巧，以使我臃肿的动态web应用程序变得更轻便。在查找了许多文章之后，我决定列出一些最佳和最常用的优化性能的建议。我还做了一个jQuery性能优化的简明样式表，可以打印出来或者设置为桌面背景。

　　一、选择器性能优化建议

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

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

　　2.在类前面使用标签

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

　　jQuery中的类选择器是最慢的，因为它遍历IE浏览器中的所有DOM节点。尽量避免使用类选择器。也不要用标签修改ID。下面的示例遍历所有div元素以查找id为“content”的节点：

　　举个例子。

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

　　从版本1.3开始，jQuery采用了Sizzle库，它在选择器引擎上的表现与以前的版本有很大不同。它用从左到右的模型替换了从右到左的模型。确保右边的选择器是特定的，而左边的选择器有更大的选择范围：

　　5.使用find()代替上下文搜索。

　　的。find()函数确实比较快。但是，如果一个页面有许多DOM节点，来回搜索可能会花费更多时间：

　　var divs=$(。testdiv ， # page body )；//2353在Firebug 3.6上

　　var divs=$(#pageBody )。查找(。testdiv’)；//2324上Firebug 3.6——最好的时候

　　var divs=$(#pageBody。testdiv’)；//2469在Firebug 3.6上

　　$(li.menu-item )。click(function () {alert(测试单击)；})。css(显示，块)。css(颜色，红色)

　　fadeTo(2，0.7)；

　　7.编写自己的选择器。

　　如果您经常在代码中使用选择器，请扩展$。jQuery的expr[:]对象并编写自己的选择器。在下面的例子中，我创建了一个abovethefold选择器来选择不可见的元素：

　　abovethefold: function(el) {

　　return $(el)。偏移量()。top $(窗口)。scrollTop() $(窗口)。height()；

　　var nonVisibleElements=$( div:above the fold )；//选择元素

　　9.当需要插入DOM时，所有元素都被封装到一个元素中。

　　直接DOM操作很慢。尽可能少地改变HTML结构。

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

　　虽然jQuery没有向用户抛出很多异常，但是开发者不应该依赖它。在确定一个对象是否存在之前，JQuery通常会执行很多无用的函数。因此，在对一个对象进行一系列引用之前，我们应该首先检查这个对象是否存在。

　　11.使用直接函数而不是等价函数。

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

　　12.缓存jQuery结果以备后用。

　　您经常会得到一个javasript应用程序对象3354。可以用app。要保存您经常选择的对象以备将来使用：

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

　　不要忘记使用。data()函数存储信息：

　　14.使用jQuery实用函数。

　　别忘了jQuery简单实用的效用函数。我最喜欢的是美元。isFunction()、$isArray()和$组成。每个()。

　　15.将“JS”类添加到HTML块中

　　加载jQuery时，首先在HTML中添加一个名为“JS”的类。

　　所以当JavaScript被启用时，你可以隐藏整个HTML内容，使用jQuery来达到你想要的效果(例如，当用户点击面板时，折叠一些面板或者展开它们)。不启用Javascript时，浏览器呈现所有内容，搜索引擎爬虫会勾掉所有内容。我以后会更多的使用这个技能。

　　了解更多信息。

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

　　16.延期到$(窗口)。负荷

　　有时候采用$(window)更快。load()而不是$(document)。ready()，因为后者是在下载完所有DOM元素之前执行的。你应该在使用它之前测试它。

　　17.使用事件委托

　　当一个容器中有许多节点，并且希望将一个事件绑定到所有节点时，委托非常适合这个应用程序场景。有了委托，我们只需要在父节点绑定事件，然后看哪个子节点(目标节点)触发了事件。当你有一个有很多数据的表，你想在td节点上设置事件，这就变得非常方便了。首先获取表，然后为所有td节点设置委托事件：

　　了解更多信息。

　　18.使用就绪事件的简写。

　　如果要压缩js插件，保存每一个字节，就要避免使用$(document)。在线阅读()

　　19.jQuery单元测试

　　测试JavaSript代码的最好方法是让人们来测试它。但是你可以使用一些自动化工具比如Selenium、Funcunit、QUit和QMock来测试你的代码(尤其是插件)。我想换个话题讨论这个话题，因为有太多的话要说。

　　20.标准化您的jQuery代码

　　经常标准化您的代码，看看哪个查询更慢，然后替换它。您可以使用Firebug控制台。您还可以使用jQuery的快捷函数来简化测试：

　　21.使用最新版本的jQuery。

　　最新的版本往往是最好的。更改版本后，不要忘记测试您的代码。有时它不是完全向后兼容的。

　　22.使用HMTL5

　　新的HTML5标准带来了更轻便的DOM结构。更轻的结构意味着使用jQuery需要更少的遍历和更好的加载性能。所以可能的话请用HTML5。

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

　　要给一些元素添加样式，最好的方法是使用jQuey的css()函数。但是，当向超过15个元素添加样式时，直接向DOM添加样式标签会更有效。这种方法可以避免在代码中使用硬代码。

　　24.避免加载冗余代码。

　　将Javascript代码放在不同的文件中是个好主意，只在需要的时候加载它们。这样你就不会加载不必要的代码和选择器。管理代码也很方便。

　　25.将其压缩到一个主JS文件中，以保持下载次数最少。

　　当您确定应该加载哪些文件时，将它们打包到一个文件中。一些开源工具可以自动帮你，比如Minify(集成了你的后端代码)或者在线工具比如JSCompressor、YUI Compressor或者狄恩爱德华兹JS packer可以帮你压缩文件。我最喜欢的是JSCompressor。

　　26.需要时使用原生Javasript。

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

　　27.从Google加载jQuery框架

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

　　script type= text/JavaScript src= https://Ajax . Google APIs . com/Ajax/libs/jquery/1 . 5 . 0/jquery . min . js /script

　　28.缓慢加载内容不仅可以提高加载速度，还可以提高SEO收益(为了速度和SEO收益而延迟加载内容)

　　使用Ajax加载你的网站，可以节省服务器端的加载时间。您可以从一个常见的侧边栏小部件开始。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。