javascript - 准备好 100 个文件比准备好 1 个文件好还是坏？

Question

只是想知道 document.ready 调用的数量是否会影响页面加载速度。 Gulp/Grunt 有没有办法通过删除单独的文档就绪函数来丑化/缩小 JS？

Answer 1

检查一下!

我没有发现 Chrome 有什么显着差异。
据我所知，它对 IE8 很关键，但没有检查这个事实。
IE11 在第一个片段上显示 2 秒，而其他片段只需要 200 毫秒。

此外，jQuery 似乎已经聚合了加载事件。

不要忘记

1. 当您在一个选项卡中运行相同的代码时，浏览器会记住一些东西并更快地运行它。
2. 重新加载页面是不够的。而是打开一个新标签页。
3. 打开新标签页后，以不同顺序运行代码段。
4. 如果片段首先在选项卡上运行，与其他三个相比，它会进一步减速。

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>

Maybe it's just me as a JavaScript avoider, but none of the scripts have document.ready inside. If you JS guys talk about document.ready, that's a synonym for addEventListener('DOMContentLoaded')?

有两个事件:DOMContentLoaded 和load (window.onload)。第一个发生在 body pasring 完成时，但一些 Assets 仍在加载。第二个 - 当页面完全加载时。第一个非常适合运行带有 dom 操作的脚本，但浏览器并不总是支持它。

所以 jQuery 使用这两个事件中的第一个，经典的订阅形式是

$(document).ready(function () {
  // ...
});

但在某些版本之后，if 被简化为将函数直接传递给 jQuery:

$(function () {
  // ...
});

所以在 vanilla 示例中，我使用了 2 个事件中的第一个，而在 jQuery 示例中，我使用了简短的订阅形式。由于不支持此事件的浏览器是 very old假设 jQuery 始终使用 DOMContentLoaded 是正确的(可能 load 方式在版本 2 中被删除 - 没有检查它，但没有理由将它保留在那里)。