H5性能優(yōu)化意義

對(duì)于一個(gè)H5的產(chǎn)品，功能無(wú)疑很重要，但是性能同樣是用戶(hù)體驗(yàn)中不可或缺的一環(huán)。原本H5的渲染性能就不及native的app，如果不把性能優(yōu)化做起來(lái)，將極大地影響用戶(hù)使用產(chǎn)品的積極性。

用戶(hù)感受

當(dāng) 用戶(hù)能夠在1-2秒內(nèi)打開(kāi)H5頁(yè)面，看到信息的展示，或者能夠開(kāi)始進(jìn)行下一步的操作，用戶(hù)會(huì)感覺(jué)速度還好，可以接受；而頁(yè)面如果在2-5秒后才進(jìn)入可用的 狀態(tài)，用戶(hù)的耐心會(huì)逐漸喪失；而如果一個(gè)界面超過(guò)5秒甚至更久才能顯示出來(lái)，這對(duì)用戶(hù)來(lái)說(shuō)基本是無(wú)法忍受的，也許有一部分用戶(hù)會(huì)退出重新進(jìn)入，但更多的用 戶(hù)會(huì)直接放棄使用。

一秒鐘法則

移動(dòng)互聯(lián)網(wǎng)的架構(gòu)、通訊機(jī)制，與有線網(wǎng)絡(luò)有著巨大的差異，這也給H5的開(kāi)發(fā)帶來(lái)了很大的挑戰(zhàn)。

這是一張手機(jī)端接入服務(wù)器的流程。

首 先，手機(jī)要通過(guò)無(wú)線網(wǎng)絡(luò)協(xié)議，從基站獲得無(wú)線鏈路分配，才能跟網(wǎng)絡(luò)進(jìn)行通訊。無(wú)線網(wǎng)絡(luò)基站、基站控制器這方面，會(huì)給手機(jī)進(jìn)行信號(hào)的分配，已完成手機(jī)連接和 交互。獲得無(wú)線鏈路后，會(huì)進(jìn)行網(wǎng)絡(luò)附著、加密、鑒權(quán)，核心網(wǎng)絡(luò)會(huì)檢查你是不是可以連接在這個(gè)網(wǎng)絡(luò)上，是否開(kāi)通套餐，是不是漫游等。核心網(wǎng)絡(luò)有SGSN和 GGSN，在這一步完成無(wú)線網(wǎng)絡(luò)協(xié)議和有線以太網(wǎng)的協(xié)議轉(zhuǎn)換。再下一步，核心網(wǎng)絡(luò)會(huì)給你進(jìn)行APN選擇、IP分配、啟動(dòng)計(jì)費(fèi)。再往下面，才是傳統(tǒng)網(wǎng)絡(luò)的步 驟：DNS查詢(xún)、響應(yīng)，建立TCP鏈接，HTTP GET，RTTP RESPONSE 200 OK，HTTP RESPONSE DATA，LAST HTTP RESPONSE DATA，開(kāi)始UI展現(xiàn)。

可見(jiàn)，通過(guò)運(yùn)營(yíng)商的網(wǎng)絡(luò)上網(wǎng)，情況比較復(fù)雜，經(jīng)過(guò)的節(jié)點(diǎn)太多；運(yùn)營(yíng)商的網(wǎng)絡(luò)信號(hào)強(qiáng)度變化頻繁，連接狀態(tài)切換快；網(wǎng)絡(luò)延遲高、丟包率高；網(wǎng)絡(luò)建立連接的代價(jià)高，傳輸速度快慢不等（從2G到4G，相差很大）。

而我們優(yōu)化的目標(biāo)，就是所謂的一秒鐘法則，即達(dá)成以下的標(biāo)準(zhǔn)：

• 2g網(wǎng)絡(luò)：1秒內(nèi)完成dns查詢(xún)、和后臺(tái)服務(wù)器建立連接

• 3g網(wǎng)絡(luò)：1秒內(nèi)完成首字顯示（首字時(shí)間）

• wifi網(wǎng)絡(luò)：1秒內(nèi)完成首屏顯示（首屏?xí)r間）

#p#

優(yōu)化方案

資源加載首屏加載

用戶(hù)從點(diǎn)擊按鈕開(kāi)始載入網(wǎng)頁(yè)，在他的感知中，什么時(shí)候是“加載完成”？是首屏加載，即在可見(jiàn)的屏幕范圍內(nèi)，內(nèi)容展現(xiàn)完全，loading進(jìn)度條消失。因此在H5性能優(yōu)化中，一個(gè)很重要的目的就是盡可能提升這個(gè)“首屏加載”的時(shí)間，讓它滿足“一秒鐘法則”。

按需加載

首先要明確，按需加載雖然能提升首屏加載的速度，但是可能帶來(lái)更多的界面重繪，影響渲染性能，因此要評(píng)估具體的業(yè)務(wù)場(chǎng)景再做決定。

Lazyload

Lazyload，即延遲加載，這并不是一個(gè)新的技術(shù)，在PC時(shí)代也是非常常用的一種性能優(yōu)化手段。這個(gè)方案的原則是讓屏幕外，或者不影響整體效果顯示的圖片、背景等資源，在界面就緒之后再進(jìn)行網(wǎng)絡(luò)加載。

滾屏加載

滾 屏加載是一種常見(jiàn)的無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)的方案，通常用在列表形式數(shù)據(jù)展示中。一方面，數(shù)據(jù)不是通過(guò)翻頁(yè)進(jìn)行加載，這樣就避免了再一次請(qǐng)求和渲染整個(gè)頁(yè)面； 另一方面，數(shù)據(jù)顯示的數(shù)量是受限的，例如第一次只請(qǐng)求了10條數(shù)據(jù)，也就只需要渲染這10條數(shù)據(jù)，下拉滾屏的時(shí)候，再去獲得下面10條數(shù)據(jù)。

Media Query（響應(yīng)式加載）

響應(yīng)式設(shè)計(jì)是現(xiàn)在網(wǎng)站設(shè)計(jì)的一個(gè)流行趨勢(shì)，隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，這項(xiàng)技術(shù)也越來(lái)越受到重視。通過(guò)這項(xiàng)技術(shù)，我們能夠方便地控制資源的加載與顯示，例如說(shuō)在分辨率不同的手機(jī)上，分別使用不同的css，加載不同大小的圖片資源。方案參考： http://www.poluoluo.com/jzxy/201206/167034.html

第三方資源異步加載

第三方資源有的時(shí)候不可控，比如說(shuō)頁(yè)面統(tǒng)計(jì)、地圖顯示、分享組件等，這些第三方資源使用的時(shí)候要慎重選擇，充分考察它們對(duì)于性能的影響，使用異步加載的方式進(jìn)行，防止第三方資源的使用影響到頁(yè)面本身的功能。

Loading進(jìn)度條

在加載時(shí)間較長(zhǎng)的時(shí)候，務(wù)必要讓用戶(hù)明確感知到加載完成的提示，通常是在加載過(guò)程中顯示Loading的進(jìn)度條，加載完成的時(shí)候隱藏它。從心理上，這會(huì)讓用戶(hù)有一種“期盼感”，而不至于太過(guò)枯燥。

對(duì)于一些重量級(jí)的H5應(yīng)用，例如游戲，開(kāi)始前需要加載很多資源才能讓后面的游戲過(guò)程更為流暢，一個(gè)帶百分比進(jìn)度顯示的進(jìn)度條就更加重要。

避免30*/40*/50*的http status

• 200是一個(gè)正常的response，我們?cè)跒g覽器中打開(kāi)一個(gè)網(wǎng)頁(yè)（后面會(huì)講如何針對(duì)移動(dòng)端進(jìn)行調(diào)試），還會(huì)看到304，即命中瀏覽器緩存。這兩種狀態(tài)是正常的http status。

• 302、301跳轉(zhuǎn)是常見(jiàn)的跳轉(zhuǎn)，尤其前一種，在我們進(jìn)行鑒權(quán)的時(shí)候有時(shí)會(huì)用到，但這個(gè)做法要盡可能地優(yōu)化，一個(gè)頁(yè)面訪問(wèn)，最多只進(jìn)行一次302跳轉(zhuǎn)即可，切忌頻繁地跳轉(zhuǎn)。

• 404、 500，我們對(duì)自己開(kāi)發(fā)的代碼比較注意，一般不會(huì)發(fā)生，但是有的時(shí)候，加載第三方庫(kù)，尤其是第三方庫(kù)中有自己load組件的操作，這時(shí)，404和500錯(cuò) 誤可能會(huì)在你不知不覺(jué)的時(shí)候發(fā)生。例如釘釘?shù)牡谌轿?yīng)用中，就遇到過(guò)dojo的組件加載問(wèn)題，加載的一些子組件失敗了，但是又沒(méi)有影響頁(yè)面顯示，這就很 容易被忽略。后面也會(huì)再講，如何去測(cè)試和發(fā)現(xiàn)這樣的隱患。

Favicon.ico

如果我們沒(méi)有設(shè)置圖標(biāo)ico，則會(huì)加載默認(rèn)的圖標(biāo)：域名目錄下的favicon.ico。很多開(kāi)發(fā)者沒(méi)有注意到這一點(diǎn)，就會(huì)導(dǎo)致這個(gè)請(qǐng)求404或者500。

通常，我們?cè)趹?yīng)用內(nèi)部打開(kāi)網(wǎng)頁(yè)，不會(huì)顯示這個(gè)圖標(biāo)出來(lái)（除非放到瀏覽器中顯示網(wǎng)頁(yè)），我們需要保證這個(gè)圖標(biāo)存在，盡可能地?。ㄒ话?KB以下），并且設(shè)置一個(gè)較長(zhǎng)的緩存過(guò)期時(shí)間。

圖片的使用格式選擇

顯示效果較好的圖片格式中，有webp、jpg和png24/32這幾種常見(jiàn)的圖片格式。一般來(lái)說(shuō)，webp的圖片最小，但在iOS或者android4.0以下的系統(tǒng)中可能會(huì)有兼容性問(wèn)題需要解決。

• Jpg是我們最常使用的方案，大小適中，解碼速度快，兼容性問(wèn)題也基本不存在，是我們?cè)贖5的應(yīng)用中使用起來(lái)性?xún)r(jià)比最高的方案。

• Png24或png32，一般來(lái)說(shuō)，顯示效果肯定會(huì)比jpg更好，但是實(shí)際上人眼很難感知出來(lái)，所以在H5應(yīng)用中要避免這種格式的大圖片。

對(duì)于少量的圖片，推薦用智圖或者tinypng等工具來(lái)幫助自己選擇合適的大小、格式。

像素控制

在H5應(yīng)用中，圖片的像素要嚴(yán)格控制，一般來(lái)說(shuō)不建議寬度超過(guò)640px。

小圖片合并

在html網(wǎng)頁(yè)中，如果有多個(gè)小圖片需要加載，不妨試試CSS Sprites方案，尤其是一些基本不變，大小差不多的操作類(lèi)型圖標(biāo)。

避免html代碼中的大小重設(shè)

在 html或者css中，如果有類(lèi)似width: **px這樣的代碼，就要注意看一看了，如果說(shuō)圖片顯示的效果是寬度100px，而下載的圖片卻是200px寬度，那這大小基本上就是所需要的4倍面積 了，所以在H5應(yīng)用中，使用圖片的一個(gè)原則就是需要顯示成多大，就下載多大的資源。

避免DataURL

DataURL是用 Base64的方式，將圖片變成一串文本編碼放入代碼的方式。這種方式有好處，因?yàn)樗梢詼p少一次http交互的請(qǐng)求，對(duì)于一些體積特別小的圖片，或者是 動(dòng)態(tài)生成的圖片可以考慮使用。但在H5應(yīng)用中，一般情況下，我們都是需要避免DataURL的，因?yàn)樗臄?shù)據(jù)體積通常比二進(jìn)制圖片的格式大1/3，而且它 不會(huì)被瀏覽器緩存，每次頁(yè)面刷新都需要重新加載這部分?jǐn)?shù)據(jù)。

使用圖片的替代(css3, svg, iconfont)

CSS3和svg可以更好地使用GPU進(jìn)行渲染加速，而且會(huì)避免增加圖片資源導(dǎo)致的http請(qǐng)求增加。例如一些div的圓角效果，就完全可以用用css來(lái)實(shí)現(xiàn)。

Iconfont，可以認(rèn)為是一種矢量類(lèi)型的操作字體。如果頁(yè)面中有較多的操作圖標(biāo)，可以考慮使用iconfont來(lái)替代圖片資源。

域名/服務(wù)端部署Gzip

服務(wù)端要開(kāi)啟Gzip壓縮。

資源緩存，長(zhǎng)cache

合理設(shè)置資源的過(guò)期時(shí)間，尤其對(duì)一些靜態(tài)的不需要改變的資源，將其緩存過(guò)期時(shí)間設(shè)置得長(zhǎng)一些。

分域名部署(靜態(tài)資源域名)

將動(dòng)態(tài)資源和靜態(tài)資源放置在不同的域名下，例如圖片，放在自己特定的域名下。這樣的好處是，靜態(tài)資源請(qǐng)求時(shí)，不會(huì)帶上動(dòng)態(tài)域名中所設(shè)置的cookie頭信息，從而減少http請(qǐng)求的大小。

減少Cookie

盡量減少Cookie頭信息的大小，因?yàn)檫@部分?jǐn)?shù)據(jù)使用的是上行流量，上行帶寬更小，所以傳輸速度更慢，因此要盡量精簡(jiǎn)其大小。

CDN加速

部署CDN服務(wù)器，或者使用第三方的CDN加速服務(wù)，優(yōu)化不同地域接入網(wǎng)站的帶寬速度。

代碼資源Javascript, CSS合并

盡量將所有的js和css合并，減少資源請(qǐng)求的次數(shù)。

外聯(lián)使用js, css

外聯(lián)使用js和css，這樣可以有效地利用緩存，避免html頁(yè)面刷新后重新加載這部分代碼。

壓縮html, js, css

壓縮代碼，尤其是js和css資源，壓縮后的大小可以降低至原來(lái)的1/3以下，有效節(jié)約流量。

#p#

資源的版本更新

庫(kù)js、css通常不會(huì)更新，但是我們的業(yè)務(wù)js和css可能會(huì)有更新，如果命中瀏覽器緩存，可能會(huì)讓一些新的特性不能及時(shí)展現(xiàn)，甚至可能導(dǎo)致邏輯上的沖突。

因此對(duì)于這些js、css的資源引入，最好用版本號(hào)或者更新時(shí)間來(lái)作為后綴，這樣的話，后綴不變，命中緩存；后綴改變，瀏覽器自動(dòng)更新最新的代碼。

Css位置

CSS要放到html代碼的開(kāi)頭的head標(biāo)簽結(jié)束前。如果網(wǎng)頁(yè)是動(dòng)態(tài)生成的，那么在head代碼完成后可以強(qiáng)制輸出（例如php的flush()操作），這樣的話，瀏覽器就會(huì)更快地解析出來(lái)head中的內(nèi)容，開(kāi)始下載css文件資源。

Js位置

Js放到</body>前，這樣的話，js的加載不會(huì)影響初始頁(yè)面的渲染。

代碼規(guī)范避免空src

圖片設(shè)置為空的src地址，在某些瀏覽器中可能會(huì)導(dǎo)致增加一個(gè)無(wú)效的http請(qǐng)求，因此要避免。

避免css表達(dá)式

可能會(huì)讓頁(yè)面多次執(zhí)行計(jì)算，造成卡頓等性能問(wèn)題。

避免空css規(guī)則

降低css渲染計(jì)算的成本

避免直接設(shè)置元素style

直接設(shè)置style屬性，一方面在html代碼中不利于緩存，另一方面也不利于樣式的復(fù)用，因此要避免，通過(guò)指定id或者class的方式，在css代碼塊中進(jìn)行樣式調(diào)整。

服務(wù)端接口接口合并

如果頁(yè)面需要請(qǐng)求兩部分以上的數(shù)據(jù)接口，建議將其合并，否則會(huì)增加一次http請(qǐng)求。

減少接口數(shù)據(jù)量

有的時(shí)候，服務(wù)端會(huì)把一些無(wú)關(guān)緊要的數(shù)據(jù)返回回來(lái)，尤其是類(lèi)似于更新時(shí)間、狀態(tài)等信息，如果在客戶(hù)端不影響內(nèi)容的邏輯展示，不妨在接口返回的數(shù)據(jù)中直接去掉這些內(nèi)容。

緩存

緩存接口數(shù)據(jù)，在一些數(shù)據(jù)新舊敏感性不高的場(chǎng)景下很有作用，在非首次加載數(shù)據(jù)時(shí)候優(yōu)先使用上次請(qǐng)求來(lái)的緩存數(shù)據(jù)，可以讓頁(yè)面更加快速地渲染出來(lái)，而不用等待一個(gè)新的http請(qǐng)求結(jié)束之后再渲染。這一點(diǎn)我們?cè)诤竺孢€會(huì)再次提及。

其他一些建議

• 合理使用css

• 正確使用Display屬性Display屬性會(huì)影響頁(yè)面的渲染，因此請(qǐng)合理使用

  • display:inline后不應(yīng)該再使用width、height、margin、padding以及float

  • display:inline-block后不應(yīng)該再使用float

  • display:block后不應(yīng)該再使用vertical-align

  • display:table-*后不應(yīng)該再使用margin或者float

• 不濫用float

• 不聲明過(guò)多的font-size

• 值為0時(shí)不需要單位

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

  • 無(wú)前綴應(yīng)放在最后

  • CSS動(dòng)畫(huà)只用 （-webkit- 無(wú)前綴）兩種即可

  • 其它前綴為 -webkit- -moz- -ms- 無(wú)前綴 四種，（-o-Opera瀏覽器改用blink內(nèi)核，所以淘汰）

• 選擇器

• 避免讓選擇符看起來(lái)像是正則表達(dá)式。高級(jí)選擇器不容易讀懂，執(zhí)行耗時(shí)也長(zhǎng)

• 盡量使用ID選擇器

• 盡量使用css3動(dòng)畫(huà)

• 資源加載

• 使用srcset

• 首次加載不超過(guò)1024KB（或者可以說(shuō)是越小越好）

• html和js

• 減少重繪和回流

• 緩存dom選擇和計(jì)算

• 緩存列表.length

• 盡量使用事件代理,避免批量綁定事件

• 使用touchstart，touchend代替click

• Html使用viewport

• 減少dom節(jié)點(diǎn)

• 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeOut

• 適當(dāng)使用Canvas動(dòng)畫(huà)

• TouchMove, Scroll事件會(huì)導(dǎo)致多次渲染

更快一步

前面的很多建議與普通的PC端web網(wǎng)頁(yè)的開(kāi)發(fā)是一致的，但是在移動(dòng)互聯(lián)網(wǎng)應(yīng)用下，僅僅做到這些，可能只有60分，那么怎樣才能得到80分甚至更高？

單頁(yè)應(yīng)用

釘釘?shù)膶徟?yīng)用，使用的就是單頁(yè)架構(gòu)。在這種架構(gòu)下，基本不存在頁(yè)面跳轉(zhuǎn)的等待時(shí)間，只需要執(zhí)行js邏輯觸發(fā)界面變化，最多進(jìn)行一次網(wǎng)絡(luò)請(qǐng)求，獲得服務(wù)端數(shù)據(jù)，其他資源均不需要再次請(qǐng)求。

#p#

資源離線

再快的網(wǎng)絡(luò)交互，畢竟也是跨越了數(shù)個(gè)網(wǎng)絡(luò)節(jié)點(diǎn)，因此一張圖片、一個(gè)js，優(yōu)化到了極致，也照樣可能需要幾百毫秒的時(shí)間來(lái)獲得。因此想要打破這個(gè)極限，就要使用資源離線的策略。

在釘釘?shù)奈?yīng)用中，就使用了這樣的一個(gè)“離線包”策略。一些固定的圖片、js庫(kù)等，被打包放入app中（或根據(jù)需要，在app啟動(dòng)的時(shí)候進(jìn)行下載更新）。

微應(yīng)用中，網(wǎng)頁(yè)代碼里面加載網(wǎng)絡(luò)資源的需求，就變成了直接加載本地文件，速度自然得到再一次巨大的提升。

本地?cái)?shù)據(jù)持久化和更新機(jī)制(版本管理)

對(duì)于一些時(shí)效性沒(méi)有那么高的數(shù)據(jù)，可以考慮將接口數(shù)據(jù)緩存。那么頁(yè)面的渲染將變成這樣的流程：

而非首次進(jìn)入界面，流程如下：

可以看出，在非首次進(jìn)入界面的時(shí)候，頁(yè)面不需要等待網(wǎng)絡(luò)數(shù)據(jù)返回，就可以進(jìn)行界面渲染，渲染的初始數(shù)據(jù)來(lái)自于本地的緩存，頁(yè)面可以“秒開(kāi)”。而當(dāng)服務(wù)端的數(shù)據(jù)返回之后，本地的渲染會(huì)再次更新，緩存也被更新。

采用這樣的方案有利有弊，好處顯而易見(jiàn)，首屏加載的速度簡(jiǎn)直太快了——靜態(tài)資源來(lái)自本地，數(shù)據(jù)接口來(lái)自本地，這在2G、3G或者其他網(wǎng)絡(luò)速度較慢的時(shí)候，也可以讓用戶(hù)在極短的時(shí)間內(nèi)就看到內(nèi)容。但是這種方案也并非萬(wàn)能。

1. 首次加載不可避免，還是會(huì)請(qǐng)求網(wǎng)絡(luò)。

2. 服務(wù)端有更新的時(shí)候，客戶(hù)端不能夠快速感知，頁(yè)面可能還停留在一個(gè)“舊的版本”上，尤其是網(wǎng)絡(luò)速度較慢時(shí)，可能還是需要經(jīng)過(guò)好幾秒，頁(yè)面才會(huì)更新至最新版本。因此如果應(yīng)用對(duì)數(shù)據(jù)的新舊很敏感的話，這種方案就不適合

3. 數(shù)據(jù)更新后，需要重新渲染界面，界面刷新的性能消耗比正常情況更多，而且增加了程序的復(fù)雜度，容易出錯(cuò)。

預(yù)加載

有 時(shí)，我們能夠通過(guò)用戶(hù)的行為統(tǒng)計(jì)，預(yù)判出用戶(hù)下一步可能進(jìn)行的操作。假設(shè)，我們統(tǒng)計(jì)出來(lái)針對(duì)某個(gè)微應(yīng)用，用戶(hù)首頁(yè)渲染完成之后，大部分會(huì)點(diǎn)擊列表中的第一 個(gè)項(xiàng)目查看詳情。那么在首頁(yè)渲染完成之后，我們就可以先預(yù)先加載第一個(gè)項(xiàng)目的部分內(nèi)容，那么針對(duì)這部分用戶(hù)，他們實(shí)際點(diǎn)擊之后，立即就能看到新的頁(yè)面中的 內(nèi)容。

當(dāng)然，這個(gè)方式也并不是在所有場(chǎng)景下都使用。一方面，需要做好充分的用戶(hù)調(diào)研，掌握用戶(hù)的使用習(xí)慣；另一方面，對(duì)于小部分用戶(hù)而言，預(yù)加載所帶來(lái)的就是不必要的流量消耗。

#p#

測(cè)試方案

工具準(zhǔn)備Chrome

在功能測(cè)試中，我們通?？梢杂胏hrome來(lái)測(cè)試不同的分辨率下，或是不同的設(shè)備上，網(wǎng)頁(yè)的展現(xiàn)情況。在我們做性能優(yōu)化的時(shí)候，也可以用這種方式來(lái)進(jìn)行調(diào)試，方便地觀察在特定設(shè)備上，靜態(tài)資源是否按照我們想象的那樣去加載了。

例如，我們想看下百度首頁(yè)在某個(gè)設(shè)備下的表現(xiàn)。通過(guò)F12進(jìn)入控制臺(tái)，點(diǎn)擊圖中的短箭頭標(biāo)示出來(lái)的那個(gè)設(shè)備圖標(biāo)，然后就可以在Device和Network中選擇不同的設(shè)備和網(wǎng)絡(luò)狀況。

例如iphone5下，這個(gè)地圖的圖標(biāo)，明顯就可以看到是用iconfont來(lái)實(shí)現(xiàn)的效果。

當(dāng)然，這個(gè)功能也僅僅是一種模擬，通過(guò)控制屏幕分辨率、UserAgent等來(lái)模擬設(shè)備請(qǐng)求，在實(shí)際的設(shè)備上，又該怎么查看呢？

還是Chrome，我們?cè)诘刂窓谥休斎隿hrome://inspect（注意：Android版本需要是4.4+，并且應(yīng)用中的WebView必須進(jìn)行相應(yīng)的調(diào)試聲明配置）

在這里點(diǎn)擊inspect，則可進(jìn)入我們熟悉的F12控制臺(tái)界面，只不過(guò)debug的對(duì)象變成了我們?cè)谑謾C(jī)應(yīng)用中的網(wǎng)頁(yè)。

輸 入performance.timing.domComplete - performance.timing.navigationStart，就可以打印出網(wǎng)頁(yè)加載的時(shí)間，domComplete表示所有的處理都已完成并 且所有的附屬資源都已經(jīng)下載完畢。navigationStart表示開(kāi)始加載新頁(yè)面。兩者相減，就代表這個(gè)網(wǎng)頁(yè)完成渲染所需要的時(shí)間了。

同樣地，我們可以在Elements tab中，debug網(wǎng)頁(yè)，查看各個(gè)資源的使用，在Network中，看看加載了哪些資源，是否都做過(guò)了壓縮。

然 而，這種方式，還是有一定缺陷。1. 如果打開(kāi)網(wǎng)頁(yè)經(jīng)過(guò)了跳轉(zhuǎn)，那么我們只能在這里看到最后一個(gè)url頁(yè)面的加載情況。2. 第一次打開(kāi)頁(yè)面的時(shí)候，在Network中，默認(rèn)是不顯示請(qǐng)求的詳情的，當(dāng)我們選擇了preserve log upon navigation之后才會(huì)捕獲，因此首次進(jìn)入頁(yè)面的加載情況，我們就很難獲得了。

那么有沒(méi)有一種方法，讓我們能夠更方便地去查看首次訪問(wèn)時(shí)，各種資源的加載使用情況呢？

Charles

Charles Proxy，可以說(shuō)是H5測(cè)試的一個(gè)神器。它的作用是在PC端開(kāi)啟一個(gè)代理服務(wù)器，手機(jī)連到這個(gè)代理服務(wù)器上之后，所有的http請(qǐng)求就都可以在這里看得清清楚楚。經(jīng)過(guò)配置證書(shū)選項(xiàng)，https的請(qǐng)求也可以正常查看。

從圖中，我們明顯可以看到，有一些404的異常請(qǐng)求，這些都將對(duì)我們H5應(yīng)用的性能造成影響。如果我們發(fā)現(xiàn)有一些資源的Duration比較大，那這些可能是服務(wù)端響應(yīng)太慢，自然也可以作為我們優(yōu)化的依據(jù)。

#p#

測(cè)試標(biāo)準(zhǔn)

在釘釘?shù)臏y(cè)試中，形成了一套標(biāo)準(zhǔn)。

指標(biāo)項(xiàng) 遵循的原則 優(yōu)先級(jí) 檢查項(xiàng) 說(shuō)明 內(nèi)存 內(nèi)存無(wú)泄漏 P0 主功能頁(yè)面反復(fù)打開(kāi)，功能的重復(fù)調(diào)用，內(nèi)存無(wú)泄漏 可以使用sysdump,也可以用我們開(kāi)發(fā)的perfeasy工具進(jìn)行觀察     P1 主功能頁(yè)面，持續(xù)操作，退出后，內(nèi)存占用不超過(guò)總內(nèi)存的5% perfeasy CPU 減少無(wú)端的CPU使用 P1 滅屏，靜置2分鐘，在5分鐘內(nèi)CPU使用平均1% adb連接后, 使用top命令       主干功能正常操作CPU占用不超過(guò)60%, 持續(xù)5秒 perfeasy 電量 避免無(wú)端電量消耗 P0 滅屏狀態(tài)下，無(wú)線程持續(xù)運(yùn)行 一般來(lái)說(shuō), 靜置cpu正常, 這一項(xiàng)就沒(méi)有問(wèn)題       滅屏，window.setTimeout()方法停止 一般來(lái)說(shuō), 靜置cpu正常, 這一項(xiàng)就沒(méi)有問(wèn)題同上       滅屏，window.setInterval()方法停止 同上       ajax超時(shí)時(shí)間設(shè)置為5000ms以?xún)?nèi) 結(jié)合代碼       ajax無(wú)retry邏輯 結(jié)合代碼 資源 資源的正確使用 P0 是否存在資源的重復(fù)拉取 charles     P1 H5頁(yè)面首屏總大小不超過(guò)200K charles, chrome     P1 抓包檢查(js/css/html)代碼去除了空格/注釋?zhuān)琂S文件變量名變成a/b等代替 charles, chrome     P1 H5引用的單張圖片小于60K charles, chrome

如 果影響了顯示質(zhì)量, 可酌情調(diào)整 流暢度 確保給到用戶(hù)流暢的展示體驗(yàn) P1 流暢的實(shí)時(shí)動(dòng)畫(huà)展示，avgFPS>=45 perfeasy 時(shí)延 確保給到用戶(hù)流暢的切換體驗(yàn) P0 wifi網(wǎng)絡(luò)下，首次進(jìn)入頁(yè)面onload時(shí)間<1000ms Chrome 時(shí)延 確保給到用戶(hù)流暢的切換體驗(yàn) P0 wifi網(wǎng)絡(luò)下，首次進(jìn)入頁(yè)面onload時(shí)間<1000ms Chrome       wifi網(wǎng)絡(luò)下，非首次進(jìn)入頁(yè)面onload時(shí)間<500ms Chrome       3G正常網(wǎng)絡(luò)， 首次進(jìn)入頁(yè)面onload時(shí)間<2000ms chrome, 樹(shù)莓派模擬3G       3G正常網(wǎng)絡(luò)， 非首次進(jìn)入頁(yè)面onload時(shí)間<1000ms chrome, 樹(shù)莓派模擬3G

經(jīng)典案例

圖片未優(yōu)化

通過(guò)charles可以方便地進(jìn)行測(cè)試。從請(qǐng)求監(jiān)控的情況看，有一張圖片超過(guò)了60KB，寬度640px，但是在應(yīng)用中，實(shí)際顯示的是一張小縮略圖，是通過(guò)代碼控制讓它顯示成小圖的，因此修改方案很簡(jiǎn)單，將所有頭像的圖片均改為獲取120px寬度的即可。

按需加載

• 釘釘?shù)慕虒W(xué)頁(yè)面

• 多個(gè)slide頁(yè)面, 每個(gè)頁(yè)面有2-3個(gè)圖片, 其中有一個(gè)是大圖顯示

• 圖片是客戶(hù)提供的, 最大的圖片大約是300KB以上

• 第一次進(jìn)入頁(yè)面后, 所有slide的圖片均進(jìn)行加載

• 3G網(wǎng)絡(luò)下, loading的圖標(biāo)大約持續(xù)6000ms后才會(huì)消失

• 優(yōu)化方案

• 盡可能優(yōu)化圖片, 但是壓縮后發(fā)現(xiàn)噪點(diǎn)明顯增加, 影響了顯示效果

• 修改加載方案, 第一次進(jìn)入后, 只加載本頁(yè)的圖片

• loading時(shí)間降低至1秒左右