上面一篇文章大致介绍了一些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的更多相关文章

  1. 整理及优化CSS代码的7个原则

    作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞 ...

  2. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  3. In-Memory:内存优化表的事务处理

    内存优化表(Memory-Optimized Table,简称MOT)使用乐观策略(optimistic approach)实现事务的并发控制,在读取MOT时,使用多行版本化(Multi-Row ve ...

  4. 试试SQLSERVER2014的内存优化表

    试试SQLSERVER2014的内存优化表 SQL Server 2014中的内存引擎(代号为Hekaton)将OLTP提升到了新的高度. 现在,存储引擎已整合进当前的数据库管理系统,而使用先进内存技 ...

  5. 01.SQLServer性能优化之----强大的文件组----分盘存储

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...

  6. 03.SQLServer性能优化之---存储优化系列

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概  述:http://www.cnblogs.com/dunitian/p/60413 ...

  7. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  8. 数据库优化案例——————某市中心医院HIS系统

    记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...

  9. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

随机推荐

  1. Report_客制化以PLSQL输出XLS标记实现Excel报表(案例)

    2015-02-12 Created By BaoXinjian

  2. NeHe OpenGL教程 第四十一课:体积雾气

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  3. i++与++i 辨析

    i++:先赋值在自加: ++i:先自加在赋值: 备注:在赋值运算中有区别,单独使用没有区别 ( 例子1:单独使用 for(int i=0;i<10;i++){ } for(int i=0;i&l ...

  4. vim常用命令笔记(转载)

    添加多行注释:   1. 首先按esc进入命令行模式下,按下Ctrl + v,进入列(也叫区块)模式;   2. 在行首使用上下键选择需要注释的多行;   3. 按下键盘(大写)“I”键,进入插入模式 ...

  5. ZK框架的分析与应用

    前言:本文是在下的在学习ZK官方文档时整理出来的初稿.本来里面有很多的效果图片和图片代码的.奈何博客园中图片不能粘贴上去,所以感兴趣的筒子们就将就吧.内容中,如有不好的地方,欢迎斧正! ZK框架的分析 ...

  6. scala环境搭建

    第一步:Java 设置 确保你本地以及安装了 JDK 1.5 以上版本,并且设置了 JAVA_HOME 环境变量及 JDK 的bin目录. 在 Mac 上安装 Java 下载 jre-8u65-mac ...

  7. springmvc 注解 RequestParam/RequestHeader/CookieValue

    RequestParam注解: 示例: @RequestMapping("/testRequestParam") public String testRequestParam(@R ...

  8. [ActionScript 3.0] AS3虚线绘制方法

    import flash.geom.Point; import flash.display.MovieClip; import flash.display.Graphics; var mc:Movie ...

  9. ppm与mg/m3转换

    http://wenku.baidu.com/link?url=PY0Nb09VWmBDZgLvMhaHYGJyaC6YcdYAI5XTPRkxMpDHPrs3dNxskYkKmp2F0E6Sl2H5 ...

  10. esriSRGeoCSType Constants

    ArcGIS Developer Help  (Geometry)     esriSRGeoCSType Constants See Also esriSRGeoCS2Type Constants ...