本文摘录我所接触过的前端性能优化，纯手打，欢迎补充
注：因为每个知识点要细说都需要长篇大论，所以此处只作归纳概括，详情请自行查阅
1. 利用各种缓存&储存
a. html5 Application Cache
可用在更新不频繁的模块或页面上使用
缺点：需要更新的时候整个 manifest 里面的文件都会重新请求下载一次
http://www.w3school.com.cn/html5/html_5_app_cache.asp
b. http缓存机制
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
// 协商缓存，服务器返回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解析时间和次数能减少用户的等待时间，提升用户体验。
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://aaa.test.com" />
<link rel="dns-prefetch" href="http://bbb.test.com" />
<link rel="dns-prefetch" href="http://ccc.test.com" />
<link rel="dns-prefetch" href="http://ddd.test.com" />
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兼容暂未明朗
网友评论