可能大家都知道,js执行会阻塞dom树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下。
那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下。
不同的浏览器使用的内核不同,所以他们的渲染过程也是不一样的。目前主要有两个:
webkit渲染过程
Gecko渲染过程
从上面两个流程图我们可以看出来,浏览器渲染的流程如下:
从流程我们可以看出来
对于浏览器来说,页面加载主要有两个事件,一个是DOMContentLoaded,另一个是onLoad。而onLoad没什么好说的,就是等待页面的所有资源都加载完成才会触发,这些资源包括css、js、图片视频等。
而DOMContentLoaded,顾名思义,就是当页面的内容解析完成后,则触发该事件。那么,正如我们上面讨论过的,css会阻塞Dom渲染和js执行,而js会阻塞Dom解析。那么我们可以做出这样的假设
我们先对第一种情况做测试:
<!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> document.addEventListener(‘DOMContentLoaded‘, function() { console.log(‘DOMContentLoaded‘); }) </script> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"> </head> <body> </body> </html>
css还未加载完,就已经触发了DOMContentLoaded事件了。因为css后面没有任何js代码。
接下来我们对第二种情况做测试,很简单,就在css后面加一行代码就行了
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.addEventListener(‘DOMContentLoaded‘, function() {
console.log(‘DOMContentLoaded‘);
})
</script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
<script>
console.log(‘到我了没‘);
</script>
</head>
<body>
</body>
</html>
只有在css加载完成后,才会触发DOMContentLoaded事件。因此,我们可以得出结论:
由上所述,我们可以得出以下结论:
因此,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高css加载速度,比如可以使用以下几种方法:
Node.js异步变成的直接体现就是回调。异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了。回调函数在完成任务后就会被调用,Node使用了大量的回调函数,Node所有的APi都支持回调函数。
介绍Node.js的阻塞(Blocking)与非阻塞(Non-Blocking)。我会提到Event Loop与libuv,但是不了解它们也不会影响阅读。读者只需要有一定的JavaScript基础,理解Node.js的回调函数(callback pattern)就可以了
当执行到alert、confirm、prompt 时,当前js代码块中的代码和下面的js代码块都将暂停执行,直到用户做出反应,以下的代码和代码块才会继续执行。当传入的参数是一个数组时,在浏览器中弹出时
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!