
移动端的网络条件和计算能力都比桌面差很多,同样的页面在两端之间的差异往往超过一倍。
图片就是最直接的突破口。根据屏幕宽度来选择合适的尺寸,防止小屏加载桌面大图;使用现代格式设置好质量参数,首屏主图显式标记优先级,其他图片延迟加载。容器保持固定的宽高比,避免在加载过程中出现布局跳动的情况。
渲染阻塞要减少。首屏关键样式内联,其他样式异步加载;脚本尽量延迟执行,第三方统计、客服组件等交互之后再引入。字体采用子集或者系统字族,降低额外的请求和文字闪烁。
交互响应主要是在主线程上进行的。长任务拆分、滚动和输入事件进行节流,防止解析大量数据时造成渲染阻塞。使用虚拟滚动来减少一次渲染的节点数。
服务端也可以进行优化。接口合并可以减少往返次数,返回字段按需裁剪,首屏数据优先发送,次要区块由前端二次请求补充。
评估方法要与实际场景相吻合。国内移动网络主要是4G和弱覆盖环境,测试的时候把带宽、延迟控制在常见的范围内,看首屏可交互时间而不是单纯的文件下载完成时间。不同机型之间的差异也很大,在低端设备上脚本解析的时间会成倍增加,抽样测试覆盖了中低端机型,优化结果才具有代表性。
经过优化之后用真机和弱网环境进行复测,实验室的高速网络会掩盖真实的体验。