IE7 Javascript 性能答案

【问题标题】：IE7 Javascript PerformanceIE7 Javascript 性能
【发布时间】：2010-11-02 21:52:11
【问题描述】：

我正在尝试开发一个包含大量基于客户端的脚本的应用程序。该页面具有根据不同输入相互交互的部分。问题是当您在页面上获得大量内容时，由于与此浏览器集成的 JavaScript 引擎不佳，部分原因是页面上有更多数据，因此在 IE7 中页面会显着减慢。

我已经在尽我所能使用 Web 服务，使用基于 ID 的选择器的 JQuery 以及尽可能少的效果和动画。

你们有什么技巧可以用来优化这个吗？

【问题讨论】：

看看你的代码会有所帮助，或者至少知道你在做什么。
是的，我以前打过IE7。如果没有看到您的代码，真的很难提供帮助。
肯定需要看一些代码。
为什么要关心IE7中的引擎？认为它很可能被修复为与 IE8 一样快？不要这么想。在 IE8 上测试您的应用程序，并尽快向 Microsoft 报告任何运行缓慢的情况，以便您有机会通过 SP1 修复它。
IE8 的 JavaScript 比 IE7 快。但是人们仍然在IE7（甚至IE6）。上帝保佑那“向微软报告缓慢”的事情。人们多年来一直这样做，发生了什么？其他浏览器的 JavaScript 解释器速度更快！

【解决方案1】：

一些现成的建议...

闪存作为协处理器。如果您有计算成本高昂的事情要做，您可以将它们交给 Flash。 ActionScript 将比 IE 糟糕的 JS 更快。但是请注意，如果您在 JS 和 Flash 之间来回传输大量数据，则速度会非常慢。
谷歌齿轮。您可以使用网络工作者加快速度。当您检测到 IE7 时，请说升级到 IE8 或安装 Google Gears 会改善体验。
可能 Silverlight 可以用作协处理器。不过，我没有这方面的经验。

你能说出什么是慢吗？是在你触摸 DOM 的时候吗？

【讨论】：

【解决方案2】：

在分析器中运行您的代码，看看它实际上在做什么。看看你的时间都花在了哪里。 IE8 提供了 IE7 兼容性，并且在其开发人员工具中包含了一个不错的分析器。

要直接在 IE7 中进行分析，您将不得不使用 Visual Web Developer 或与 MS Office 捆绑的调试器。更多的鬼混是必要的，但有可能让它发挥作用。每次我需要在新计算机上进行设置时，我都需要一个小时或更长时间才能弄清楚让它工作的魔法咒语，但它是可行的。

【讨论】：

好吧，如果他的问题存在于 IE7 而不是 IE8，那么这将无济于事。
IE7 兼容模式是否具有与原生 IE7 相同的速度配置文件？如果是这样，分析将是一个很好的开始。
不，它只是符合IE7做事的方式，但它绝对没有相同的速度。
剖析仍然会让您知道应该从哪里开始寻找。不幸的是，问题可能是 DOM 操作的副作用。执行 inputbox.checked=true 所需的时间因浏览器而异（Opera 似乎特别慢）。

【解决方案3】：

我觉得这些答案中的一些可能缺少明显的答案。

您使用的算法的效率如何？线性？逻辑的？指数？在我看来，如果 JAVASCRIPT 随着文档变大而变慢，那么问题出在代码的效率上，而不是 MS 的问题上。 IE javascript 很慢，但是是什么让您如此确定它是该浏览器的具体问题？其他 javascript 引擎可以接受吗？

在不知道自己在做什么或如何做的情况下，一种方法是权衡内存使用以换取速度 - 缓存以前的结果，以及其他可以找到的优化策略，如果你读过这本书或那个关于编程的网站。

要记住的另一件事是 dom 交互真的很慢。如果您可以重新组织代码以实现相同的目标，但在 dom 中的操作更少，那将提高性能

【讨论】：

是的，我们只是在没有代码的情况下进行猜测。我在 IE7 中最大的问题是动画可视化（我不得不将目标帧率降低到其他浏览器的 1/4）和任何使用 Canvas 的东西。甚至 IE8 也不直接支持 Canvas。
我确实必须根据用户的交互进行大量的 dom 操作。我也在整个页面上使用 Telerik RadControls，它做了很多 dom 操作。
所以让我问你这个问题，如果我将我的一些 dom 操作剧烈动作转移到 iframe 之类的东西上，dom 元素的数量会大大减少，因此你认为它会更快还是处理 iframe 更慢？>
如果您要对树的特定部分进行大量 DOM 操作，请将其拉出，在 DOM 之外对其进行处理，然后将整个操作放回原处。
这是一个有趣的想法......你能在字符串上做 JQuery 的东西吗？

【解决方案4】：

一些非常常见的陷阱几乎完全与 DOM 相关，这在浏览器中速度很慢。尽可能尝试使用innerHTML。这不是符合标准的做事方式，但它到目前为止是最快的。

如果您正在使用类似以下的方式遍历 DOM 元素：

for (var i = 0; i < domNodes.length; i++) { ... }

请注意，每次请求NodeList 的长度时，都会执行相当昂贵的查找操作。您最好将NodeList 的长度缓存如下：

for (var i = 0, il = domNodes.length; i < il; i++) { ... }

这里的性能改进令人难以置信。 Robert Nyman 对 for 循环进行了有趣的比较。如果您从未听说过这一点，那么性能提升可能会让您大吃一惊。

【讨论】：

【解决方案5】：

这是 javascript 大师 Nicholas C. Zakas 制作的关于 javascript 优化的优秀谷歌技术谈话视频 http://www.youtube.com/watch?v=mHtdZgou0qU

他建议您使用局部变量来限制范围查找，将 javascript css 样式更改保持在最低限度（改为更改类）并在您必须减少浏览器重新渲染时分批进行，以及许多其他很棒的技巧:)

【讨论】：

那是一场精彩的演讲。我有 Souders 的第一本书。我得买新的。
还可以查看 YUI Teather：developer.yahoo.com/yui/theater Douglas Crockford、John Resig (jQuery)、Nicholas Zakas 等谈论 JS、AJAX、性能、风格和 JS 哲学。

【解决方案6】：

根据需要附加和分离事件，不要使用行为。还可以使用 setTimeout 和 setInterval 创建线程来加速 UI。我一直这样做是为了防止 IU 情绪波动。

【讨论】：