检查一下！

Question

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

Answer 1

检查一下！

我认为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>

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

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

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

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

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

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

所以在vanilla示例中，我使用的是2个事件中的第一个，在jQuery示例中，我正在使用简短的订阅形式。由于不支持此事件的浏览器为very old，因此假设jQuery始终使用DOMContentLoaded（可能在版本2中删除load方式 - 未检查它，但看不到保持它的原因）。

Answer 2

许多文档就绪调用不应该影响应用程序性能。最好的解决方案可能只有一个，并在那里初始化所需的一切。但这取决于你的应用程序结构，你应该更安心，不止一个。无论如何，我不认为有任何Gulp任务包含不同的就绪函数，因为它会触及应用程序逻辑。

Answer 3

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

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

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

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

输出

hello1
something
hello2

检查此post和this one

Answer 4

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

实际上是jQuery事件处理程序推送函数以便执行特定事件的队列。当事件被触发所有功能基于特定事件行/堆栈/队列逐个执行父序贯函数的返回值的 BUT 有一点需要注意，每个$（document）.ready（）函数调用必须回来。如果在一个异常中抛出异常，则后续调用将会永远不要跑。

$(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()方法是使用DOMContentLoaded方法附加addEventListener事件的函数。

是的，您可以在一个页面上拥有多个实例。没有特别的优势。所有这些都将在第一次被称为首次运行的基础上执行。

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

4 个答案:

检查一下！