首页 > 代码库 > 学习javascript总结下来的性能优化的小知识(二)

学习javascript总结下来的性能优化的小知识(二)

上面一篇文章大致介绍了一些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="http://www.mamicode.com/filename.js"> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的,则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小,无益于代码的压缩和缓存的使用。另外,<script src="http://www.mamicode.com/filename.js"> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。

 

永远不要忽略代码优化工作,重构是一项从项目开始到结束需要持续的工作,只有不断的优化代码才能让代码的执行效率越来越好

 

学习javascript总结下来的性能优化的小知识(二)