CSS会阻塞DOM渲染吗？
CSS会阻塞DOM渲染吗？
面试中经常会问到的问题，今天刚好也读到这类的文章，简单记录一下
- CSS加载会阻塞DOM树的解析和渲染吗？
结论如下：
1.css加载不会阻塞DOM树的解析
2.css加载会阻塞DOM树的渲染
3.css加载会阻塞后面js语句的执行、
- 为什么会出现这种情况呢？我们通过图片进行解释吧。
我们可以看到浏览器的渲染过程如下
HTML解析文件——>生成DOM树 ——
|——>结合生成Render树->渲染到屏幕
CSS解析文件 ——>生成CSSOM树 ——
- DOM树的解析和CSSOM树的解析过程是并发进行的，所以这就是为什么CSS的加载不会阻塞DOM树的解析
- 然而Render树是依赖于DOM树和CSSOM树结合生成的，所以他必须等待CSSOM树构建完成才可以，才会开始渲染，所以CSS加载会阻塞DOM渲染
- 由于js可能会操作DOM样式和css样式，因此浏览器会维持html中css和js顺序；因此，样式表会在后面的js执行前先加载执行完毕，所以css会阻塞后面js的执行
- DOMContentLoaded
今天算是第一次接触到这个页面时间，之前都是没有听过的，这里做简单了解
- 页面加载主要有两个事件 DOMContentLoaded 和onLoad
- onLoad: 等待页面全部资源 加载完成 后才会触发
- DOMContLoaded: 页面内容 解析完成 后触发
- DOMContentLoaded结论
1.如果页面同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。
2.其他情况DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。
- 如何避免长时间的白屏，提高CSS加载速度
1.使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
2.对CSS进行压缩(webpack,gulp等等)
3.使用缓存
4.减少http请求，多个CSS文件合并
