码迷,mamicode.com
首页 > 编程语言 > 详细

javacript 优化2

时间:2016-03-31 16:30:18      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:

上面一篇文章大致介绍了一些javascript当中使用的一些小技巧,当下这篇文章继续介绍一下内存管理、松散耦合、性能方面的一些小知识、为避免错误应该注意的点

内存管理

1、循环引用 

如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放。

简单的循环引用:

    var el = document.getElementById(‘MyElement‘);    var func = function () {      //…    }    el.func = func;    func.element = el;

但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。

    function init() {      var el = document.getElementById(‘MyElement‘);      el.onclick = function () {        //……      }    }    init();

init在执行的时候,当前上下文我们叫做context。这个时候,context引用了el,el引用了function,function引用了context。这时候形成了一个循环引用。

下面2种方法可以解决循环引用:

1)  置空dom对象

    function init() {      var el = document.getElementById(‘MyElement‘);      el.onclick = function () {        //……      }    }    init();    //可以替换为:    function init() {      var el = document.getElementById(‘MyElement‘);      el.onclick = function () {        //……      }      el = null;    }    init();

将el置空,context中不包含对dom对象的引用,从而打断循环应用。

如果我们需要将dom对象返回,可以用如下方法:

    function init() {      var el = document.getElementById(‘MyElement‘);      el.onclick = function () {        //……      }      return el;    }    init();    //可以替换为:    function init() {      var el = document.getElementById(‘MyElement‘);      el.onclick = function () {        //……      }      try {        return el;      } finally {        el = null;      }    }    init();

 

2)  构造新的context

    function init() {      var el = document.getElementById(‘MyElement‘);      el.onclick = function () {        //……      }    }    init();    //可以替换为:    function elClickHandler() {      //……    }    function init() {      var el = document.getElementById(‘MyElement‘);      el.onclick = elClickHandler;    }    init();

把function抽到新的context中,这样,function的context就不包含对el的引用,从而打断循环引用。

 

2、通过javascript创建的dom对象,必须append到页面中 

IE下,脚本创建的dom对象,如果没有append到页面中,刷新页面,这部分内存是不会回收的!

    function create() {      var gc = document.getElementById(‘GC‘);      for (var i = 0; i < 5000; i++) {        var el = document.createElement(‘div‘);        el.innerHTML = "test";        //下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮然后刷新后的内存变化        gc.appendChild(el);      }    }

3、释放dom元素占用的内存

 将dom元素的innerHTML设置为空字符串,可以释放其子元素占用的内存。

 在rich应用中,用户也许会在一个页面上停留很长时间,可以使用该方法释放积累得越来越多的dom元素使用的内存。

4、释放javascript对象

 在rich应用中,随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让GC能够回收这些内存控件。

 对象:obj = null

 对象属性:delete obj.myproperty

 数组item:使用数组的splice方法释放数组中不用的item

5、避免string的隐式装箱

 对string的方法调用,比如‘xxx‘.length,浏览器会进行一个隐式的装箱操作,将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时,采用如下写法:

 var myString = new String(‘Hello World‘);

 松散耦合

1、解耦HTML/JavaScript 

JavaScript和HTML的紧密耦合:直接写在HTML中的JavaScript、使用包含内联代码的<script>元素、使用HTML属性来分配事件处理程序等 

HTML和JavaScript的紧密耦合:JavaScript中包含HTML,然后使用innerHTML来插入一段html文本到页面 

其实应该是保持层次的分离,这样可以很容易的确定错误的来源,所以我们应确保HTML呈现应该尽可能与JavaScript保持分离 

2、解耦CSS/JavaScript 

显示问题的唯一来源应该是CSS,行为问题的唯一来源应该是JavaScript,层次之间保持松散耦合才可以让你的应用程序更加易于维护,所以像以下的代码element.style.color=”red”尽量改为element.className=”edit”,而且不要在css中通过表达式嵌入JavaScript 

3、解耦应用程序/事件处理程序 

将应用逻辑和事件处理程序相分离:一个事件处理程序应该从事件对象中提取,并将这些信息传送给处理应用逻辑的某个方法中。这样做的好处首先可以让你更容易更改触发特定过程的事件,其次可以在不附加事件的情况下测试代码,使其更易创建单元测试 

性能方面的注意事项

1、尽量使用原生方法

2、switch语句相对if较快 

通过将case语句按照归可能到最不可能的顺序进行组织 

3、位运算较快 

当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快 

4、巧用||&&布尔运算符 

    function eventHandler(e) {      if (!e) e = window.event;    }    //可以替换为:    function eventHandler(e) {      e = e || window.event;    } 
    if (myobj) {      doSomething(myobj);    }    //可以替换为:    myobj && doSomething(myobj); 

避免错误应注意的地方

1、每条语句末尾须加分号 

在if语句中,即使条件表达式只有一条语句也要用{}把它括起来,以免后续如果添加了语句之后造成逻辑错误 

2、使用+号时需谨慎

JavaScript 和其他编程语言不同的是,在 JavaScript 中,‘+‘除了表示数字值相加,字符串相连接以外,还可以作一元运算符用,把字符串转换为数字。因而如果使用不当,则可能与自增符‘++‘混淆而引起计算错误

var valueA = 20; var valueB = "10"; alert(valueA + valueB); //ouput: 2010 alert(valueA + (+valueB)); //output: 30 alert(valueA + +valueB); //output:30 alert(valueA ++ valueB); //Compile error

3、使用return语句需要注意 

一条有返回值的return语句不要用()括号来括住返回值,如果返回表达式,则表达式应与return关键字在同一行,以避免压缩时,压缩工具自动加分号而造成返回与开发人员不一致的结果

    function F1() {      var valueA = 1;      var valueB = 2;      return valueA + valueB;    }    function F2() {      var valueA = 1;      var valueB = 2;      return      valueA + valueB;    }    alert(F1()); //output: 3     alert(F2()); //ouput: undefined

4、==和===的区别

 避免在if和while语句的条件部分进行赋值,如if (a = b),应该写成if (a == b),但是在比较是否相等的情况下,最好使用全等运行符,也就是使用===和!==操作符会相对于==和!=会好点。==和!=操作符会进行类型强制转换

    var valueA = "1";    var valueB = 1;    if (valueA == valueB) {      alert("Equal");    }    else {      alert("Not equal");    }    //output: "Equal"    if (valueA === valueB) {      alert("Equal");    }    else {      alert("Not equal");    }    //output: "Not equal"

5、不要使用生偏语法

 不要使用生偏语法,写让人迷惑的代码,虽然计算机能够正确识别并运行,但是晦涩难懂的代码不方便以后维护

6、函数返回统一类型

虽然JavaScript是弱类型的,对于函数来说,前面返回整数型数据,后面返回布尔值在编译和运行都可以正常通过,但为了规范和以后维护时容易理解,应保证函数应返回统一的数据类型

7、总是检查数据类型

 要检查你的方法输入的所有数据,一方面是为了安全性,另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢,而是因为他们很忙,并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法

8、何时用单引号,何时用双引号

虽然在JavaScript当中,双引号和单引号都可以表示字符串, 为了避免混乱,我们建议在HTML中使用双引号,在JavaScript中使用单引号,但为了兼容各个浏览器,也为了解析时不会出错,定义JSON对象时,最好使用双引号

9、部署 

  • 用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问
  • 部署之前推荐使用压缩工具将JS文件压缩
  • 文件编码统一用UTF-8
  • JavaScript 程序应该尽量放在 .js 的文件中,需要调用的时候在 HTML 中以 <script src="filename.js"> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的,则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小,无益于代码的压缩和缓存的使用。另外,<script src="filename.js"> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。

javacript 优化2

标签:

原文地址:http://www.cnblogs.com/dullbaby/p/5341187.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!