Question

众所周知，与Chrome，Safari（Webkit）或Firefox（Mozilla）相比，Internet Explorer Javascript引擎在性能方面落后，特别是IE 8及更早版本。

在开发具有重要javascript功能的Web应用程序时，IE的性能远远低于其他应用程序。

是否有任何可以帮助改进您的javascript代码的做法，以便优秀表现者（非IE）和表现不佳者（IE）之间的差距不是那么大？

Answer 1

优化性能的一种常用方法是在for循环中缓存“max”值。

所以，假设你必须遍历一个名为sampleArray的数组。您可以优化以下声明：

var sampleArray = [3, 10, 12, 5, 9];

for(var i = 0; i < sampleArray.length; i++){
   var currentElement = sampleArray[i];
  // so something wit element
}

将其改为：

for(var i = 0, max = sampleArray.length; i < max; i++){
       var currentElement = sampleArray[i];
      // so something wit element
}

这表明所有浏览器都有相当大的性能提升。特别是，使用这种模式证明IE7的性能提高了190倍（来自High Performance Javascript）

Answer 2

另外两种常见的解决方案：

缓存经常使用的DOM节点，不要再次在同一个函数中重新计算它们。例如。而不是

$(id).parentNode.something();
$(id).parentNode.somethingOther();

使用

var e = $(id).parentNode;
e.something();
e.somethingOther();

从外部作用域缓存常用对象。例如。而不是

if (this.options.type == 'a') {
    // ...
} else if (this.options.type == 'b') {
    // ...
}

使用

var type = this.options.type;
if (type == 'a') {
    // ...
} else if (type == 'b') {
    // ...
}

这将对缩小前后的代码大小产生积极影响。

Answer 3

我认为合理的解决方案是Google Chrome Frame
这只允许在 IE 中使用 Chrome Frame ，不要在非IE 浏览器中使用它。

IE的JavaScript性能和开发工具：
Microsoft Support: Internet Explorer Performance Article - http://support.microsoft.com/kb/982891

Answer 4

一个。在旧版IE中提高性能的一种方法是使用RAW JavaScript来创建DOM元素而不是jQuery。

示例 -

(function () {
  var rosterContainer = document.getElementByID("roster");
  var memberContainer = document.createElement("div");

  $(memberContainer).addClass("one_fourth alpha hentry")
                    .attr("id", mName.replace(/\s+/g," "))
                    .appendTo($(rosterContainer));
})();

湾您还可以为IE浏览器重新设计用户体验（UX）。

示例 - 我的网站使用大量JS / jquery插件加载大背景并将其显示为带有alpha补间的幻灯片放映。但对于我的IE用户，我没有加载JS或插件或背景图像 - 我只是显示一个静态标题bg。

你可以使用像yepnope.js这样的加载器为IE加载优化的JS

℃。确保您的网站的UI完全无需JavaScript。这始终是一个好的开始。

Internet Explorer的Javascript优化

4 个答案: