前端性能优化汇总

1.减少HTTP请求次数和请求的大小（三大类）
文件的合并和压缩：（1）（6）
延迟加载：（3）（4）
用新的文件格式代替传统文件格式：（2）（5）（8）
在这里插入图片描述

//=>栈溢出：死递归
function func(){func();
}
func();
//=>解决方案
function func(){setTimeout(func,0);
}
func();//=>相互引用：引用类型之间的相互调用，形成嵌套式内存 （高程三）
let obj1={name:'OBJ1'
};
let obj2={name:'OBJ2',x:obj1
};
obj1.x=obj2;

2.建立缓存机制
网络缓存：（1）（2）（3）（6）（7）
本地缓存：（4）
加服务器：（5）

（1）把不经常更改的静态资源做缓存处理（一般做的是 304 或者 ETAG 等协商缓存）
（2）建立 Cache-Control 和 Expires HTTP 的强缓存
（3）DNS 缓存或者预处理（DNS PREFETCH），减少 DNS 的查找
（4）设置本地的离线存储（manifest）或者把一些不经常更改的数据做本地存储（webstorage、indexdb）等
（5）有钱就做 CDN（地域分布式服务器），还有一个财大气粗的方式：加服务器
（6）建立 Connection:keep-alive TCP 长连接
（7）使用 HTTP2 版本协议（现在用的一般都是 HTTP1.1），可以多条 TCP 通道共存 =>管道化链接
（8）一个项目分为不同的域（不同的服务器），例如：资源 WEB 服务器、数据服务器、图片服务器、视频服务器等，这样合理利用服务器资源，但是导致过多的 DNS 解析

3.代码上的优化
重点记住：（1）~（8）

（1）减少直接对 DOM 的操作（原因是减少 DOM 的回流和重绘…），当代项目基本上都是基于 mvvm/mvc 数据驱动视图渲染的，对 DOM 的操作框架本身完成，性能要好很多
（2）低耦合高内聚（基于封装的方式：方法封装、插件、组件、框架、类库等封装，减少页面中的冗余代码，提高代码使用率）
（3）减少对闭包的使用（因为过多使用闭包会产生很多不销毁的内存，处理不好的话，会导致内存溢出“栈溢出”），减少闭包的嵌套（减少作用域链的查找层级）
（4）对于动画来说：能用 CSS 解决的不用 JS（能够用 transform 处理的，不用传统的 css 样式，因为 transform 开启硬件加速，不会引发回流，再或者使用定位的元素也会好很多，因为定位的元素脱离文档流，不会对其它元素的位置造成影响），能用requestAnimationFrame 解决的不用定时器（requestAnimationFrame 还有一个好处，当页面处于休眠无访问状态，动画会自己暂停，直到恢复访问才开始，而定时器是不论什么状态，只要页面不管，就一直处理）
（5）尽可能使用事件委托
（6）函数的防抖和节流
（7）避免出现死循环或者嵌套循环（嵌套循环会成倍增加循环的次数）
（8）项目中尽可能使用异步编程来模拟出多线程的效果，避免主线程阻塞（异步操作基于 PROMISE 设计模式来管理）
（9）避免使用 iframe（因为 iframe 会嵌入其它页面，这样父页面渲染的时候，还要同时把子页面也渲染了，渲染进度会变慢）
（10）JS 中不要使用 with
（11）避免使用 CSS 表达式
（12）减少使用 eval（主要原因是防止压缩代码的时候，由于符号书写不合规，导致代码混乱）
（13）减少 filter 滤镜的使用
（14）尽可能减少选择器的层级（选择器是从右向左解析） .box a{} 和 a{}
（15）尽可能减少 TABLE 布局
（16）手动回收堆栈内存（赋值为 null）