白屏

  • 阻塞解析和阻塞渲染都会引起白屏,这是因为渲染树合成须要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 增加之后,同样是异步.依照执行程序加载.