一個(gè)網(wǎng)站影響用戶(hù)訪(fǎng)問(wèn)的最大部分是前端的頁(yè)面。網(wǎng)站可以劃分為：前端和后臺(tái)。后臺(tái)可以理解成是用來(lái)實(shí)現(xiàn)網(wǎng)站的功能的，而前端是屬于功能的表現(xiàn)。然如除了后臺(tái)需要在性能上做優(yōu)化外，其實(shí)前端的頁(yè)面更需要在性能優(yōu)化上下功夫，只有這樣才能給我們的用戶(hù)帶來(lái)更好的用戶(hù)體驗(yàn)。

如今瀏覽器能夠?qū)崿F(xiàn)的特性越來(lái)越多，并且網(wǎng)絡(luò)逐漸向移動(dòng)設(shè)備轉(zhuǎn)移，使我們的前端代碼更加緊湊，如何優(yōu)化，就變得越來(lái)越重要了。 開(kāi)發(fā)人員普遍會(huì)將他們的代碼習(xí)慣優(yōu)先于用戶(hù)體驗(yàn)。但是很多很小的改變可以讓用戶(hù)體驗(yàn)有個(gè)飛躍提升，所以任何一點(diǎn)兒小小的優(yōu)化都會(huì)提升你網(wǎng)站的性能。 前端給力的地方是可以有許多種簡(jiǎn)單的策略和代碼習(xí)慣讓我們可以保證最理想的前端性能。說(shuō)了這么多，那么我們應(yīng)該如何對(duì)我們前端的頁(yè)面進(jìn)行性能優(yōu)化呢？

而前端開(kāi)發(fā)工作者可以控制的是什么呢？。前端的頁(yè)面主要包括xhtml,css,js。其實(shí)xhtml就是現(xiàn)實(shí)中所談到的內(nèi)容，頁(yè)面的內(nèi)容：文字，圖片，flash,視頻等。

網(wǎng)站前端性能優(yōu)化最佳方案1：使用documentfragments或innerhtml取代復(fù)雜的元素注入

dom操作在瀏覽器上是要付稅的。盡管性能提升是在瀏覽器，dom很慢，如果你沒(méi)有注意到，你可能會(huì)察覺(jué)瀏覽器運(yùn)行非常的慢。這就是為什么減少創(chuàng)建集中的dom節(jié)點(diǎn)以及快速注入是那么的重要了。

現(xiàn)在假設(shè)我們頁(yè)面中有一個(gè)<ul>元素，調(diào)用ajax獲取json列表，然后使用javascript更新元素內(nèi)容。通常，程序員會(huì)這么寫(xiě)：

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

ajaxresult.items.foreach(function(item) {

// 創(chuàng)建<li>元素

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

li.innerhtml = item.text;

// <li>元素常規(guī)操作，例如添加class，更改屬性attribute，添加事件監(jiān)聽(tīng)等

// 迅速將<li>元素注入父級(jí)<ul>中

list.apppendchild(li);

});

上面的代碼其實(shí)是一個(gè)錯(cuò)誤的寫(xiě)法，將<ul>元素帶著對(duì)每一個(gè)列表的dom操作一起移植是非常慢的。如果你真的想要 使用document.createelement，并且將對(duì)象當(dāng)做節(jié)點(diǎn)來(lái)處理，那么考慮到性能問(wèn)題，你應(yīng)該使用documentfragement。

documentfragement 是一組子節(jié)點(diǎn)的“虛擬存儲(chǔ)”，并且它沒(méi)有父標(biāo)簽。在我們的例子中，將documentfragement想象成看不見(jiàn)的<ul>元素，在 dom外，一直保管著你的子節(jié)點(diǎn)，直到他們被注入dom中。那么，原來(lái)的代碼就可以用documentfragment優(yōu)化一下：

var frag = document.createdocumentfragment();

ajaxresult.items.foreach(function(item) {

// 創(chuàng)建<li>元素

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

li.innerhtml = item.text;

// <li>元素常規(guī)操作

// 例如添加class，更改屬性attribute，添加事件監(jiān)聽(tīng)，添加子節(jié)點(diǎn)等

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

frag.appendchild(li);

});

// 最后將所有的列表對(duì)象通過(guò)documentfragment集中注入dom

document.queryselector('ul').appendchild(frag);

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

如果你不需要將列表對(duì)象當(dāng)做節(jié)點(diǎn)來(lái)操作，更好的方法是用字符串構(gòu)建html內(nèi)容：

var htmlstr = '';

ajaxresult.items.foreach(function(item) {

// 構(gòu)建包含html頁(yè)面內(nèi)容的字符串

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

});

// 通過(guò)innerhtml設(shè)定ul內(nèi)容

document.queryselector('ul').innerhtml = htmlstr;

這當(dāng)中也只有一個(gè)dom操作，并且比起documentfragment代碼量更少。在任何情況下，這兩種方法都比在每一次迭代中將元素注入dom更高效。

網(wǎng)站前端性能優(yōu)化最佳方案2：高頻執(zhí)行事件/方法的防抖

通常，開(kāi)發(fā)人員會(huì)在有用戶(hù)交互參與的地方添加事件，而往往這種事件會(huì)被頻繁觸發(fā)。想象一下窗口的resize事件或者是一個(gè)元素的onmouseover事件 - 他們觸發(fā)時(shí)，執(zhí)行的非常迅速，并且觸發(fā)很多次。如果你的回調(diào)過(guò)重，你可能使瀏覽器死掉。

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

防抖可以限制一個(gè)方法在一定時(shí)間內(nèi)執(zhí)行的次數(shù)。以下代碼是個(gè)防抖示例：

// 取自 underscorejs 實(shí)用框架

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的回調(diào)函數(shù)，但是只允許它每300毫秒執(zhí)行一次

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

// 這里寫(xiě)resize過(guò)程

}, 300));

debounce方法返回一個(gè)方法，用來(lái)包住你的回調(diào)函數(shù)，限制他的執(zhí)行頻率。使用這個(gè)防抖方法，就可以讓你寫(xiě)的頻繁回調(diào)的方法不會(huì)妨礙用戶(hù)的瀏覽器！