AMP HTML 頁面初探- Hello , Accelerated Mobile Page

時間 2019-11-05

標籤 amp html 頁面初探 hello accelerated mobile page 欄目 HTML 简体版

原文原文鏈接

本文首發於個人博客html

AMP已經出來好久了，最近看到官方說12月會在北京上海有路演，纔想起本身很久沒接觸這個AMP了，以前爲了試一試，把本身博客的about頁面改爲了AMP頁面，當時還在上線先後用了google developer toos - pagespeed 測了下速，確實快了許多，我的感受仍是有速度的提高。可是不知道咋地就是還沒看到市場上火起來，大概是它暫時侷限於內容頁面。好了，如今又有roadshow了，那我也又來嚐嚐這口粥。git

RoadShowgithub

AMP - Wht ?

AMP 的全稱是 Accelerated Mobile Page，能夠理解成加速的移動平臺網頁。它指的是採用特定的開發技術和規範，讓您的網頁在手機等移動平臺上能更加高速運行和顯示，給您的客戶提供更好的用戶體驗。這個開源的和開放型技術如今受到了互聯網業界的極大關注，全球的不少公司開始在更新他們的網站開發，使用 AMP 技術加強他們的網站的運行速度和跨平臺支持，讓他們的網頁在衆多移動設備上更好地展示。web

這是我最粗略的介紹。官方介紹-英 & 官方介紹-中網絡

官方網站-英 & 官方網站-中app

AMP - Why ?

一、利益受到了威脅
二、賺取更多的利益
三、爲了用戶
四、新的東西挺好玩兒

哈哈，隨意介紹了三點緣由，看看市場上的人都怎麼說。async

一、利益受到了威脅。流量爲王的時代，Google發現本身的餅被人一點一點的啃着，我靠，如何能忍。再看到流量一點一滴的網Facebook和蘋果新聞應用等產品流時，坐不住了，因而便有了Accelerated Mobile Pages（AMP）應戰。ide

二、若是在移動端一個頁面3秒鐘尚未完成加載，那麼有90%以上的訪問者會關掉網頁或者訪問其餘網頁。因此，你能讓這樣的流量跑掉嘛？花花的銀子啊。工具

三、爲了用戶。隨着網絡的發展，移動web已經佔領着大片市場，但移動web的性能卻趕不上桌面web和移動app，愈來愈多的人抱怨移動web的性能網絡的網速太慢。話很少說，爲了用戶，AMP就出生了。性能

四、Google做爲行業巨頭，探索些標誌性的造福人類的東西，天然爲之。

AMP - Now ?

AMP目前的使用者，應該侷限於大型的新聞網站，或者內容網站，例如博客。WordPress就支持AMP。

另外，谷歌也宣佈了百度、搜狗、雅虎日本的搜索結果將會與「Accelerated Mobile Pages」(AMP，加速移動頁面)直接對接，也就是說上述三大搜索引擎將會支持AMP。要知道，百度、搜狗在中國的搜索市場佔有率，想一想，PC有百度，移動有搜狗，應該說市場仍是挺起來了。

AMP - More ?

我今兒就不寫什麼原理了，好比：

這些須要的童鞋前往網址或官方網站就能夠自行查看了，後面再慢慢的推一些實踐文章。
不過，本身從教程一步一步的來，就能夠寫出個簡單的demo頁面了。

AMP - Diff ?

閃電是AMP頁面的標誌:

再裝個AMP 檢測Chrome插件： AMP Validator

若是不是AMP頁面，圖標就是灰的。
若是是AMP頁面且符合規範，就是綠色的，若是不符合規範，只是警告的紅色。

裝上這個插件後，隨意打開個頁面，應該就是灰色的，也闊以打開個人博客關於我頁面，應該就是綠色的。

也闊以打開調試工具，查看elements，第一行長這樣：

<!doctype html>
<html ⚡ lang="zh_CN" amp-version="1510956201635" class="i-amphtml-singledoc i-amphtml-standalone" style="padding-top: 0px;">

在設計AMP html時頭部也是這麼寫的：

<!doctype html>
<html ⚡>

或者：

<!doctype html>
<html amp>

這些元素 AMP Page 必備：

以文檔類型 <!doctype html> 開頭
包含頂級 <html ⚡> 標記（也接受 <html amp>）
包含 <head> 和 <body> 標記（這些標記在 HTML 中是可選的）
在<head>內包含一個 <link rel="canonical" href="$SOME_URL"> 標記，該標記指向 AMP - HTML 文檔的常規 HTML 版本，或在此類 HTML 版本不存在的狀況下指向文檔自己
包含 <meta charset="utf-8"> 標記做爲<head>標記的第一個子項
在<head>標記內包含 <meta name="viewport" content="width=device-width,minimum-scale=1"> 標記。還建議包括 initial-scale=1
包含 <script async src="https://cdn.ampproject.org/v0...;></script> 標記做爲<head>中的最後一個元素（這樣作將會包括並加載 AMP JS 庫）
在其 <head> 標記內包含如下內容：

<style amp-boilerplate>
    body{
        -webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
        -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
        -ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
        animation:-amp-start 8s steps(1,end) 0s 1 normal both;
    }
    @-webkit-keyframes -amp-start{
        from{visibility:hidden}
        to{visibility:visible}
    }
    @-moz-keyframes -amp-start{
        from{visibility:hidden}
        to{visibility:visible}
    }
    @-ms-keyframes -amp-start{
        from{visibility:hidden}
        to{visibility:visible}
    }
    @-o-keyframes -amp-start{
        from{visibility:hidden}
        to{visibility:visible}
    }
    @keyframes -amp-start{
        from{visibility:hidden}
        to{visibility:visible}
   }
</style>
<noscript><style amp-boilerplate>
    body{
        -webkit-animation:none;
        -moz-animation:none;
        -ms-animation:none;animation:none
    }
</style></noscript>

完整的demo能夠查看
My AMP Page，或者官方的 Learn AMP by Example

嗯，此次我就寫到這裏，沒有知足胃口我很抱歉，今天就簡單介紹下AMP，以及AMP Page長啥樣。

若是手頭這個wap項目要改用AMP HTML，那我就能好好的折騰，寫點博客了。

有時間咱就先一塊兒玩玩吧~