白屏和FOUC
白屏：浏览器加载会等css，js，图片等加载完成后，显示
FOUC：浏览器会先显示文字，加载完成css之后，再绘制样式
渲染机制
- 解析html上的标签，生成DOM树
- 解析CSS标签，生成CSSOM树
- 把dom和cssom 组合成渲染树
- 在渲染树的基础上进行布局，计算每个节点的几何结构
- 把每个节点绘制到屏幕上
异步加载脚本
可以用defer 、 async，来实现浏览器异步加载脚本
- async
不保证顺序 - defer
脚本延迟到文档解析和显示后执行，有顺序
repaint和reflow
repaint： 对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
reflow： 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
样式、JS 在 HTML 中如何放置？
- 使用 link 标签将样式表放在顶部，在header标签中，title、meta标签后
- 将JS放在底部，body标签中最后
脚本会阻塞后面内容的呈现
脚本会阻塞其后组件的下载
网友评论