首屏慢,先分清三个瓶颈
网络、主线程、渲染,问题通常只在其中一个。
拆开看
首屏时间由若干段构成:服务器响应、资源下载、以及浏览器解析与渲染。不拆开看,就容易对着一个笼统的数字做无用的优化。
浏览器自带的时间线里已经记录了这些分段,先读一遍再决定优化什么。
网络段的常见问题
资源数量多、串行加载、以及没有压缩。把关键资源内联、把非关键资源延后,通常比压缩代码更有效。
主线程段的常见问题
大量同步脚本会阻塞解析。给脚本加上延后执行,或者在不需要时干脆不加载,收益往往很明显。
渲染段
布局抖动是常见的隐形开销,读写样式交替进行会让浏览器反复重排。把读和写分开,是成本最低的一项优化。