【面试题】浅谈css加载是否会造成阻塞_css加载会阻塞页面吗(1)

假设如果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加载速度）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。