Question

获取了以下代码段

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'small.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>
  </body>
</html>

在大多数domready脚本中，如果支持window.addEventListener，则脚本首先尝试“DOMContentLoaded”。

document.addEventListener("DOMContentLoaded", cb, false);
window.addEventListener("load", cb, false);

但是这个脚本没有，为什么会这样？当使用此脚本加载延迟CSS时，我可以使用我的domready函数作为后备吗？

if (raf) raf(cb);
      else domready(cb);

加载延迟JS时，我使用domready而不是defer属性，因为我知道它可以在所有浏览器中使用。

是否应该使用requestAnimationFrame来加载其他资源（如js或图像）以改善初始页面加载时间？

使用domready加载脚本/样式的一个问题是下载也会延迟而不仅仅是执行/渲染。

提供任何您认为加载不同资产的最佳方式的链接对我自己和其他人都非常有帮助。

使用requestAnimationFrame和DOMContentLoaded来推迟资产

0 个答案: