白屏,FOUC如何形成,以及避免.

白屏

  • 阻塞解析和阻塞渲染都会引起白屏,这是由于渲染树合成需要DOM和CSSOM.
  • 我们知道CSS加载是通过link,link加载慢影响了渲染树的合成.(阻塞渲染)
  • 而JS的加载和执行会阻止html解析成DOM,同样影响了渲染树的合成(阻塞解析)

FOUC

  • 这是啥? (flash of unstyle content) 无样式内容闪烁.
  • 形成原因是link没有放入head标签中,在body的html代码的中间或者下方.
  • 页面渲染之后读取link,Reflow重流以及Repaint重绘.
  • 说白了还是css加载慢,这就是FOUC的形成原因

优化

  • 防止白屏以及FOUC可以使用loading.进入页面先看到loading,加载完css和js再展示页面内容.
  • js可以使用异步加载.

JS异步加载

  • 给script标签添加async 与 defer 异步加载js.
  • async 添加之后,并行请求JS,谁的请求先回来,加载谁.
  • defer 添加之后,同样是异步.按照执行顺序加载.

你可能感兴趣的:(前端)