$(document).ready()检查会降低IE的速度吗? [英] $(document).ready() check slows down IE?

问题描述

我一直在与一家名为 Catchpoint 的公司合作，以消除客户端代码中的某些不一致之处指标.他们触发了一些事件，这些事件可以衡量页面加载过程中的里程碑.他们为我们提供的指标在IE8中.

I've been working with a company called Catchpoint to hash out some inconsistencies in our client-side code metrics. They have some events that fire which measure milestones in the page load process. Their provided metrics for us is in IE8.

现在，他们声称JQuery确定IE中DOM准备就绪的方式实际上严重会损害页面性能，我们应该不惜一切代价避免使用它.我知道JQuery使用doScrollCheck()方法和在documentElement上的1ms递归setTimeout爆炸发生了什么，我想到他们可能有一个有效的主张.

Now, they claim that the way JQuery determines DOM ready in IE actually drastically hurts page performance and that we should avoid it at all costs. I'm aware of what JQuery does with the doScrollCheck() method and the 1ms recursive setTimeout blast on documentElement and it occurred to me that they may have a valid claim.

他们说，每个$(document).ready()区块的性能都会成倍地受到损害.

They said performance is hurt exponentially for every $(document).ready() block.

我的问题是，他们是否有任何可用的统计数据来验证这一说法，如果是的话，我将如何实现一个IE友好的解决方案，而无需为我的需要重新编写JQuery源.

My question is, are their any stats out there to validate this claim, and if so, how would I go about implementing an IE-friendly solution without re-writing the JQuery source for my needs.

推荐答案

根据JSperf，多个DOM准备就绪功能确实会在所有浏览器中降低页面速度，足以使我重构一个我自己的许多代码就可以适应这个新发现. IE令人尴尬地慢了一点，当然，但是该测试并没有我希望的那样有用，因为即使没有DOM准备检查，它也要慢得多.要避免的事情是，尽可能地减少对这些DOM就绪函数的使用.

According to JSperf, multiple DOM ready functions really do slow down the page in all browsers, enough so that I will be refactoring a lot of my own code to accommodate for this new finding. IE is embarrassingly slower, of course, but the test isn't as informative as I'd hoped because it's so much slower even with no DOM ready check. The thing to take away from this is to minimize the use of these DOM ready functions whenever possible.

Chrome浏览器中的结果:

Results in Chrome:

• 单个$(document).ready():734,811 ops/sec
• 多个$(document).ready()的 [4个数据块] :151,989个操作/秒
• 否$(document).ready():208,965,555个操作/秒

• Single $(document).ready(): 734,811 ops/sec
• Multiple $(document).ready()'s [4 blocks]: 151,989 ops/sec
• No $(document).ready(): 208,965,555 ops/sec

IE8中的结果:

• 单个$(document).ready():26,349 ops/sec
• 多个$(document).ready()的 [4个数据块] :5,971次操作/秒
• 否$(document).ready():5,000,159次操作/秒

• Single $(document).ready(): 26,349 ops/sec
• Multiple $(document).ready()'s [4 blocks]: 5,971 ops/sec
• No $(document).ready(): 5,000,159 ops/sec

• 在Chrome中，没有DOM准备就绪检查需要DOM准备就绪的时间 0.35％ 支票
• 在IE中，没有DOM准备就绪检查会花费DOM时间的 0.53％ 准备支票需要

• In Chrome, No DOM ready check takes 0.35% of the time a DOM ready check takes
• In IE, No DOM ready check takes 0.53% of the time a DOM ready check takes

仅凭这些数据就可以告诉我们doScrollCheck()函数会大大降低性能.

That data alone tells us that the doScrollCheck() function deters performance quite a bit.

话虽如此:

• Chrome的DOM准备就绪检查比IE的速度快 27.98倍
• 在Chrome上，执行4次DOM准备就绪检查比在IE上快 25.45倍
• 在Chrome上，缺少DOM准备检查的速度比IE快 41.79倍

• Chrome's DOM ready check is 27.98 times faster than IE's
• On Chrome, doing 4 DOM ready checks is 25.45 times faster than on IE
• The absence of a DOM ready check is 41.79 times faster on Chrome than IE

从表面上看，这似乎毫无希望-但是，如果您考虑一下，没有DOM就绪功能的IE页面执行的速度超过500万次操作/秒，而Chrome上的单个DOM就绪功能执行的速度不到一百万次.这告诉我是否设法告诉JQuery使用更友好的doScrollCheck()函数，例如检查documentElement是否每100ms即可滚动一次，而不是每1ms滚动一次，您可能会发现页面加载时间与chrome相比更具竞争力.

On the surface, this looks hopeless - but if you think about it, the IE page with no DOM ready function was executing over 5 million ops/sec and the single DOM ready function on Chrome was executing less than a million. That tells me if you manage to tell JQuery to use a more friendly doScrollCheck() function which, say checks if documentElement is scrollable every 100ms instead of every 1ms you might see the page load time more competitive with chrome.

该基准测试真正告诉我的是，即使DOMContentLoaded检查也像地狱一样缓慢-在Chrome上，没有任何借口可以将2.09亿次操作/秒提高到100万次以下.

What this benchmark really tells me is that even the DOMContentLoaded check is slow as hell - there's no excuse to go from 209 million ops/sec to under a million on Chrome.

http://jsperf.com/docready/3

这篇关于$(document).ready()检查会降低IE的速度吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！