建站
咨詢
售后
建站咨詢
新聞中心
H5性能優(yōu)化意義
對(duì)于一個(gè)H5的產(chǎn)品，功能無疑很重要，但是性能同樣是用戶體驗(yàn)中不可或缺的一環(huán)。原本H5的渲染性能就不及native的app，如果不把性能優(yōu)化做起來，將極大地影響用戶使用產(chǎn)品的積極性。
用戶感受
當(dāng) 用戶能夠在1-2秒內(nèi)打開H5頁面，看到信息的展示，或者能夠開始進(jìn)行下一步的操作，用戶會(huì)感覺速度還好，可以接受；而頁面如果在2-5秒后才進(jìn)入可用的 狀態(tài)，用戶的耐心會(huì)逐漸喪失；而如果一個(gè)界面超過5秒甚至更久才能顯示出來，這對(duì)用戶來說基本是無法忍受的，也許有一部分用戶會(huì)退出重新進(jìn)入，但更多的用 戶會(huì)直接放棄使用。
一秒鐘法則
移動(dòng)互聯(lián)網(wǎng)的架構(gòu)、通訊機(jī)制，與有線網(wǎng)絡(luò)有著巨大的差異，這也給H5的開發(fā)帶來了很大的挑戰(zhàn)。
這是一張手機(jī)端接入服務(wù)器的流程。
首 先，手機(jī)要通過無線網(wǎng)絡(luò)協(xié)議，從基站獲得無線鏈路分配，才能跟網(wǎng)絡(luò)進(jìn)行通訊。無線網(wǎng)絡(luò)基站、基站控制器這方面，會(huì)給手機(jī)進(jìn)行信號(hào)的分配，已完成手機(jī)連接和 交互。獲得無線鏈路后，會(huì)進(jìn)行網(wǎng)絡(luò)附著、加密、鑒權(quán)，核心網(wǎng)絡(luò)會(huì)檢查你是不是可以連接在這個(gè)網(wǎng)絡(luò)上，是否開通套餐，是不是漫游等。核心網(wǎng)絡(luò)有SGSN和 GGSN，在這一步完成無線網(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查詢、響應(yīng)，建立TCP鏈接，HTTP GET，RTTP RESPONSE 200 OK，HTTP RESPONSE DATA，LAST HTTP RESPONSE DATA，開始UI展現(xiàn)。
可見，通過運(yùn)營商的網(wǎng)絡(luò)上網(wǎng)，情況比較復(fù)雜，經(jīng)過的節(jié)點(diǎn)太多；運(yùn)營商的網(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查詢、和后臺(tái)服務(wù)器建立連接
-
3g網(wǎng)絡(luò)：1秒內(nèi)完成首字顯示（首字時(shí)間）
-
wifi網(wǎng)絡(luò)：1秒內(nèi)完成首屏顯示（首屏?xí)r間）
#p#
優(yōu)化方案
資源加載首屏加載
用戶從點(diǎn)擊按鈕開始載入網(wǎng)頁，在他的感知中，什么時(shí)候是“加載完成”？是首屏加載，即在可見的屏幕范圍內(nèi)，內(nèi)容展現(xiàn)完全，loading進(jìn)度條消失。因此在H5性能優(yōu)化中，一個(gè)很重要的目的就是盡可能提升這個(gè)“首屏加載”的時(shí)間，讓它滿足“一秒鐘法則”。
按需加載
首先要明確，按需加載雖然能提升首屏加載的速度，但是可能帶來更多的界面重繪，影響渲染性能，因此要評(píng)估具體的業(yè)務(wù)場(chǎng)景再做決定。
Lazyload
Lazyload，即延遲加載，這并不是一個(gè)新的技術(shù)，在PC時(shí)代也是非常常用的一種性能優(yōu)化手段。這個(gè)方案的原則是讓屏幕外，或者不影響整體效果顯示的圖片、背景等資源，在界面就緒之后再進(jìn)行網(wǎng)絡(luò)加載。
滾屏加載
滾 屏加載是一種常見的無刷新動(dòng)態(tài)加載數(shù)據(jù)的方案，通常用在列表形式數(shù)據(jù)展示中。一方面，數(shù)據(jù)不是通過翻頁進(jìn)行加載，這樣就避免了再一次請(qǐng)求和渲染整個(gè)頁面； 另一方面，數(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ù)也越來越受到重視。通過這項(xiàng)技術(shù)，我們能夠方便地控制資源的加載與顯示，例如說在分辨率不同的手機(jī)上，分別使用不同的css，加載不同大小的圖片資源。方案參考： http://www.poluoluo.com/jzxy/201206/167034.html
第三方資源異步加載
第三方資源有的時(shí)候不可控，比如說頁面統(tǒng)計(jì)、地圖顯示、分享組件等，這些第三方資源使用的時(shí)候要慎重選擇，充分考察它們對(duì)于性能的影響，使用異步加載的方式進(jìn)行，防止第三方資源的使用影響到頁面本身的功能。
Loading進(jìn)度條
在加載時(shí)間較長的時(shí)候，務(wù)必要讓用戶明確感知到加載完成的提示，通常是在加載過程中顯示Loading的進(jìn)度條，加載完成的時(shí)候隱藏它。從心理上，這會(huì)讓用戶有一種“期盼感”，而不至于太過枯燥。
對(duì)于一些重量級(jí)的H5應(yīng)用，例如游戲，開始前需要加載很多資源才能讓后面的游戲過程更為流暢，一個(gè)帶百分比進(jìn)度顯示的進(jìn)度條就更加重要。
避免30*/40*/50*的http status
-
200是一個(gè)正常的response，我們?cè)跒g覽器中打開一個(gè)網(wǎng)頁（后面會(huì)講如何針對(duì)移動(dòng)端進(jìn)行調(diào)試），還會(huì)看到304，即命中瀏覽器緩存。這兩種狀態(tài)是正常的http status。
-
302、301跳轉(zhuǎn)是常見的跳轉(zhuǎn)，尤其前一種，在我們進(jìn)行鑒權(quán)的時(shí)候有時(shí)會(huì)用到，但這個(gè)做法要盡可能地優(yōu)化，一個(gè)頁面訪問，最多只進(jìn)行一次302跳轉(zhuǎn)即可，切忌頻繁地跳轉(zhuǎn)。
-
404、 500，我們對(duì)自己開發(fā)的代碼比較注意，一般不會(huì)發(fā)生，但是有的時(shí)候，加載第三方庫，尤其是第三方庫中有自己load組件的操作，這時(shí)，404和500錯(cuò) 誤可能會(huì)在你不知不覺的時(shí)候發(fā)生。例如釘釘?shù)牡谌轿?yīng)用中，就遇到過dojo的組件加載問題，加載的一些子組件失敗了，但是又沒有影響頁面顯示，這就很 容易被忽略。后面也會(huì)再講，如何去測(cè)試和發(fā)現(xiàn)這樣的隱患。
Favicon.ico
如果我們沒有設(shè)置圖標(biāo)ico，則會(huì)加載默認(rèn)的圖標(biāo)：域名目錄下的favicon.ico。很多開發(fā)者沒有注意到這一點(diǎn)，就會(huì)導(dǎo)致這個(gè)請(qǐng)求404或者500。
通常，我們?cè)趹?yīng)用內(nèi)部打開網(wǎng)頁，不會(huì)顯示這個(gè)圖標(biāo)出來（除非放到瀏覽器中顯示網(wǎng)頁），我們需要保證這個(gè)圖標(biāo)存在，盡可能地?。ㄒ话?KB以下），并且設(shè)置一個(gè)較長的緩存過期時(shí)間。
圖片的使用格式選擇
顯示效果較好的圖片格式中，有webp、jpg和png24/32這幾種常見的圖片格式。一般來說，webp的圖片最小，但在iOS或者android4.0以下的系統(tǒng)中可能會(huì)有兼容性問題需要解決。
-
Jpg是我們最常使用的方案，大小適中，解碼速度快，兼容性問題也基本不存在，是我們?cè)贖5的應(yīng)用中使用起來性價(jià)比最高的方案。
-
Png24或png32，一般來說，顯示效果肯定會(huì)比jpg更好，但是實(shí)際上人眼很難感知出來，所以在H5應(yīng)用中要避免這種格式的大圖片。
對(duì)于少量的圖片，推薦用智圖或者tinypng等工具來幫助自己選擇合適的大小、格式。
像素控制
在H5應(yīng)用中，圖片的像素要嚴(yán)格控制，一般來說不建議寬度超過640px。
小圖片合并
在html網(wǎng)頁中，如果有多個(gè)小圖片需要加載，不妨試試CSS Sprites方案，尤其是一些基本不變，大小差不多的操作類型圖標(biāo)。
避免html代碼中的大小重設(shè)
在 html或者css中，如果有類似width: **px這樣的代碼，就要注意看一看了，如果說圖片顯示的效果是寬度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ì)被瀏覽器緩存，每次頁面刷新都需要重新加載這部分?jǐn)?shù)據(jù)。
使用圖片的替代(css3, svg, iconfont)
CSS3和svg可以更好地使用GPU進(jìn)行渲染加速，而且會(huì)避免增加圖片資源導(dǎo)致的http請(qǐng)求增加。例如一些div的圓角效果，就完全可以用用css來實(shí)現(xiàn)。
Iconfont，可以認(rèn)為是一種矢量類型的操作字體。如果頁面中有較多的操作圖標(biāo)，可以考慮使用iconfont來替代圖片資源。
域名/服務(wù)端部署Gzip
服務(wù)端要開啟Gzip壓縮。
資源緩存，長cache
合理設(shè)置資源的過期時(shí)間，尤其對(duì)一些靜態(tài)的不需要改變的資源，將其緩存過期時(shí)間設(shè)置得長一些。
分域名部署(靜態(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頁面刷新后重新加載這部分代碼。
壓縮html, js, css
壓縮代碼，尤其是js和css資源，壓縮后的大小可以降低至原來的1/3以下，有效節(jié)約流量。
#p#
資源的版本更新
庫js、css通常不會(huì)更新，但是我們的業(yè)務(wù)js和css可能會(huì)有更新，如果命中瀏覽器緩存，可能會(huì)讓一些新的特性不能及時(shí)展現(xiàn)，甚至可能導(dǎo)致邏輯上的沖突。
因此對(duì)于這些js、css的資源引入，最好用版本號(hào)或者更新時(shí)間來作為后綴，這樣的話，后綴不變，命中緩存；后綴改變，瀏覽器自動(dòng)更新最新的代碼。
Css位置
CSS要放到html代碼的開頭的head標(biāo)簽結(jié)束前。如果網(wǎng)頁是動(dòng)態(tài)生成的，那么在head代碼完成后可以強(qiáng)制輸出（例如php的flush()操作），這樣的話，瀏覽器就會(huì)更快地解析出來head中的內(nèi)容，開始下載css文件資源。
Js位置
Js放到
