網站重構的8點建議

1.用局部變量替換屢次使用的對象

好比咱們在一段代碼內，屢次使用document、window這樣的對象，咱們能夠用局部變量替換他們。

var d = document,w = window;

原理：訪問直接量和局部變量的速度快，相反，訪問數組元素和對象成員相對較慢。

2.減小重繪與重排

重排：當頁面佈局和幾何屬性改變時候，須要重排，在重排後瀏覽器會從新繪製受到影響的部分到屏幕中，這個過程成爲重繪。

如下操做會引起重排
·添加刪除可見的DOM元素；

·元素位置、尺寸改變；

·文本變動；

·頁面渲染器初始化；

·瀏覽器窗口尺寸改變。

而改變背景、文字顏色只會觸發重繪。

咱們能夠經過以下三步避免重繪、重排：

(1)使元素脫離文檔流→方法：隱藏元素

(2)對其應用全部改變→方法：應用修改

(3)把元素帶回文檔中→方法：從新顯示

原理：由於隱藏的元素不會發生重繪、重排。

3.打造快速響應的用戶界面

不要讓用戶等過久，那麼多久算久，可用性專家Jakob Nielsen的《可用性工程》中提升，響應用戶的時間最好不要超過100毫秒。

咱們來拿糗事百科的一個升級來舉例，以前的版本咱們點贊時候，會觸發一個異步請求給服務器，告訴服務器讚的數值應該加1等信息，而後服務器返回同意功了，頁面上讚的數量加1，這個過程慢時可能間隔數秒；以後作出的優化是，在用戶點贊後馬上展示一個「贊+1」的動畫，而後再給服務器發送異步請求，處理後續數據。

這個優化給用戶的感受就是更快了，用戶的動做獲得了快速反饋，這無疑是個進步，因此咱們要儘量快的對用戶操做作出反應。

4.使用JSON替換XML

這個無需多說，JSON用作數據傳輸，它的體積要比XML小不少。

5.壓縮合並你的JS與CSS

JS、CSS在線壓縮工具：http://app.baidu.com/app/enter?appid=152856

另外你能夠嘗試用一些工具進行動態壓縮，如：

Minify: https://code.google.com/p/minify/downloads/list

6.避免使用CSS表達式

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

表達式的問題就在於它的計算頻率要比咱們想象的多。不只僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動鼠標時都會要從新計算一次。給CSS表達式增長一個計數器能夠跟蹤表達式的計算頻率。在頁面中隨便移動鼠標均可以輕鬆達到10000次以上的計算。

因此，在非不得已，請避免使用CSS表達式。

7.不要使用for-in循環遍歷數組元素

原理：for-in每次迭代操做會同時搜索實例或原型屬性，所以，它比while和for會產生更多的開銷。

8.使用事件委託

當頁面中有大量元素須要綁定事件處理器的時候，咱們不要這樣作：

$(「#myul li」).click(function(){});

咱們能夠改用（jquery1.7+用on代替了delegate和live）

$(「#myul」).on(「click」,」li」,function(){});

原理：事件逐層冒泡並被父級捕獲，只須要給外層元素綁定一個處理器，就能夠觸發全部子集事件，而不須要給每一個本身元素都綁定處理器，這是一種資源的浪費。

但願以上經驗能對你有所幫助，若是你想瞭解更多關於高性能方面的知識，你能夠嘗試閱讀大神zakas的《高性能Javascript》或者Steve souders的《高性能網站建設指南》