Question

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

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

他们表示每个$(document).ready()阻止对性能造成指数伤害。

我的问题是，他们是否有任何统计数据来验证这一说法，如果是这样，我将如何在不重新编写JQuery源代码的情况下实现IE友好的解决方案。

Answer 1

根据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.78倍

在Chrome上，进行4次DOM准备检查比IE快 25.45倍

Chrome上没有DOM就绪检查 41.79倍比IE

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

这个基准测试真正告诉我的是，即使DOMContentLoaded检查也很慢 - 在Chrome上没有理由从2.09亿操作/秒到不到100万。

http://jsperf.com/docready/3

Answer 2

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

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

Answer 3

我的2c：

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

a）请记住，在一个完美的世界中，没有用户将在加载后立即与网页进行交互（显示）;和

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

考虑到完美的情景，你应该在＆lt;脚本类型...＆gt;＆lt; /脚本＆GT;是页面的SPLASH所必需的最小值，当然还有文档就绪。

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

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

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

祝你好运！

$（document）.ready（）检查是否会降低IE的速度？

3 个答案:

分析这些指标：