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

最佳答案

只是检查一下!

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




    有两个事件:DOMContentLoadedload(window.onload)。首先发生在车身贴装完成但某些 Assets 仍在加载时。第二个-页面完全加载时。首先是运行带有dom操纵的脚本的好方法,但是浏览器并不总是支持它。

    因此,jQuery使用了这两个事件中的第一个,经典的订阅形式为
    $(document).ready(function () {
      // ...
    });
    

    但是在某些版本之后,如果简化为将函数直接传递到jQuery:
    $(function () {
      // ...
    });
    

    因此,在原始示例中,我使用的是2个事件中的第一个,在jQuery示例中,我使用的是预订的简短形式。由于不支持此事件的浏览器是very old,因此可以正确地假设jQuery始终使用DOMContentLoaded(可能在版本2中删除了load方式-并未进行检查,但没有理由将其保留在此处)。

    关于javascript - 准备好100个文档比准备好1个文档好还是差?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39223795/

    10-12 07:05
    查看更多