Question

我对页面渲染有一些疑问。这是我的HTML代码：

<body>
   <h1>haha</h1>
   <img src="a.jpeg" alt="images1">
   <img src="b.jpeg" alt="images2">
   <script src="public/js/doSomething.js"></script>
   <script src="lib/jquery-1.11.3.js"></script>
</body>

我的doSomething.js需要5秒才能执行：

function doSomething(n){
     var start = new Date().getTime() ;
     while((new Date().getTime() - start) < 1000 * n){}
}
doSomething(5) ;

我将<script>标记放在<body>的末尾，以便其他元素在doSomething.js加载之前显示。但是在doSomething.js完成执行之前，我的页面几乎没有产生任何结果。

如果我删除jQuery脚本，其他DOM元素（h1和images）将在加载doSomething.js之前成功显示。

以下是我的问题：

为什么jQuery会在我的示例中阻止DOM渲染？
如果我删除了jQuery，并且一切都按照我的期望运行，那么我会得到另一个问题。根据我的理解，<script>是DOM树的一部分，如果没有加载，DOM树将不会完成构建，那么整个渲染树将不会构造。如果不构造渲染树，为什么像<h1>这样的元素可以绘制到页面上？简而言之，为什么将<script>移到<body>的末尾会使之前的元素在页面上呈现？

Answer 1

为什么jQuery会在我的示例中阻止DOM渲染？

doSomething似乎阻止了用户界面

为什么像<h1>这样的元素可以在渲染树中绘制到页面上是不是构建了？

尝试使用$.holdReady()，$.Deferred()

body * {
  opacity: 0;
  transition: opacity 1s;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
  <script>
    $.holdReady(true);

    function doSomething(n) {
      return new $.Deferred(function(d) {
        setTimeout(d.resolve, n * 1000)
      }).promise()
    }

    doSomething(5).then(function() {
      $.holdReady(false)
    });

    $(function() {
      $("body *").css("opacity", 1)
    })
  </script>
</head>

<body>
  <h1>haha</h1>
  <img src="http://lorempixel.com/100/100/cats" />
  <img src="http://lorempixel.com/100/100/technics" />
</body>

为什么jQuery会阻止页面呈现？

1 个答案: