大厂面试题分享 面试题库
前后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
示例
话不多说
先看代码：
<!DOCTYPE html><htmllang="en"><head><title>css阻塞</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><style>h1 { color: red !important } </style><script>functionh () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 1) </script><linkhref="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"rel="stylesheet"></head><body><h1>这是红色的</h1></body></html>
假设
假设如果css会阻塞DOM的解析和渲染：
那么执行完上述代码后，在bootstrap加载出来之前，页面上是白屏的，而且控制台打印的是空数组
代码中的16行其实有点问题，跟网速有关系，只要定时器设置的描述比bootstrap加载的时间少就可以，而且会出现这种问题：
人家博客上是没有说的，重新刷新测试要把这个缓存去掉
ctrl+F5刷新，能跳过强缓存和协商缓存，直接从服务器拉取资源
浏览器的缓存机制
然后这边我浅说一下浏览器的缓存机制：
在我发现有缓存没法再次通过刷新请求服务器资源来查看加载延时的时候，我发现这个文件夹的size栏出现了memory cache也就是内存缓存
从存储位置来看，浏览器缓存一共分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。
- Service Worker
- Memory Cache
- Disk Cache
- Push Cache
一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
当我关掉了这个页面，并且把地址复制到新开的tab然后回车，发现缓存变成了这样：
Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中， *比之 Memory Cache 胜在容量和存储时效性上。 *它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache。
这就解释了为什么变成了disk cache而不是原来的memory cache
现象
但实际上的现象是：
bootstrap.css加载完之后，页面上才出现红色的文字，说明css加载会阻塞DOM的渲染，但是控制台能打印出h1，说明不会阻塞DOM的解析
然后我们来看这张图：
推理
我们可以看到，DOM树的解析和CSSOM的解析是两个独立的过程，不挨边儿，这也解释了为什么css加载不会阻塞DOM带的解析
但是到了Render Tree就不一样了，这边构造的渲染树，会受到前面步骤的影响，也就是css加载速度会影响到DOM的渲染，刚刚在浏览器中故意降低了网速，测试后发现，在首次加载时，页面会有一段时间的白屏后才出现网页内容
结论
所以，在真实项目的开发中，要尽量避免css加载时间过长，而导致页面加载时长时间的白屏，影响用户体验
性能优化
这就又涉及到了性能优化
那么在css加载上前端能进行什么样的性能优化捏：（提高css加载速度）
- 减少http请求数，将多个css文件合并
- 使用CDN( 因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间 )
- 对css进行压缩( 可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩 )
大厂面试题分享 面试题库
前后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
