白屏和FOUC

白屏和FOUC

白屏：浏览器加载会等css，js，图片等加载完成后，显示
FOUC：浏览器会先显示文字，加载完成css之后，再绘制样式

渲染机制

1. 解析html上的标签，生成DOM树
2. 解析CSS标签，生成CSSOM树
3. 把dom和cssom 组合成渲染树
4. 在渲染树的基础上进行布局，计算每个节点的几何结构
5. 把每个节点绘制到屏幕上

异步加载脚本

可以用defer 、 async，来实现浏览器异步加载脚本

1. async
   不保证顺序
2. defer
   脚本延迟到文档解析和显示后执行，有顺序

repaint和reflow

repaint： 对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
reflow： 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

样式、JS 在 HTML 中如何放置？

• 使用 link 标签将样式表放在顶部，在header标签中，title、meta标签后
• 将JS放在底部，body标签中最后
  脚本会阻塞后面内容的呈现
  脚本会阻塞其后组件的下载