前端性能優化

http://www.infoq.com/cn/articles/challenges-and-optimization-of-cross-border-website

 

周濤明：前端性能優化，按照常用的頻率和效果上來看，在前端性能優化上常常用到的點以下：

第一，減小http請求是很是有效的措施

減小http請求是很是有效的性能優化手段，例如經常使用的css sprite技術將背景圖片進行合併來減小網絡開銷，阿里巴巴主頁就用到這個手段，合併ajax請求，也是減小http請求的手段，請求的發起和接收，比一個請求的網絡開銷要大得多，從目前線上的效果能夠看到，減小http請求數是很是有效果的方式。

第二，減小重定向

重定向意味着兩次鏈接，用戶在訪問一個頁面時，意味第二次須要重啓發起鏈接（keepalive會重用鏈接），第二次請求因爲存在網絡開銷，會出現短暫的白屏，在跨境電子商務網站來講，因爲各個地區的網絡差別很是大，因此網絡的開銷是很是大的，在阿里巴巴跨境網站業務，會針對新老用戶，作不一樣的頁面展示邏輯，重定向是很是廣泛的，也很容易被開發忽視，在某種程度上來講，重定向編程相對容易，因此在下單關鍵流程上出現了很是多的重定向的跳轉，在Google Analysis上面能夠明顯看到重定向時間達到1s以上，去年作了一次全面的整改，把重定向所有去掉，改爲forward內部跳轉，減小網絡開銷，成效十分明顯，關鍵頁面性能onload時間減小1s左右。

第三，預加載

預加載是預見性用戶行爲的性能優化方式，根據用戶的操做行爲，在CPU處於閒置狀態時，進行預先的資源加載，當應用達到預測的頁面時，部分資源已經預先加載，因此性能就提高了。在阿里巴巴B2C網站Aliexpress.com的Detail頁面進行性能優化時，就在用戶搜索頁面進行預先加載用戶搜索的前6個商品，目前支持的瀏覽器有 Chrome 和 Firefox.

其實超級簡單了，就是加一個相似的連接，href能夠是任何資源，HTML， JavaScript， CSS， 圖片：

<link rel=」prerender」 href=」" > (Chrome)
<link rel=」prefrech」 href=」" > (Firefox)

第四，儘可能減小cookie的大小

大量的cookie會加劇請求的發送網絡開銷，http規範對頭是不壓縮的，對於跨境網站來講，網絡差別很是大，因此過大的cookie的網絡latency是很是大的，固然爲了知足業務需求，cookie的大小大也沒有更好的方法，因此只能儘可能減小，畢竟知足業務需求前提下，才能知足性能。

第五，延遲加載

延遲加載，將資源延遲到須要的時候的加載，例如detail頁面，相關產品推薦，當用戶瀏覽更多的信息往下拉動滾動時，才進行加載，異步加載能夠大幅減小對後端資源的使用，在須要的時候加載，是資源合理使用經常使用的方式，可是也帶來一個問題，當往下拉纔去加載，若是性能不夠好，用戶的體驗實際上是很差的，「菊花」轉動的時間會比較長，同時異步加載對前端性能的做用也是很是明顯的，渲染的節點數量大幅減小。

第六，Ajax異步化減小DOM的節點數，加快渲染時間，first byte時間

異步化一般是首屏加載優化，加快dom渲染速度（減小dom數量），異步化帶來了firstbyte性能提高，用戶感知頁面有內容更快了，異步化一樣也會帶來用戶體驗的問題，大量的異步化，js的阻塞渲染（下載）的機率越大，因此適度的ajax很重要，用戶體驗是第一位的。

第七，CDN加速

Cdn加速實際上是大型網站都要用的手段，cdn消除了地區間的用戶訪問差別，讓用戶就近訪問，cdn須要注意的是須要儘可能減小回源（不命中cdn），資源的過時時間儘可能長，合理的cdn架構也很重要，回源以後，文件處理過程也很重要，堅持一個原則，那就是儘可能短的latency。

第八，延遲渲染

異步加載帶來的問題是，須要發起請求到服務器拿數據，若是網絡條件差，用戶體驗影響是很是大的，延遲渲染就是在須要的時候渲染dom，渲染html片斷。例如搜索list頁面，有32個搜索結果，前6個商品（首屏），是同步渲染出來的，其它的商品列表的html，用textarea進行包裝，瀏覽器會把這種帶有text area標籤的html片段當作一個節點來看，因此渲染速度大幅提升，這種方式是提升首屏的渲染速度，達到了性能和用戶體驗的平衡。

第九，DNS預解析

Dns解析容易被人忽視，對於跨境網站，local dns位於世界各地，離機房的dns server是很是遠的，解析成本其實是很是高，特別是域名多的狀況下，提早預加載dns，至關於在a頁面提早把b頁面的全部的域名提早加載進來，這樣到達b頁面時，dns幾乎不須要解析了，dns解析的提早加載，提升了首屏full load、firstbyte，用戶體驗明顯增長。

第十，js放在頭部阻塞瀏覽器並行渲染

JS儘可能不要放在上面，儘管現代的瀏覽器已經作了充分的優化-大部分狀況下，已經不阻塞並行下載了，可是在不少狀況下仍然會阻塞並行渲染