下面是对腾讯前端团队优化手Q一个页面案例的总结
优化目标页面:手Q群成员分布的页面
左面是首屏,右面是下拉后到底部
这个页面中,可以划分成四个部份:活跃群成员、男女比例、省市分布、年龄 将前三个部份归入首屏渲染时间,为主要优化目标 优化过程 (1)活跃群成员头像的懒加载,初始状态使用默认头像快速显示 (2)使用内联js 之前,js都放入外部文件,为了避免阻塞,放到页面底部加载 js之中有获取核心数据的逻辑 这种方式下,需要等待js文件加载完成,然后再发起请求获取数据 优化后,把获取核心数据的代码提取出来,放入head部分中,这样就可以提前执行获取数据的动作,减少了一个JS加载的往返时间 (3)使用内联css 与内联js的思路相同 之前,也是使用css外部文件 优化后,把首屏需要的css内联到head内 注意:html+内联js css 时要注意整体的大小,最好不要超过14K,这样可以最优网络传输 (4)次屏逻辑延后处理,减少阻塞 这个优化思路简洁 实用 有效,性能提升20%左右