關於 AMP，Webnovel 都作了些什麼？

本文做者：任家樂

原創聲明：本文爲閱文前端團隊 YFE 成員出品，請尊重原創，轉載請聯繫公衆號 ( id: yuewen_YFE ) 獲取受權，並註明做者、出處和連接。

引言

AMP 是什麼？它全稱 Accelerated Mobile Pages 「AMP」，是 Google 推出的一個加速網頁加載的開源框架，咱們在此也不作太多的介紹，具體能夠看咱們以前發的公衆號文章。閱文前端團隊做爲國內最先踐行 AMP 的開發團隊之一，咱們的 AMP 實踐也經歷了好幾個大迭代，其成果也獲得了 Google 官方的確定，分別在 Google I/O 2019 和 AMP Conf 2019 大會上被 feature（圖 1-1），但願咱們積累的經驗能夠給你們提供幫助。

「圖 1-1：閱文集團在 Google I/O 大會、AMP conf 2019 被 feature」

Webnovel with AMP

是否值得去作？

目前 Webnovel 前後進行了 2 次 AMP 頁面的轉化。首次 AMP 的實施輸出了站點的 2 個主要着陸頁：首頁、詳情頁，上線後 1 個月 Webnovel 的閱讀頁 PV 提高了 59%，能夠歸功於 AMP 詳情頁的轉化。第二次咱們則將 Webnovel 主要路徑頁面進行了 AMP 的轉化（閱讀頁、書庫頁、漫畫詳情頁、漫畫閱讀頁等），目前從 Google Analytics「GA」的數據來看，仍是很是值得去實施的 ：這些 AMP 頁面平均加載時間爲 0.94s， 而被 AMP Cache 緩存的頁面加載時間甚至爲 0。

咱們作了哪些?

AMP 不只是一個前端技術框架，它還提供了一套完整的生態，包含一系列 」服務於「 頁面加載體驗的規範和約束，其核心思想是，構建出加載速度更快甚至達到秒出的頁面，這要歸功於它提供的 3 個重要組件：

• AMP HTML - 提供了一系列 AMP 自定義的 HTML 標籤及規則，有效地保證了 HTML 的加載體驗。
• AMP JS - 提供了一系列 JS 組件，其資源直接來源於 Google CDN。
  • 爲了達到極致的加載體驗，AMP 並不容許開發者引入自定義的 JavaScript，而是提供了大量的 AMP JS 組件來實現用戶想要達到的效果（ AMP Conf 2019 新引入的 amp-script 能夠幫助解決自定義組件不能完成的效果，不過當前這個功能還在實驗當中）。
• AMP Cache - 利用 Google 的緩存及預加載方案能夠達到頁面的秒出。

那麼用戶體驗與開發體驗是否能夠達到可以接受的平衡點？咱們先來看看 Webnovel AMP 具體的實施細節吧。

AMP HTML

Webnovel 的 AMP 頁面採用了 EJS 模板引擎做爲直出方案，和普通的 EJS 項目惟一的區別就是須要遵循 AMP HTML 的一些規則。 AMP HTML 提供了簡單的 HTML 模板，並對一些 HTML 標籤進行了規則的約束，只要遵循它的文檔說明，仍是可以很快接入的。固然，Webnovel with AMP 最重要的實施步驟則是應用它的組件， 也就是「AMP JS」。

「圖 1-2：AMP HTML 模板」

「圖 1-3：AMP HTML 標籤的規則」

AMP 組件的約束

在參加 AMP 會議以前，我可能會說，這裏須要先給各位打個預防針啦！在 AMP 的世界裏，你不可以引入本身的腳本、不能外鏈引入本身的樣式，只能一切按它的規則走！但這次 AMP 會議出乎意料地帶來了一個新的技能 - amp-script 的支持，咱們終於能夠寫本身的腳本了！但須要注意的是，amp-script 僅容許解壓後最多 150KB 的大小，雖然如此，咱們也能夠方便地利用其異步加載一些咱們本身的腳本。 但爲何 AMP 對腳本有不少約束？來看下 AMP 的官方文檔中關於腳本的說明：

「JavaScript is powerful, it can modify just about every aspect of the page, but it can also block DOM construction and delay page rendering (see also Adding interactivity with JavaScript). To keep JavaScript from delaying page rendering, AMP allows only asynchronous JavaScript. AMP pages can’t include any author-written JavaScript」 （即：JavaScript很強大，它能夠改變一個頁面的任何方面，但它同時也阻礙了 DOM 的生成、頁面的渲染。爲了不它對渲染的阻礙，amp 僅僅容許異步加載 JavaScript，但它並不容許引入任何頁面做者寫的腳本）

腳本能夠阻礙渲染，而爲了保證快速呈現頁面內容，腳本的約束彷佛不可避免，對於 amp-script 大小的限制，也是爲了保證在低端手機上依然有不錯的加載體驗。

AMP 組件的基礎應用

AMP 提供了超級多的組件，只需： 一、外鏈引入該組件提供的 JavaScript 腳本。 二、找到組件示例代碼、嵌入 HTML DOM 結構中，按需更改組件參數。

「圖 1-4：組件一覽表」

AMP 文檔中，每一個組件基本都有具體的示例代碼， copy 下來就能夠在項目中使用，這一點很贊！但想要很是 「精準地」 實現咱們想要的交互效果，仍是很是難的，畢竟這個組件不是咱們本身寫的，咱們也不可以拓展它，這種感受就比如咱們有手有腳、卻只能用假肢，身體變輕盈了，但行動受到了很大的限制，不過比較欣慰的是，AMP 的經常使用組件也基本知足了咱們的需求。這裏例舉了一些 Webnovel 使用的 AMP 經常使用組件：

• amp-img

遵循 AMP HTML 的規則，全部的圖片都須要用 實現，它用於響應式地展現圖片、並完美自帶懶加載功能（不在視區內不進行加載）。目前 Webnovel 的漫畫閱讀頁，全部的圖片都用其實現了寬度 100%、高度自適應（圖 1-5）。

「圖 1-5：amp-img 輕鬆實現圖片高度自適應」

在此以前咱們是將圖片絕對定位，同時在容器上添加樣式「padding-top：圖片寬高比 」來實現的，相比之下 <amp-img> 更方便：

「圖 1-6：舊的實現方式」

「圖 1-7：使用設置 layout 爲 responsive 便可」

• amp-list

目前咱們大部分 AMP 頁面都使用了這個組件，只要是異步加載某些模塊，就會有它的用武之地（圖 1-8）：

1. 書詳情頁 - 打賞信息、標籤信息、書評的異步加載。
2. 漫畫列表頁 - 分頁加載漫畫書籍
3. 漫畫閱讀頁 - 分頁加載漫畫章節圖片

「圖 1-8：詳情頁、漫畫閱讀頁、漫畫列表頁 amp-list 異步加載模塊」

• amp fallback & placeholder

很是讚的 API ！有了它，咱們無需檢測加載失敗、加載超時的狀況，只需設定好該狀況對應的 UI 展現便可！amp-img、amp-list 等組件中，只需在組件內的 DOM 元素標籤上添加 fallback & placeholder 屬性便可。

• amp-mustache

提供 mustache 模板引擎，一種 logicless「弱化數據邏輯」 的模板語言， 一般配合 amp-list 等異步加載組件來使用，amp-list 發起請求拿到數據後，會渲染其中的 mustache 模板、完成數據、模板的拼接。

• amp-sidebar

用於側邊欄、工具欄等。目前咱們左側滑出的側邊欄就是利用它實現的（圖 1-9），實現成本很低，只需將其對應的 DOM 結構放置於 body 下，同時在觸發側邊欄展現的元素上綁定 AMP 提供的 tap 事件。

「圖 1-9：amp-siderbar 實現側邊目錄」

• amp-bind

可配合 amp-state 使用，amp-state 組件用於初始化 json 數據，而 amp-bind 能夠綁定數據到 DOM 元素上，同時支持 amp.setstate()、 amp.pushstate() 等方法實現數據的更新。目前頁面中須要動態展現的元素、文本，咱們經過它綁定了數據、數據改變後頁面對應的元素、文本也會對應地變成綁定的數據。 比較侷限的方面是，只有在觸發事件後數據纔會生效，不適用於頁面 onload 時的數據邏輯處理。

• AMP 的事件機制

AMP 也支持事件的處理，例如 tap 點擊事件、change 事件等，更高級的有：滾動到某位置觸發動畫等效果，具體可參考 AMP 文檔。

AMP Cache

AMP Cache 算是 AMP 的核心概念了，簡單來說，經過 Google 搜索引擎搜索到的 AMP 頁面能夠被 AMP 緩存，同時也會被 Google 進行預加載，Google 使用的一些安全性機制、緩存更新機制，可讓開發者更無憂地使用。AMP 也提供了被緩存頁面的 CDN 地址拼接規則，利用這個緩存優點，Webnovel 將全部 AMP 頁面之間的跳轉連接改成了 AMP Cache 的地址，若是全部 AMP 頁面都成功被 Cache ，那麼頁面之間幾乎能夠作到無縫切換（圖 1-10），若是頁面沒有被 Cache，也不用擔憂會跳轉到未知的 404 頁面，由於 AMP Cache 會將其重定向到咱們本身站點域名下的 AMP 頁面。

「圖 1-10：利用 AMP Cache 實現 AMP 頁面無縫切換」

Webnovel AMP 頁面的體驗優化

漫畫閱讀頁多個 AMP 組件結合使用打造更好的交互體驗

Webnovel 漫畫閱讀頁提供了另一種不一樣於小說的閱讀方式，因爲漫畫的閱讀相比於小說更爲方便快捷，所以其加載體驗變得尤其重要，這裏 Webnovel 利用 AMP 組件對漫畫閱讀頁的加載體驗作了優化，本來「刷新頁面」切換章節的體驗優化爲「無刷新」加載章節內容。

amp-list、amp-form 及 amp-state 協力實現無刷新向下加載

除了服務端渲染的首章節，其它的章節內容若要實現異步加載，amp-list 組件是必然要用的，須要注意的是，若是其 src 參數爲接口地址，那麼頁面 onload 時就會觸發，但咱們但願作到的是點擊下一章再進行加載，所以實現方案爲：

1. amp-state 組件初始化章節模板所需 json 數據（圖 2-1），其 id （例如 comicContent）可看做該 json 數據的變量名。
2. amp-list 去除 src 參數，改成 [src] 參數，其值爲上一步的 comicContent（圖 2-2）。
3. 添加 amp-form 組件，其 action 參數值爲下一章節的接口地址，同時參數 on 中處理表單提交成功的邏輯（圖 2-3）， 即：獲取數據後更新章節數組，這將會從新渲染 amp-list 中的章節模板。

「圖 2-1: amp-status 初始化的數據」

「圖 2-2: amp-list 中綁定 amp-state 中的數據」

「圖 2-3: amp-form 的成功回調」 關鍵點：

• amp-state 中定義的章節數據須要前端本身維護一個數組（圖 2-1 中的 chapters 字段）來存儲各章節，實現 amp-list 中循環渲染章節模板，展現全部加載的章節。
• amp-form 中的 submit-success 邏輯中，須要經過 AMP.setState() 更新章節數組，將最新章節 push 進數組。
• amp-form 中的 submit-success 回調僅僅是接口請求成功的回調，請求成功不表明業務邏輯中也是成功的，所以須要經過業務接口成功與否的標識字段再次區分紅功和失敗的邏輯。
• amp-state 最多存儲 100kb 的數據，前端須要處理加載章節過多的狀況，例如緩存當前加載的章節數，若超過必定數量，點擊下一章刷新頁面。

最終實現出來的效果：

「圖 2-4：無刷新加載下一章漫畫」

小說閱讀頁 amp-list 組件進階應用

在上一節中，經過 amp-list、amp-form 和 amp-state 3個組件的結合使用，終於實現了無刷新加載下一章，其實 amp-list 近期已提供實驗性高級 API: load-more 及 load-more-bookmark 等參數，能夠作到無限加載，並同時支持點擊加載、無限滾動加載2種方式，無需前端本身維護章節數組，全部的一切都由 amp-list 本身實現。這裏對小說閱讀頁進行了實踐。

amp-list-load-more 實現無限滾動加載

amp-list-load-more 的實踐很是簡單，只需在 amp-list 組件中，加入 load-more、load-more-bookmark 參數便可（圖2-4），具體 api 說明可參考 amp-list 的文檔。雖然當前功能爲實驗性功能，但相信 Google 不久後就會在正式環境進行支持。

「圖 2-4：amp-list-load-more 代碼片斷」

因爲 amp-list-load-more 是 AMP 的實踐性功能，除了添加參數，仍是須要作些準備工做的。

1. 正式環境中，須要在小說閱讀頁的訪問地址域名下（webnovel.com 或 AMP cache 的 Google 域名）種一個 Cookie（name: AMP_EXP，value: amp-list-load-more）纔可體驗此功能。
2. load-more-bookmark 參數只能爲章節返回數據中的字段名稱，其值必須爲下一章的接口地址，不支持前端本身拼接地址，所以須要後端配合添加此字段。
3. 接口返回的下一章 url 不能爲相對路徑，必須爲帶協議頭、本身站點域名的 url，不然在 Google 域名下請求地址的域名會出現問題。

最終實現效果：

Webnovel 更多的 AMP 實踐

固然，Webnovel 不僅用了上文中提到的 AMP 基礎組件，也沒有止步於組件級別的體驗優化，Webnovel 還使用了 AMP 主推的一些王者功能。

更優的體驗 - AMP 主推功能的實踐

Signed HTTP Exchange 「SXG」

它也是 AMP conf 2019 的亮點，其效果爲：訪問了 Webnovel Google 域名下的 AMP 頁面，瀏覽器 url 地址展現的是 Webnovel 主站的域名（如圖 3-1）！這是 AMP 今年主推的功能之一，有些公司已進行實踐，例如 Yahoo Japan，而 Webnovel 也抓住了時機、成功地進行了實踐，其效果及實現細節能夠參考「 Webnovel 的 SXG 實踐 by 劉鵬」。

「圖 3-1：Webnovel SXG 實施效果」

amp-story

算是 AMP 至關主推的功能了！使用其提供的多樣性模板能夠更加豐富地全屏展現 Webnovel 的各類故事，關於 AMP Story，你須要知道這些 by 芯芯，視頻和 animation 的結合使 Webnovel 的用戶能夠更沉浸的瀏覽書籍。amp-story 還提供本地化、兼容桌面與移動端的展現等功能，這次 AMP 會議還帶來了 amp-story 的一些新推動，例如 amp-story 自動生成工具、 Google Search 結果頁直接收錄並展現 AMP Story 等多方面的支持，能夠說是很是牛了。

AMP conf 2019

目前 AMP 還有不少值得實踐的功能，此次 Google 團隊在東京舉辦的 AMP Conf 2019 也帶來了不少新的想法，很多來自世界各地的開發、產品、設計都簇擁於此，可見 AMP 已逐漸具有廣闊的市場。咱們也很幸運地被邀請參加此次會議，一塊兒見證了 AMP 的新技術及主推的功能、同時也從世界各個公司的 AMP 案例中，再次深入地體會到了 AMP 技術的價值、潛力。

「AMP conf 2019 in Tokyo」

總結

一切新技術的應用都應該服務於用戶，而衡量一個技術是否值得實施的途徑之一就是看數據。Webnovel 在實踐 AMP 後，最顯著的改變很是符合 AMP 的核心目標 - 頁面加載體驗的極致提高（87% 的提高），除此以外，GA 的數據也證明了一些其餘的優點，例如，Webnovel 主要頁面的 PV 在應用 AMP 技術後有所提高（閱讀頁 PV 增長近 59%）、Webnovel Google 搜索引擎的來源提高了 18%，從數據上來看 Webnovel 的 AMP 實踐是很是有意義的。

查看更多分享，請關注閱文前端團隊公衆號: