当前位置: 首页 > Web前端 > HTML

白屏,FOUC是如何形成的,如何避免

时间:2023-03-28 17:13:26 HTML

白屏阻塞解析和阻塞渲染会导致白屏,这是因为渲染树合成需要DOM和CSSOM。我们知道CSS加载是通过链接进行的,链接加载慢会影响渲染树的合成。(阻塞渲染)JS的加载和执行会阻止HTML解析成DOM,也会影响渲染树合成(阻塞解析)。什么是FOUC?(无样式内容的闪烁)无样式内容闪烁。原因链接没有放在head标签里,在body的html代码中间或者下面。页面渲染完成后,读取链接,Reflow回流,Repaint重绘。说白了就是css加载慢,这就是FOUC形成的原因。优化防止白屏和FOUC可以使用loading。进入页面先看loading,加载css和js后显示页面内容。JS可以使用异步加载。JS异步加载在script标签中加入async和defer,实现异步加载js。添加async后,并行请求js,谁的请求先返回,加载谁。加了defer之后,也是异步的。按照执行顺序加载。