javascript在瀏覽器中運行的性能，可以認為是開發者所面臨的最嚴重的可用性問題。這個問題因為javascript的阻塞性而變得復雜，事實上，多數瀏覽器使用單一進程來處理用戶界面和js腳本執行，所以同一時刻只能做一件事。js執行過程耗時越久，瀏覽器等待響應的時間越長。

加載和執行

一.提高加載性能

1.IE8,FF,3.5,Safari 4和Chrome都允許并行下載js文件，當script下載資源時不會阻塞其他script的下載。

但是js下載仍然會阻塞其他資源的下載，如圖片。盡管腳本下載不會互相影響，但頁面仍然必須等待所有js代碼下載并執行完才能繼續。因此仍然存在腳本阻塞問題.推薦將所有js文件放在body標簽底部以減少對整個頁面的影響。

2.減少頁面外鏈腳本文件的數量將會提高頁面性能：

http請求會帶來額外的開銷，因此下載單個300k的文件將比下載10個30k的文件效率更高。

3.動態腳本加載技術：

無論何時啟動下載，文件的下載和執行都不會阻塞頁面其他進程。

function laodScript(url,callback){ 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
 
    if(script.readyState){  // ie 
        script.onreadystatechange = function(){ 
            if(script.readyState == 'loaded' || script.readyState == 'complete'){ 
                script.onreadystatechange = null; 
                callback() 
            } 
        } 
    }else{ //其他瀏覽器 
        script.onload = function(){ 
            callback() 
        } 
    } 
    script.src = url; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 
 
// 使用 
loadScript('./a.js',function(){ 
    loadScript('./b.js',function(){ 
        loadScript('./c.js',function(){ 
            console.log('加載完成') 
        }) 
    }) 
}) 

4. 無阻塞加載類庫——LABjs,使用方法如下：

<script src="lab.js"></script> 
// 鏈式調用時文件逐個下載，.wait()用來指定文件下載并執行完畢后所調用的函數 
$LAB.script('./a.js') 
    .script('./b.js') 
    .wait(function(){ 
        App.init(); 
}) 
 
// 為了保證執行順序，可以這么做,此時a必定在b前執行 
$LAB.script('./a.js').wait() 
    .script('./b.js') 
    .wait(function(){ 
        App.init(); 
}) 

二. 數據存取與JS性能

1.在js中，數據存儲的位置會對代碼整體性能產生重大影響。數據存儲共有4種方式：字面量，變量，數組項，對象成員。他們有著各自的性能特點。

2.訪問字面量和局部變量的速度最快，相反，訪問數組和對象相對較慢

3.由于局部變量存在于作用域鏈的起始位置，因此訪問局部變量的比訪問跨域作用變量更快

4.嵌套的對象成員會明顯影響性能，應盡量避免

5.屬性和方法在原型鏈位置越深，訪問他的速度越慢

6.通常我們可以把需要多次使用的對象成員，數組元素，跨域變量保存在局部變量中來改善js性能

三. DOM編程

1.訪問DOM會影響瀏覽器性能，修改DOM則更耗費性能，因為他會導致瀏覽器重新計算頁面的幾何變化。

<通常的做法是減少訪問DOM的次數，把運算盡量留在JS這一端。

注：如過在一個對性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因為它在絕大多數瀏覽器中運行的都很快。但對于大多數日常操作而言，并沒有太大區別，所以你更應該根據可讀性，穩定性，團隊習慣，代碼風格來綜合決定使用innerHTML還是createElement()

2. HTML集合優化

HTML集合包含了DOM節點引用的類數組對象，一直與文檔保持連接，每次你需要最新的信息時，都會重復執行查詢操作，哪怕只是獲取集合里元素的個數。

① 優化一——集合轉數組collToArr

function collToArr(coll){ 
    for(var i=0, a=[], len=coll.length; i<len; i++){ 
        a.push(coll[i]); 
    } 
    return a 
} 

② 緩存集合length

③ 訪問集合元素時使用局部變量（即將重復的集合訪問緩存到局部變量中，用局部變量來操作）

3. 遍歷DOM

① 使用只返回元素節點的API遍歷DOM,因為這些API的執行效率比自己實現的效率更高：

 ② 選擇器API——querySelectorAll()

querySelectorAll()方法使用css選擇器作為參數并返回一個NodeList——包含著匹配節點的類數組對象，該方法不會返回HTML集合，因此返回的節點不會對應實時文檔結構，著也避免了HTML集合引起的性能問題。

let arr = document.querySelectorAll('div.warning, div.notice > p')

4.重繪和重排

瀏覽器在下載完頁面的所有組件——html,js,css,圖片等之后，會解析并生成兩個內部數據結構—— DOM樹，渲染樹.一旦DOM樹和渲染樹構建完成，瀏覽器就開始繪制頁面元素（paint）.

① 重排發生的條件：

添加或刪除可見的DOM 元素位置變化 元素尺寸改變 內容改變 頁面渲染器初始化 瀏覽器窗口尺寸變化 出現滾動條時會觸發整個頁面的重排 

重排必定重繪

5.渲染樹變化的排列和刷新

大多數瀏覽器通過隊列化修改并批量執行來優化重排過程，然而獲取布局信息的操作會導致隊列強制刷新。

offsetTop,offsetWidth... 
scrollTop,scrollHeight... 
clientTop,clientHeight... 
getComputedStyle() 

一些優化建議：將設置樣式的操作和獲取樣式的操作分開：

// 設置樣式 
body.style.color = 'red'; 
body.style.fontSize = '24px' 
// 讀取樣式 
let color = body.style.color 
let fontSize = body.style.fontSize 

另外，獲取計算屬性的兼容寫法：

function getComputedStyle(el){ 
    var computed = (document.body.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el,''); 
    return computed 
} 

6.最小化重繪和重排

①.批量改變樣式

function appendDataToEl(option){ 
    var targetEl = option.target || document.body, 
        createEl, 
        data = option.data || []; 
    // 讓容器脫離文檔流，減少重繪重排 
    var targetEl_display = targetEl.style.display; 
    targetEl.style.display = 'none'; 
 
    // *****創建文檔片段來優化Dom操作**** 
    var fragment = document.createDocumentFragment(); 
    // 給元素填充數據 
    for(var i=0, max = data.length; i< max; i++){ 
        createEl = document.createElement(option.createEl); 
        for(var item in data[i]){ 
            if(item.toString() === 'text'){ 
                createEl.appendChild(document.createTextNode(data[i][item])); 
                continue; 
            } 
            if(item.toString() === 'html'){ 
                createEl.innerHTML = item,data[i][item]; 
                continue; 
            } 
            createEl.setAttribute(item,data[i][item]); 
        } 
        // ****將填充好的node插入文檔片段**** 
        fragment.appendChild(createEl); 
    } 
    // ****將文檔片段統一插入目標容器**** 
    targetEl.appendChild(fragment); 
    // 顯示容器，完成數據填充 
    targetEl.style.display = targetEl_display; 
} 
 
// 使用 
var wrap = document.querySelectorAll('.wrap')[0]; 
var data = [ 
    {name: 'xujaing',text: '選景', title: 'xuanfij'}, 
    {name: 'xujaing',text: '選景', title: 'xuanfij'}, 
    {name: 'xujaing',text: '選景', title: 'xuanfij'} 
]; 
appendDataToEl({ 
    target: wrap, 
    createEl: 'div', 
    data: data 
}); 

上面的優化方法使用了文檔片段: 當我們把文檔片段插入到節點中時，實際上被添加的只是該片段的子節點，而不是片段本身。可以使得dom操作更有效率。

③.緩存布局信息

//緩存布局信息 
let current = el.offsetLeft; 
current++; 
el.style.left = current + 'px'; 
if(current > 300){ 
    stop(); 
} 

④.慎用:hover

如果有大量元素使用:hover,那么會降低相應速度，CPU升高

⑤.使用事件委托（通過事件冒泡實現）來減少事件處理器的數量，減少內存和處理時間

function delegation(e,selector,callback){ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
 
    if(target.nodeName !== selector || target.className !== selector || target.id !== selector){ 
        return; 
    } 
    if(typeof e.preventDefault === 'function'){ 
        e.preventDefault(); 
        e.stopPropagation(); 
    }else{ 
        e.returnValue = false; 
        e.cancelBubble = true; 
    } 
 
    callback() 
} 

四.算法和流程控制

1.循環中減少屬性查找并反轉(可以提升50%-60%的性能)

function delegation(e,selector,callback){ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
 
    if(target.nodeName !== selector || target.className !== selector || target.id !== selector){ 
        return; 
    } 
    if(typeof e.preventDefault === 'function'){ 
        e.preventDefault(); 
        e.stopPropagation(); 
    }else{ 
        e.returnValue = false; 
        e.cancelBubble = true; 
    } 
 
    callback() 
} 

2.使用Duff裝置來優化循環（該方法在后面的文章中會詳細介紹）

3.基于函數的迭代（比基于循環的迭代慢）

items.forEach(function(value,index,array){ 
    process(value); 
}) 

4.通常情況下switch總比if-else快，但是不是最佳方案

五.字符串和正則表達式

1.除了IE外，其他瀏覽器會嘗試為表達式左側的字符串分配更多的內存，然后簡單的將第二個字符串拷貝到他的末尾，如果在一個循環中，基礎字符串位于最左側，就可以避免重復拷貝一個逐漸變大的基礎字符串。2.使用[\s\S]來匹配任意字符串 3.去除尾部空白的常用做法：

if(!String.prototype.trim){ 
    String.prototype.trim = function(){ 
        return this.replace(/^\s+/,'').replace(/\s\s*$/, '') 
    } 
} 

六.快速響應的用戶界面

1.瀏覽器的UI線程：用于執行javascript和更新用戶界面的進程。

2.在windows系統中定時器分辨率為15毫秒，因此設置小于15毫秒將會使IE鎖定，延時的最小值建議為25ms.

3.用延時數組分割耗時任務：

function multistep(steps,args,callback){ 
    var tasks = steps.concat(); 
 
    setTimeout(function(){ 
        var task = tasks.shift(); 
        task.apply(null, args || []);   //調用Apply參數必須是數組 
 
        if(tasks.length > 0){ 
            setTimeout(arguments.callee, 25); 
        }else{ 
            callback(); 
        } 
    },25); 
} 

4.記錄代碼運行時間批處理任務：

function timeProcessArray(items,process,callback){ 
    var todo = item.concat(); 
 
    setTimeout(function(){ 
        var start = +new Date(); 
 
        do{ 
            process(todo.shift()); 
        }while(todo.length > 0 && (+new Date() - start < 50)); 
 
        if(todo.length > 0){ 
            setTimeout(arguments.callee, 25); 
        }else{ 
            callback(items); 
        } 
    },25) 
} 

5.使用Web Worker：它引入了一個接口，能使代碼運行且不占用瀏覽器UI線程的時間。一個Worker由如下部分組成：

① 一個navigator對象，包括appName,appVersion,user Agent和platform.

② 一個location對象，只讀。

③ 一個self對象，指向全局worker對象

④ 一個importScripts()方法，用來加載worker所用到的外部js文件

⑤ 所有的ECMAScript對象。如object,Array,Date等

⑥ XMLHttpRequest構造器

⑦ setTimeout()，setInterval()

⑧ 一個close()方法，它能立刻停止worker運行

應用場景

1. 編碼/解碼大字符串

2.  復雜數學運算（包括圖像，視屏處理）

3. 大數組排序

// worker.js 
var worker = new Worker('code.js'); 
// 接收信息 
worker.onmessage = function(event){ 
    console.log(event.data); 
} 
// 發送數據 
worker.postMessage('hello'); 
 
// code.js 
 
// 導入其他計算代碼 
importScripts('a.js','b.js'); 
 
self.onmessage = function(event){ 
    self.postMessage('hello' + event.data); 
} 

七. ajax優化

1.向服務器請求數據的五種方式：

① XMLHttpRequest

② Dynamic script tag insertion 動態腳本注入

③ iframes

④ Comet（基于http長連接的服務端推送技術）

⑤ Multipart XHR（允許客戶端只用一個http請求就可以從服務器向客戶端傳送多個資源）

2.單純向服務端發送數據（beacons方法）——信標

// 唯一缺點是接收到的響應類型是有限的 
var url = '/req.php'; 
var params = ['step=2','time=123']; 
 
(new Image()).src = url + '?' + params.join('&'); 
 
// 如果向監聽服務端發送回的數據，可以在onload中實現 
var beacon = new Image(); 
beacon.src = ...; 
beacon.onload = function(){ 
    ... 
} 
beacon.onerror = function(){ 
    ... 
} 

3.ajax性能的一些建議

緩存數據

1.在服務端設置Expires頭信息確保瀏覽器緩存多久響應（必須GET請求）

2.客戶端把獲取到的信息緩存到本地，避免再次請求

八. 編程實踐

1.避免重復工作

// 1.延遲加載 
var a = (x,y) =>{ 
    if(x > 4){ 
        a = 0; 
    }else{ 
        a = 1; 
    } 
} 
// 需要使用時調用 
a(); 
 
// 2.條件預加載（適用于函數馬上執行并頻繁操作的場景） 
var b = a > 0 ? '4' : '0'; 

2.使用Object/Array字面量

3.多用原生方法

九. 構建與部署高性能的js應用

1.js的http壓縮 當web瀏覽器請求一個資源時，它通常會發送一個Accept-Encoding HTTP頭來告訴Web服務器它支持那種編碼轉換類型。這個信息主要用來壓縮文檔以獲取更快的下載，從而改善用戶體驗。Accept-Encoding可用的值包括：gzip,compress,deflate,identity. 如果Web服務器在請求中看到這些信息頭，他會選擇最合適的編碼方式，并通過Content-Encoding HTTP頭通知WEB瀏覽器它的決定。

2.使用H5離線緩存

3.使用內容分發網絡CDN

4.對頁面進行性能分析

// 檢測代碼運行時間 
var Timer = { 
    _data: {}, 
    start: function(key){ 
        Timer._data[key] = new Date(); 
    }, 
    stop: function(key){ 
        var time = Timer._data[key]; 
        if(time){ 
            Timer._data[key] = new Date() - time; 
        }; 
        console.log(Timer._data[key]); 
        return Timer._data[key] 
    } 
}; 

十. 瀏覽器緩存

1.添加Expires頭

2.使用cache-control cache-ontrol詳解 瀏覽器緩存機制

十一. 壓縮組件

1.web客戶端可以通過http請求中的Accept-Encoding頭來表示對壓縮的支持

// 瀏覽器請求時對http header設置 
Accept-Encoding: gzip 
// Web服務器響應時對http header設置 
Content-Encoding: gzip 

2.壓縮能將響應的數據量減少將近70%，因此可考慮對html,腳本，樣式，圖片進行壓縮

十二. 白屏現象的原因

瀏覽器（如IE）在樣式表沒有完全下載完成之前不會呈現頁面，導致頁面白屏。如果樣式表放在頁面底部，那么瀏覽器會花費更長的時間下載樣式表，因此會出現白屏，所以最好把樣式表放在head內。白屏是瀏覽器對“無樣式閃爍”的修繕。如果瀏覽器不采用“白屏”機制，將頁面內容逐步顯示（如Firefox），則后加載的樣式表將導致頁面重繪重排，將會承擔頁面閃爍的風險。

十三. css表達式使用一次性表達式(但最好避免css表達式)

使用css表達式時執行函數重寫自身

// css 
p{ 
    background-color: expression(altBgcolor(this)) 
} 
// js 
function altBgcolor(el){ 
    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c"; 
} 

十四. 減少DNS查找

DNS緩存和TTL

1.DNS查找可以被緩存起來以提高性能：DNS信息會留在操作系統的DNS緩存中（Microsoft Windows上的“DNS Client服務”,之后對該主機名的請求無需進行過多的查找 
2.TTL(time to live): 該值告訴客戶端可以對記錄緩存多久。建議將TTL值設置為一天 
// 客戶端收到DNS記錄的平均TTL只有最大TTL值的一半因為DNS解析器返回的時間是其記錄的TTL的剩余時間，對于給定的主機名，每次執行DNS查找時接收的TTL值都會變化 
3.通過使用Keep-Alive和較少的域名來減少DNS查找 
4.一般建議將頁面組件分別放到至少2個，但不要超過4個主機名下 

十五. 避免重定向

這塊需要前后端共同配合，對頁面路由進行統一規范。