移动前端性能优化

本文摘录我所接触过的前端性能优化，纯手打，欢迎补充
注：因为每个知识点要细说都需要长篇大论，所以此处只作归纳概括，详情请自行查阅

1. 利用各种缓存&储存

a. html5 Application Cache
可用在更新不频繁的模块或页面上使用
缺点：需要更新的时候整个 manifest 里面的文件都会重新请求下载一次
http://www.w3school.com.cn/html5/html_5_app_cache.asp

b. http缓存机制

  
  
  

// 协商缓存，服务器返回304表示资源没更改，使用本地缓存

https://segmentfault.com/a/1190000010690320

HTML文件必须使用协商缓存，在服务器设置
如引用的静态文件后加盖md5戳，只要HTML文件变了，静态文件引用后加的md5戳也改变了，可使用强缓存，否则只能使用协商缓存

c. localStorage
通常用作储存页面数据，当页面打开时先取上次储存的数据快速展示页面，等待接口数据返回再更新页面数据
缺点：一般情况下永不过期，但在微信环境有时候可能会自动帮忙清理

d. app资源内置
适用于 Hybrid App，打成zip包，一般用作储存公共资源、首页等重要模块，通常在发包的时候直接内置或闪屏时进行预下载
缺点：资源包有一定体积，若更新出错或者网络环境差未能及时下载，可能会影响使用

2. 增量更新

前端资源通过加盖md5戳实现非覆盖发布，目前 gulp 或 webpack 工程化的项目都能轻易实现

3. 资源请求优化

合并资源，减少http请求，压缩资源，减小体积，服务器开Gzip压缩传输的数据

4. 图片优化

a. 根据不同客户端返回不同格式和大小的图片，使用webp格式 google出品 可压缩 30%~40% 大小
b. iconfont 代替图片图标，
c. 如图标不多不使用iconfont，采用内嵌 base64 格式代替http链接

5. 资源使用多域名

静态资源分类使用cdn或其他独立域名，可扩展并发数；不携带cookie，可减小体积
http1.1 浏览器对同一域名并发数有限制，chrome 大概6个

6. 预解析DNS

典型的一次DNS解析耗费20-120 毫秒，减少DNS解析时间和次数能减少用户的等待时间，提升用户体验。

7. 慎用iframe，最好不用

iframe所有的JS/CSS全部再加载一遍，且和主页面共享连接池，所以会影响页面的并行加载，浪费资源
iframe会阻塞主页面的onload事件

8. 首屏先加载、按需加载（懒加载）、预加载

9. 避免重定向

10. 避免资源404

11. vue 等框架可选择服务器渲染 SSR

这个须用nodejs做服务器或中转层，对开发限制也很多，请斟酌使用

12. Progressive Web Apps (pwa) 方案

利用 service worker 和 fetch 改造成 pwa
pwa 基于google android 底层和chrome浏览器
ios 虽已发 beta 版本支持 service worker，但api兼容暂未明朗