jQuery的show/hide性能测试

canger 发布于2019-08-19 18:38 / 2010人阅读

摘要：原文地址这篇文章是各种方式的性能测试。但由于未能找问明原因，所以作者就自己去做了这个测试。主要原因在于方法必须先保存元素的属性，这样才能把元素恢复到原来的状态。根据源代码上的注释，这样做是为了防止浏览器在每个循环上进行重新渲染。

原文地址：http://www.php100.com/html/webkaifa/javascript/2012/0927/11164.html
这篇文章是jQuery各种show/hide方式的性能测试。作者之所以测试这个源于Robert Duffy在SanFrancisco举行的jQuery大会上的一句话：“.hide()和.show()的执行速度会比直接改变css慢”。但由于未能找RobertDuffy问明原因，所以作者就自己去做了这个测试。下面的翻译并不是全文翻译，只节选了一些重点。

用作测试的是一个含有100个div的HTML页面，div带有class和一些内容。为了排除掉寻找这些div所花费的时间，所以把选择器$("div")缓存起来了。用作测试的jQuery版本是1.4.2，所以测试结果也只是针对这个版本，在其他版本可能就不是这些结果了。
测试的jQuery方法分别是：

.toggle()
.show() 和 .hide()
.css({"display":"none"}) 和 .css({"display":"block"})
.addClass("hide") 和 .removeClass("hide")

改变

Special hide DIV

然后在javascript里：

1 $("#special_hide").attr("disabled, "true");

搞定！所有带有"special_hide"这个class的元素都显示出来了。要隐藏它们，你只需要……

1 $("#special_hide").attr("disabled", "false");

现在它们全部都隐藏了。总的javascript耗时在所有浏览器上都是0-1ms。你的javascript只是用来改变一个属性。当然，浏览器还是需要花费时间去重新渲染页面的，但是实际上你已经避免了javascript的处理时间。如果你调用了.toggle()，.hide()或者.css()这几个方法，那么这个方法就会失效。因为那几个方法会通过内联方式设置css样式，这些样式有更高的优先级。要重新使这个方法生效，只需调用.css("display", "")把内联的样式移除掉。这个方法同样需要花费你更多的精力，因为那需要去定义class，同时把这些class赋给页面上需要进行显示/隐藏的元素，但是如果你所要处理的元素数量是极其庞大的话，那么这也许是值得的。
简要回顾一下，下面是改变元素显示状态的方法，按照最快到最慢的次序排列：

禁用/启用样式表
.css("display", ""), .css("display", "none")
.addClass(), .removeClass()
.show(), .hide()
.toggle()

需要注意的是，在大多数的情况下，这些方法都足够的快了。当你要操作很大的jQuery集合时，那么.show() 和.hide()方法在IE下就会变得很慢了，这是你可能要用addClass() 或者 .removeClass()方法。禁用/启用样式表的方法只有在很极端的情况下才有必要用到

云服务器 GPU云服务器性能的测试系统的性能测试功能测试与性能测试的区别性能测试与功能测试的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79808.html

回味jQuery系列（2）-动画效果

摘要：参数代表回调函数。参数为变化样式的对象必传，速度可选，回调函数可选。这是，肯定会想到采用回调函数来解决。确实可以解决问题，但是当列队动画变多时，回调函数的可读性大大降低确实一个非常烦人的问题。提供了一个类似于回调函数的方法。 jQuery-动画效果浅析动画可以给网站的用户体验加分，让网页更加活泼。不过，什么东西都需要适量，简易快捷的动画会给网站加分不少。比如购物网站的个人中心按钮ho...

IamDLY 2019-08-20 10:33 评论0 收藏0
jQuery (二)

摘要：文件命名需要使用的库该库已经两年未更新了，不过依旧在回复中，对于库的检查，已经完全测试通过一个栗子，日期选择将为中的元素统统替换为日期选择组件使用jQuery处理事件事件处理一个栗子，单击p时背景变成灰色由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html hello world js // 单击...

asoren 2019-08-23 11:28 评论0 收藏0
写一个更好的 Javascript DOM 库

摘要：我们快速地看一下扩展原生的动画内置的微模板国际化的支持扩展有一个叫做事件的概念。内置的微模板字符串冗长而繁琐。比如这段与对应的微模板比较在中，任何接受的方法同样接受表达式。目前，jQuery是事实上的操作文档对象模型（DOM）的库。它可以与流行的客户端MV*框架结合使用，并且拥有大量的插件与大型的社区。开发者对于Javascript的兴趣与日俱增的同时，很多人开始好奇，原生的API是...

Cc_2011 2019-08-21 12:10 评论0 收藏0
解释一下为什么我很少jQuery

摘要：为什么有一个东西，叫，它是一个快速轻量级跨平台的框架。同时，它也是这个世界上最轻量级的框架没有之一它有多快如下我们在里引入比上面更快的方法是什么没有代码是的，就是没有代码，因为实在太强了，以至于所有的浏览器在年前内置了它。这里声明一下，这不是反jQuery的文章，jQuery作为一个js库给大家的项目开发带来很多便利，但有时候仔细想想，我们真的需要jQuery吗？一年前的lpisme...

happyhuangjinjin 2019-08-21 11:30 评论0 收藏0
对jQuery的简单整理

jQuery 是一个类库，提供强大的选择器，不用考虑兼容性问题，进行DOM操作，动画功能，以及Ajax jQuery 1点几版本兼容IE6~8 而2-3的版本不兼容原生对象与jQuery对象的转化原生——>jq：oDiv——>$(oDiv) jq——>原生: $div1——>$div.get(0) 文档就绪函数一般jq都写在文档就绪函数里 $(document).ready(fu...

I_Am 2019-08-21 17:54 评论0 收藏0