前端优化总结--编码习惯（二）

近期主要研究前端优化方案，将网上各种前端优化技巧进行分类整理总结。
本次继续介绍一些好的编码习惯。

• 最小化语句数
• 减少页面重绘
• 将CSS和JS放到外部文件中引用，CSS放头，JS放尾
• 其他

最小化语句数

JS代码中的语句数量也会影响所执行的操作的速度，完成多个操作的单个语句要比完成单个操作的多个语句块快。故要找出可以组合在一起的语句，以减来整体的执行时间。这里列举几种模式
多个变量声明

      /**不提倡**/
      var i = 1;
      var j = "hello";
      var arr = [1,2,3];
      var now = new Date();
      /**提倡**/
      var i = 1,
          j = "hello",
          arr = [1,2,3],
          now = new Date();

插入迭代值

      /**不提倡**/
      var name = values[i];
      i++;
      /**提倡**/
      var name = values[i++];

使用数组和对象字面量，避免使用构造函数Array(),Object()

      /**不提倡**/
      var a = new Array();
      a[0] = 1;
      a[1] = "hello";
      a[2] = 45;
      var o = new Obejct();
      o.name = "bill";
      o.age = 13;
      /**提倡**/
      var a = [1, "hello", 45];
      var o = {
          name : "bill",
          age : 13
      };

减少页面重绘

减少页面重绘虽然本质不是JAVASCRIPT优化，但重绘往往是由JAVASCRIPT引起的，而重绘的情况直接影响页面性能。

     /**效率低**/
     var obj = document.getElementsByTagName("body");
     for(var i = 0; i < 100; i++){
         obj.innerHTML += str + i;
     }
     /**效率高**/
     var obj = document.getElementsByTagName("body");
     var arr = [];
     for(var i = 0; i < 100; i++){
         arr[i] = str + i;
     }
     obj.innerHTML = arr.join("");

将CSS和JS放到外部文件中引用，CSS放头，JS放尾

JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即< script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。

　　因为这个阻塞的特点，建议把JavaScript代码放到< /body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。

　　HTML规范清楚指出CSS要放包含在页面的< head>区域内，这里就不多解释了。

其他

数字转字符串

把数字转换成字符串。
- 应用1+""，效率是最高。
 - 性能上来说：+字符串>String()>.toString()>new String()。
  * String()属于内部函数，所以速度很快。
  * .toString()要查询原型中的函数，所以速度略慢。
  * new String()最慢。

慎用全局变量

全局变量

当一个变量被定义在全局作用域中，默认情况下JAVASCRIPT引擎就不会将其回收销毁。如此该变量就会一直存在于老生代堆内存中，直到页面被关闭。
缺点：使变量不易被回收
     多人协作时容易产生混淆
     在作用域链中容易被干扰。

局部变量

尽量选用局部变量而不是全局变量。
局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。

缓存重复使用的全局变量

在局部作用域中需要多次使用全局变量时，将全局变量缓存。

var option = {username:'caohang',age:23}
var doSomething = function(){
    var option = option;
    //使用option进行一系列操作
    /*
    code here
    */
}

用switch替换一系列if else

若有一系列复杂的if-else语句，可以转换成单个switch语句则可以得到更快的代码.
还可以通过将case语句按照最可能的到最不可能的顺序进行组织，来进一步优化。