APP開(kāi)發(fā)整套軟件性能優(yōu)化流程

2020-11-27    分類: App開(kāi)發(fā)

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

WEB端性能優(yōu)化

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

APP開(kāi)發(fā)

前端頁(yè)面優(yōu)化

加載優(yōu)化

對(duì)于網(wǎng)頁(yè)來(lái)說(shuō),加載過(guò)程是最為耗時(shí)的過(guò)程,可能會(huì)占到總耗時(shí)約80%的時(shí)間,因此作為優(yōu)化的重點(diǎn)。

減少HTTP請(qǐng)求。每個(gè)請(qǐng)求建立連接也需要時(shí)間,dns解析也需要時(shí)間,所以做到盡量減少網(wǎng)絡(luò)請(qǐng)求個(gè)數(shù)。可采用如下方案:合并CSS、JS。合并小圖片,使用雪碧圖(把每張小圖標(biāo)以.png格式文件的形式引用到頁(yè)面上,使用雪碧圖只需要引用一張圖片,對(duì)內(nèi)存和帶寬更加友好)。使用iconfont或SVG代替小圖片。

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

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

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

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

按需加載。將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶需要時(shí)才加載。可采用如下方案:延遲加載LazyLoad。 滾屏加載。注:按需加載會(huì)出現(xiàn)重繪制,會(huì)影響渲染的性能。

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

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

減少Cookie。Cookie會(huì)影響頁(yè)面的加載速度。

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

代碼優(yōu)化

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

APP開(kāi)發(fā)

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

移除空的CSS代碼。

合理使用display屬性。

不濫用Web字體。

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

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

JS避免不必要的Dom操作。

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

渲染優(yōu)化

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

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

動(dòng)畫(huà)優(yōu)化。

后端性能優(yōu)化

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

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

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

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

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

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

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

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

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

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

啟動(dòng)速度優(yōu)化

APP的啟動(dòng)會(huì)分為三中不同的狀態(tài):

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

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

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

由此可見(jiàn),啟動(dòng)優(yōu)化其實(shí)就是針對(duì)冷啟動(dòng)進(jìn)行的優(yōu)化。

UI布局優(yōu)化

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

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

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

消除頁(yè)面卡頓

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

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

避免過(guò)度繪制(每屏每幀上,每個(gè)像素點(diǎn)應(yīng)該只被繪制一次,如果有多次繪制就是過(guò)度繪制了)。

APP開(kāi)發(fā)

電量?jī)?yōu)化(針對(duì)于安卓設(shè)備)

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

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

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

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

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

App的網(wǎng)絡(luò)連接對(duì)于用戶來(lái)說(shuō),影響很多,直接影響用戶對(duì)這個(gè)App的使用體驗(yàn)。其中較為重要的幾點(diǎn):

流量。流量是花錢買的,如果一個(gè)APP會(huì)浪費(fèi)掉用戶大量的流量,勢(shì)必會(huì)嚴(yán)重影響用戶體驗(yàn)

電量。電量現(xiàn)在對(duì)于用戶體驗(yàn)來(lái)說(shuō)也是重要的一環(huán)

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

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

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

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

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

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

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

延時(shí)加載tab頁(yè)面。

優(yōu)化算法。

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

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

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

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

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

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

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

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

客戶端盡量少請(qǐng)求。

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

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

以上就是關(guān)于WEB與移動(dòng)端性能優(yōu)化方面的小總結(jié),性能優(yōu)化絕大多數(shù)是需要開(kāi)發(fā)哥哥們來(lái)完成的,所以,好好善待開(kāi)發(fā)哥哥們吧!

文章標(biāo)題:APP開(kāi)發(fā)整套軟件性能優(yōu)化流程
鏈接URL:http://muchs.cn/news44/91394.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有App開(kāi)發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作