美文网首页
Javascript 代码优化

Javascript 代码优化

作者: 慕容跳凯 | 来源:发表于2017-01-04 21:11 被阅读0次

客户端的脚本可以使你的应用变得动态和生动,但是浏览器对于JavaScript的解释可能会导致效率的底下,而且随着客户端本身的不同也会导致性能的不同。我们整理了一些建议和最好的实践来优化你的Javascript 代码。

定义class的方法

下面这个例子是低效的,每一次实例化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函数,同时也没有闭包函数产生。

初始化实例变量

Place instance variable declaration/initialization on the prototype for instance variables with value type (rather than reference type) initialization values (i.e. values of type number, Boolean, null, undefined, or string).这个可以避免每次构建函数被调用时不必要地每次都运行初始化代码(但是如果你的实例变量是依赖于构建函数的传入参数,或者依赖于构建时的一些状态则不适用于该建议)

例子

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被执行,引用c快于b,快于a
在ie中使用闭包的信息可以浏览IE+JScript Performance Recommendations Part 3: JavaScript Code inefficiencies

避免使用with

在你的代码中要避免视同with。它的性能很差,因为它会修改作用域链,使得其他的作用域连中查找变量变得困难。网站应用中最常见的内存泄漏是因为JavaScript脚本引擎和浏览器的C ++对象实现DOM一件的循环引用(例如:between the JavaScript script engine and Internet Explorer's COM infrastructure, or between the JavaScript engine and Firefox XPCOM infrastructure)

避免浏览器内存泄漏

在web应用中内存泄漏是一个很常见的问题,它会导致巨大的性能问题。当你的网站应用导致浏览器使用的的内存增加,会影响到用户的系统的其他部分变得缓慢。

这里有一些经验的法则来避免内存泄漏:

把事件处理绑定在事件管理系统上

最常见的循环引用类型就是 [ DOM element --> event handler --> closure scope --> DOM ],为了避免这种问题,应该选择一个经过良好测试的事件管理系统来绑定事件处理,例如Google doctype,Dojo或者Jquery。

未完

[原文链接](https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables)

相关文章

  • JavaScript代码优化

    js代码优化 1️⃣函数变量使用驼峰式,提高函数名的可读性2️⃣使用&& 减少if判断,应用场景是&&前使用boo...

  • Javascript 代码优化

    客户端的脚本可以使你的应用变得动态和生动,但是浏览器对于JavaScript的解释可能会导致效率的底下,而且随着客...

  • javaScript代码优化

    1. 检测工具 JSBeach[https://jsbench.me/] 2. 慎用全局变量 全局变量特点:...

  • 高性能php开发

    php优化路线 1.前端JavaScript/css/Images 2. php 代码优化tips Opcode缓...

  • 优化Javascript代码性能

    优化JS代码性能 优化循环 我们来看一段段代码 这段代码循环footballTeam中的members数组,然后打...

  • 技术贴 - 收藏集 - 掘金

    Prepack - Facebook 开源库帮助你自动优化 JavaScript 代码提高运行速度 - 前端 - ...

  • javaScript性能优化之代码优化

    利用函数的惰性载入提高 javaScript 代码性能 在 javaScript 代码中,因为各浏览器之间的行为的...

  • JavaScript优化方案(一)

    前端工作离不开性能优化,关于前端优化可以分为以下维度。 加载和执行 管理JavaScript代码是个棘手的问题,代...

  • 谈谈JavaScript异步代码优化

    前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用、定时器的使用等,在这...

  • JavaScript代码优化问题示例

    找出下面代码并优化它 对该代码的优化是三个点 把data.length提出去 不要在里面进行提取dom('list...

网友评论

      本文标题:Javascript 代码优化

      本文链接:https://www.haomeiwen.com/subject/bpravttx.html