不同的浏览器利用的内核不同，以是他们的渲染过程也是不一样的。目前紧张有两个：
webkit渲染过程
Gecko渲染过程
从上面两个流程图我们可以看出来，浏览器渲染的流程如下：
HTML解析文件，天生DOM Tree，解析CSS文件天生CSSOM Tree将Dom Tree和CSSOM Tree结合，天生Render Tree(渲染树)根据Render Tree渲染绘制，将像素渲染到屏幕上。从流程我们可以看出来
DOM解析和CSS解析是两个并行的进程，以是这也阐明了为什么CSS加载不会壅塞DOM的解析。然而，由于Render Tree是依赖于DOM Tree和CSSOM Tree的，以是他必须等待到CSSOM Tree构建完成，也便是CSS资源加载完成(或者CSS资源加载失落败)后，才能开始渲染。因此，CSS加载是会壅塞Dom的渲染的。由于js可能会操作之前的Dom节点和css样式，因此浏览器会坚持html中css和js的顺序。因此，样式表会在后面的js实行前先加载实行完毕。以是css会壅塞后面js的实行。DOMContentLoaded对付浏览器来说，页面加载紧张有两个事宜，一个是DOMContentLoaded，另一个是onLoad。而onLoad没什么好说的，便是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。
而DOMContentLoaded，顾名思义，便是当页面的内容解析完成后，则触发该事宜。那么，正如我们上面谈论过的，css会壅塞Dom渲染和js实行，而js会壅塞Dom解析。那么我们可以做出这样的假设
当页面只存在css，或者js都在css前面，那么DomContentLoaded不须要等到css加载完毕。当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。我们先对第一种情形做测试：
<!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和js，并且存在js在css后面，则DOMContentLoaded事宜会在css加载完后才实行。其他情形下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事宜也不会等待图片、视频等其他资源加载。总结由上所述，我们可以得出以下结论:
css加载不会壅塞DOM树的解析css加载会壅塞DOM树的渲染css加载会壅塞后面js语句的实行、因此，为了避免让用户看到永劫光的白屏韶光，我们该当尽可能的提高css加载速率，比如可以利用以下几种方法:
利用CDN(由于CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你供应资源，因此可以减少加载韶光)对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)合理的利用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要把稳一个问题，便是文件更新后，你要避免缓存而带来的影响。个中一个办理戒备是在文件名字后面加一个版本号)减少http要求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺陷便是不能缓存)
