Question

我在Google上搜索了解浏览器如何加载资源（CSS，JS，图像，HTML等），当我编写原型代码时，根据我的测试，我很少感到困惑。以下是我的plnkr代码，其中我添加<script>以添加10秒的延迟来测试文档加载与窗口加载。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
   $(document).ready(function() {
     // executes when HTML-Document is loaded and DOM is ready
     console.log("document loaded at "+new Date());

    });
    $(window).load(function() {
     // executes when complete page is fully loaded, including all frames, objects and images
     console.log("window loaded at "+new Date());
    });
</script>
  </head>

  <body>
    <h1 class="red">First element :-)</h1>
   <script src="https://httpbin.org/delay/60"></script>
    <h1 class="blue">Second element:-)</h1>
  </body>

</html>

我有以下观察和问题

我的理解是浏览器不会呈现页面，直到没有解析完整的页面，即准备好DOM。然而，一旦我测试了这个样本页面，那么我确实看到我的第一个H1标签被渲染，然后它等待加载下一个<script>，然后它呈现第二个H1标签。是不是页面应该等待先构建完整的DOM然后尝试渲染？
为什么$（window）.load和$（document）.ready事件在同一时刻被解雇？

Answer 1

我的理解是浏览器不会渲染页面，直到没有解析完整的页面，即准备好DOM。

不正确。浏览器以递增方式呈现页面。

为什么$（window）.load和$（document）.ready事件在同一时刻被解雇了？

ready在HTML文档完成渲染后立即触发。

HTML文档完成渲染并加载外部资源（如图像）后，

load就会触发。

除了样式表之外没有任何外部资源（在页面的其余部分加载之前快速加载并完成加载）和脚本（无论如何都阻止DOM解析）。

浏览器如何加载Javascript资源？

1 个答案: