JavaScript code 性能优化

1

1

1

JavaScript 性能优化 prototype 闭包 Closure 内存泄漏 event system

1

定义类方法

以下是低效的，因为每次构建baz.Bar的实例时，都会为foo创建一个新函数和闭包：

baz.Bar = function() {
  // constructor body
  this.foo = function() {
    // method body
  };
}
首选方法是：

baz.Bar = function() {
  // constructor body
};

baz.Bar.prototype.foo = function() {
  // method body
};
使用这种方法，无论构建多少个baz.Bar实例，都只会为foo创建一个函数，并且不会创建闭包。

初始化实例变量

将实例变量声明/初始化放在具有值类型（而不是引用类型）初始值的实例变量的原型上(i.e. values of type number, Boolean, null, undefined, or string)

（即, 类型是 number, Boolean, null, undefined, 或 string的值）

ES 6: Symbol ???

这避免了每次调用构造函数时不必要地运行初始化代码。(对于初始值依赖于构造函数的参数的实例变量，或者构造时的某个其他状态，不能这样做。)

例如，代替

foo.Bar = function() {
  this.prop1_ = 4;
  this.prop2_ = true;
  this.prop3_ = [];
  this.prop4_ = 'blah';
};
使用：

foo.Bar = function() {
  this.prop3_ = [];
};
foo.Bar.prototype.prop1_ = 4;
foo.Bar.prototype.prop2_ = true;
foo.Bar.prototype.prop4_ = 'blah';
避免闭包的陷阱

闭包是JavaScript的一个强大而有用的特性;然而，它们有几个缺点，包括：

它们是内存泄漏的最常见的来源。
创建闭包比创建没有闭包的内部函数慢得多，并且比重用静态函数慢得多。
例如：

function setupAlertTimeout() {
  var msg = 'Message to alert';
  window.setTimeout(function() { alert(msg); }, 100);
}
慢于：

function setupAlertTimeout() {
  window.setTimeout(function() {
    var msg = 'Message to alert';
    alert(msg);
  }, 100);
}
其慢于：

function alertMsg() {
  var msg = 'Message to alert';
  alert(msg);
}

function setupAlertTimeout() {
  window.setTimeout(alertMsg, 100);
}
它们向作用域链添加级别。当浏览器解析属性时，必须检查作用域链的每个级别。在以下示例中：

var a = 'a';

function createFunctionWithClosure() {
  var b = 'b';
  return function () {
    var c = 'c';
    a;
    b;
    c;
  };
}

var f = createFunctionWithClosure();
f();
当调用f时，引用a比引用b慢，这比引用c慢。

有关何时使用闭包与IE的信息的, 请参阅IE + JScript性能建议第3部分：JavaScript代码效率低下 。

避免使用 with

避免在代码中使用 with 。它对性能有负面影响，因为它修改了作用域链，使得在其他作用域中查找变量更加昂贵。

Avoiding browser memory leaks

内存泄漏是Web应用程序的一个常见的问题，可能导致巨大的性能损失。随着浏览器的内存使用量的增长，您的Web应用程序以及用户系统的其余部分会减慢。

Web应用程序最常见的内存泄漏包括JavaScript脚本引擎和浏览器的C ++对象实现DOM之间的循环引用 ( 例如JavaScript脚本引擎和Internet Explorer的COM基础结构之间，或JavaScript引擎和Firefox XPCOM基础结构之间 )。

下面是一些避免内存泄漏的经验法则：

使用事件系统附加事件处理程序

最常见的循环引用模式[DOM元素 - >事件处理程序 - >闭包范围 - > DOM]元素在MSDN博客文章中讨论。要避免此问题，请使用经过良好测试的事件系统之一来附加事件处理程序，例如Google doctype，Dojo 或 JQuery 中的事件处理程序。

此外，使用内联事件处理程序可能导致在IE中的另一种类型的泄漏。这不是常见的循环引用类型泄漏，而是内部临时匿名脚本对象的泄漏。有关详细信息，请参阅“DOM插入顺序泄漏模型”一节在了解和解决Internet Explorer漏洞模式和一个例子在这个JavaScript工具包教程。

避免使用expando属性

Expando属性是DOM元素的任意JavaScript属性，是循环引用的常见来源。你可以使用expando属性而不引入内存泄漏，但是很容易偶然引入。这里的泄漏模式是[DOM元素 - >通过expando - >中间对象 - > DOM元素]。最好的办法是避免使用它们。如果您确实使用它们，则只能使用带有基本类型的值。如果确实使用非原始值，则在不再需要expando属性时将其取消。请参阅了解和解决Internet Explorer泄漏模式中的“循环引用”一节。

1

1

作者：xgqfrms
链接：https://zhuanlan.zhihu.com/p/24884853
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

定义类方法

以下是低效的，因为每次构建baz.Bar的实例时，都会为foo创建一个新函数和闭包：

baz.Bar = function() {
  // constructor body
  this.foo = function() {
    // method body
  };
}

首选方法是：

baz.Bar = function() {
  // constructor body
};

baz.Bar.prototype.foo = function() {
  // method body
};

使用这种方法，无论构建多少个baz.Bar实例，都只会为foo创建一个函数，并且不会创建闭包。

初始化实例变量

将实例变量声明/初始化放在具有值类型（而不是引用类型）初始值的实例变量的原型上(i.e. values of type number, Boolean, null, undefined, or string)

（即, 类型是 number, Boolean, null, undefined, 或 string的值）

ES 6: Symbol ???

这避免了每次调用构造函数时不必要地运行初始化代码。(对于初始值依赖于构造函数的参数的实例变量，或者构造时的某个其他状态，不能这样做。)

例如，代替

foo.Bar = function() {
  this.prop1_ = 4;
  this.prop2_ = true;
  this.prop3_ = [];
  this.prop4_ = 'blah';
};

使用：

foo.Bar = function() {
  this.prop3_ = [];
};
foo.Bar.prototype.prop1_ = 4;
foo.Bar.prototype.prop2_ = true;
foo.Bar.prototype.prop4_ = 'blah';

避免闭包的陷阱

闭包是JavaScript的一个强大而有用的特性;然而，它们有几个缺点，包括：

• 它们是内存泄漏的最常见的来源。
• 创建闭包比创建没有闭包的内部函数慢得多，并且比重用静态函数慢得多。

例如：

function setupAlertTimeout() {
  var msg = 'Message to alert';
  window.setTimeout(function() { alert(msg); }, 100);
}

慢于：

function setupAlertTimeout() {
  window.setTimeout(function() {
    var msg = 'Message to alert';
    alert(msg);
  }, 100);
}

其慢于：

function alertMsg() {
  var msg = 'Message to alert';
  alert(msg);
}

function setupAlertTimeout() {
  window.setTimeout(alertMsg, 100);
}

它们向作用域链添加级别。当浏览器解析属性时，必须检查作用域链的每个级别。在以下示例中：

var a = 'a';

function createFunctionWithClosure() {
  var b = 'b';
  return function () {
    var c = 'c';
    a;
    b;
    c;
  };
}

var f = createFunctionWithClosure();
f();

当调用f时，引用a比引用b慢，这比引用c慢。

有关何时使用闭包与IE的信息的, 请参阅IE + JScript性能建议第3部分：JavaScript代码效率低下。

避免使用 with

避免在代码中使用 with 。它对性能有负面影响，因为它修改了作用域链，使得在其他作用域中查找变量更加昂贵。

Avoiding browser memory leaks

内存泄漏是Web应用程序的一个常见的问题，可能导致巨大的性能损失。随着浏览器的内存使用量的增长，您的Web应用程序以及用户系统的其余部分会减慢。

Web应用程序最常见的内存泄漏包括JavaScript脚本引擎和浏览器的C ++对象实现DOM之间的循环引用 ( 例如JavaScript脚本引擎和Internet Explorer的COM基础结构之间，或JavaScript引擎和Firefox XPCOM基础结构之间 )。

下面是一些避免内存泄漏的经验法则：

使用事件系统附加事件处理程序

最常见的循环引用模式[DOM元素 - >事件处理程序 - >闭包范围 - > DOM]元素在MSDN博客文章中讨论。要避免此问题，请使用经过良好测试的事件系统之一来附加事件处理程序，例如Google doctype，Dojo 或 JQuery 中的事件处理程序。

此外，使用内联事件处理程序可能导致在IE中的另一种类型的泄漏。这不是常见的循环引用类型泄漏，而是内部临时匿名脚本对象的泄漏。有关详细信息，请参阅“DOM插入顺序泄漏模型”一节在了解和解决Internet Explorer漏洞模式和一个例子在这个JavaScript工具包教程。

避免使用expando属性

Expando属性是DOM元素的任意JavaScript属性，是循环引用的常见来源。你可以使用expando属性而不引入内存泄漏，但是很容易偶然引入。这里的泄漏模式是[DOM元素 - >通过expando - >中间对象 - > DOM元素]。最好的办法是避免使用它们。如果您确实使用它们，则只能使用带有基本类型的值。如果确实使用非原始值，则在不再需要expando属性时将其取消。请参阅了解和解决Internet Explorer泄漏模式中的“循环引用”一节。

1

1

1

1

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！