制作APP怎樣對(duì)HTML5移動(dòng)性能進(jìn)行優(yōu)化？深圳APP開發(fā)公司提醒傳統(tǒng)對(duì)Web開發(fā)性能的定義是指頁面加載時(shí)間。開發(fā)一個(gè)現(xiàn)代化的互聯(lián)網(wǎng)網(wǎng)站是一項(xiàng)復(fù)雜的任務(wù)，需要各種職能的密切合作，以應(yīng)對(duì)用戶日新月異的需求。其中，網(wǎng)頁的性能直接決定了用戶的體驗(yàn)，而隨著新型客戶端瀏覽設(shè)備的出現(xiàn)與網(wǎng)站功能的日益復(fù)雜化，對(duì)于性能的專注也達(dá)到了前所未有的高度。事實(shí)上，除了頁面加載，還需要考慮其他幾個(gè)方面，如圖片優(yōu)化、CSS優(yōu)化、腳本優(yōu)化等
首先我們來說說APP開發(fā)時(shí)對(duì)于HTML5的性能考量進(jìn)行介紹
3種性能考量指標(biāo)，即客戶端（瀏覽器）性能、網(wǎng)絡(luò)性能和開發(fā)效率，提升這三方面性能，需要盡可能減少頁面加載時(shí)間、盡可能減少HTTP請(qǐng)求和帶寬的使用、盡可能復(fù)用代碼。
開發(fā)APP對(duì)于瀏覽器性能進(jìn)行優(yōu)化
瀏覽器越來越重視對(duì)JavaScript引擎、CSS動(dòng)畫渲染處理等方面的性能優(yōu)化和加速。了解瀏覽器的各方面新特性，并加以充分利用，可以充分發(fā)揮瀏覽器的便捷功能。傳統(tǒng)的網(wǎng)站性能監(jiān)測(cè)通常有以下幾種方式：
借助傳統(tǒng)的開發(fā)者工具查看網(wǎng)絡(luò)請(qǐng)求例如，使用瀏覽器的F12工具、Fiddler、Charles等，通過追蹤HTTP請(qǐng)求與響應(yīng)的時(shí)間，以圖形的方式列出所有資源的下載情況。這種方式依賴于人為操作，難以實(shí)現(xiàn)批量測(cè)試與統(tǒng)計(jì)。使用侵入式的JavaScript代碼檢測(cè)DOM事件的發(fā)生時(shí)間例如，使用DOMContentLoaded和document.onreadystatechange等，這時(shí)會(huì)在頁面的業(yè)務(wù)邏輯之外再加額外的代碼，加重了開發(fā)者與測(cè)試人員的負(fù)擔(dān)，還有可能因?yàn)闄z測(cè)代碼本身的潛在問題影響頁面的性能，甚至影響頁面主體功能。
使用第三方的服務(wù)與工具例如，使用WebPagetest、Pingdom等，這些服務(wù)通常能夠?qū)崿F(xiàn)在不同瀏覽器和不同地域進(jìn)行測(cè)試，并且為用戶提供一些優(yōu)化建議。但某些服務(wù)需要排隊(duì)等待，并且多次測(cè)試結(jié)果之間往往區(qū)別較大。除此之外，以上各種方式的測(cè)量指標(biāo)都比較單一，基本只能起到計(jì)時(shí)和流量計(jì)算的作用。對(duì)于其他一些指標(biāo)，例如電池狀態(tài)等方面則沒有監(jiān)測(cè)體現(xiàn)。并且，傳統(tǒng)的方法難以實(shí)現(xiàn)自動(dòng)化，以及在持續(xù)集成流程中統(tǒng)計(jì)測(cè)試結(jié)果。
W3CWeb性能工作小組與各瀏覽器廠商都已認(rèn)識(shí)到性能對(duì)于Web開發(fā)的重要性。為了解決當(dāng)前性能測(cè)試的困難，W3C推出了一套性能API標(biāo)準(zhǔn)，各種瀏覽器對(duì)這套標(biāo)準(zhǔn)的支持如今也逐漸成熟起來。這套API的目的是簡(jiǎn)化開發(fā)者對(duì)網(wǎng)站性能進(jìn)行精確分析與控制的過程，最終實(shí)現(xiàn)性能的提高。
例如，NavigationTimingAPI（導(dǎo)航計(jì)時(shí)），能夠幫助網(wǎng)站開發(fā)者檢測(cè)真實(shí)用戶數(shù)據(jù)（RUM），例如帶寬、延遲或主頁的整體頁面加載時(shí)間。開發(fā)者可以用以下JavaScript代碼檢測(cè)頁面的性能：
01 varpage = performance. timing, 02 plt = page. loadEventStart - page. navigationStart, 03 console. log( plt); 04 // Page load time (PTL) output for specific browser/ user in ms
APP開發(fā)公司提示NavigationTiming的目的是用于分析頁面整體性能指標(biāo)。如果要獲取個(gè)別資源（例如JS、圖片）的性能指標(biāo)，請(qǐng)使用ResourceTimingAPI。好了，APP開發(fā)公司本文關(guān)于“制作APP怎樣對(duì)HTML5移動(dòng)性能進(jìn)行優(yōu)化？”的相關(guān)知識(shí)就分享到這里，我們會(huì)在本欄目下一期繼續(xù)就這個(gè)話題與各位進(jìn)行分享。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
