js 影响 DOM 树构建
-
js 执行、下载 都会阻塞 DOM 解析
// js 中若无 DOM 相关操作，可异步加载
// async 加载完成立即执行
// defer DOMContentLoaded之前执行
-
css 会阻塞js 执行（解析js前不知道是否操作了CSSOM，所以先下载css->CSSOM）
发起请求到首次显示的阶段
-
请求发出，提交数据（网络、服务器优化）
-
解析白屏：等css、js 加载完，生成CSSOM 和 DOM，合成布局树，准备首次渲染
-
内联js，css 移除 两者下载，获取到html 就直接开始渲染
-
尽量减少文件大小，webpack 移除注释，压缩js
-
不在解析html 使用的js ，标记async、defer
-
拆分css，或者媒体查询加载
-
首次渲染完成后 -> 完整页面生成
显卡：合成新的图像，每60s将后缓冲区内容更新到前缓冲区
生成一帧图像：
-
重排
-
重绘
-
合成
-
分层：Layer Tree
-
分块：微观层面提升渲染效率，优先视口附近图块，首次合成低分辨率图显示，正常比例绘制完成后替换
-
合成：合成线程，非主线程，
will-change 会将要变化的元素准备独立分层，但也会增加内存 .box { will-change: transform, opacity; }
RTT（Round Trip Time）：请求数据的往返时延 ，1个http 数据包在14kb 左右，0.1M的页面需要拆成8个包来传输，需要8个RTT
