$(document).ready()检查是否会降低IE的速度?

我一直在与一家名为Catchpoint的公司合作,以解决客户端代码指标中的一些不一致问题。 他们有一些事件可以触发,它们可以衡量页面加载过程中的里程碑。 他们为我们提供的指标是在IE8中。

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

他们说每个$(document).ready()块的性能都会成倍地$(document).ready()

我的问题是,他们是否有任何统计数据来validation这种说法,如果是这样,我将如何实现一个IE友好的解决方案,而无需为我的需求重新编写JQuery源代码。

根据JSperf的说法,多个DOM就绪函数确实会在所有浏览器中减慢页面速度 ,这样我就可以重构很多自己的代码来适应这个新发现。 当然,IE的速度要慢得多,但是测试并不像我希望的那么有用,因为即使没有DOM就绪检查它也会慢得多。 要做的就是尽可能减少这些DOM就绪函数的使用。

Chrome中的结果:

  • 单$(文件).ready() :734,811 ops / sec
  • 多个$(文档).ready()的 [4块] :151,989 ops / sec
  • 没有$(文件).ready() :208,965,555 ops / sec

IE8中的结果:

  • 单$(文件).ready() :26,349 ops / sec
  • 多个$(文档).ready()的 [4个块] :5,971次/秒
  • 没有$(文件).ready() :5,000,159 ops / sec

分析这些指标:

  • 在Chrome中,没有DOM就绪检查占用DOM就绪检查的0.35%的时间
  • 在IE中,没有DOM就绪检查占用DOM就绪检查所花费的时间的0.53%

仅数据就告诉我们doScrollCheck()函数可以大大降低性能

话虽如此:

  • Chrome的DOM就绪检查比IE 快27.98倍
  • 在Chrome上,执行4个DOM就绪检查比在IE上快25.45倍
  • 缺少DOM就绪检查在Chrome上比IE 快41.79倍

从表面上看,这看起来毫无希望 – 但是如果你考虑一下,没有DOM就绪function的IE页面执行超过500万次操作/秒,Chrome上的单个DOM就绪function执行不到一百万。 这告诉我你是否设法告诉JQuery使用更友好的doScrollCheck()函数,比如检查documentElement是否每100ms可滚动而不是每1ms可以看到页面加载时间与chrome更具竞争力。

这个基准测试真正告诉我的是,即使是DOMContentLoaded检查也很慢 – 在Chrome上没有任何借口可以从2.09亿操作/秒降到100万以下。

http://jsperf.com/docready/3

这是一个脚本,用于测量$(document).ready()触发和正文末尾执行代码之间的时间(这是您可以操作DOM的最早时间)。 您可以在任何您想要的浏览器中自行运行它。 页面在这里: http : //jsfiddle.net/jfriend00/dLx4L/ 。

为了方便,长寿和易于共享,我在jsFiddle中完成了这个,但是如果你创建一个实现相同技术的独立网页(没有像jsFiddle中那样涉及其他框架),你可能会做出更准确的测试。 在任何情况下,您都应该能够在这里了解如何衡量这一点并为其添加实数。

我的2c:

我看到很多网页开发人员在页面中放了一千万个javascript代码……最后一个是文档就绪。

a)请记住,在完美的世界中,任何用户在加载后都会与网页进行交互(显示); 和

b)仍然在完美的世界中,用户很可能会在进行任何交互之前(甚至向上和向下滚动)查看整个页面。

考虑到完美的场景,<脚本类型...> 之间的所有内容都是页面SPLASH所必需的最小值,当然还有文档就绪。

这就是魔术:在一个单独的SCRIPT.JS文件中输入所有内容并在文档就绪中使用getScript加载它:

 $(document).ready( function () { ... ... $.getScript('your-scripts-path/your-script-file-name.js'); }); 

请记住,$ .getScript当然可以成为其中一个dom-ready调用中的回调。 而且,它也可以有回调。

祝好运!