根据JSperf的测试结果,在所有浏览器中,多个DOM就绪函数确实会明显减慢页面速度,以至于我将重构很多自己的代码以适应这一新发现。当然,IE的速度更慢,但测试结果并不像我希望的那样有信息量,因为即使没有DOM就绪检查,它也要慢得多。从中可以得出的结论是尽可能减少使用这些DOM就绪函数。
Chrome中的结果:
- 单个$(document).ready():734,811 ops/sec
- 多个$(document).ready() [4块]:151,989 ops/sec
- 没有$(document).ready():208,965,555 ops/sec
IE8中的结果:
- 单个$(document).ready():26,349 ops/sec
- 多个$(document).ready() [4块]:5,971 ops/sec
- 没有$(document).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倍
- 在Chrome中,没有DOM准备检查比IE快41.79倍
表面上看,这似乎是无望的 - 但如果你仔细想想,没有DOM准备功能的IE页面正在执行超过500万个操作/秒,而Chrome上的单个DOM准备功能执行不到100万次。这告诉我,如果你设法告诉JQuery使用更友好的
doScrollCheck()
函数,例如每100ms检查一次
documentElement
是否可滚动,而不是每1ms,你可能会看到页面加载时间与Chrome更具竞争力。
这个基准测试真正告诉我的是,即使是DOMContentLoaded
检查也非常慢 - 没有理由从209万个操作/秒下降到Chrome下的不到100万个操作/秒。
http://jsperf.com/docready/3