作為APP開發(fā)產(chǎn)品經(jīng)理，要對所負(fù)責(zé)產(chǎn)品的整體用戶體驗負(fù)責(zé)，產(chǎn)品的性能優(yōu)化是很重要的一個環(huán)節(jié)，為了避免用戶在使用產(chǎn)品過程中出現(xiàn)卡頓、加載緩慢、崩潰等性能問題，同時也為了在安排性能優(yōu)化工作時做到心中有數(shù)，我們有必要加深一下對性能優(yōu)化的理解。

    WEB端性能優(yōu)化

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

    前端頁面優(yōu)化

    加載優(yōu)化

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

    減少HTTP請求。每個請求建立連接也需要時間，dns解析也需要時間，所以做到盡量減少網(wǎng)絡(luò)請求個數(shù)?？刹捎萌缦路桨福汉喜SS、JS。合并小圖片，使用雪碧圖（把每張小圖標(biāo)以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對內(nèi)存和帶寬更加友好）。使用iconfont或SVG代替小圖片。

    使用緩存（關(guān)于緩存，可查看淺析互聯(lián)網(wǎng)中的緩存機制）。使用緩存可以減少向服務(wù)器的請求次數(shù)，節(jié)省加載時間，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存。使用緩存的方案：緩存一切可緩存的資源。使用外聯(lián)式引用CSS、JS。

    壓縮HTML、CSS、JS。減少資源大小可以加快網(wǎng)頁的顯示速度，所以要對HTML、CSS、JS等進(jìn)行代碼壓縮。

    避免相互阻塞。CSS的代碼放在頁面的頭部并使用Link方式引入，避免在HTML標(biāo)簽中寫style樣式，JS放在頁面尾部。

    使用首屏加載。首屏的快速顯示，可以很大程度上提升用戶對頁面速度的感知，因此應(yīng)盡量針對首屏的快速顯示做優(yōu)化。

    按需加載。將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶需要時才加載?？刹捎萌缦路桨福貉舆t加載LazyLoad。    滾屏加載。注：按需加載會出現(xiàn)重繪制，會影響渲染的性能。

    預(yù)加載。大型的重資源頁面可使用提前加載下一頁的方式加載頁面。

    圖片優(yōu)化。圖片過大會影響頁面的加載速度。優(yōu)化方案：使用iconfont或SVG代替。webp優(yōu)于jpg。PNG8優(yōu)于gif。

    減少Cookie。Cookie會影響頁面的加載速度。

    避免重定向（通過各種方法將各種網(wǎng)絡(luò)請求重新定個方向轉(zhuǎn)到其它位置）。重定向會影響加載速度，在服務(wù)器中應(yīng)正確設(shè)置避免重定向。

    代碼優(yōu)化

    相關(guān)代碼的一些優(yōu)化，也會提升網(wǎng)頁的性能。以下這些是我從開發(fā)哥哥那里得到的答案還有一些查詢的資料，這一塊的優(yōu)化還需要多和開發(fā)哥哥溝通。

    盡量避免寫在HTML標(biāo)簽中寫Style屬性。

    移除空的CSS代碼。

    合理使用display屬性。

    不濫用Web字體。

    不聲明過多的font-size，過多的font-size引發(fā)CSS的效率。

    標(biāo)準(zhǔn)化各種瀏覽器前綴。

    JS避免不必要的Dom操作。

    盡量使用ID選擇器，ID選擇器是快的。

    渲染優(yōu)化

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

    減少Dom節(jié)點。Dom節(jié)點太多影響頁面的渲染，應(yīng)盡量減少Dom節(jié)點。

    動畫優(yōu)化。

    后端性能優(yōu)化

    在我們的網(wǎng)站越來越龐大之后，網(wǎng)站后端的系統(tǒng)架構(gòu)應(yīng)該逐步向高性能、高可用、高伸縮等特性進(jìn)行完善，后端架構(gòu)的完善對網(wǎng)站的性能也起著至關(guān)重要的作用。改善性能的一些方法如下：

    應(yīng)用、數(shù)據(jù)、文件分離。將應(yīng)用程序、數(shù)據(jù)庫、文件各自部署在獨立的服務(wù)器上，并且根據(jù)服務(wù)器的用途配置好不同的硬件。

    添加代理服務(wù)器。當(dāng)用戶請求達(dá)到時首先訪問代理服務(wù)器，代理服務(wù)器將緩存的數(shù)據(jù)返回給用戶，如果沒有緩存才會繼續(xù)向應(yīng)用服務(wù)器獲取，這樣降低了獲取數(shù)據(jù)的成本。

    部署CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）。將數(shù)據(jù)內(nèi)容緩存到運營商的機房，用戶訪問時先從最近的運營商獲取數(shù)據(jù)，這樣大大減少了網(wǎng)絡(luò)訪問的路徑。

    使用集群改善應(yīng)用服務(wù)器性能。業(yè)務(wù)服務(wù)器作為網(wǎng)站的入口，會承擔(dān)大量的請求，往往通過業(yè)務(wù)服務(wù)器集群來共同分擔(dān)請求數(shù)。集群也就是部署多臺服務(wù)器。

    數(shù)據(jù)庫讀寫分離。 隨著用戶量的增加，數(shù)據(jù)庫成為最大的瓶頸，改善數(shù)據(jù)庫性能常用的手段是進(jìn)行讀寫分離，讀寫分離就是將數(shù)據(jù)庫分為讀庫和寫庫。

    將業(yè)務(wù)服務(wù)器進(jìn)行業(yè)務(wù)拆分。隨著業(yè)務(wù)的擴(kuò)展，應(yīng)用程序會變得非常臃腫，這時我們需要將應(yīng)用程序進(jìn)行業(yè)務(wù)拆分。每個業(yè)務(wù)負(fù)責(zé)相對獨立的業(yè)務(wù)運作。業(yè)務(wù)之間可以通過消息進(jìn)行通信或者共享數(shù)據(jù)庫。

    使用分布式文件存儲系統(tǒng)。用戶量增加，產(chǎn)生的文件也會越來越多，單臺的文件服務(wù)器已經(jīng)不能滿足需求，這時就需要分布式文件存儲系統(tǒng)來進(jìn)行支撐。

    移動端性能優(yōu)化

    性能對于移動端的用戶體驗上更是尤其的重要，以下是針對移動端性能優(yōu)化的總結(jié)內(nèi)容。

    啟動速度優(yōu)化

    APP的啟動會分為三中不同的狀態(tài)：

    冷啟動。App沒有啟動過或App進(jìn)程被killed, 系統(tǒng)中不存在該App進(jìn)程。在這個過程中，屏幕會顯示一個空白的窗口(顏色基于主題)，直至首屏完全啟動

    熱啟動。熱啟動意味著你的App進(jìn)程只是處于后臺，系統(tǒng)只是將其從后臺帶到前臺，展示給用戶

    溫啟動。介于冷啟動和熱啟動之間。a用戶back退出了App，然后又啟動。b用戶退出App后，系統(tǒng)可能由于內(nèi)存原因?qū)pp殺死

由此可見，啟動優(yōu)化其實就是針對冷啟動進(jìn)行的優(yōu)化。

    UI布局優(yōu)化

    布局的優(yōu)化遵循一個原則就是，盡量減少布局層級和復(fù)雜度，細(xì)節(jié)方面也是一些代碼層級的優(yōu)化。iOS與安卓端細(xì)節(jié)不同，此處就不做詳細(xì)闡述了。

    頁面響應(yīng)速度優(yōu)化

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

    消除頁面卡頓

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

    避免過于復(fù)雜的布局。

    避免過度繪制（每屏每幀上，每個像素點應(yīng)該只被繪制一次，如果有多次繪制就是過度繪制了）。

    電量優(yōu)化（針對于安卓設(shè)備）

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

    優(yōu)化網(wǎng)絡(luò)請求。

    監(jiān)聽手機充電狀態(tài)。監(jiān)聽電池狀態(tài)，可以將一些操作放在充電或是電量足夠的情況下進(jìn)行，例如用戶數(shù)據(jù)同步，數(shù)據(jù)上傳，下載更新包等。

    及時關(guān)閉GPS，減少更新頻率。GPS或網(wǎng)絡(luò)可二選一，這樣會降低電量損耗。

    網(wǎng)絡(luò)請求優(yōu)化

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

    流量。流量是花錢買的，如果一個APP會浪費掉用戶大量的流量，勢必會嚴(yán)重影響用戶體驗

    電量。電量現(xiàn)在對于用戶體驗來說也是重要的一環(huán)

    用戶等待。果App請求等待時間長，會給用戶網(wǎng)絡(luò)卡，應(yīng)用反應(yīng)慢的感覺，如果有替代品，我們的App很可能就會被用戶無情舍棄。  

    以下方面可以優(yōu)化網(wǎng)絡(luò)請求：

    減少網(wǎng)絡(luò)數(shù)據(jù)獲取的頻次。

    減少獲取數(shù)據(jù)包的大小。

    加入網(wǎng)絡(luò)緩存與本地緩存。

    打包網(wǎng)絡(luò)請求。

    數(shù)據(jù)壓縮。

    延時加載tab頁面。

    優(yōu)化算法。

    弱網(wǎng)測試與優(yōu)化。

    數(shù)據(jù)庫優(yōu)化

    和WEB端一樣，數(shù)據(jù)庫方面的優(yōu)化也會提升APP的使用性能。比如：

    數(shù)據(jù)庫重構(gòu)。

    查詢語句的優(yōu)化。

    數(shù)據(jù)庫分庫。

    服務(wù)器和客戶端的交互優(yōu)化

    除了同WEB相似的服務(wù)器優(yōu)化，在服務(wù)器與客戶端交互方面可做如下優(yōu)化：    

    客戶端盡量少請求。

    服務(wù)端盡量多做邏輯處理。

    通信協(xié)議的優(yōu)化。

    以上就是關(guān)于WEB與移動端性能優(yōu)化方面的小總結(jié)，性能優(yōu)化大多數(shù)是需要開發(fā)公司來完成的，所以，好好善待開發(fā)公司吧！