加载阶段:
通过分析network中关键资源(html文件 js文件 css文件)的大小,个数,只找到一个可能性能问题:html文件是128kb比较大,网站本身已经开启gzip http2 多个静态资源域名、开启缓存等多个优化手段
交互阶段
新浪首页页面加载完成后,滚动页面查看次屏页面,没有太多的交互,查看performance没有发现太明显的性能问题
今日总结:
一个页面从生命周期的维度主要分为三个阶段:加载阶段、交互阶段、关闭阶段。
1. 加载阶段影响网页首次渲染的关键资源几个指标:个数、大小、RTT(round trip time)。通常一个HTTP的数据包在14kb左右。
2. 交互阶段的优化主要是指渲染进程渲染帧速度。如何让单个帧生成的速度变快呢?
* 减少JavaScript脚本执行时间
* 避免强制同步布局,添加 删除dom后计算样式布局是在另外一个任务中执行的,这时候获取样式信息,会将其变成同步任务。
* 避免布局抖动
* 合理利用CSS合成动画(标识 will-change 单独生成一个图层)
* 避免频繁的垃圾回收。(尽量避免临时垃圾数据,优化存储结构,避免小颗粒对象产生)
展开