2020-11-27 分類: App開發(fā)
作為APP開發(fā)產品經(jīng)理,要對所負責產品的整體用戶體驗負責,產品的性能優(yōu)化是很重要的一個環(huán)節(jié),為了避免用戶在使用產品過程中出現(xiàn)卡頓、加載緩慢、崩潰等性能問題,同時也為了在安排性能優(yōu)化工作時做到心中有數(shù),我們有必要加深一下對性能優(yōu)化的理解。
WEB端性能優(yōu)化
網(wǎng)頁并不是單獨存在的東西,它需要一個載體(瀏覽器),無論是pc端還是移動端。使用網(wǎng)頁的一個基本流程:在瀏覽器輸入網(wǎng)址、DNS解析(將輸入的域名轉換為IP地址)、下載html文件、下載css文件、下載js文件等等,當然這一切都是基于網(wǎng)絡的,如果沒有網(wǎng)絡的話,網(wǎng)頁也就不能使用了。
前端頁面優(yōu)化
加載優(yōu)化
對于網(wǎng)頁來說,加載過程是最為耗時的過程,可能會占到總耗時約80%的時間,因此作為優(yōu)化的重點。
減少HTTP請求。每個請求建立連接也需要時間,dns解析也需要時間,所以做到盡量減少網(wǎng)絡請求個數(shù)??刹捎萌缦路桨福汉喜SS、JS。合并小圖片,使用雪碧圖(把每張小圖標以.png格式文件的形式引用到頁面上,使用雪碧圖只需要引用一張圖片,對內存和帶寬更加友好)。使用iconfont或SVG代替小圖片。
使用緩存(關于緩存,可查看淺析互聯(lián)網(wǎng)中的緩存機制)。使用緩存可以減少向服務器的請求次數(shù),節(jié)省加載時間,所以所有靜態(tài)資源都要在服務器端設置緩存。使用緩存的方案:緩存一切可緩存的資源。使用外聯(lián)式引用CSS、JS。
壓縮HTML、CSS、JS。減少資源大小可以加快網(wǎng)頁的顯示速度,所以要對HTML、CSS、JS等進行代碼壓縮。
避免相互阻塞。CSS的代碼放在頁面的頭部并使用Link方式引入,避免在HTML標簽中寫style樣式,JS放在頁面尾部。
使用首屏加載。首屏的快速顯示,可以很大程度上提升用戶對頁面速度的感知,因此應盡量針對首屏的快速顯示做優(yōu)化。
按需加載。將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載。可采用如下方案:延遲加載LazyLoad。 滾屏加載。注:按需加載會出現(xiàn)重繪制,會影響渲染的性能。
預加載。大型的重資源頁面可使用提前加載下一頁的方式加載頁面。
圖片優(yōu)化。圖片過大會影響頁面的加載速度。優(yōu)化方案:使用iconfont或SVG代替。webp優(yōu)于jpg。PNG8優(yōu)于gif。
減少Cookie。Cookie會影響頁面的加載速度。
避免重定向(通過各種方法將各種網(wǎng)絡請求重新定個方向轉到其它位置)。重定向會影響加載速度,在服務器中應正確設置避免重定向。
代碼優(yōu)化
相關代碼的一些優(yōu)化,也會提升網(wǎng)頁的性能。以下這些是我從開發(fā)哥哥那里得到的答案還有一些查詢的資料,這一塊的優(yōu)化還需要多和開發(fā)哥哥溝通。
盡量避免寫在HTML標簽中寫Style屬性。
移除空的CSS代碼。
合理使用display屬性。
不濫用Web字體。
不聲明過多的font-size,過多的font-size引發(fā)CSS的效率。
標準化各種瀏覽器前綴。
JS避免不必要的Dom操作。
盡量使用ID選擇器,ID選擇器是快的。
渲染優(yōu)化
瀏覽器只有在確定了頁面編碼后才能正確的渲染頁面,所以在繪制頁面或執(zhí)行任何的JS代碼前,大部分的瀏覽器都會緩沖一定字節(jié)的數(shù)據(jù)來從中查找編碼信息。所以需要做一些如下的優(yōu)化:
減少Dom節(jié)點。Dom節(jié)點太多影響頁面的渲染,應盡量減少Dom節(jié)點。
動畫優(yōu)化。
后端性能優(yōu)化
在我們的網(wǎng)站越來越龐大之后,網(wǎng)站后端的系統(tǒng)架構應該逐步向高性能、高可用、高伸縮等特性進行完善,后端架構的完善對網(wǎng)站的性能也起著至關重要的作用。改善性能的一些方法如下:
應用、數(shù)據(jù)、文件分離。將應用程序、數(shù)據(jù)庫、文件各自部署在獨立的服務器上,并且根據(jù)服務器的用途配置好不同的硬件。
添加代理服務器。當用戶請求達到時首先訪問代理服務器,代理服務器將緩存的數(shù)據(jù)返回給用戶,如果沒有緩存才會繼續(xù)向應用服務器獲取,這樣降低了獲取數(shù)據(jù)的成本。
部署CDN(內容分發(fā)網(wǎng)絡)。將數(shù)據(jù)內容緩存到運營商的機房,用戶訪問時先從最近的運營商獲取數(shù)據(jù),這樣大大減少了網(wǎng)絡訪問的路徑。
使用集群改善應用服務器性能。業(yè)務服務器作為網(wǎng)站的入口,會承擔大量的請求,往往通過業(yè)務服務器集群來共同分擔請求數(shù)。集群也就是部署多臺服務器。
數(shù)據(jù)庫讀寫分離。 隨著用戶量的增加,數(shù)據(jù)庫成為更大的瓶頸,改善數(shù)據(jù)庫性能常用的手段是進行讀寫分離,讀寫分離就是將數(shù)據(jù)庫分為讀庫和寫庫。
將業(yè)務服務器進行業(yè)務拆分。隨著業(yè)務的擴展,應用程序會變得非常臃腫,這時我們需要將應用程序進行業(yè)務拆分。每個業(yè)務負責相對獨立的業(yè)務運作。業(yè)務之間可以通過消息進行通信或者共享數(shù)據(jù)庫。
使用分布式文件存儲系統(tǒng)。用戶量增加,產生的文件也會越來越多,單臺的文件服務器已經(jīng)不能滿足需求,這時就需要分布式文件存儲系統(tǒng)來進行支撐。
移動端性能優(yōu)化
性能對于移動端的用戶體驗上更是尤其的重要,以下是針對移動端性能優(yōu)化的總結內容。
啟動速度優(yōu)化
APP的啟動會分為三中不同的狀態(tài):
冷啟動。App沒有啟動過或App進程被killed, 系統(tǒng)中不存在該App進程。在這個過程中,屏幕會顯示一個空白的窗口(顏色基于主題),直至首屏完全啟動
熱啟動。熱啟動意味著你的App進程只是處于后臺,系統(tǒng)只是將其從后臺帶到前臺,展示給用戶
溫啟動。介于冷啟動和熱啟動之間。a用戶back退出了App,然后又啟動。b用戶退出App后,系統(tǒng)可能由于內存原因將App殺死
由此可見,啟動優(yōu)化其實就是針對冷啟動進行的優(yōu)化。
UI布局優(yōu)化
布局的優(yōu)化遵循一個原則就是,盡量減少布局層級和復雜度,細節(jié)方面也是一些代碼層級的優(yōu)化。iOS與安卓端細節(jié)不同,此處就不做詳細闡述了。
頁面響應速度優(yōu)化
避免“操作無響應”的情況。原則是:不在主線程里面做繁重的操作。
消除頁面卡頓
用戶感覺到的卡頓,主要來源于界面的刷新。而界面的性能主要是依賴于設備的UI渲染能力。如果我們的UI設計過于復雜,或是實現(xiàn)不夠好,設備又不給力,界面就會像卡住了一樣,給用戶卡頓的感覺。消除頁面的卡頓應該做到如下方面:
避免過于復雜的布局。
避免過度繪制(每屏每幀上,每個像素點應該只被繪制一次,如果有多次繪制就是過度繪制了)。
電量優(yōu)化(針對于安卓設備)
對于用戶來說,App的電量損耗是用戶體驗的一個方面,特別是當今人們對移動設備的依賴度越來越高的前提下,電量也是用戶特別關注的一個點。從我們手機的電池詳情統(tǒng)計可以簡單看出,手機中最耗電的模塊肯定是屏幕了,接著就是網(wǎng)絡相關。對于電量方面的優(yōu)化有以下幾種:
優(yōu)化網(wǎng)絡請求。
監(jiān)聽手機充電狀態(tài)。監(jiān)聽電池狀態(tài),可以將一些操作放在充電或是電量足夠的情況下進行,例如用戶數(shù)據(jù)同步,數(shù)據(jù)上傳,下載更新包等。
及時關閉GPS,減少更新頻率。GPS或網(wǎng)絡可二選一,這樣會降低電量損耗。
網(wǎng)絡請求優(yōu)化
App的網(wǎng)絡連接對于用戶來說,影響很多,直接影響用戶對這個App的使用體驗。其中較為重要的幾點:
流量。流量是花錢買的,如果一個APP會浪費掉用戶大量的流量,勢必會嚴重影響用戶體驗
電量。電量現(xiàn)在對于用戶體驗來說也是重要的一環(huán)
用戶等待。果App請求等待時間長,會給用戶網(wǎng)絡卡,應用反應慢的感覺,如果有替代品,我們的App很可能就會被用戶無情舍棄。
以下方面可以優(yōu)化網(wǎng)絡請求:
減少網(wǎng)絡數(shù)據(jù)獲取的頻次。
減少獲取數(shù)據(jù)包的大小。
加入網(wǎng)絡緩存與本地緩存。
打包網(wǎng)絡請求。
數(shù)據(jù)壓縮。
延時加載tab頁面。
優(yōu)化算法。
弱網(wǎng)測試與優(yōu)化。
數(shù)據(jù)庫優(yōu)化
和WEB端一樣,數(shù)據(jù)庫方面的優(yōu)化也會提升APP的使用性能。比如:
數(shù)據(jù)庫重構。
查詢語句的優(yōu)化。
數(shù)據(jù)庫分庫。
服務器和客戶端的交互優(yōu)化
除了同WEB相似的服務器優(yōu)化,在服務器與客戶端交互方面可做如下優(yōu)化:
客戶端盡量少請求。
服務端盡量多做邏輯處理。
通信協(xié)議的優(yōu)化。
以上就是關于WEB與移動端性能優(yōu)化方面的小總結,性能優(yōu)化絕大多數(shù)是需要開發(fā)哥哥們來完成的,所以,好好善待開發(fā)哥哥們吧!
文章標題:APP開發(fā)整套軟件性能優(yōu)化流程
鏈接URL:http://redsoil1982.com.cn/news44/91394.html
網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡營銷seo公司;服務項目有App開發(fā)等
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容