作為產品經理，要對所負責產品的整體用戶體驗負責，產品的性能優化是很重要的一個環節，為了避免用戶在使用產品過程中出現卡頓、加載緩慢、崩潰等性能問題，同時也為了在安排性能優化工作時做到心中有數，我們有必要加深一下對性能優化的理解。

WEB端性能優化

網頁并不是單獨存在的東西，它需要一個載體（瀏覽器），無論是pc端還是移動端。使用網頁的一個基本流程：在瀏覽器輸入網址、DNS解析（將輸入的域名轉換為IP地址）、下載html文件、下載css文件、下載js文件等等，當然這一切都是基于網絡的，如果沒有網絡的話，網頁也就不能使用了。

前端頁面優化

加載優化

對于網頁來說，加載過程是最為耗時的過程，可能會占到總耗時約80%的時間，因此作為優化的重點。

1. 減少HTTP請求。每個請求建立連接也需要時間，dns解析也需要時間，所以做到盡量減少網絡請求個數。可采用如下方案：合并CSS、JS。合并小圖片，使用雪碧圖（把每張小圖標以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對內存和帶寬更加友好）。使用iconfont或SVG代替小圖片。
2. 使用緩存（關于緩存，可查看淺析互聯網中的緩存機制）。使用緩存可以減少向服務器的請求次數，節省加載時間，所以所有靜態資源都要在服務器端設置緩存。使用緩存的方案：緩存一切可緩存的資源。使用外聯式引用CSS、JS。
3. 壓縮HTML、CSS、JS。減少資源大小可以加快網頁的顯示速度，所以要對HTML、CSS、JS等進行代碼壓縮。
4. 避免相互阻塞。CSS的代碼放在頁面的頭部并使用Link方式引入，避免在HTML標簽中寫style樣式，JS放在頁面尾部。
5. 使用首屏加載。首屏的快速顯示，可以很大程度上提升用戶對頁面速度的感知，因此應盡量針對首屏的快速顯示做優化。
6. 按需加載。將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載?？刹捎萌缦路桨福?strong>延遲加載LazyLoad。滾屏加載。注：按需加載會出現重繪制，會影響渲染的性能。
7. 預加載。大型的重資源頁面可使用提前加載下一頁的方式加載頁面。
8. 圖片優化。圖片過大會影響頁面的加載速度。優化方案：使用iconfont或SVG代替。webp優于jpg。PNG8優于gif。
9. 減少Cookie。Cookie會影響頁面的加載速度。
10. 避免重定向（通過各種方法將各種網絡請求重新定個方向轉到其它位置）。重定向會影響加載速度，在服務器中應正確設置避免重定向。

代碼優化

相關代碼的一些優化，也會提升網頁的性能。以下這些是我從開發哥哥那里得到的答案還有一些查詢的資料，這一塊的優化還需要多和開發哥哥溝通。

1. 盡量避免寫在HTML標簽中寫Style屬性。
2. 移除空的CSS代碼。
3. 合理使用display屬性。
4. 不濫用Web字體。
5. 不聲明過多的font-size，過多的font-size引發CSS的效率。
6. 標準化各種瀏覽器前綴。
7. JS避免不必要的Dom操作。
8. 盡量使用ID選擇器，ID選擇器是最快的。

渲染優化

瀏覽器只有在確定了頁面編碼后才能正確的渲染頁面，所以在繪制頁面或執行任何的JS代碼前，大部分的瀏覽器都會緩沖一定字節的數據來從中查找編碼信息。所以需要做一些如下的優化：

1. 減少Dom節點。Dom節點太多影響頁面的渲染，應盡量減少Dom節點。
2. 動畫優化。

后端性能優化

在我們的網站越來越龐大之后，網站后端的系統架構應該逐步向高性能、高可用、高伸縮等特性進行完善，后端架構的完善對網站的性能也起著至關重要的作用。改善性能的一些方法如下：

1. 應用、數據、文件分離。將應用程序、數據庫、文件各自部署在獨立的服務器上，并且根據服務器的用途配置好不同的硬件。
2. 添加代理服務器。當用戶請求達到時首先訪問代理服務器，代理服務器將緩存的數據返回給用戶，如果沒有緩存才會繼續向應用服務器獲取，這樣降低了獲取數據的成本。
3. 部署CDN（內容分發網絡）。將數據內容緩存到運營商的機房，用戶訪問時先從最近的運營商獲取數據，這樣大大減少了網絡訪問的路徑。
4. 使用集群改善應用服務器性能。業務服務器作為網站的入口，會承擔大量的請求，往往通過業務服務器集群來共同分擔請求數。集群也就是部署多臺服務器。
5. 數據庫讀寫分離。?隨著用戶量的增加，數據庫成為最大的瓶頸，改善數據庫性能常用的手段是進行讀寫分離，讀寫分離就是將數據庫分為讀庫和寫庫。
6. 將業務服務器進行業務拆分。隨著業務的擴展，應用程序會變得非常臃腫，這時我們需要將應用程序進行業務拆分。每個業務負責相對獨立的業務運作。業務之間可以通過消息進行通信或者共享數據庫。
7. 使用分布式文件存儲系統。用戶量增加，產生的文件也會越來越多，單臺的文件服務器已經不能滿足需求，這時就需要分布式文件存儲系統來進行支撐。

移動端性能優化

性能對于移動端的用戶體驗上更是尤其的重要，以下是針對移動端性能優化的總結內容。

啟動速度優化

APP的啟動會分為三中不同的狀態：

• 冷啟動。App沒有啟動過或App進程被killed, 系統中不存在該App進程。在這個過程中，屏幕會顯示一個空白的窗口(顏色基于主題)，直至首屏完全啟動
• 熱啟動。熱啟動意味著你的App進程只是處于后臺，系統只是將其從后臺帶到前臺，展示給用戶
• 溫啟動。介于冷啟動和熱啟動之間。a用戶back退出了App，然后又啟動。b用戶退出App后，系統可能由于內存原因將App殺死

由此可見，啟動優化其實就是針對冷啟動進行的優化。

UI布局優化

布局的優化遵循一個原則就是，盡量減少布局層級和復雜度，細節方面也是一些代碼層級的優化。iOS與安卓端細節不同，此處就不做詳細闡述了（其實是我也不知道，還沒有問開發哥哥…）。

頁面響應速度優化

避免“操作無響應”的情況。原則是：不在主線程里面做繁重的操作。

消除頁面卡頓

用戶感覺到的卡頓，主要來源于界面的刷新。而界面的性能主要是依賴于設備的UI渲染能力。如果我們的UI設計過于復雜，或是實現不夠好，設備又不給力，界面就會像卡住了一樣，給用戶卡頓的感覺。消除頁面的卡頓應該做到如下方面：

1. 避免過于復雜的布局。
2. 避免過度繪制（每屏每幀上，每個像素點應該只被繪制一次，如果有多次繪制就是過度繪制了）。

電量優化（針對于安卓設備）

對于用戶來說，App的電量損耗是用戶體驗的一個方面，特別是當今人們對移動設備的依賴度越來越高的前提下，電量也是用戶特別關注的一個點。從我們手機的電池詳情統計可以簡單看出，手機中最耗電的模塊肯定是屏幕了，接著就是網絡相關。對于電量方面的優化有以下幾種：

1. 優化網絡請求。
2. 監聽手機充電狀態。監聽電池狀態，可以將一些操作放在充電或是電量足夠的情況下進行，例如用戶數據同步，數據上傳，下載更新包等。
3. 及時關閉GPS，減少更新頻率。GPS或網絡可二選一，這樣會降低電量損耗。

網絡請求優化

App的網絡連接對于用戶來說，影響很多，直接影響用戶對這個App的使用體驗。其中較為重要的幾點：

• 流量。流量是花錢買的，如果一個APP會浪費掉用戶大量的流量，勢必會嚴重影響用戶體驗
• 電量。電量現在對于用戶體驗來說也是重要的一環
• 用戶等待。果App請求等待時間長，會給用戶網絡卡，應用反應慢的感覺，如果有替代品，我們的App很可能就會被用戶無情舍棄

以下方面可以優化網絡請求：

1. 減少網絡數據獲取的頻次。
2. 減少獲取數據包的大小。
3. 加入網絡緩存與本地緩存。
4. 打包網絡請求。
5. 數據壓縮。
6. 延時加載tab頁面。
7. 優化算法。
8. 弱網測試與優化。

數據庫優化

和WEB端一樣，數據庫方面的優化也會提升APP的使用性能。比如：

1. 數據庫重構。
2. 查詢語句的優化。
3. 數據庫分庫。

服務器和客戶端的交互優化

除了同WEB相似的服務器優化，在服務器與客戶端交互方面可做如下優化：

1. 客戶端盡量少請求。
2. 服務端盡量多做邏輯處理。
3. 通信協議的優化。

最后

以上就是關于WEB與移動端性能優化方面的小總結，性能優化絕大多數是需要開發哥哥們來完成的，所以，好好善待開發哥哥們吧！

作者：流年，互聯網產品設計師，4年互聯網產品設計經驗。

本文由 @流年 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自unsplash，基于CC0協議