网页出现长时间的白屏可能的原因是什么?如何优化?


prtyaa
prtyaa 2023-12-26 19:00:34 50598
分类专栏: 资讯

1.JavaScript异常

在头部加载js会阻塞页面渲染。
资源的加载顺序决定页面逻辑是否能正常执行。 

2.CSS加载不阻塞解析,但会阻塞渲染

• 白屏

页面一片空白,突然展示完整的有样式的内容 
当link放在head标签,且加载时间久时,会出现白屏效果 

3. FOUC(Flash of unstyled content)-无样式内容闪烁

CSS为完全加载前,页面一开始展示无样式的已解析的HTML内容,然后CSS完全加载完成后,再次渲染
当link放在页面底部,且加载时间久时,会出现FOUC 

• Tips

尽量把link放在head标签内,防止出现FOUC

4.CSS与JS的放置顺序

使用 link 标签将样式表放在顶部,防止白屏问题意外出现
将JS放在底部

网站声明:如果转载,请联系本站管理员。否则一切后果自行承担。

本文链接:https://www.xckfsq.com/news/show.html?id=31078
赞同 0
评论 0 条
prtyaaL2
粉丝 1 发表 2553 + 关注 私信
上周热门
如何使用 StarRocks 管理和优化数据湖中的数据?  2956
【软件正版化】软件正版化工作要点  2875
统信UOS试玩黑神话:悟空  2839
信刻光盘安全隔离与信息交换系统  2733
镜舟科技与中启乘数科技达成战略合作,共筑数据服务新生态  1267
grub引导程序无法找到指定设备和分区  1231
华为全联接大会2024丨软通动力分论坛精彩议程抢先看!  165
2024海洋能源产业融合发展论坛暨博览会同期活动-海洋能源与数字化智能化论坛成功举办  163
点击报名 | 京东2025校招进校行程预告  163
华为纯血鸿蒙正式版9月底见!但Mate 70的内情还得接着挖...  159
本周热议
我的信创开放社区兼职赚钱历程 40
今天你签到了吗? 27
如何玩转信创开放社区—从小白进阶到专家 15
信创开放社区邀请他人注册的具体步骤如下 15
方德桌面操作系统 14
我有15积分有什么用? 13
用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
如何让你先人一步获得悬赏问题信息?(创作者必看) 12
2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
中央国家机关政府采购中心:应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8

加入交流群

请使用微信扫一扫!