【面试题】浅谈css加载是否会造成阻塞
创始人
2025-06-01 03:00:09

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库

示例

话不多说

先看代码：

css阻塞
这是红色的

假设

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

  1. 减少http请求数，将多个css文件合并

  1. 使用CDN( 因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间 )

  1. 对css进行压缩( 可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩 )

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：直播带货系统开发的关键点、代码分析

下一篇：学习软件测试怎么能缺少练手的软件测试实战项目呢？没有的来我这里领取就是了

相关内容

热门资讯

新宝来和新朗逸选谁更好?网友:... 今天给各位分享新宝来和新朗逸选谁更好?网友:毫无悬念,朗逸全方位...的知识，其中也会对大众新宝来和...
pms系统是什么意思 极速百科... pms系统是什么意思目录pms系统是什么意思pms系统是什么意思mis系统是什么pms什么意思pms...
无影灯原理（无影灯原理图讲解）... 今天给各位分享无影灯原理的知识，其中也会对无影灯原理图讲解进行解释，如果能碰巧解决你现在面临的问题，...
蜂蜜的用途（蜂蜜的用途是什么）... 本篇文章极速百科给大家谈谈蜂蜜的用途，以及蜂蜜的用途是什么对应的知识点，希望对各位有所帮助，不要忘了...
16K纸有多大比A4的大还是小... 今天给各位分享16K纸有多大比A4的大还是小的知识，其中也会对16k的纸是a4纸的一半吗进行解释，如...
许昌新车上牌地址（许昌新车上牌... 今天给各位分享许昌新车上牌地址的知识，其中也会对许昌新车上牌地址查询进行解释，如果能碰巧解决你现在面...
八大艺术有哪些,艺术的八大类分... 八大艺术有哪些目录八大艺术有哪些艺术的八大类分别是什么世界公认的七大艺术是什么？什么被称八大艺术八大...
离我最近的北京现代4s店（离我... 本篇文章极速百科给大家谈谈离我最近的北京现代4s店，以及离我最近的北京现代4s店保养车对应的知识点，...
导轨油和机油的区别?（导轨油和... 今天给各位分享导轨油和机油的区别?的知识，其中也会对导轨油和机油的区别是什么进行解释，如果能碰巧解决...
免检卡板有什么好的,与熏蒸卡板... 本篇文章极速百科给大家谈谈免检卡板有什么好的,与熏蒸卡板有什么区别呢?，以及免检卡板图片对应的知识点...
东风雪铁龙c3xr怎么样（20... 本篇文章极速百科给大家谈谈东风雪铁龙c3xr怎么样，以及2021款东风雪铁龙c3xr对应的知识点，希...
圣诞节的意义（圣诞节的意义讲章... 本篇文章极速百科给大家谈谈圣诞节的意义，以及圣诞节的意义讲章对应的知识点，希望对各位有所帮助，不要忘...
c中getchar表示什么,g... c中getchar表示什么目录c中getchar表示什么getchar在c是什么意思getchar在...
军考网上哪里报名,直招军官的招... 军考网上哪里报名目录军考网上哪里报名直招军官的招录程序是什么？怎样在网上报名考兵2020军校报名时间...
微信红包祝福语8字,发红包祝福... 微信红包祝福语8字目录微信红包祝福语8字发红包祝福语八个字过年红包祝福语微信红包祝福语8字 微信红包...
王字的三横一竖是什么意思,三横... 王字的三横一竖是什么意思目录王字的三横一竖是什么意思三横一竖是什么字?王字的含义是？王的含义是什么王...
精英危险在哪买,精英危险怎么买... 精英危险在哪买目录精英危险在哪买精英危险怎么买船精英危险如何挖矿2022年精英危险值得购买吗精英危险...
尼桑两厢车有哪几款（尼桑两厢车... 本篇文章极速百科给大家谈谈尼桑两厢车有哪几款，以及尼桑两厢车有哪几款红色对应的知识点，希望对各位有所...
端午风俗有哪些传统,端午节有哪... 端午风俗有哪些传统目录端午风俗有哪些传统端午节有哪些习俗？有哪些寓意？端午节的习俗有哪些？端午节的风...
世界十大凶猛龟是哪些,十大凶猛... 世界十大凶猛龟是哪些目录世界十大凶猛龟是哪些十大凶猛龟排名是怎样的？最凶猛的乌龟有哪几种，最猛的三种...
简短情话8个字,很甜很撩的句子... 简短情话8个字目录简短情话8个字很甜很撩的句子八个字 又甜又撩的短句八个字8字爱情名言佳句用八个字形...
高考数学满分多少,高考数学总分... 高考数学满分多少目录高考数学满分多少高考数学总分多少分满分高中考试各科分数是多少？高考数学满分是多少...
吃鸡攻略和技巧手游,手游吃鸡怎... 吃鸡攻略和技巧手游目录吃鸡攻略和技巧手游手游吃鸡怎么练技术绝地求生大逃杀怎么玩 绝地求生各系统玩法技...
开了5年的帝豪后,我换成了奥迪... 今天给各位分享开了5年的帝豪后,我换成了奥迪A4L的知识，其中也会对进行解释，如果能碰巧解决你现在面...
ecco什么牌子,ecco什么... ecco什么牌子目录ecco什么牌子ecco什么牌子 ecco是哪个国家的品牌eoco是什么牌子ec...
汽车内外饰设计-仪表板设计构想... 今天给各位分享汽车内外饰设计-仪表板设计构想-连载05的知识，其中也会对仪表盘内饰进行解释，如果能碰...
酱油生抽老抽有什么区别,生抽老... 酱油生抽老抽有什么区别目录酱油生抽老抽有什么区别生抽老抽酱油有啥区别酱油、生抽、老抽有什么不同？老抽...
北京车牌外地违章怎么处理（北京... 本篇文章极速百科给大家谈谈北京车牌外地违章怎么处理，以及北京牌外地违章本地能处理吗对应的知识点，希望...
13寸电脑尺寸是多少厘米,13... 13寸电脑尺寸是多少厘米目录13寸电脑尺寸是多少厘米13英寸等于多少厘米13寸大概有多大？13.3寸...
管理员的英文缩写是什么,管理员... 管理员的英文缩写是什么目录管理员的英文缩写是什么管理员英文怎么写admn具体指的是什么？管理员的英文...