jQuery slideToggle缓慢并且在DOM树顶部没有响应

Question

I am using Jquery slideToggle to show/hide a DIV element. 我正在使用Jquery slideToggle显示/隐藏DIV元素。 When you click on a DIV element, it shows/hides the next DIV element. 单击DIV元素时，它显示/隐藏下一个DIV元素。

When I have large number of DIV elements in my code, slideToggle is very slow and not responsive at the top of DOM Tree. 当我的代码中包含大量DIV元素时，slideToggle非常慢，并且在DOM Tree的顶部没有响应。

What is the reason for it to be slow at the top of DOM tree ? 在DOM树顶部变慢的原因是什么？ How can it be faster ?. 怎么会更快？ Here is my sample code (This contains very few DIV elements, and it works well). 这是我的示例代码（其中包含很少的DIV元素，并且效果很好）。

Note: slideToggle is working very well on DIV elements at the bottom of DOM Tree. 注意： slideToggle在DOM树底部的DIV元素上效果很好。 Problem is with DIV elements at the top of DOM Tree. 问题在于DOM树顶部的DIV元素。

<html>

 <head>
  <title> Home page </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <script>
   $(document).ready(function() {
    $(".panel-heading").click( function() {
     $(this).next().slideToggle();
    });
   }); 
  </script>

 </head>

 <body>
  <div id="container">
   <div class="panel panel-default">
    <div class="panel-heading nodeHeading">Panel heading</div>
    <div class="panel-body" style="display:none;">Panel body</div>
   </div>
   <div class="panel panel-default">
    <div class="panel-heading nodeHeading">Panel heading</div>
    <div class="panel-body" style="display:none;">Panel body</div>
   </div>
   <div class="panel panel-default">
    <div class="panel-heading nodeHeading">Panel heading</div>
    <div class="panel-body" style="display:none;">Panel body</div>
   </div>
   <div class="panel panel-default">
    <div class="panel-heading nodeHeading">Panel heading</div>
    <div class="panel-body" style="display:none;">Panel body</div>
   </div>
  </div>
 </body>
</html>

Answer 1

A slideToggle function is causing reflow (please see definition/difference of reflow and repaint ), browser has to calculate the layout of the webpage and render it. 一个slideToggle功能造成回流（请参阅下面的定义/差异回流和重绘），浏览器必须计算网页的布局和渲染。

When you do slideToggle at the bottom of dom tree, browser only needs to re-calculate the layout of the very bottom part of the webpage since toggle does not affect upper side of your toggled element. 在dom树的底部进行slideToggle时，浏览器仅需要重新计算网页最底部的布局，因为切换不会影响切换元素的上侧。 Obviously the very bottom part of the webpage is small, thus it takes little time before it starts to toggle. 显然，网页的底部很小，因此开始切换所需的时间很少。

While if you do slideToggle at the top of dom tree, browser has to re-calculate the layout of almost the whole webpage, thus it takes more time before it starts to toggle. 如果您在dom树的顶部进行slideToggle ，则浏览器必须重新计算几乎整个网页的布局，因此开始切换需要花费更多时间。

Actually it seems no good solution to solve the problem if the there are too many elements, because the expensive operation reflow is unavoidable. 实际上，如果元素太多，似乎没有解决该问题的好方法，因为不可避免的是昂贵的操作回流。

Answer 2

Try make the duration of the slideToggle 'fast', like this : 尝试使slideToggle的持续时间“快速”，如下所示：

$(this).next().slideToggle('fast','swing');

Here's a JSFiddle for you. 这是给您的JSFiddle 。

jQuery slideToggle缓慢并且在DOM树顶部没有响应

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-07-26 19:30:32

解决方案2
0 2015-07-26 17:45:45

jQuery slideToggle缓慢并且在DOM树顶部没有响应

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-07-26 19:30:32

解决方案2 0 2015-07-26 17:45:45

解决方案1
1 已采纳 2015-07-26 19:30:32

解决方案2
0 2015-07-26 17:45:45