只是想知道document.ready
调用的数量是否会影响页面加载速度。
Gulp/Grunt中有没有一种方法可以通过删除单独的文档就绪函数来丑化/缩小JS?
最佳答案
只是检查一下!
我认为Chrome没有明显的区别。
据我所知,这对于IE8至关重要,但并未检查这一事实。
IE11在第一个片段上显示2秒,而其他片段仅花费200毫秒。
另外,似乎jQuery已经聚合了加载事件。
不要忘记
for (var q=0; q<1000; ++q) {
document.addEventListener('DOMContentLoaded', (function (i) {
console.log(i);
}).bind(null, q));
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('output').textContent = performance.now().toFixed(3);
});
<output></output>
document.addEventListener('DOMContentLoaded', function () {
for (var q=0; q<1000; ++q) {
(function (i) {
console.log(i)
}).bind(null, q)();
document.querySelector('output').textContent = performance.now().toFixed(3);
}
});
<output></output>
for (var q=0; q<1000; ++q) {
$((function (i) {
console.log(i);
}).bind(null, q));
}
$(function () {
document.querySelector('output').textContent = performance.now().toFixed(3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<output></output>
$(function () {
for (var q=0; q<1000; ++q) {
(function (i) {
console.log(i)
}).bind(null, q)();
document.querySelector('output').textContent = performance.now().toFixed(3);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<output></output>
有两个事件:
DOMContentLoaded
和load
(window.onload
)。首先发生在车身贴装完成但某些 Assets 仍在加载时。第二个-页面完全加载时。首先是运行带有dom操纵的脚本的好方法,但是浏览器并不总是支持它。因此,jQuery使用了这两个事件中的第一个,经典的订阅形式为
$(document).ready(function () {
// ...
});
但是在某些版本之后,如果简化为将函数直接传递到jQuery:
$(function () {
// ...
});
因此,在原始示例中,我使用的是2个事件中的第一个,在jQuery示例中,我使用的是预订的简短形式。由于不支持此事件的浏览器是very old,因此可以正确地假设jQuery始终使用
DOMContentLoaded
(可能在版本2中删除了load
方式-并未进行检查,但没有理由将其保留在此处)。关于javascript - 准备好100个文档比准备好1个文档好还是差?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39223795/