为什么在渲染一个空的SVG元素时IE会冻结Layout？(Why does IE freeze on Layout when rendering an empty SVG element?)

我目前在IE 10和11中遇到了一个问题，浏览器选项卡在UI响应工具中时不时地悬挂在Layout上。我是一个团队的一部分，编写一个相当大的knockout.js网络应用程序，所以确定造成这个问题的确切条件非常困难。从我所知道的情况来看，当从页面中移除加载指示符HTML时执行Layout时，浏览器选项卡会挂起，并且一些div加上一个空的SVG标记将被附加到DOM中。

我已经能够确定空的SVG标签是罪魁祸首，但我不知道为什么 ，也不能从页面中删除该标签，这是我尝试创建的D＃数据可视化的重要元素。

以下是IE 11向我提供的美国响应报告。我放大了有问题的区域，正如你在图片中看到的，布局线程使CPU达到100％。

在进入代码示例之前，我的问题是：

为什么浏览器选项卡会因添加空的SVG元素而间歇性地冻结/挂起？

HTML会通过javascript附加到DOM中，尽可能减少我对减少浏览器中回流的研究：

var contentHTML = ""; contentHTML += '<div class="axis-title y-axis-title">' + renderString(bindingData.yAxis.title) + "</div>"; contentHTML += '<div class="' + CANVAS_CLASS + '"></div>'; contentHTML += '<svg class="x-axis"></svg>'; // The problematic element element.innerHTML = contentHTML;

这导致下面的HTML（注意：所有数据绑定的东西都是针对knockout.js绑定处理程序的，这会触发上面的JS）：

<div class="chart" data-bind=" barChart: { data: rowData, categoryTextKey: 'label', valueKey: 'keyOnObject', xAxis: { title: 'xAxisTitle', domain: [-1, 1] }, yAxis: { title: 'yAxisTitle' }, onClick: onLabelClick, formatValueText: formatPercentage } "></div> <div class="axis-title y-axis-title">Y Title</div> <div class="chart-canvas"></div> <svg xmlns="http://www.w3.org/2000/svg" class="x-axis" /> <div class="axis-title x-axis-title">X Title</div> </div>

最后，我还使用flexbox CSS规则来布局我的HTML。我不确定这是否会影响此问题，但以下是CSS有助于解决问题的情况：

.chart { .flexbox(); .flex-direction(column); height: 100%; width: 100%; .chart-label-click { cursor: pointer; } .chart-header, .axis-title, .x-axis { .flex-grow(0); .flex-shrink(0); } .chart-canvas { .flex-grow(1); .flex-shrink(1); overflow-x: hidden; overflow-y: auto; width: 100%; } .chart-canvas svg { display: block; width: 100%; } .axis-title { font-weight: bold; } .x-axis { .flexbox(); .flex-grow(0); .flex-basis(20px); margin-bottom: 5px; overflow: visible; width: 100%; } .x-axis line, .x-axis path { fill: none; stroke: #d1d1d1; stroke-width: 1px; shape-rendering: crispEdges; } }

感谢您的帮助。我不知道该如何解决这个问题，因为它在我们的应用程序的一部分中是间歇性的，我们的代码库非常庞大，无法找出其他文件中的代码的确切组合，这可能也是导致此问题的原因。

I am currently hitting an issue in IE 10 and 11 where the browser tab is hanging every now and then on Layout in the UI Responsiveness tool. I am part of a team writing a fairly large knockout.js web app, so nailing down the exact condition that is creating this issue has been extremely difficult. From what I can tell, the browser tab hangs when Layout is performed when the removal of loading indicator HTML is removed from the page and some divs plus an empty SVG tag is appended to the DOM in its place.

I have been able to nail down that the empty SVG tag is the culprit, but I do not know why and I cannot remove that tag from the page is it is an important element to a D# data visualization that I am trying to create.

Here is the US Responsiveness report that IE 11 has provided me. I have zoomed in on the problematic area, and as you can see in the picture, the Layout thread spikes the CPU to 100%.

Before I get into the code samples my question is:

Why would the browser tab intermittently freeze/hang from adding an empty SVG element to the page?

The HTML gets appended to the DOM via javascript in as minimal of a way as possible from my research on reducing reflow in the browser:

var contentHTML = ""; contentHTML += '<div class="axis-title y-axis-title">' + renderString(bindingData.yAxis.title) + "</div>"; contentHTML += '<div class="' + CANVAS_CLASS + '"></div>'; contentHTML += '<svg class="x-axis"></svg>'; // The problematic element element.innerHTML = contentHTML;

This results in the following HTML (note: all of the data-bind stuff is for knockout.js binding handlers, which triggers the JS above):

<div class="chart" data-bind=" barChart: { data: rowData, categoryTextKey: 'label', valueKey: 'keyOnObject', xAxis: { title: 'xAxisTitle', domain: [-1, 1] }, yAxis: { title: 'yAxisTitle' }, onClick: onLabelClick, formatValueText: formatPercentage } "></div> <div class="axis-title y-axis-title">Y Title</div> <div class="chart-canvas"></div> <svg xmlns="http://www.w3.org/2000/svg" class="x-axis" /> <div class="axis-title x-axis-title">X Title</div> </div>

Lastly, I also am using flexbox CSS rules to lay out my HTML. I am not sure if that is affecting this issue, but here is the CSS in case it helps:

.chart { .flexbox(); .flex-direction(column); height: 100%; width: 100%; .chart-label-click { cursor: pointer; } .chart-header, .axis-title, .x-axis { .flex-grow(0); .flex-shrink(0); } .chart-canvas { .flex-grow(1); .flex-shrink(1); overflow-x: hidden; overflow-y: auto; width: 100%; } .chart-canvas svg { display: block; width: 100%; } .axis-title { font-weight: bold; } .x-axis { .flexbox(); .flex-grow(0); .flex-basis(20px); margin-bottom: 5px; overflow: visible; width: 100%; } .x-axis line, .x-axis path { fill: none; stroke: #d1d1d1; stroke-width: 1px; shape-rendering: crispEdges; } }

Thank you for any help you may have. I am not sure how to nail this down is it is intermittent in one section of our app and our codebase is pretty big to figure out the exact combination of code in other files that may also be contributing to this issue.

最满意答案

所描述的问题似乎是这个错误： https : //connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg -a使用，被移除的，来自该DOM

在评论中描述了一种至少为我们工作的解决方法：您必须设置style="pointer-events: none;" 关于使用元素。或者干脆将此添加到您的CSS：

svg use { pointer-events:none; }

但请注意，这也会禁用在使用元素上触发的任何鼠标事件。

The described issue seems to be this bug: https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom

In the comments is a workaround described which at least worked for us: You have to set style="pointer-events: none;" on the use elements. Or simply add this to your css:

svg use { pointer-events:none; }

But be aware that this also disables any mouse events triggered on the use element.

更多推荐