一個網站影響用戶訪問的最大部分是前端的頁面。網站可以劃分為：前端和后臺。后臺可以理解成是用來實現網站的功能的，而前端是屬于功能的表現。然如除了后臺需要在性能上做優化外，其實前端的頁面更需要在性能優化上下功夫，只有這樣才能給我們的用戶帶來更好的用戶體驗。

如今瀏覽器能夠實現的特性越來越多，并且網絡逐漸向移動設備轉移，使我們的前端代碼更加緊湊，如何優化，就變得越來越重要了。 開發人員普遍會將他們的代碼習慣優先于用戶體驗。但是很多很小的改變可以讓用戶體驗有個飛躍提升，所以任何一點兒小小的優化都會提升你網站的性能。 前端給力的地方是可以有許多種簡單的策略和代碼習慣讓我們可以保證最理想的前端性能。說了這么多，那么我們應該如何對我們前端的頁面進行性能優化呢？

而前端開發工作者可以控制的是什么呢？。前端的頁面主要包括xhtml,css,js。其實xhtml就是現實中所談到的內容，頁面的內容：文字，圖片，flash,視頻等。

網站前端性能優化最佳方案1：使用DocumentFragments或innerHTML取代復雜的元素注入

DOM操作在瀏覽器上是要付稅的。盡管性能提升是在瀏覽器，DOM很慢，如果你沒有注意到，你可能會察覺瀏覽器運行非常的慢。這就是為什么減少創建集中的DOM節點以及快速注入是那么的重要了。

現在假設我們頁面中有一個<ul>元素，調用AJAX獲取JSON列表，然后使用JavaScript更新元素內容。通常，程序員會這么寫：

var list = document.querySelector('ul');

ajaxResult.items.forEach(function(item) {

// 創建<li>元素

var li = document.createElement('li');

li.innerHTML = item.text;

// <li>元素常規操作，例如添加class，更改屬性attribute，添加事件監聽等

// 迅速將<li>元素注入父級<ul>中

list.apppendChild(li);

});

上面的代碼其實是一個錯誤的寫法，將<ul>元素帶著對每一個列表的DOM操作一起移植是非常慢的。如果你真的想要 使用document.createElement，并且將對象當做節點來處理，那么考慮到性能問題，你應該使用DocumentFragement。

DocumentFragement 是一組子節點的“虛擬存儲”，并且它沒有父標簽。在我們的例子中，將DocumentFragement想象成看不見的<ul>元素，在 DOM外，一直保管著你的子節點，直到他們被注入DOM中。那么，原來的代碼就可以用DocumentFragment優化一下：

var frag = document.createDocumentFragment();

ajaxResult.items.forEach(function(item) {

// 創建<li>元素

var li = document.createElement('li');

li.innerHTML = item.text;

// <li>元素常規操作

// 例如添加class，更改屬性attribute，添加事件監聽，添加子節點等

// 將<li>元素添加到碎片中

frag.appendChild(li);

});

// 最后將所有的列表對象通過DocumentFragment集中注入DOM

document.querySelector('ul').appendChild(frag);

為DocumentFragment追加子元素，然后再將這個DocumentFragment加到父列表中，這一系列操作僅僅是一個DOM操作，因此它比起集中注入要快很多。

如果你不需要將列表對象當做節點來操作，更好的方法是用字符串構建HTML內容：

var htmlStr = '';

ajaxResult.items.forEach(function(item) {

// 構建包含HTML頁面內容的字符串

htmlStr += '<li>' + item.text + '</li>';

});

// 通過innerHTML設定ul內容

document.querySelector('ul').innerHTML = htmlStr;

這當中也只有一個DOM操作，并且比起DocumentFragment代碼量更少。在任何情況下，這兩種方法都比在每一次迭代中將元素注入DOM更高效。

網站前端性能優化最佳方案2：高頻執行事件/方法的防抖

通常，開發人員會在有用戶交互參與的地方添加事件，而往往這種事件會被頻繁觸發。想象一下窗口的resize事件或者是一個元素的onmouseover事件 - 他們觸發時，執行的非常迅速，并且觸發很多次。如果你的回調過重，你可能使瀏覽器死掉。

這就是為什么我們要引入防抖。

防抖可以限制一個方法在一定時間內執行的次數。以下代碼是個防抖示例：

// 取自 UnderscoreJS 實用框架

function debounce(func, wait, immediate) {

var timeout;

return function() {

var context = this, args = arguments;

var later = function() {

timeout = null;

if (!immediate) func.apply(context, args);

};

var callNow = immediate && !timeout;

clearTimeout(timeout);

timeout = setTimeout(later, wait);

if (callNow) func.apply(context, args);

};

}

// 添加resize的回調函數，但是只允許它每300毫秒執行一次

window.addEventListener('resize', debounce(function(event) {

// 這里寫resize過程

}, 300));

debounce方法返回一個方法，用來包住你的回調函數，限制他的執行頻率。使用這個防抖方法，就可以讓你寫的頻繁回調的方法不會妨礙用戶的瀏覽器！

更多信息請查看IT技術專欄