如何停止IE计算祖先的offsetWidth时不必要的计算SVG元素宽度?(How to stop

2019-09-29 07:25发布

我有一个需要检查%宽度元素的当前实际像素宽度的小部件的功能。 在正常的浏览器,它工作正常,在IE浏览器(所有版本,包括IE11),这是正常的罚款; 但是当小部件被置于一个负责任的页面上有许多家长复杂的一个相当正常水平的div有的还要%的宽度,IE浏览器锁死,并采取半秒或者更简单地计算一个简单元素的宽度,然后开始重新渲染像疯了似的用CPU使用率超过100%长期(其他浏览器只需要几毫秒)。

我见过的宽度和高度IE计算是臭名昭著的许多基于%宽度打交道时速度缓慢,通常许多意见; 例如 :

浏览器天然offsetWidth ...被称为是在IE在一些场景中极为缓慢(例如具有大的表进行交互时)

从开发者工具用户界面的响应面板,我已经成功地追查到SVG内看似随机的单个元素。 当我展开绿色矩形一路,它95%+是在含有200+元素的SVG图只是一个不起眼元件:

不应该有任何需要IE看看SVG的内容,在所有-包含在一个SVG路径svg元素肯定对祖先的宽度或高度不能产生影响。 更糟的是,在此之后,它做了很多不必要的重新渲染,包括(我相信)每SVG元素,即使没有我做的甚至应该触及SVG。

我的HTML结构基本上是这个(重点主要布局元素和风格):

  <div class="responsive-grid">

  <!-- ...lots of nested divs, I have no control over these -->

    <div id="panel-5" class="col-12"> <!-- width: 100% float: left -->
    <!-- this is the element where IE begins its offsetWidth frenzy -->
      <div class="column-container"> <!-- position: absolute to fix column height -->
        <div class="sub-column"> <!-- 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% -->

              <!-- lots and lots of SVG paths -->

.square是我计算的宽度元件。

里面的SVG绝对定位,即使它是没有,SVG内的路径对SVG元素更不用说它的HTML父的宽度或高度没有霸菱,所以我不明白为什么IE浏览器上扫描坚持它们的宽度(然后,卡住和重新渲染),当它计算的父的宽度。

请问有什么可以阻止IE浏览器这样做呢? 究竟如何IE确定这样的计算和更新,以检查哪些元素?

文章来源: How to stop IE needlessly calculating SVG element widths when calculating an ancestor's offsetWidth?