互聯網架構設計：高性能的前端

作者：Royal Luo

來源：微信公眾號：互聯網架構 InternetArch

當我們討論互聯網產品高性能架構的時候，往往聚焦在高性能的後端服務。其實用戶是通過客戶端前端來直接體驗互聯網產品的，前端高性能設計也是很重要的。用戶使用互聯網產品的基本流程如下圖。用戶使用電腦Web瀏覽器或者手機App來直接使用互聯網產品服務，用戶終端將會把用戶的操作行為請求到網站伺服器，網站伺服器對請求進行響應，用戶終端（Web瀏覽器或者手機App）將解析伺服器的響應進行解析，通過屏幕或聲音反饋給用戶。

從圖中可以看出用戶直接的體驗是通過前端反饋出來的。當用戶使用不同互聯網產品時，都會有不同的體驗感覺，某些客戶端或網頁使用起來很快，點擊請求立即就能有響應，某些客戶端或網頁使用起來很慢，點擊某個按鈕半天沒有響應，還可以出現客戶端崩潰，最後卸載App或者關閉網頁。

今天我們主要來講述一下，互聯網架構設計高性能高並發的一些常用方法和策略。當然優秀的互聯網產品架構設計從來都是在實踐過程中不斷優化迭代出來的，一開始就企圖就想設計一個包羅萬象的牛逼架構做法是行不通的。在互聯網產品發展過程中，每個不同階段的瓶頸指標點是不一樣的，所以優秀的架構都是不斷迭代優化的歷史產物。

一個優秀的產品，不僅需要在產品交互和客戶端層面做好，同時需要在網路後端服務也做到優秀，前後端緊密配合才能極大地提升用戶體驗。對於互聯網產品的高性能架構設計通常包括以下幾個大方面：

1）Web瀏覽器高性能設計

2）App客戶端高性能設計

3）高性能的網路和硬體

4）後台服務高性能設計

對於一般的互聯網產品不需要將以上四個方面做到盡善盡美，可以依據自身的發展階段選取某些方面進行優先解決和提升。比如一般的創業公司可能不太需要去關心網路和硬體相關的事情，因為目前的騰訊雲或阿里雲可以幫助做好這些事情。

下面我們先來具體介紹前面兩個方面。

1、Web瀏覽器高性能設計

隨著互聯網瀏覽器的發展，現在Web的功能越來越強大，所展現的元素越來越豐富，直接導致瀏覽器與後台伺服器的連接數大幅增長，網路傳輸的流量越來越大。web瀏覽器高性能設計方法主要有以下幾點：

1）盡量與後台伺服器建立長連接。長連接的方式可以避免web端和伺服器反覆建立和銷毀連接，佔用大量客戶端資源，同時也會給伺服器造成一定的壓力。

2）本地緩存數據，提升訪問效率。對於一些不經常更改的圖片和js/css文件可以通過緩存在本地，通過版本號和hash值來協商緩存的更新，從而達到更快速訪問的用戶體驗。

3）合併頁面請求，達到減少頁面請求，提升網路效率的目的。比如多張小圖可以合併為一張圖片來請求，一次預請求多一點的數據。

4）頁面靜態化處理。對於某些不經常變更的頁面（如新聞、日誌等）可以通過靜態頁面訪問的方式來請求，方便後台進行CDN和緩存。

5）將靜態請求和動態請求進行適當的分離。比如圖片從http://img.xxx.com伺服器去拉取，而動態的用戶請求從http://www.xxx.com進行拉取。

6）web端非同步請求。如通過ajax非同步化和局部化的操作方式，減少一些不必要的請求開銷，同時加快前端處理速度。

7）優化業務處理邏輯。比如對於數據量比較大的頁面列表，需要進行分頁請求，數據量限制等。對於12306網站業務處理邏輯優化的一個重點就在於分時段開售火車票，以往是大量請求在同一時間搶票，這是一個業務邏輯處理的錯誤，不同的列車就可以通過不同的時間段來售賣，這樣可以分散到請求壓力。

8）減少cookie傳輸。cookie在每次請求和響應中都會得到傳輸，臨時和不必要的cookie會使得請求數據量增加。

2、App客戶端高性能設計

對於開發者來說，App客戶端有更大的自主性，對優化性能方面能做更多事情。來看看，從app端進行高性能設計具體有哪些方法。

1）緩存技術。app客戶端是作為操作系統的一個獨立進程運行的，相對Web端瀏覽器有更大的發揮空間。對於數據量比較大的資源、圖片的緩存，可以充分利用內存、本地磁碟和網路存儲三個方面來進行緩存，可以在客戶端上建立一套緩存機制，採用LRU或LFU調度方式管理緩存，用於支撐app更高效的運行。比如圖片的存儲，可以先從內存中讀取，如果內存沒有可以從磁碟上讀取，如果再沒有再通過網路請求讀取。

2）資源預載入。基於業務邏輯、用戶歷史行為和安全機制對於用戶行為進行一定預測，在用戶未請求前就預先載入一部分資源。比如目前社交類app應用下拉時預載入部分數據。

3）建立長連接，適當壓縮數據，減少資源的浪費。

4）路由計劃表。針對用戶的歷史連接行為，後台接入服務的控制策略，制定一份接入站點的路由計劃表，為用戶選擇最優的接入站點。對於一般的用戶，他們的網路環境的切換會相對的固定，那麼對於某一個確定的用戶大部分時間來說，客戶端是知道連接到哪裡是最快的。

5）請求非同步化。app客戶端可以通過多線程來非同步化請求，提升app的請求吞吐量。

6）優化業務邏輯，比如列表分頁、非同步發布上傳，緩存讀取等。例如：你在發表朋友圈的時候，微信客戶端顯示發布成功，其實在後台不一定是發布成功了，而是寫入到本地成功了，後續再通過非同步發送到後台伺服器的。

本篇文章主要從前端介紹了高性能架構的設計方法，供開發程序員朋友在優化演進自己的產品時參考。但是後端服務的高性能在互聯網產品架構設計中佔有更大的比重。這一部分會將會在下期文章中得到闡述。