为什么jQuery阻止页面呈现？

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之前成功显示。

以下是我的问题：

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

Answer 1

为什么在我的示例中jQuery阻止DOM呈现？

doSomething似乎阻塞了UI

如果没有构造呈现树，为什么像<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>

​