可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。
为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度
/1. 打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方
点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项
/2. 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项
这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题
/3. 这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题
css加载会阻塞DOM树的解析渲染吗？
用代码说话：
| <!DOCTYPE html><html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0) </script> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>这是红色的</h1> </body></html> |
假设： css加载会阻塞DOM树解析和渲染
假设结果: 在bootstrap.css还没加载完之前，下面的内容不会被解析渲染，那么我们一开始看到的应该是白屏，h1不会显示出来。并且此时console.log的结果应该是一个空数组。
实际结果:如下图
css会阻塞DOM树解析？
由上图我们可以看到，当css还没加载完成的时候，h1并没有显示，但是此时控制台输出如下
可以得知，此时DOM树至少已经解析完成到了h1那里，而此时css还没加载完成，也就说明，css并不会阻塞DOM树的解析。
css加载会阻塞DOM树渲染？
由上图，我们也可以看到，当css还没加载出来的时候，页面显示白屏，直到css加载完成之后，红色字体才显示出来，也就是说，下面的内容虽然解析了，但是并没有被渲染出来。所以，css加载会阻塞DOM树渲染。
新闻热点
疑难解答
