需要区分 白屏 和 首屏 吗？
网络层性能优化
- DNS
- TCP并发-多域名方案/http3
- HTTP缓存
- serviceWorker缓存
- sessionStorage缓存
- Gzip压缩
- 拥塞预防
- 负载均衡
- 慢启动
布局性能优化 图片加载或接口加载再撑开页面布局的方式，除了效果不好，还会带来重新计算布局的损耗
- GPU绘图
- GUI和LCD
- 解析算法、标记化算法、树构建算法
埋点方法
我们常见的埋点是业务逻辑的埋点，如展开选项，弹出广告等 还有一种埋点是页面元素显示的埋点，如按钮显示时埋点
手动埋点
优点：灵活，精细 缺点：麻烦，容易埋错，后期变动需要维护
自动埋点
优点：简单，统一 缺点：不精细，难定制化
服务端渲染 SSR
当资源文件加载完，页面就渲染好了，首屏页面不需要再异步请求数据，因此直接判断资源加载停止时的时间 js提供的 Performance API 接口
首屏时间 = DOMContentLoaded = domContentLoadedEventEnd - fetchStart
SPA
资源加载完成只是模版资源，再通过js操作dom渲染页面才是首屏出来的时间
- 方法一 - 框架层面给组件生命周期mounted中埋点，最后一个mounted触发时间即首屏时间
- 方法二 - MutationObserver 监控DOM元素，当DOM元素变化，标记变化的元素，记录时间点和分数，通过算法和dom权重计算出分数
算法 TODO:
图片和DOM时分开的，有DOM没图检测不到 用js计算图片加载时间
js计算方法 TODO:
总结
手动和自动都要用上，这样的数据采集放到管理系统里分析数据
白屏时间
采集网络请求点