那些年我们未曾用过的JavaScript优化宝典

每次完成一个项目，习惯会去总结一些东西，比如运用了什么新的技术，JavaScript优化等等，久而久之，你才会发现这些都是一笔很大的财富，在你的职业发展道路上，伴随着你成长。今天分享的是一些JavaScript优化宝典(日常收集)，关于JavaScript的性能问题，相信大家有目共睹，这就需要我们前端开发人员在编写JavaScript程序时多注意一些细节，废话不多说，ready go！

1、避免全局查找

用全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。

function search() {            
     //当我要使用当前页面地址和主机域名              
     alert(window.location.href + window.location.host);         
}
//最好的方式是如下这样  先用一个简单变量保存起来        
function search() {             
    var location = window.location;             
    alert(location.href + location.host);
}

2、定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器

var timeoutTimes = 0;function timeout(){
    timeoutTimes++;    if (timeoutTimes < 10) {
        setTimeout(timeout, 10);
    }
}
timeout();//可以替换为：var intervalTimes = 0;function interval() {
    intervalTimes++;    if (intervalTimes >= 10) {
        clearInterval(interv);
    }
}var interv = setInterval(interval, 10);

3、字符串连接

如果要连接多个字符串，应该少使用+=，如：

s+=a; s+=b; s+=c;
应该写成s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存，使用JavaScript数组来收集，最后使用join方法连接起来

var buf = [];         
for (var i = 0; i < 100; i++) {            
    buf.push(i.toString());         
}         
var all = buf.join("");

4、避免with语句

和函数类似 ，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，由于额外的作用域链的查找，在with语句中执行的代码肯定会比外面执行的代码要慢，在能不使用with语句的时候尽量不要使用with语句。

with (a.b.c.d) {             
    property1 = 1;             
    property2 = 2;         }        
//可以替换为：         
var obj = a.b.c.d;         
obj.property1 = 1;         
obj.property2 = 2;

5、数字转换成字符串

一般最好用”” + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：（很实用）。

("" +) > String() > .toString() > new String()

6、浮点数转换成整型

很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。

7、各种类型转换

var myVar = "3.14159",         
 str = "" + myVar, //  to string
 i_int = ~ ~myVar,  //  to integer
 f_float = 1 * myVar,  //  to float
 b_bool = !!myVar,  /*  to boolean - any string with length and any number except 0 are true */
 array = [myVar];  //  to array

如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高。

8、多个类型声明

在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间。

var a,
b='str',
c=a+b;

9、插入迭代器

如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]

10、使用直接量

var aTest = new Array(); //替换为         var aTest = [];
var aTest = new Object; //替换为         var aTest = {};
var reg = new RegExp(); //替换为         var reg = /../;
//如果要创建具有一些特性的一般对象，也可以使用字面量，如下:
var oFruit = new O;
oFruit.color = "red";
//前面的代码可用对象字面量来改写成这样：
var oFruit = { color: "red", name: "apple" };
oFruit.name = "apple";

11、使用DocumentFragment优化多次append

一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。

for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    document.body.appendChild(el); 
}         
//可以替换为：         
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

12、使用一次innerHTML赋值代替构建dom元素

对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);
// 可以替换为：
var html = [];
for (var i = 0; i < 1000; i++) {
    html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

13、通过模板元素clone，替代createElement

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。通常我们可能会使用字符串直接写HTML来创建节点，其实这样做，1无法保证代码的有效性2字符串操作效率低，所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。

var frag = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
        var el = document.createElement('p');
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);
    // 替换为：
    var frag = document.createDocumentFragment();
    var pEl = document.getElementsByTagName('p')[0];
    for (var i = 0; i < 1000; i++) {
        var el = pEl.cloneNode(false);
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);

14、 使用firstChild和nextSibling代替childNodes遍历dom元素

var nodes = element.childNodes;
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
}         
//可以替换为：
var node = element.firstChild;
while (node) { node = node.nextSibling;}

15、删除DOM节点

删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存。另外，在removeChild和innerHTML=’’二者之间，尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点。

var h1 = element1.clientHeight + num1; 
var h2 = element1.clientHeight + num2; 
//可以替换为：
var eleHeight = element1.clientHeight;
var h1 = eleHeight + num1;
var h2 = eleHeight + num2;

var images = document.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) {         }

var list = document.getElementsByTagName('p');
for (var i = 0; i < list.length; i++) {//……         }
//替换为：
var list = document.getElementsByTagName('p');
for (var i = 0, l = list.length; i < l; i++) {//……         }

var arr = [1, 2, 3, 4, 5, 6, 7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
    sum += arr[i];
}
//可以考虑替换为：
var arr = [1, 2, 3, 4, 5, 6, 7];
var sum = 0, l = arr.length;
while (l--) {             
    sum += arr[l];         
}

 var num = 0;
 setTimeout('num++', 10);
 //可以替换为：
 var num = 0;
 function addNum() {  
     num++;         
 }
 setTimeout(addNum, 10);

if (oTest != '#ff0000') {//do something         }
if (oTest != null) {             //do something         }
if (oTest != false) {             //do something         }
//虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
if (!oTest) {             //do something         }

if (a > b) {num = a;} else {num = b;}
//可以替换为：
num = a > b ? a : b;

//糟糕的全局变量和全局函数
var current = null;
function init(){ //... } 
function change() {     //... } 
function verify() {     //... } 
//解决办法有很多，Christian Heilmann建议的方法是： 
//如果变量和函数不需要在“外面”引用，那么就可以使用一个没有名字的方法将他们全都包起来。 
(function(){ 
    var current = null; 
    function init() { //... }
    function change() {  //... } 
    function verify() {//... } 
    })(); 
//如果变量和函数需要在“外面”引用，需要把你的变量和函数放在一个“命名空间”中
//我们这里用一个function做命名空间而不是一个var,因为在前者中声明function更简单，而且能保护隐私数据
myNameSpace = function() {
    var current = null;
    function init() { //...     }      
    function change() { //...     }
    function verify() { //...     }
    //所有需要在命名空间外调用的函数和属性都要写在return里面
    return {init: init, 
        //甚至你可以为函数和属性命名一个别名
        set: change
        };
};