CSS和JS在网页中的放置顺序
- css 一般放在网页顶部的 head 标签内，用 link 进行引用
- js 一般放在 body 标签的尾部，这样可以更快地呈现页面
白屏和FOUC
- 白屏的原因在于由 DOM 和 CSSOM 构建的渲染树未加载完成，如：
- js 文件在前，阻塞页面渲染
- FOUC(flash of unstyled content) 无样式内容闪烁：当样式表在结构性html之后加载时，将重新渲染页面，导致出现了短暂的闪烁现象，如
- 使用 @import 引入的外部 css 文件会在页面下载完再进行加载
- css 在底部时
async和defer
- defer
<script defer src="script.js"></script>- 只适用于外部脚本
- 加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成，即：立即加载，延迟执行
- async
<script defer src="script.js"></script>- 只适用于外部脚本
- 加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步），即不论声明先后顺序，只要加载完成便立即执行
- 没有 defer 或 async 时，浏览器会立即加载并执行指定的脚本，即不等待后续载入的文档元素，读到就加载并执行
网页渲染机制简述
渲染基本流程
渲染引擎首先从网络获得所请求文档的内容，通常以8K分块的方式完成。获取内容后渲染引擎的基本流程:
The main flow
- DOM，(Document Object Model)，浏览器将 HTML 标签解析成树状数据结构
- CSSOM，(CSS Object Model)，浏览器将 CSS 标签解析成树状数据结构
- Render Tree，DOM 和 CSSOM 合并后生成渲染树
- Layout，在渲染树的基础上进行布局，计算每个节点的几何结构
- Painting，通过显卡，将 layout 后的每个节点内容分别呈现到屏幕上
webkit 主要流程:
webkit main flow
Gecko 主要流程:
Gecko main flow
虽然 Webkit 和 Gecko 使用的术语略有不同，但是大体流程还是一致的
- Gecko 将处理过的可见元素结构称为 "Frame Tree"，每个元素都是一个 "frame"；而 Webkit 则使用术语 "Render Tree"，其由 "Render Objects" 组成
- Webkit 使用 "lalyout" 来表示元素的布局，而 Gecko 则称为 "reflow"
- Webkit 使用 "attachment" 来表示通过连接 DOM 节点和可视化信息来创建 render tree；一个非语义上的的小差别是 Gecko 在 HTML 和 DOM 树之间还有一个附加的层，称作 "conent sink"，是创建 DOM 元素的工厂
