仅当该小部件托管在某个页面上时，我才一直在以HTML / SVG javascript驱动的小部件中的IE(包括IE11在内的所有版本)上的不良性能上遇到很多麻烦。

确定减速的主要原因是重新绘制Paint / Render层和exhausting the information about these I could get out of IE Developer Tools之后，我尝试反复尝试一次关闭祖先类，直到性能得到提高；然后，在识别类时，一次关闭一个样式规则。

我的整个问题似乎都归结为在距离树数div的祖先上的一个overflow: hidden;规则。

它产生的差异是令人难以置信的:通过在树上添加overflow: hidden;，简单的用户交互(突出显示SVG路径，生成HTML文本标签，显示标签并将其相对于SVG路径和容器定位)最大程度地提高了处理器的性能，减少了UI帧速率为零，并在每次互动时冻结所有死点，持续时间在1,000到4,000毫秒之间。在祖先上没有overflow: hidden;的情况下，它会在数十毫秒内完成，并且帧速率永远不会降到一半以下(无论overflow: hidden;为何，非IE浏览器都是相同的)。

这是祖先上的配置文件和overflow: hidden;，分析了交互作用和交互作用，并过滤了绘制事件:

这是祖先上没有overflow: hidden;的配置文件，分析了交互作用和交互作用，并进行了过滤以绘制事件。唯一的变化是在DOM检查器中勾选或取消勾选overflow: hidden;样式旁边的复选框，并且按什么顺序进行测试都没有关系:

  <div class="responsive-grid">

  <!-- ...lots of nested divs that simply inherit styles, I can't change this aspect of the Drupal layout -->

    <div id="panel-5" class="col-12"> <!-- width: 100%; float: left -->
    <!-- this is the first element IE looks at for offsetWidth when doing the changes below -->

    <!-- ...a few more nested divs without layout-changing styles -->

      <div class="panel"> <!-- overflow: hidden; clear: both; border: 1px; -->
      <!-- this is the element where removing the overflow: hidden changes everything -->
      <!-- I'm not sure what clear:both is for here, since no siblings. Seems redundant -->

      <!-- ...a few more nested divs with no style rules, some contain <p>s <h2>s etc... -->

        <div class="container"> <!-- position: relative; -->
          <div class="sub-column col-8"> <!-- width: 66%; display: inline-block -->
            <div class="square"> <!-- width: 100%; padding-bottom: 100%; position: relative -->
              <svg viewbox="0 0 500 500" preserveAspectRatio="XMinYMin meet" ...>
              <!-- svg position: absolute; width:100%; height: 100% -->
                Many paths here

              <div class="label"> <!-- fixed width in pixels; position: absolute -->
                Some text here
              </div>
            </div>
          </div>
          <div class="sub-column col-4"> <!-- width: 33%; display: inline-block -->
             <div class="sidebar">
                Many interactive controls here

              <!-- .square, svg andd .sidebar contain the only elements that are updated -->
            </div>
          </div>
        </div>

        <!-- some more ordinary position: static text containers -->
      </div>
    </div>
  </div>

时，才会出现该问题。有了一个但没有另一个，问题就消失了。

这是overflow: hidden;而不是border-radius的示例。也许比上述速度慢一点，但是区别很小:

这是来自同一简化结构的overflow: hidden;和border-radius的示例:

最佳答案

经过大量测试之后，我想我开始了解这里发生的情况。不过，这纯粹是基于观察，因此，如果有人有一个答案，我仍然渴望有一个更权威的答案。

是什么原因造成的？

似乎只有在所有这些都成立的情况下才会发生:

if( isAnyIE() ) {
  $container.parentsUntil("body").filter(function(){

    var $this = $(this),
      overflow = $this.css('overflow');
    return ( overflow === 'hidden' && hasBorderRadius( $this ) );

  }).addClass( 'remove-border-radius' ); 
}

function hasBorderRadius( $element ){
  function getNum( style ){
    return parseFloat( $element.css( 'border-'+style+'-radius' ) ) || 0;
  }
  var number = 0;

  number += getNum( 'top-left' );
  number += getNum( 'bottom-left' );
  number += getNum( 'top-right' );
  number += getNum( 'bottom-right' );

  $element = null;

  return !!number;
}

function isAnyIE(){
  // isIE(): use conditional comments and classes, see https://stackoverflow.com/a/18615772/568458
  // isIE10: use user agent like navigator.appVersion.indexOf("MSIE 10") !== -1;
  // isIE11: use user agent like !!navigator.userAgent.match(/Trident.*rv[ :]*11\./);

  return isIE11() || isIE10() || isIE();
}

.remove-border-radius {
  border-radius: 0 0 0 0 !important;
  -ms-border-radius: 0 0 0 0 !important;
}

关于javascript - 如何溢出:隐藏；和容器上的border-radius会导致容器内 “Paint/Render Layer”的大量减速，仅在IE上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39490557/