網(wǎng)站對(duì)于很多企業(yè)都已經(jīng)是必備的宣傳渠道之一了,其中移動(dòng)端網(wǎng)站更是重中之重。隨著基礎(chǔ)網(wǎng)絡(luò)設(shè)施及移動(dòng)技術(shù)發(fā)展進(jìn)步,人們?cè)絹碓揭蕾囈苿?dòng)設(shè)備,使用移動(dòng)設(shè)備的頻率已經(jīng)遠(yuǎn)大于電腦。
現(xiàn)在很多企業(yè)會(huì)發(fā)現(xiàn),移動(dòng)端網(wǎng)站訪問總是有卡頓現(xiàn)象,使用體驗(yàn)有很大的提升空間。
移動(dòng)端網(wǎng)頁出現(xiàn)卡頓的原因:
1.加載資源多,下載需要較長(zhǎng)時(shí)間,比如圖片過大、過多,導(dǎo)致渲染頁面時(shí)間過長(zhǎng);
2.多余組件、js使用不當(dāng)?shù)?/p>
如何解決移動(dòng)頁面卡頓問題:
之前已經(jīng)分享一篇通過技術(shù)手段解決網(wǎng)頁加載慢的解決辦法。如何提高前端網(wǎng)頁加載速度
今天分享另外一種方案:谷歌AMP技術(shù)和百度MIP技術(shù)
谷歌AMP技術(shù)與百度MIP技術(shù)實(shí)現(xiàn)思路是一樣的,谷歌AMP技術(shù)適用于大陸以外地區(qū),百度MIP技術(shù)適用于大陸地區(qū)。雖說百度下線了MIP Cache 服務(wù),MIP失去了百度服務(wù)器cdn加速,但是MIP這項(xiàng)技術(shù)還是可以使用的。
Web 優(yōu)化有很多種方案,每種方案都有自己的適用范圍。有些收益很高的優(yōu)化手段,存在這樣那樣的限制:例如針對(duì)具體業(yè)務(wù)邏輯所做的優(yōu)化,很難通用化;部署 Google 的 PageSpeed 模塊等服務(wù)端優(yōu)化方案,使用成本很高;借助客戶端所做的優(yōu)化,如現(xiàn)在廣為流行的移動(dòng)端 WebView 容器加速方案,優(yōu)化效果局限在指定 APP 內(nèi),甚至還會(huì)導(dǎo)致使用通用瀏覽器訪問速度更慢。以內(nèi)容為主的新聞詳情頁,大部分性能消耗在圖片、視頻等媒體資源以及第三方功能如廣告、社會(huì)化組件的加載上。
瀏覽器對(duì)不同資源加載和預(yù)加載有自己的策略,對(duì)于預(yù)加載,我們有一些控制權(quán),但總的看來這一塊對(duì)于開發(fā)者來說還是很不可控。例如瀏覽器默認(rèn)會(huì)并行加載多張圖片,但在屏幕小、網(wǎng)速慢、性能差的手機(jī)上,串行由上到下加載圖片很可能體驗(yàn)更好。
移動(dòng)設(shè)備在網(wǎng)絡(luò)、CPU、內(nèi)存等方面與 PC 差距很大,很多 PC 上可以忽略的問題,在移動(dòng)端不得不重視起來。例如我們都知道圖片是異步加載的,頁面觸發(fā) DOMContentLoaded 事件并不需要等圖片加載完,但在移動(dòng)端,大量圖片加載帶來性能開銷卻會(huì)大幅延后 DOMContentLoaded 時(shí)機(jī)。
我們?cè)賮砜窗俣萂IP或谷歌AMP是如何優(yōu)化網(wǎng)頁提升加載速度的
AMP html是HTML 的子集,在 AMP HTML 中只允許使用有限的標(biāo)簽。例如 <body>、<article> 這些標(biāo)簽可以直接使用,沒有任何限制;有些標(biāo)簽允許有限制的使用,例如 <meta> 標(biāo)簽不能使用 http-equiv 屬性;而像 <img>、<audio> 這樣的標(biāo)簽需要替換為 <amp-img>、<amp-audio> 等 AMP Components;更多的標(biāo)簽如 <frame>、<form> 不允許使用。(MIP也是這樣的)
簡(jiǎn)單的說,就是AMP和MIP接管了頁面加載順序控制權(quán)和限制部分消耗性能過多的標(biāo)簽,并新增許多專用標(biāo)簽,讓頁面加載速度呈現(xiàn)大幅度提升,同時(shí)也給了很多普通網(wǎng)站、無法進(jìn)行WPO的網(wǎng)站另外一個(gè)解決辦法。
