为什么在此JavaScript执行中，IE8比IE9快

Question

标题我有非常不寻常的问题。我正在使用Web应用程序，该应用程序的视图在IE8中呈现得很快，并且在IE9中较慢。

Profiler说，最耗时的功能是：

function handleTree(request, rootTagName) {
  var text = request.responseText;
  var startIndex = text.indexOf("<" + rootTagName + ">");
  var endIndex = text.indexOf("</" + rootTagName + ">");
  var newHtml = text.substring(startIndex + rootTagName.length + 2, endIndex);
  var treeContainer = getCachedElement("tree");
  treeContainer.innerHTML = newHtml;
  AjaxRequestEnd();
}

我在调试器中检查了

treeContainer.innerHTML = newHtml;

执行停止一段时间。 treecontainer 是一个空的div 元素。插入的HTML非常大，所以我想这是因为构造了DOM树。

但是，在IE甚至调用此功能之前，它悬挂了几秒钟。正如我提到的，在IE8上，一切工作速度更快。有什么想法吗？

编辑：我知道我没有提供太详细的描述，但是在这种情况下，我没有任何想法。

Answer 1

它可能是您在分配innerHTML属性之前正在执行的字符串操作。正则表达可能会加快速度：

function handleTree(request, rootTagName) {
  var treeContainer = getCachedElement("tree");
  treeContainer.style.display = "none";
  treeContainer.innerHTML = request.responseText
    .replace(new RegExp("<" + rootTagName + ">(.+?)</" + rootTagName + ">"), "$1");
  treeContainer.style.display = "";
  AjaxRequestEnd();
}

如果这无济于事，当它解析HTML时，您可能会遇到IE9的性能问题。

其他堆栈溢出问题也可能值得一读：

不良性能，即使用文档fragment

treeContainer，如果可见并附加到文档上，则可能会有所不同。尝试将其显示样式设置为"无"，然后设置InnerHTML，然后将显示器设置回一个空字符串以查看是否有所不同。