Internet Explorer 的 Javascript 优化

Posted 2023-02-21

【中文标题】Internet Explorer 的 Javascript 优化

【英文标题】：Javascript optimizations for Internet Explorer

【发布时间】：2012-02-09 09:06:21

【问题描述】：

众所周知，与 Chrome、Safari (Webkit) 或 Firefox (Mozilla) 相比，Internet Explorer javascript 引擎在性能方面远远落后，尤其是 IE 8 和更早版本。

在开发具有重要 javascript 功能的 Web 应用程序时，IE 的性能比其他应用程序差得多。

是否有任何做法可以帮助改进您的 javascript 代码，从而使表现良好的人（非 IE）和表现不佳的人 (IE) 之间的差距不那么大？

【问题讨论】：

How can I optimize for IE? 的可能重复项

该问题的两个评价最高的答案与此处适用的建议几乎相同。

【参考方案1】：

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

缓存常用的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') 
    // ...

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

【参考方案2】：

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

所以，假设您必须遍历一个名为 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）

【参考方案3】：

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

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

【讨论】：

是的，我知道 Chrome Frame，但是，我正在寻找任何一种“最佳实践”，这将有助于开发在 IE 中运行的更快的 javascript 代码。跨度>

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

【参考方案4】：

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

示例 -

(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));
)();

b.您还可以针对 IE 浏览器重新设计您的用户体验 (UX)。

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

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

c。确保您网站的 UI 功能齐全，无需 JavaScript。这总是一个很好的起点。