性能优化
优化的目的是让用户有“快”的感受，那如何让用户感受到快呢？
- 加载速度真的很快，用户打开输入网址按下回车立即看到了页面
- 加载速度并没有变快，但用户感觉你的网站很快
传输快
真快就是网站资源以最快的速度达到用户的浏览器，我们先大致定一下基本原则：
传输内容体积小
传输内容数量少
网速足够快
服务器响应及时
能重复利用的资源利用好
暂时不需要的资源先不要
将来需要的资源抽空再要
接下来我们来做一个细化：
- 传输的内容体积要小
图片要压缩
图片根据支持情况选择体积更小的格式(如 webp)
css、js 内容压缩
服务端开启 Gzip，在传输数据之前再次压缩
- 传输的内容数量要少
图片图标合并（css sprite）、svg 图标合并（svg sprite）
css、js 文件打包合并
- 网速足够快
服务器出口带宽要够
考虑到南北差异、运营商差异，在不同地区部署服务器
静态资源放 CDN
- 服务器响应要及时
接口响应速度要快(数据库优化、查询优化、算法优化)
cpu、内存、硬盘读写不要成为瓶颈；多加几台机器
重要页面(首页)静态化。服务端提前渲染后首页生成静态页面，用户访问首页直接返回静态页面，不需要像其他页面那样还需加载 css、js 再获取数据渲染展示
- 能重复利用的资源要利用好
服务器设置合适的静态资源缓存时间
前端文件打包时做合理的分块，让公共的资源缓存后能被多个页面复用
- 暂时不需要的资源先不要
图片懒加载
功能、模块、组件按需加载
- 将来需要的资源抽空先拿到
1. DNS 预解析 <link rel="dns-prefetch" href="//jirengu.com">
2. 预连接 <link rel="preconnect" href="//jirengu.com">
3. 预获取 <link rel="prefetch" href="image.png">
4. 预渲染 <link rel="prerender" href="//xiedaimala.com">
体验快
体验快就是让用户觉得网站的交互是“流畅的”、“舒适的”。
- 滚动页面不会有迟滞感
- 短时间连续大量操作需要节流
- 一些常见操作不要拖泥带水
DOM操作不要过于频繁
不要有内存泄露
优化复杂运算
- 动画不要卡顿
多用CSS动画，少用JS动画
开启硬件加速
不要用setTimeout/setInterval去模拟动画
动画或者过渡的执行时间不要太长
