移动端网络优化的指标，有什么优化策略

首先我们来看一个请求的时间消耗是怎么样的。

一个请求的消耗

• Scheduling 排队 排队时间
• 调度
• connection Start 准备的时间开销
  • DNS Lookup DNS 查询时间 运营商
  • Initial connection TCP的连接时间
  • SSL 服务端渲染时间 会在TCP连接的最后一步接管
• request 请求时间
• sent 发请求
• waiting（TTFB） 第一个字节返回时间
• content Download

页面加载
复用TCP连接 可能就没有准备的耗时

常见性能指标

• 是否显示
  • 首次绘制时间（FP）可能白屏也算。首次内容绘制（FCP）出现内容才算 如何获取 监控html的字节数 或者找一个关键元素，导航栏什么的
• 关键元素是否显示
  • 首次有效绘制。主角元素记时
• 是否可用
  • 可交互时间（TTI） 可以看到js加载完，信息都拿回来了，就可以判断 有输入框，就可以监听到输入框的交互，或者还可以监听cpu是否闲置了
• 是否卡顿
  • CPU消耗。输入延迟 模拟输入框输入

 

网络优化策略

 

• 本地缓存
• 离线包
• 预加载
• 压缩
• 请求合并

缓存

• http缓存 写头部就可以
• 移动端缓存（native）比如说安卓工程师在设计时提供了缓存的位置在app里，那么就可以提供一个APi去主动的缓存
• 服务端缓存（redis（缓存工具）、ssr等） 在服务端渲染，然后缓存渲染结果并返回

压缩

• js压缩、css压缩、html压缩
  • uglifyjs(插件）/xxx minify（css，js压缩）
• GZIP
  • express/nginx/faddy web 服务器
• 合并
  • 雪碧图 HTTP2.0后可以不用（因为带宽变快，雪碧图收效甚微）

请求合并
可以浏览器端，但是更希望发生在服务器端
浏览器，打开一个页面要请求很多很多接口 然后我们在网络节点内部做一个nodejs节点
不是node服务器，而是函数计算，直接部署一个函数，拿到所有请求，统一返回前端 ，一般会把fasS（node.js)和 API请求放到内网，请求要的时间就小了。这个可以当服务端渲染节点，更快了
缓存页面，需要的css js返回请求，一起拿到回来

离线包
在打开APP期间将资源推送到APP的缓存中
利用APP的客户闲置时间，
如果手机打开一个淘宝页面，但是这个时候聊微信去了，那么淘宝就会利用这个后台的时间去拿资源，就如果一个淘宝页面要rect.js那么你聊微信，他就会去请求这个js文件，存到APP缓存里，然后打开页面就会在缓存里找。
道德素养 最好在wifi情况下去使用

需要native工程师一起开发

预加载

• APP预加载完整容器（Webview）不同于离线包，一个是加载到缓存，这个是直接加载到webview
• 应用预加载下一个页面数据