您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息
三六零分类信息网 > 保山分类信息网,免费分类信息发布

如何优化jQuery性能?优化方法汇总

2024/5/28 20:47:59发布24次查看
如何优化jquery性能?下面本篇文章给大家介绍一些针对 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开始。
【推荐学习:jquery视频、web前端开发】
以上就是如何优化jquery性能?优化方法汇总的详细内容。
保山分类信息网,免费分类信息发布

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录