Web前端性能优化整理(持续更新)

一.效率优化

1.V8隐藏类

V8在将解释后的JavaScript代码编译为实际的机器码时会利用“隐藏类”提升性能。共享同一个构造函数和原型的实例会共享相同的隐藏类，动态添加属性和delete删除属性会导致实例不在共享同一“隐藏类”。因此，尽可能使用赋值null替代delete，这样可以保持隐藏类共享，养成良好的编程习惯，同时也能达到删除引用值供垃圾回收程序回收。

2.尾调用优化

尾调用优化的条件：
1.代码在严格模式下执行；
2.外部函数的返回值是对尾调用函数的调用；
3.尾调用函数返回后不需要执行额外的逻辑；
4.尾调用函数不是引用外部函数作用域中自由变量的闭包。
示例:递归计算斐波纳契数列

//无优化：
function fib(n) {
  if (n < 2) {
    return n;
  }

  return fib(n - 1) + fib(n - 2);
}
有优化：
"use strict";

// 基础框架
function fib(n) {
  return fibImpl(0, 1, n);
}

// 执行递归
function fibImpl(a, b, n) {
  if (n === 0) {
    return a;
  }
  return fibImpl(b, a + b, n - 1);
}

二.内存优化

1.解除无用变量的引用

现代主流的垃圾回收算法都采用标记清理的方式来回收内存。但在一些旧版本IE中使用的是引用计算算法来进行垃圾回收。解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对象、全局对象的属性和循环引用都应该在不需要时解除引用。

2.闭包注意事项

在执行闭包函数时,如果存在闭包函数不依赖的外部作用域属性,尽量将那些属性置为null,因为闭包函数的作用域链中会保存外部函数的活动对象,因此那些没有用到的属性不会被回收。主动置为null可以释放掉那部分被闭包锁住的无用内存。

3.Dom事件委托与删除事件

当大量需要添加类似点击事件的DOM元素在同一个父元素之下,可以给父元素添加一个点击事件，通过事件冒泡机制触发此次点击,并用target属性确定当前点击的对象。可以避免先期延迟,占用内存更少。适合使用这种方式处理的事件:click、mousedown、mouseup、keydown和keypress。在删除某个元素时,确保移除了元素上的事件,最常见情况是使用innerHTML整体替换页面。如果被替换元素上有事件处理程序，则不会被垃圾处理程序正常清理。需要注意的是,在事件处理程序中,如果事件目标不存在于文档中,则不会冒泡。

4.console.log打印

在上生产环境之前切记要将console.log打印给去掉。console.log打印的对象因为需要在控制台显示信息，所以不会被垃圾回收。在打印保存大数据对象时，容易造成内存溢出。血泪史亲历！！！