为什么 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

加载之前成功显示。

这是我的问题：

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

Answer 1

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

doSomething

似乎阻塞了 UI

为什么render tree可以把
<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 会阻止页面渲染？

问题描述投票：0回答：1

1个回答

最新问题

为什么 jQuery 会阻止页面渲染？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1