css加载会造成阻塞吗？

js履行会堵塞DOM树的解析和烘托，那么css加载会堵塞DOM树的解析和烘托吗？所以，接下来我就来对css加载对DOM树的解析和烘托做一个测验。

为了完结本次测验，先来科普一下，怎么运用chrome来设置下载速度

翻开chrome控制台(按下F12),能够看到下图，重点在我画红圈的当地

2. 点击我画红圈的当地(No throttling),会看到下图,咱们选择GPRS这个选项

3. 这样，咱们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入咱们的正题

css加载会堵塞DOM树的解析烘托吗？

用代码说话：

css堵塞

这是赤色的

假定： css加载会堵塞DOM树解析和烘托

假定下的成果: 在bootstrap.css还没加载完之前，下面的内容不会被解析烘托。那么咱们一开始看到的应该是白屏，h1不会显现出来。而且此刻console.log的成果应该是一个空数组。

实践成果:如下图

css会堵塞DOM树解析？

由上图咱们能够看到，当bootstrap.css还没加载完结的时分，h1并没有显现，可是此刻控制台输出如下

能够得知，此刻DOM树至少现已解析完结到了h1那里，而此刻css还没加载完结，也就阐明，css并不会堵塞DOM树的解析。

css加载会堵塞DOM树烘托？

由上图，咱们也能够看到，当css还没加载出来的时分，页面显现白屏，直到css加载完结之后，赤色字体才显现出来，也就是说，下面的内容尽管解析了，可是并没有被烘托出来。所以，css加载会堵塞DOM树烘托。

个人对这种机制的点评

其实我觉得，这可能也是浏览器的一种优化机制。由于你加载css的时分，可能会修正下面DOM节点的款式，假如css加载不堵塞DOM树烘托的话，那么当css加载完之后，DOM树可能又得从头重绘或许回流了，这就造成了一些没有必要的损耗。所以爽性就先把DOM树的结构先解析完，把能够做的作业做完，然后等你css加载完之后，在依据终究的款式来烘托DOM树，这种做法功能方面的确会比较好一点。

css加载会堵塞js运转吗？

由上面的推论，咱们能够得出，css加载不会堵塞DOM树解析，可是会堵塞DOM树烘托。那么，css加载会不会堵塞js履行呢?

相同，经过代码来验证.

css堵塞

这是赤色的

假定: css加载会堵塞后边的js运转

预期成果: 在link后边的js代码，应该要在css加载完结后才会运转

实践成果:

由上图咱们能够看出，坐落css加载句子前的那个js代码先履行了，可是坐落css加载句子后边的代码迟迟没有履行，直到css加载完结后，它才履行。这也就阐明晰，css加载会堵塞后边的js句子的履行。具体成果看下图(css加载用了5600+ms):

定论

由上所述，咱们能够得出以下定论:

css加载不会堵塞DOM树的解析css加载会堵塞DOM树的烘托css加载会堵塞后边js句子的履行

因而，为了防止让用户看到长期的白屏时刻，咱们应该尽可能的进步css加载速度，比方能够运用以下几种办法:

运用CDN(由于CDN会依据你的网络情况，替你选择最近的一个具有缓存内容的节点为你供给资源，因而能够削减加载时刻)对css进行紧缩(能够用许多打包东西，比方webpack,gulp等，也能够经过敞开gzip紧缩)合理的运用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要防止缓存而带来的影响。其间一个处理防备是在文件姓名后边加一个版本号)削减http请求数，将多个css文件兼并，或许是爽性直接写成内联款式(内联款式的一个缺陷就是不能缓存)

以上，就是一切内容。觉得还不错的点个重视哦。