梳理整理一下前端性能优化常见思路与技巧
性能优化的目的是让用户觉得你的网站访问起来速度快，即使实际速度可能并没有变，只是感觉变快了。因此优化可以从两个方向，即真的快和感觉变快了。
真的快
真的快就是让网站资源以最快速度到达用户浏览器，可以按照下面的思路和方法去优化。
传输的内容体积要小
- 图片要压缩
- 图片根据支持格式选择体积更小的格式
- css,js内容压缩
- 服务端开启Gzip，在传输数据之前再次压缩
传输的内容数量要少
- 图片图标合并(css sprite),svg图标合并(svg sprite)
- css,js文件打包合并
网速要足够快
- 服务器出口带宽够
- 南北差异，不同地方部署不同服务器
- 静态资源放CDN
服务器响应要及时
- 接口响应速度要快(数据库优化，查询优化，算法优化)
- cpu，内存，硬盘读写不要成为瓶颈，多加机器
- 重要页面静态化。服务端提前渲染生成静态页面，用户访问时直接返回
能重复利用的资源要利用好
- 服务器设置合适的静态资源缓存时间
- 前端文件打包时做合理的分块，让公共资源缓存后能被多个页面复用
暂时不需要的资源先不要
- 图片懒加载
- 功能，模块，组件按需加载
将来需要的资源抽空先拿到
- DNS 预解析
- 预连接
- 预获取
- 预渲染
体验快
体验快就是网站交互是流畅的，舒适的。
滚动页面不要有迟滞感
- 短时间连续大量触发操作要节流
常见操作不要拖泥带水
- DOM操作不能过于频繁
- 不要出现内存泄漏
- 优化复杂算法
动画不要卡顿
- 多用CSS动画，少用JS动画
- 开启硬件加速
- 动画或过渡执行时间不要太久
臆想的优化不是优化，无明显成效的优化不是优化。浏览器的性能已经足够快，不要因为“过渡优化”牺牲代码的可读性
先做简单见效快的优化，再做复杂见效慢的优化。