一、减少 HTTP 的请求次数和传输报文的大小

1、CSS SPRITE（雪碧图、图片精灵）技术

2、使用字体图标（ICON FONT）或者 SVG 等矢量图

    1.会减少 HTTP 请求次数或者减少请求内容的大小

    2.渲染更快：因为他们是基于代码渲染的，而对于位图（png/jpg/gif）是需要先把图片编码再渲染

    3.不容易失真变形

    4.也可以使用 webp 格式图片，这种格式要小一些（但是需要服务器端支持这种格式的请求处理）

3、图片懒加载（延迟加载）技术

    1.在第一次加载时候不给真实地址、图片，提高了第一次渲染页面的速度

    2.当页面加载完，把出现在用户视野区域中的图片做真实加载，没有出现的先不加载（节约流量，也能减少对服务器的请求压力）

    3.对于数据我们也尽可能分批加载（不要一次请求过多的数据，例如分页技术）

4、音视频文件取消预加载（preload='none'），增加第一次渲染页面的速度

5、客户端和服务器端的数据传输尽可能基于 JSON 格式完成，因为XML 格式比 JSON 格式要大一些（还可以基于二进制编码或者文件流格式，这种格式比文件传输好很多）

6、把页面中的 CSS/JS/图片等文件进行合并压缩

    合并：争取 CSS 和 JS 都只导入一个（webpack 可以实现自动合并压缩）

    压缩：基于 webpack 可以压缩、对于图片自己找工具先压缩、还可以使用服务器的 GZIP 压缩

7、使用图片地图

    对于多次调取使用的图片（尤其是背景图），我们尽可能把它提取成为公共的样式，而不是每一次重新设置 background

8、图片可以使用 BASE64码

    优点：用 BASE64 码代表图片，减少了 HTTP请求，增加浏览器渲染的速度，所以真实项目中，尤其是移动端渲染效果明显变快

    缺点：BASE64码 会导致文件中的代码过多，不利于维护和开发

二、设置各种缓存、预处理和长连接机制

1、把不经常更改的静态资源做缓存处理

    可以304 HTTP协商缓存 或者 ETAG 等协商缓存

2、建立 Cache-Control 和 Expires HTTP 的强缓存

3、DNS 缓存或者预处理（DNS PREFETCH），减少 DNS 的查找

4、设置本地的离线存储（manifest）或者把一些不经常更改的数据做本地存储（webstorage、indexdb）等

5、建立 Connection:keep-alive TCP 长连接

6、使用 HTTP2 版本协议（现在用的一般都是 HTTP1.1）

    HTTP2可以多条 TCP 通道共存

7、分域：一个项目分为不同的域（不同的服务器）

    例如：资源 WEB 服务器、数据服务器、图片服务器、视频服务器等，这样合理利用服务器资源

    缺点：会导致过多的 DNS 解析

8、氪金大佬

    1.CDN（地域分布式服务器）

    2.加服务器

三、代码方面的性能优化

1.减少对闭包的使用

    1.过多使用闭包会产生很多不销毁的内存，内存过多会导致内存溢出“栈溢出”

    2.减少闭包的嵌套（减少作用域链的查找层级）

2.项目中的动画需求，尽量用CSS 解决

    1.能够用 transform 处理的，不用传统的 css 样式，因为 transform 开启硬件加速，不会引发回流

    2.CSS中使用定位的元素也会好很多，定位脱离文档流，不影响其他元素的位置

    3.能用 requestAnimationFrame 解决的不用定时器，因为requestAnimationFrame当页面处于休眠无访问状态，动画会自己暂停，直到恢复访问才开始，而定时器是不论什么状态，只要不手动处理就会执行

3、避免使用 iframe

    iframe 会嵌入其它页面，父页面渲染的时候，同时渲染子页面，渲染进度会变慢

4、减少直接对 DOM 的操作(减少重绘和回流)

    现在项目基本上都是基于 MVVM（Vue）、MVC（React）进行数据驱动视图渲染，性能好于直接操作DOM

5、低耦合高内聚

    进行方法、插件、组件、框架、类库等封装，减少页面中的冗余代码，提高代码使用率

6、尽可能使用事件委托

    事件委托可以给动态元素绑定事件，而且基于事件委托实现，整体性能会比一个一个绑定事件高50%

7、避免出现死循环或者嵌套循环（嵌套循环会成倍增加循环的次数）

8、项目中尽可能使用异步编程来模拟出多线程的效果，避免主线程阻塞（异步操作基于 PROMISE 设计模式来管理）

9、JS 中不要使用 with

10、避免使用 CSS 表达式

11、使用函数的防抖和节流

12、减少使用 eval

    防止压缩代码时，由于符号书写不合规，导致代码混乱

13、减少 filter 滤镜的使用

14、尽可能减少CSS选择器的层级

    CSS选择器是从右向左解析 .box a{} 和 a{}

15、减少 TABLE 布局

16、手动回收堆栈内存

    将没用的堆内存赋值为null //=>obj=null

这些优化方案都是我们上课时候老师带同学们一起总结的，如果有什么不对的地方欢迎指出、欢迎补充

师承——北京珠峰培训：周啸天