IE 6性能与干净，不引人注目的Javascript

Question

通常我喜欢保持我的HTML代码干净，语义和免于Javascript或CSS。我在顶部包含了我的.JS和.CSS文件，在DOM元素的顶部包含了图层功能。

这是积极的：

• 关注点的架构分离
• 不支持Javascript或CSS的优雅降级
• 搜索引擎友好性

有一个主要的负面因素：

• IE 6中的性能问题

因为所有事件都通过访问DOM的Javascript代码附加到元素，所以IE中的性能会受到影响。

使用jQuery（恰好是我最喜欢的Javascript框架）时尤其如此。

所以看起来我有两个选择：要么让代码保持良好又整洁，并让IE 6用户（大约20％的用户群）抱怨，或者“反规范化”代码以提高IE 6的性能

在这种情况下是否存在“中途”？还是我注定了？

---

注意：我不是说我的性能问题是由于在单独的文件中使用Javascript引起的。

我可以在IE中实现精彩的性能，同时将其保存在单独的文件中。

问题是，我仍然需要将实际的事件处理程序放入HTML中的“onclick”属性中。例如：

<span onclick="doSomething()">More...</span>

如果我能写下来会好得多：

<span id="more-button">More...</span>

然后使用以下内容在Javascript中单独分配：

$("#more-button").click(doSomething);

不幸的是，这似乎对IE6的性能有害。

Answer 1

在YUI Theatre的talk中，Joseph Smarr讨论了性能，并表示可以出于性能原因在代码中使用onmousedown处理程序等而不是找到DOM元素然后附加事件处理程序。但是，我不知道采取什么措施来加快速度。其他不引人注目的性能提升技术是（EIDT：请注意它们与浏览器无关，因此不限于IE）：

• 使用onmousedown代替onclick。 Smarr说两次事件发生之间有100毫秒左右的时间。
• 感知效果：使用window.setTimeout(visualFeedback, 0)提供即时视觉反馈。这让浏览器可以立即绘制一些图形变化，让用户知道发生了什么事情。
• 当你必须遍历DOM时，将中间结果缓存到一个变量中以重用它们（猜猜你知道那个）。

还有demo显示前两点的好处。顶部的按钮使用onclick并正常执行，下面的按钮使用onmousedown和setTimeout(func, 0)。

Answer 2

你应该put your JavaScript at the bottom of the page。至于附加事件的性能问题，请确保在优化之前仔细测量。 Dynatrace AJAX edition是衡量和理解IE效果的绝佳工具。

Answer 3

我认为您的性能问题不是因为您将javascript代码放入单独的文件中。我这样做......很多人这样做......这是最好的做法。

JQuery有一些性能问题。这可能是一个值得关注的地方。您需要查看的另一个地方是您的javascript代码本身。如果没有看到，我将无法帮助您提高应用程序的性能。

Answer 4

如果你的代码在浏览器上运行，并且在IE6上只是表现不好，那就感到很幸运！

真的，忽略这个老野兽！

如果您的代码在大多数浏览器上都运行良好，而且由于IE6无法运行它，您必须让它变慢，那么您应该向那些IE6用户显示一条消息（或者只是在每个浏览器上都有糟糕的性能）。

但是你的情况对我来说似乎简单明了。没有关系！ IE6是，应该死！甚至一些大型网站也开始向IE6用户显示更新通知。而不是他们通常的内容，他们不再支持它，因为它是垃圾！