1）合并壓縮CSS、JavaScript、圖檔，靜态資源CDN緩存
之是以要做合并壓縮是因為：HTTP 1.x不允許一個連接配接上的多個響應資料交錯到達（多路複用），因而一個響應必須完全傳回後，下一個響應才會開始傳輸。
也就是說即使用戶端同時發送了兩個請求，而且CSS資源先準備就緒，伺服器也會先發送HTML響應，然後再傳遞CSS。
使用CDN是為了讓使用者通路的時候能用最近的資源，減少來回傳輸時間。
2）CSS放頂部，JavaScript放底部
CSS可以并行下載下傳，而JavaScript加載之後會造成阻塞。
但凡事還是會有例外，如果把行内腳本放在樣式表之後，會明顯地延遲資源的下載下傳（結果是樣式表下載下傳完成并且行内腳本執行完畢時，後續資源才能開始下載下傳）。
這是因為行内腳本可能含有依賴于樣式表中樣式的代碼，比如document.getElementsByClassName()。
下面通過Chrome的工具檢視下：
3）優化DNS解析，減少重定向
先擷取code，再通過code擷取openid，最後再跳轉通路靜态頁面。
由于公司将業務分成了多個小組，是以短短的三步其實需要三個小組配合，需要重定向多個域名。
下圖是未優化前的瀑布圖，但不是最壞情況，有時候通路到靜态頁面需要經過10多秒，完全不能接受，下圖中會跳轉4個域名：
後面不跳index那個域名，直接跳轉到微信操作域名，減少一個域名的跳轉，各小組代碼再做優化，但效果還是不理想，僅僅快了幾秒。
最後發現其實是在與微信的伺服器做互動的時候，DNS解析花了太多時間！不得已，在伺服器的host中添加一條記錄，直接通過IP指向。
下圖是最終優化結果，雖然達不到秒開，但至少可以接受了：
1）圖檔預加載
在做一個“秋名山活動”的時候，使用了圖檔預加載。這個活動中有120多張圖檔。
流程很簡單，就是答題，最後給評論結果，再分享出去。
如果一下子加載那麼多圖檔，一定是愚蠢的想法，最後決定，在頁面載入的時候先加載一些通用圖檔。
在答題的時候目前頁面，預先加載後面頁面中的圖檔，防止通路頁面的時候直接不展示圖檔，圖檔也做了适當的合并。
優化還遠遠沒有結束，在Chrome中分别模拟了good 2G、good 3G以及4G後，有結果的情況并不理想。
good 2G：
good 3G：
4G：
2）減少分支
在寫業務邏輯的時候，經常會用到if else，switch之類的邏輯判斷，如果每次都做這麼多判斷，很容易影響性能。
是以可以通過多種方式來避免過多的判斷。
1. 惰性模式
減少每次代碼執行時的重複性分支判斷，通過對對象重定義來屏蔽原對象中的分支判斷。
惰性模式分為兩種：第一種檔案加載後立即執行對象方法來重定義，第二種是當第一次使用方法對象時來重定義。
公司有個頁面要提供給第三方APP，但是最終發現第三方APP不能使用localStorage緩存，最終隻得做相容的方式。
但為了避免每次引用方法的時候都做判斷，就使用加載後立即重定義：
2. 建立映射關系
頁面中經常需要彈出框提示，後面就自己做了一個，但彈出框會有很多款式。
如果用簡單工廠模式建立的話，免不了switch分支判斷，後面就直接用賦不同的key，還能緩存起來，隻初始化一次。
3）第三方代碼異步加載
第三方代碼，例如百度統計、微信SDK等，這些完全可以在将業務資源加載完後再添加。
4）cookie與localStorage緩存
有了緩存後，就能減少與伺服器的通信，在本地操作。
公司有個查違章的業務，在本地添加好車輛後，再次進入頁面的時候就需要能直接選擇事先添加好的車輛。
最理想的方式就是添加好後，就在本地緩存起來，下次進入直接調取緩存。
我會優先使用localStorage，下面的表格就是對比：
cookie
localStorage
資料生命周期
可設定失效時間
除非被清除，否則永久儲存
資料大
大約4KB
大約5M
與伺服器通信
每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來性能問題
不參與和伺服器的通信
本地存儲，之前的曆史大概如下圖所示：
localStorage在浏覽器相容方面，IE8居然也支援了。
5）事件委托
使用事件委托技術能讓你避免對特定的每個節點添加事件監聽器。
如果每次都重新綁定一次事件，那會有很多多餘操作，而綁定在此元素的父級，就隻需綁定一次即可。
6）節流與去抖動
節流(throttle)：預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然後進入下一個新周期。
例如mousemove 事件、window對象的resize和scroll事件。
去抖動(debounce)：當調用動作n毫秒後，才會執行該動作，若在這n毫秒内又調用此動作則将重新計算執行時間。
例如文本輸入keydown 事件，keyup 事件，做autocomplete等。
在做公司内部的一個系統的時候，需要方希望在左右滾動表格的時候，能将第一列固定在最左邊，友善檢視。
為了讓操作能更流暢，我再這裡用了節流，有些浏覽器會出現卡頓，就得需要增加周期時間。
1）在手機中列印變量
在移動頁面的時候經常需要調試字段，又不能用console.log，每次alert的話，碰到對象就看不到内容了。
2）chrome插件JSON-handle
伺服器傳回的很多都是JSON格式的資料，通常寫好後給你個接口，順便給你幾個demo參數。
在浏覽器中打開後，就是一串字元串，但要給人看的話，就得格式化一下了，這個插件就是用來讓人看的。
本文轉自 咖啡機（K.F.J） 部落格園部落格，原文連結： http://www.cnblogs.com/strick/p/6228339.html ，如需轉載請自行聯系原作