前端性能优化汇总
- 减少HTTP请求次数和传输报文的大小
- 文件合并压缩
- 雪碧图 css sprite（把所有的小图片放到一个大图片上）
- 图片base64（用base64码代表图片，减少http请求，增加浏览器的渲染速度，所以真实项目中，尤其是移动端，如果图片加载缓慢，可能是base64一下就好了：但是base64会导致文件中的代码超级恶心，不利于维护和开发，所以很少使用；webpack中可以配置图片的base64）
- 尽量使用字体图标或者SVG等矢量图
- 减少HTTP请求次数或者减少请求内容的大小
- 渲染更快：因为他们是基于代码渲染的，而对于位图（png/jpg/gif）数需要先把图片编码再渲染
- 不容易失真变形
- 也可以使用webp格式图片，这种格式要小一些（但是需要服务器端支持这种格式的请求处理）
- 图片懒加载
- 第一次夹在页面的时候不去请求真实的图片，提高第一次渲染页面的速度
- 当页面加载完，把出现在用户视野区域的图片做真实加载，没有出现的先不加载（节约流量也能减少对服务器的请求压力）
- 对于数据我们也尽可能分批加载（不要一次请求过多的数据，例如分页技术）；
- 音视频取消预加载（preload = ‘none’），这样可以增加一次页面渲染的速度，当需要播放的时候再加载
- 在客户端和服务端进行信息交互的时候，对于多项数据我们尽可能给予JSON格式来进行传送（JSON格式的数据处理方便，资源偏小）
- 把页面中的css/js/图片等文件进行合并压缩
- 合并：争取css和js都只导入一个（webpack可以实现自动合并并压缩）
- 压缩：基于webpack可以压缩、对于图片自己找工具先压缩、还可以使用服务器的gzip压缩
- 图片地图：对于多次调取使用的图片（尤其是背景图），我们尽可能把它提取成共公样式，每一次重新设置background
- …
- 建立缓存机制、预处理和长连接机制
- DNS缓存
- 数据缓存（例如：本地缓存）
- 强缓存和协商缓存（304）
- 设置本地离线缓存（manifest）或者把一些不经常更改的数据做本地存储（webstorage、indexdb）等
- 做CDN加速（地域分布式服务器）
- 建立Connection： keep-alive TCP长连接
- 建立Cache- Control 和 Expires HTTP的强缓存
- 使用HTTP2版本协议（现在一般使用的是HTTP1.1）
- 可以多条TCP通道共存 => 管道化链接
- 一个项目分为不同的域（不同服务器），例如：资源WE B服务器、数据服务器、图片服务器、视频服务器等，这样合理利用服务器资源，但是导致过多的DNS解析
- …
- 代码上的优化
- 减少DOM的重绘和回流
- 在js中尽量减少闭包的使用（因为过多使用闭包会产生很多不销毁的内存，处理不好的话，会导致内存溢出‘栈溢出’=> 死递归）
- 对于动画来说：能使用CSS解决的不用JS（能够transform处理的，不用传统的css样式，因为transform开启硬件加速，不会引发回流，再或者使用定位的元素也会好很多，因为定位的元素脱离文档流，不会对其他元素的位置造成影响），能使用requeustAnimationFrame解决的不用定时器
- requeustAnimationFrame还有一个好处就是，当页面处于休眠无访问状态，多年规划会自己暂停，直到回复访问才开始，而定时器是不论什么状态，只要页面不管，就一直处理
- 避免使用iframe（因为iframe会嵌入其他页面，这样父页面渲染的时候，还要同时把子页面也渲染了，渲染速度会变慢）
- 减少直接对DOM的操作（原因是减少DOM的回流与重绘）
- 低耦合高内聚（基于封装的方式：方法封装、组件、插件、框架、类库等封装，减少页面中的冗余代码，提高代码使用率）
- 尽可能减少事件委托
- 避免出现死循环或者嵌套循环（嵌套循环会成倍增加循环的次数）
- 项目中尽可能使用异步编程来模拟出多线程的效果，避免主线程阻塞
- js中不要使用with
- 避免使用css表达式
- 函数的防抖和节流
- 减少使用eval（主要原因是 防止压缩代码的时候，由于富豪书写不合规，导致代码混乱）
- 减少filter滤镜的使用
- 尽可能减少选择器的层级（选择器是从右往左解析）
- 尽可能减少TABLE布局
- 手动回收堆栈内存（赋值为null）
推荐可以继续学习
JS前端代码优化的108条建议
雅虎CSS代码优化的36条建议
webpack的性能优化
安全优化
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
