共计 412 个字符，预计需要花费 2 分钟才能阅读完成。
白屏
- 阻塞解析和阻塞渲染都会引起白屏, 这是因为渲染树合成须要 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 增加之后, 同样是异步. 依照执行程序加载.
正文完
