栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

测试模拟 白屏 / FOUC

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

测试模拟 白屏 / FOUC

白屏和FOUC

白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。

我们可以通过一个实验来进行测试和模拟白屏、FOUC的现象,让我们更好的理解白屏、FOUC。

测试demo

https://github.com/evenyao/whitescreen-fouc-test
步骤README.md中已经大概有了,下面整合一些截图,方便理解。

具体分析白屏测试 / 且js放在css之后

HTML

CSS加载完成后样式就出现了,js未加载完成,但并不影响样式显现

FOUC测试 (使用FireFox浏览器)

HTML优先被加载出来了,但我们没有看到任何样式呈现

加载完成之后,我们看到了样式,即出现了FOUC

其他白屏测试 / 且js放在CSS之前

HTML

可以看到CSS已经加载完成,但因为js并未加载完成,产生了堵塞,从而导致了样式没有展现


直到js也全部加载完成之后,样式才得以出现




这个时候我们来测试一下 async


白屏测试 / 且js放在css之后 但加了async异步

HTML

可以看到即使js放在前面,且没有加载完成,样式还是成功显现了

测试async异步效果成功

defer也是同理,同时也更好的理解了异步加载。
关于白屏、FOUC和异步加载的概念,参考之前写的初涉 Javascript



作者:evenyao
链接:https://www.jianshu.com/p/bbec132240eb


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/246622.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号