JavaScript性能优化之小知识总结

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

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);

s+=a;s+=b;s+=c;

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

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

(“” +) > String() > .toString() > new String()

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

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";    oFruit.name = "apple";    //前面的代码可用对象字面量来改写成这样：    var oFruit = { color: "red", name: "apple" };

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);

    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('');

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);

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;

   //避免多次取值的调用开销    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  };};

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

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

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

   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();

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

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

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

    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

 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

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"