0

我对页面渲染有一些疑问。这是我的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>会使之前的元素呈现在页面上？
4

1 回答 1

0

为什么在我的示例中 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>

于 2015-11-27T17:42:46.587 回答