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

Question

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

Answer 1

许多文档就绪调用应该不会对应用程序性能产生太大影响。最好的解决方案可能是只有一个并在那里初始化您所需要的一切。但这取决于您的应用程序结构，您应该更愿意拥有多个。无论如何，我不认为有任何 Gulp 任务将不同的就绪函数包装在一个中，因为它会触及应用程序逻辑。

Answer 2

您可以拥有多个，但这并不总是最巧妙的做法。尽量不要过度使用它们，因为它会严重影响可读性。除此之外，它是完全合法的。

还值得注意的是，一个 $(document).ready 块中定义的函数不能从另一个 $(document).ready 块中调用。

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
});

输出为

hello1
something
hello2

检查这个 post and this one

Answer 3

检查一下！

我没有看到 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>

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 完成时，但一些资产仍在加载。第二个 - 当页面完全加载时。第一个很适合运行ning 具有 dom 操作的脚本，但浏览器并不总是支持它。

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

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

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

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

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

Answer 4

是的，您可以使用多个文档就绪处理程序，即使您可以在多个地方使用 jQuery 代码也没有特别的优势。您不能在另一个内部使用变量，因为它们在不同的范围内。

Actually jQuery event handler pushing function for execution in queue of a particular event. When event is fired all functions executes one by one from particular events row/stack/queue based on return value of parent sequential function.
BUT There is one thing to note that each $(document).ready() function call must return. If an exception is thrown in one, subsequent calls will never be run.

$(document).ready(function() {
    document.write('<h3>In First ready function</h3>');
    var foo = function() {
        console.log('inside foo');
    }
    document.write("foo:" +(typeof foo)+"<br>");
    document.write("bar:" +(typeof bar)+"<br>");
    
});
$(document).ready(function() {
   document.write('<h3>In Second ready function</h3>');
    
    var bar=function bar() {
        console.log('inside bar');
    }
    document.write("foo:" +(typeof foo)+"<br>");
    document.write("bar:" +(typeof bar)+"<br>");
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

实际上 jQuery $(document).ready() 方法是使用 addEventListener 方法与 DOMContentLoaded 事件附加函数。

是的，您可以在单个页面上拥有它的多个实例。没有特别的优势。所有将在第一个被调用的第一个运行基础上执行。

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

Is having 100 document ready better or worse than 1 document ready?

javascript

jquery

pagespeed

检查一下！