正文

Jquery hide() 和 show() 在谷歌浏览器中运行太慢

 2023-05-08  269

关键词：

【中文标题】Jquery hide() 和 show() 在谷歌浏览器中运行太慢【英文标题】：Jquery hide() and show() runs too slow in google chrome 【发布时间】：2011-06-17 23:22:32 【问题描述】：

我有一个无法在 chrome 中正确运行的 Web 应用程序。在 Firefox 中完美运行。我有一个包含大量列表项的页面，确切地说是 316 个。每个列表项都包含大量 HTML。我的问题是当我想隐藏或显示这些列表项时。

我在 jsFiddle 上有一个测试页面来显示我遇到的问题。我将 HTML 页面剥离为一个无序列表来保存所有 316 个列表项。我有两个按钮，单击时只需调用 jQuery 隐藏或显示。再次，这在 Firefox、Opera 甚至 IE 中运行得很快，在 Safari 中运行得相当好，但在 Google Chrome 中它可能需要 30 多秒，这会弹出对话框窗口，询问您是否要终止页面，因为脚本运行时间过长。

这里是 jsFiddle 的链接

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

感谢您的任何意见。嗯

【问题讨论】：

这很不寻常。 Chrome 在动态操作中速度较慢。您是否尝试过对其进行分析，看看它在哪些操作上很慢？确实很奇怪，如果您使用 Web Inspector 通过 CSS 隐藏它也需要很长时间，所以问题不在于 Javascript。可见性：隐藏速度很快，但我猜这并不能解决您的问题。 【参考方案1】：

看起来这与 jQuery 无关，只是 Chrome 隐藏具有大量子元素的父元素的问题。

这只是使用基本的javascript来隐藏文档准备好的元素：

document.getElementById('sortable-lines').style.display="none";

文档准备好后仍然需要很长时间。

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

为此打开了一个 Chrome 错误：http://code.google.com/p/chromium/issues/detail?id=71305

【讨论】：

你能在 Chrome 中提交一个关于这个的错误吗？ crbug.com/new 并让我知道您归档的#。我会用合适的团队提出来。性能应该更好。发生这种情况是不可接受的，它打破了 Chrome 中的三个“速度”之一您的 javascript 肯定证明它不是 jquery 问题。感谢您抽出宝贵时间查看此内容。【参考方案2】：

隐藏时，从 DOM 中移除元素比使用 hide() 更快。

var sortableLines = $('#sortable-lines');
$('#hide').click(function() 
    $('#timer').text("Hiding");        
    sortableLines.remove();
);

append() 回到 DOM 时仍然很慢。

一种可能的解决方法是在单击显示按钮时显示前 10 个左右的项目，然后 setInterval 逐步显示它们。

编辑：发现另一个黑客：

你必须将容器设置为overflow: hidden:

#linecontainer  overflow: hidden;

隐藏时，通过将margin-top 设置为一个很大的负数，将该元素移到最顶部。

$('#hide').click(function() 
    $('#timer').text("Hiding");
    sortableLines.css('margin-top', '-1000000px');
);

显示时，重置其margin-top。

$('#show').click(function() 
    $('#timer').text("Showing");
    sortableLines.css('margin-top', '0');
);

还有it shows and hides instantly。

【讨论】：

泰语 - 感谢您的努力。我最大的问题是为什么 chrome 的速度差异。但我肯定会探索设置 margin-top 属性。感谢margin-top hack，效果很好。在 chrome 中遇到了同样的问题补充一点，我有第二种情况，margin-top 不起作用，由于我的一些样式要求，它正在向上移动整个元素列表。但是，position:absolute 和 top:-10000px 是第二个选项该列表的容器必须有overflow: hidden，这样容器下面的所有其他元素都不会上升（在这种情况下，容器的行为就像 height: 0）。这些确实应该是两个独立的答案，因此每个答案都可以根据自己的优点进行投票。（如果它们都是很好的答案，那么答案作者也意味着更多的代表。）【参考方案3】：

感谢上面的回答，它工作得很好并且加快了进程。

但它并不总是有效 - 当我需要的元素位于列表顶部时效果很好。但是，如果我从列表中间挑选一些东西，它不会全部显示出来。

我相信我知道它为什么行为不端。

当一长串元素的值设置为隐藏/显示时，隐藏的元素将从流程中移除并按照移除顺序放置在页面底部。这使得移除元素的速度非常快。

然而，试图让它们再次可见是渲染的痛苦，因为 chrome 必须记住这些项目所属的顺序，并且似乎要重新计算相关的值。

与大多数其他浏览器不同，组件的位置不会丢失，因此不会浪费时间进行这种不必要的排序。上面的答案非常有效，因为这避免了 Chrome 的混乱问题。

【讨论】：

如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用

】如何在Jquery中将delay()与show()和hide()一起使用【英文标题】：HowcanIusedelay()withshow()andhide()inJquery【发布时间】：2011-05-2908:41:32【问题描述】：如何在Jquery中将delay()与show()和hide()一起使用？【问题讨论】：【参考方案1】：将持续... 查看详情

jquery show() 和 hide()

】jqueryshow()和hide()【英文标题】：jqueryshow()andhide()【发布时间】：2014-01-1218:02:06【问题描述】：我有一个div：<divclass="showHide">//content</div>还有一个按钮<buttonid="event"class="show"type="button">Showmorenews</button>cs 查看详情

.show() 和 .hide() 如何在 jquery 中工作 [重复]

】.show()和.hide()如何在jquery中工作[重复]【英文标题】：How.show()and.hide()workinjquery[duplicate]【发布时间】：2016-03-1008:48:14【问题描述】：我目前正在注册，我根据注册过程中的位置隐藏和显示不同的输入。目前，我有4个输入，我想... 查看详情

jquery隐藏和显示

jQuery隐藏和显示通过hide()和show()两个函数，jQuery支持对HTML元素的隐藏和显示：实例$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});查看示例hide()和show()都可以设置两个可选参数：speed和callback。语法：$(select 查看详情

jQuery 的 hide() 和 show() 的 JavaScript 等价物是啥？ [复制]

】jQuery的hide()和show()的JavaScript等价物是啥？[复制]【英文标题】：WhatistheJavaScriptequivalentofjQuery\'shide()andshow()?[duplicate]jQuery的hide()和show()的JavaScript等价物是什么？[复制]【发布时间】：2013-10-1321:19:23【问题描述】：我有一个简单... 查看详情

请教jquery的hide()和show()方法遇到的问题

jquery的hide(speed,callback)和show(speed,callback)方法，callback代表hide和show完成之后要执行的函数。但是在测试中发现是先执行的是callback的函数，之后才执行hide和show的方法，而且在hide的时候，加上参数后界面上明显有个跳动的动作，... 查看详情

jquery中的show()和hide()fadein()和fadeout()slidedown()和slideup用法

一、show和hide（隐藏显示） 1、show:最终状态是display:block; hide:最终状态是display:none; 2、语法：show（毫秒数，回调函数） 3、注意： ①当jq对象没有处于最终状态时，... 查看详情

为啥即使在 JQuery 中没有错误，我的 hide() 和 show() 也无法工作？ [复制]

】为啥即使在JQuery中没有错误，我的hide()和show()也无法工作？[复制]【英文标题】：Whyismyhide()andshow()notworkingevenwithouterrorinJQuery?[duplicate]为什么即使在JQuery中没有错误，我的hide()和show()也无法工作？[复制]【发布时间】：2021-06-2004... 查看详情

jquery的show/hide/toggle

阅读源码我们发现show,hide,toggle调用了showHide和isHidden这2个方法，所以我们要搞明白原理必须先看一下这2个方法。jQuery.fn.extend({.................show:function(){returnshowHide(this,true);},hide:function(){returnshowHide(this);},toggle:fun 查看详情

jquery基础知识

JQuery基础知识（1）对JQuery学习中遇到的小细节进行了整理和总结1、JQueryhide()和show()方法，分别对选中的元素进行隐藏和显示，语法：hide()和show分别有对应的参数，即hide(speed);隐藏的速度进行了限定。hide(1000)/show(1000);2、JQuerytogg... 查看详情

jquery学习之各种效果演示

1.隐藏与显示：hide()和show()，toggle()**隐藏：$("#hide").click(function(){　　$("p").hide();});**显示：$("#show").click(function(){　　#("p").show();});**切换：toggle()方法来切换hide()和show()方法$("button").click(function(){　　$( 查看详情

jquery学习之各种效果演示

jQuery show() 和 hide() 用于页面上的多个链接

】jQueryshow()和hide()用于页面上的多个链接【英文标题】：jQueryshow()andhide()formultiplelinksonpage【发布时间】：2016-07-1718:57:47【问题描述】：我正在编写一个网页，该网页将为隐藏在div中的相应问题提供三种形式-我在bootstrap的框架中... 查看详情

jquery的hide和show方法疑问

在网页中使用jquery的hide和show隐藏和显示元素时，当浏览器滚动条未处于最上面时，如图，执行hide或show方法，滚动条会自动回滚到最上面，从而造成页面突然向上跳动，造成不好的用户体验，请问如何解决？还是我的代码问题... 查看详情

jquery学习笔记2——jq效果

一、显示隐藏：可以使用show（）和hide（）方法来显示隐藏；$("#hide").click(function(){$("p").hide();})$("#show").click(function(){$("p").show();});　　可以使用toggle（）方法在show（）方法和hide（）方法中间切换；$("#tog").click(function(){$("p").toggle 查看详情

jQuery Show / Hide 在 Android 上不起作用

】jQueryShow/Hide在Android上不起作用【英文标题】：jQueryShow/Hidedoesn\'tworkonAndroid【发布时间】：2015-04-2018:52:06【问题描述】：我正在使用Phongap和Cordova的移动应用程序。使用OnsenUI。在一个页面中，我有一个ons-switch元素，用于显示和... 查看详情

.hide()、.show()、表格和 IE

...，标记是：东西....更多tds在这里现在，我正在使用一些jQuery来定位第一个表格行中的链接。单击该链接时，它会下拉一些数据，将其格式化为一组表格行，并将其附加到内部表格中。然后它将.sho 查看详情

jquery $('.hide-show')slice(0,12).show() 没有正确显示 div？

】jquery$(\\\'.hide-show\\\')slice(0,12).show()没有正确显示div？【英文标题】：jquery$(\'.hide-show\')slice(0,12).show()isnotshowingdivproperly?jquery$(\'.hide-show\')slice(0,12).show()没有正确显示div？【发布时间】：2021-11-2915:38:27【问题描述】：我在使用jquer 查看详情