1. 减少HTTP请求 和 传输报文大小

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

2） 使用字体图标(ICON FONT) 或者 SVG等矢量图：

   · 渲染更快：它们是基于代码渲染，相对于位图（png/jpg/gif）需要将图片编码再渲染

   · 不容易失真变形

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

    · 第一次加载图片时不去请求真实图片，提高第一次页面的速度

    · 当页面加载完，把出现在用户视野的图片做真实加载。节约流量，减少对服务器的压力

    · 对于数据我们尽可能的分批加载，不要一次请求过多的数据。比如：分页技术。

4）音频文件取消预加载（preload='none'），增加第一次渲染页面速度，用户需要时再加载。

5） 客户端和服务器的数据传输尽可能使用JSON格式，XML 格式比 JSON 格式更大

6） 把CSS、JS、图片等文件进行合并压缩

   · 合并：争取CSS 和JS 都只导入一个。 => webpack 可以实现自动合并压缩

   · 压缩： 基于webpack只可以实现文件压缩，图片需要使用其他工具压缩，还可以使用服务器的GZIP压缩。

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

8）图片BASE64：tool.css-js.com 这个网站可以转换图片，使用BASE64 代码替代图片，减去浏览器传输图片时的转换步骤，但会导致文件中代码复杂，极不利于维护。不过 webpack 中可以配置图片为BASE64，解决了这一问题。

2. 设置各种缓存、预处理和长链接机制

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

   · 304 或  ETAG的协商缓存

   · Cache-control 和 Epires HTTP的强缓存

2）DNS缓存或预处理，减少DNS的查找。

3）设置本地的离线存储（Manifest）或者把一些不经常更改的数据做本地临时存储（webstorage、indexdb）

4）Connection：keep-alive 建立TCP长链接

5）CDN 地域分布式服务器，多加服务器。

3. 代码方面性能优化

1）减少对闭包的使用：

  · 过多的使用闭包会产生很多不销毁的内存，容易导致内存溢出——栈溢出。

  · 减少闭包的嵌套：减少作用域链的查找层级。

  · 栈溢出=>死递归

function fn ()  { 

     fn()

}

fn();

// 解决方法1：使用异步的方式

function func () {

      setTimeout( func, 0)

}

func();

// 解决方法2：相互引用 => 引用类型之间相互调用，形成嵌套式内存

let obj1 = {

     name : 'noe'

}

let obj2 = {

     name : 'two',

     i : onj1

}

obj1.i = obj2

2） 关于动画： CSS3的transform处理的动画 > 传统CSS样式 > JS的requestAnimationFrame    > 定时器动画

   · 将动画放在脱离文档流的元素上，这样不会对其他元素位置造成影响。

   · 避免使用iframe：因为iframe 会嵌入其他页面，这样父页面渲染的时候，还要将子页面也同时渲染。

   · 当页面处于休眠无访问状态（在一个浏览器中打开一个新的页面，上一个页面不关闭），此时requestAnimationFrame 动画会自动暂停，直到恢复访问才开始。而定时器无论什么状态 ，只有不处理，就会一直运行，消耗浏览器性能。

3） 减少直接对DOM的操作：减少DOM的回流和重绘。

4） 低耦合高内聚（基于封装的方式(方法封装、插件、组件、框架、类库等封装)，减少页面中的冗余代码，提高代码的重复使用率）

5） 尽可能使用事件委托

6）避免出现死循环或者嵌套循环：嵌套循环会成指数增加循环次数。

7） 项目中尽可能使用异步编程来模拟出多线程的效果，避免主线程阻塞。

8）避免使用CSS表达式

9）函数的防抖和节流

10）减少使用eval：防止压缩代码的时候，由于符号书写不合规，导致代码混乱。

11）减少CSS3 filter滤镜 的使用。

12）尽可能减少选择器的层级：选择器是从右向左解析

.box a { }

a { }

// 以上那个性能更好？ 答：第二个，因为选择器是从右向左解析。

13）手动回收堆栈内存（赋值为null）