what?
Accelerated Mobile Pages垒迂,加速移動網(wǎng)頁
項目相關(guān)文檔:
官網(wǎng)
github
amp html規(guī)范
演示
體驗地址(好吧國內(nèi)好像并體驗不到~)
整體思路:
- 將跳轉(zhuǎn)至的復(fù)雜內(nèi)容頁精簡至僅是堇椋“內(nèi)容”(以及規(guī)范后的廣告..)
- 用戶查看內(nèi)容時由網(wǎng)頁跳轉(zhuǎn)改為僅拉取“內(nèi)容”展現(xiàn)
實施:
- 搜索方提供規(guī)范
- 內(nèi)容提供方提供符合規(guī)范的頁面供抓取(至amp cache)展現(xiàn)
推廣普及:
- 搜索結(jié)果頁優(yōu)先展現(xiàn)amp內(nèi)容(橫向滾動匯聚)
適應(yīng)場景:
新聞、閱讀類內(nèi)容
加速思路:
- 縮減完整html至特定子集吗讶、增強限制
- 犧牲靈活性,提供更高抽象層次的擴展標(biāo)簽/組件
- 替代靈活但需自行組裝處理的底層html標(biāo)簽
- 省去用戶自定義實現(xiàn)
- 實現(xiàn)針對性優(yōu)化
- 限制樣式的使用并禁止腳本的使用以降低/去除相應(yīng)時間消耗
具體加速點:
- 禁止內(nèi)容提供方在直接頁面中使用js恋捆,amp本身的js也async加載
- 免去了js對渲染的阻塞
- 允許iframe中加載js等照皆,但不會影響至主頁面
- 圖片與iframe等資源內(nèi)容需靜態(tài)指定其尺寸
- 避免回流
- amp提供的擴展組件不阻塞渲染
- 只允許內(nèi)聯(lián)樣式表且限制在50k以內(nèi),且只允許特定選擇器與樣式的使用
- 減少css阻塞渲染的時間
- 字體立即下載
- 所有script為async沸停、沒有外聯(lián)樣式表膜毁,故可達(dá)到
- 僅允許GPU加速的動畫
- 僅允許transform及opacity動畫(不觸發(fā)layout,可僅由GPU即完成)
- 控制資源加載優(yōu)先級
- 按優(yōu)先級加載愤钾、預(yù)加載等優(yōu)化方案
- 搜索結(jié)果頁(及內(nèi)容頁內(nèi)?)進(jìn)行必要的preconnect