優(yōu)化代碼的目的：提高運(yùn)行速度；

js代碼優(yōu)化：

• 代碼重用
• 避免全局變量(全局變量，封閉空間，模塊化，mvc..)
• 拆分函數(shù)避免函數(shù)過于臃腫
• 注釋
• 減少HTTP請(qǐng)求
• 減少DOM操作
• 使用json對(duì)數(shù)據(jù)進(jìn)行操作
• 使用語義化標(biāo)簽
• 使用CDN加速
• 壓縮代碼
• 使用垃圾回收、臟機(jī)制查詢
• 異步加載第三方資源；動(dòng)態(tài)創(chuàng)建script、defer;
• 設(shè)置本地緩存；
• 避免iframe\img等src屬性為空
• 點(diǎn)擊事件優(yōu)化；沒用就清除；
• 注意scroll、resize事件綁定的時(shí)機(jī)；

HTML

• 使用壓縮后的第三方庫，帶min的文件；
• js代碼在頁面最后加載；
• 圖片使用JPG優(yōu)于png;png8優(yōu)于png24；
• 使用懶加載；

CSS

• 使用合并屬性：margin/background等；
• 移除空的CSS規(guī)則；
• 去掉0的單位；
• 不要聲明過多的font-size;

渲染優(yōu)化

• 動(dòng)畫優(yōu)化：使用CSS3動(dòng)畫，使用requestAnimationFrame替代setInterval;
• 高頻事件優(yōu)化：touch事件、scroll事件；
• 圖片優(yōu)化：優(yōu)化圖片、webp優(yōu)于jpg\png8優(yōu)于gif、對(duì)圖片使用lazyload；
• 使用transition觸發(fā)、transform觸發(fā)、opacity；
• js主動(dòng)釋放內(nèi)存；

meta標(biāo)簽優(yōu)化

向數(shù)組中插入元素

var arr=[1,2,3,4,5];
arr.push(6);
換成
arr[arr.length]=6;

arr.unshift(0);
改為
[0].concat(arr);

優(yōu)化嵌套的條件語句

    if (color) {
        if (color === 'black') {
            getBlack();
        } else if (color === 'red') {
            getRed();
        } else if (color === 'blue') {
            getBlue();
        } else if (color === 'green') {
            getGreen();
        } else {
            printYellowBackground();
        }
    }

優(yōu)化：

    var colorObj = {
        'black': getBlack,
        'red': getRed,
        'blue': getBlue,
        'green': getGreen,
        'yellow': getYellow
    };
    if (color in colorObj) {
        colorObj[color]();
    }

undefined==null;//true;
undefined===null;//fallse;

undefined與null的區(qū)別

• undefined表示一個(gè)變量沒有被聲明，或者被聲明了但沒有被賦值；
• null是一個(gè)表示“沒有值”的值,但是他是一個(gè)值；
• Javascript將未賦值的變量默認(rèn)值設(shè)為undefined；
• undefined不是一個(gè)有效的JSON，而null是；
• undefined的類型(typeof)是undefined；
• null的類型(typeof)是object；
• 他們是基本類型；

檢查某對(duì)象是否有某屬性：

 var obj={
    name:'hello'
 }
 if(obj.name){
    console.log('obj has name');
 }

轉(zhuǎn)換

 var obj={
    name:'world'
 }
obj.hasOwnProperty("name")//true
"name" in obj//true

obj.hasOwnProperty('valueOf')//false;繼承自原型鏈(__proto__屬性)
"valueOf" in obj//true

區(qū)分與檢查屬性的深度不同，換言之hasOwnProperty只在本身有此屬性時(shí)返回true,而in操作符不區(qū)分屬性來自于本身或繼承自原型鏈。

快速測(cè)量js代碼性能，使用console的timeEnd方法

    console.time("Array initialize");
   var arr = new Array(100),
       len = arr.length,
       i;
   
   for (i = 0; i < len; i++) {
       arr[i] = new Object();
   };
   console.timeEnd("Array initialize");