在头部加载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放在底部
网站声明:如果转载,请联系本站管理员。否则一切后果自行承担。
加入交流群
请使用微信扫一扫!