准备好100份文件比准备好1份文件好还是差?

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

本文关键字：准备好 文件 1份 100份      更新时间：2023-09-26

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

检查一下!

我认为Chrome没有明显的区别。
据我所知，它对IE8至关重要，但没有检查这个事实。
IE11在第一个片段上显示2秒，而其他片段只需要200毫秒。

同时，似乎jQuery已经聚合了加载事件。

不要忘记

  1. 当你在一个选项卡中运行相同的代码时，浏览器会记住一些东西并运行得更快。
    2. 重新加载页面是不够的。打开一个新的选项卡。
  2. 打开新选项卡后，以不同的顺序运行代码段。
  3. 如果代码片段首先在选项卡上运行，它将获得额外的减速，比较其他三个。

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回避者，但没有一个脚本有文档。准备好了。如果你们JS的人谈论文档。准备好了，这是addEventListener('DOMContentLoaded')的同义词吗?

有两个事件:DOMContentLoaded和load (window.onload)。第一个发生在主体传递完成时，但有些资源仍在加载。第二个-当页面完全加载。第一个用于运行带有dom操作的脚本，但浏览器并不总是支持它。

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

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

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

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

在普通示例中，我使用两个事件中的第一个，在jQuery示例中，我使用订阅的简短形式。由于不支持此事件的浏览器非常老旧，因此假设jQuery总是使用DOMContentLoaded是正确的(可能load方式在版本2中被删除-没有检查，但没有理由保留它)。

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

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

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

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

输出

hello1
something
hello2

查看这篇文章和这篇

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

实际上jQuery事件处理程序推送函数执行特定事件的队列。事件触发所有函数从特定事件行/堆栈/队列依次执行返回父顺序函数的值。
有一点需要注意，每个$(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()方法是使用addEventListener方法附加DOMContentLoaded事件的函数。

是的，你可以在一个页面上有多个实例。没有特别的优势。

相关文章：