性能工程化（大体方向）
本文对前端涉及到的性能优化点进行概况，后续细化补充~
大体方向：
- 网络传输
- 缓存加速页面
- 资源网络加载
- 代码运行时
- 服务接口
网络传输
- 开启http2
- 二进制传输：解析高效，体积更小
- 多路复用：多个请求复用一次网络连接
- 服务端推送：用户请求html，把相关资源一并推送
- 压缩消息头体积：建立字典，用索引代表重复字符串
- 使用CDN部署静态资源 juejin.cn/post/698390…
- 使用DNS预解析 dns-prefetch
- 提前建立网络请求（dns解析，tcp握手，tls加解密等） preconnect
- 域名收敛：页面资源尽可能部署在少的域名上，减少网络构建成本，发挥多路复用
- brotil压缩，比gzip压缩效率更高
- https优化 zhuanlan.zhihu.com/p/348215533
- session复用
- ocsp stampling
- tls1.3
- Tcp fast open
- hsts
缓存
- DNS缓存
- 宿主浏览器缓存： - Service Work —— cacheAPI - Memory cache —— HTTP缓存（强，协商） - Disk cache —— HTTP缓存（强，协商） - Push Cache —— HTTP2缓存推送，会话中存在
- 运行时缓存： - Cookie： 简单业务数据 - LocalStorage && SessionStorage： 一定体积的数据 - DB：存储大量结构化数据 - Memory： 临时数据
资源网络加载
- 资源预加载： link标签rel属性的prefetch，prerender
- html加载优化
- 控制html体积（不超过30kb），减少dom，压缩，谨慎内连
- 骨架屏占位：有效缓解加载白屏，用户体验up
- js加载优化
- 控制加载时机：defer，async，也可以通过js来控制
- 优化文件体积：压缩，按需加载，使用tree shaking，谨慎引入三方库
- 减少请求：打包优化，利用缓存
- css加载优化
- 优化文件体积： cssnano压缩代码，去除冗余样式
- 减少网络请求：打包优化，利用缓存
- 字体加载优化
- 裁剪工具的使用，减少字体文件大小
- 缓存
- 图片加载优化
- 控制加载时机： 关键图尽可能先加载（大图预加载，小图内联），非关键（非首屏大图懒加载）
- 合适的图片格式： 矢量图使用svg，像素图使用 webp ；颜色少层次分明使用png 反之使用jpg
- 图片压缩工具：TinyPNG
- 其他： 大图拆分（加载核心），小图合并（一次请求多个图），媒体查询（合适体积图），缓存（设置文件指纹）
代码运行
- HTML
- 减少DOM数量
- innerHTML来增删多个元素
- getElementByxx来获取元素
- JS
- 网络请求提前
- 避免出现CPU过高
- 合理使用内存
- CSS
- 使用现代化布局
- 谨慎使用影响性能大的属性
- 避免高频触发重绘，重排
服务接口
- 网络
- API动态加速
- HTTP DNS
- 避免跨机房
- 存储
- Mysql
- Redis
- Local cache
- 其他
- 善用并发
- 消息队列
