关于 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 实践是很是有意义的。

查看更多分享，请关注阅文前端团队公众号: