有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>

也许只是我作为一个JavaScript避免者,但没有一个脚本有document.ready里面.如果你们JS的人谈论document.ready,这是一个同义词addEventListener('DOMContentLoaded')？

有两个事件:DOMContentLoaded和load(window.onload).当身体完成时,第一个发生,但一些资产仍在加载.第二个 - 页面完全加载.第一个很适合使用dom操作运行脚本,但浏览器并不总是支持它.

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

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

但是在一些版本之后如果简化为直接将函数传递给jQuery:

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

所以在vanilla示例中,我使用了2个事件中的第一个,在jQuery示例中,我使用了简短的订阅形式.由于不支持此事件的浏览器非常陈旧,因此假设jQuery总是使用DOMContentLoaded(可能load是在版本2中删除的方式 - 没有检查它,但没有理由将其保留在那里)是正确的.