AMP项目实战分享
本文转自前端之旅
https://www.tripfe.cn/amp-project-development-practice/css
目录
AMP是什么
Google 前沿的 AMP 「 Accelerated Mobile Pages 」技术，能使用户从搜索引擎当中进入咱们页面的体验获得一个极大的提高。确切地说，AMP并非一门新的技术，它只是一种能让页面打开得更快的解决方案。你只要会HTML、CSS、略懂JS，就能够开发你本身的AMP页面。html
有关AMP更多内容能够参看官网。前端
咱们为何选择AMP
看看AMP能给咱们带来什么：node
- AMP可以带来SEO排名优化。
- AMP Cache可以让咱们充分借助Google CDN Cache的优点。虽然咱们内部已经作了不少优化，包括DNS预热（有关DNS预热可参见咱们组同事写的一篇文章——网站性能优化——DNS预热与合并HTTP请求），但若是能有Google全球CDN支持就更是件好事。
- Google搜索结果对AMP页面有预加载处理，能让用户更快地到达咱们的着陆页。
因此，做为携程的海外业务部门，咱们率先试水了AMP项目。git
AMP项目开发
AMP项目开发和普通站点的开发模式几乎同样，可是为了最大限度提高性能，AMP项目页面有很多要求。好比：github
- 为了不 JavaScript 延缓页面渲染，AMP页面不能包含本身编写的JavaScript。
- CSS都必须内联，以减小HTTP的请求，而且有50KB的大小限制。
- AMP 页面容许第三方 JavaScript，但仅限在沙盒环境下的 iframe 中。
- 用户几乎可使用全部原生的HTML标签，可是对img等会产生外部资源依赖的标签，只能使用amp-img自定义标签。
基于以上几点，页面上全部交互逻辑都必须经过css实现，没法依赖JS。对于实现复杂的交互，AMP会显得力不从心。可是这实际上是和AMP原则相一致的，JS丰富了页面，但JS也是页面优化噩梦的开始。What Google AMP means for the JavaScript community这篇文章将阐述JavaScript对性能的影响。ajax
当开发完成后，必须保证页面是符合AMP规范的，只有符合AMP规范的页面才会被搜索引擎收录。在Chrome中安装AMP Validator插件，当你的页面是彻底符合AMP规范的时候，Chrome Validator AMP按钮会呈现绿色。以下图： 跨域
当页面经过验证之后，咱们还须要在link中配置amphtml和canonical，让Google搜索发现咱们的页面。浏览器
若是同一个页面同时具备非AMP版本和AMP版本:缓存
为非AMP页面添加如下标记：
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
复制代码
为AMP页面添加如下标记：
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
复制代码
只有一个版本的网页:
若是只有一个版本的网页，而且该版本是 AMP 网页，则仍要为其添加规范连接，该连接会指向其自身：
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
复制代码
至此，AMP页面开发工做基本完成，能够发布了。
咱们踩过的"坑"儿
AMP有很多限制要求，开发中不免碰到很差解决的问题。如下对咱们碰到过的问题及解决方法进行分享。
- AMP对表达式复杂度有限制要求，最大值是50。复杂度50是什么概念呢，好比如下例子，只有纯粹的字符串链接，可是如下复杂度已经接近是46，若是再增长一个链接，会达到53的复杂度，控制台会直接报错：
<a href='<%- searchData.defaultSearchUrl %>' [href]='"/m/hotels/" + location.concatResult + "/?checkin=" + date.selectedStartDate + "&checkout=" + date.selectedEndDate + "&starID=" + activeStarKeys.keys + "&adult=" + guestsSelectResult.adultsNum + "&children=" + guestsSelectResult.childNum + "&ages=" + guestsSelectResult.childAges'>
复制代码
对于此问题，除非AMP放开复杂度限制，不然咱们能作的只能是尽可能提早运算，当须要某个计算结果的时候，能够直接使用。好比例子中，location.concatResult就是在location组件内部先进行concat，再将concat的结果拼接到href。此外，能够尽可能简化交互，减小参数。
此问题在AMP开发中势必会碰到，详细讨论能够看ISSUES-11434
-
AMP限制编写JavaScript，也就不容许咱们读写Cookie、LocalStorage，可是记录用户行为是很重要的事情，好比一些表单信息，用户的选择，等用户下次打开咱们的页面时，可以显示用户上一次的状态。咱们的解决方法是经过http set-cookie方式解决前端没法记录cookie的问题。
-
amp-form只能提交ajax post请求，没法作到以post表单形式跳转。因此在开发过程当中尽可能避免出现post表单形式的请求，通常改用ajax post加页面跳转的形式来提交。在无可奈何的状况下，能够考虑经过增长非amp的中间路由，在中间页中构造表单并自动提交数据。
-
AMP CROS：用户最终访问的是AMP Cache，在AMP launch新版本以前，命中AMP Cache，页面地址并不是是真实地址而是Google AMP Cache地址，若是页面上有额外的异步请求，就会有跨域限制，因此咱们要在服务端开启跨域，返回头设置AMP-Access-Control-Allow-Source-Origin。
-
amp-iframe有sandbox属性，用来指定iframe内部的站点权限，默认值为空。若是但愿iframe内部能够执行js脚本，则须要设置成"allow-scripts"；若是须要添加内部发送同域请求的权限，则须要设置成"allow-scripts allow-same-origin"；但若是amp-iframe的src是同域站点，那么sandbox属性必须不能包含allow-same-origin，这样作杜绝了脱离amp控件发送请求的可能性。
-
AMP下统计页面埋点必须基于amp自带的统计控件，目前amp封装了市面上大部分的第三方统计系统。可是因为公司内部的统计工具没有amp对应的控件，因此没法接入。对于页面埋点统计，开发者要评估自家的统计工具。
如何优化AMP页面
最大化提速
经过对非SEO数据异步化加载，让AMP更快。
amp-install-serviceworker，让你打开的不只仅是一个amp页面
AMP页面做为搜索排名优化页面的同时，还兼具引流功能。虽然AMP页面能让用户从搜索结果中最快速地到达咱们的landing页，可是只有用户最终从landing页又回到原始页面走完必要的业务流程，才是有效的转化。例如，在咱们的业务中，用户能够经过搜索引擎快速到达酒店列表、酒店详情的AMP页面，但只有从酒店详情AMP页面跳转到支付页（非AMP），并完成支付，才算转化成功。若是原始页面体验很差，用户依旧可能中途流失。这彷佛不是AMP的"错"，但AMP确实还能再作些什么。
经过amp-install-serviceworker安装原始站点的sw.js，提早加载好原始页面的资源，当用户从AMP页面跳出，进入原始主站的时候，让主站体验更好，从而提升实际转化。
谈谈AMP的局限性
实践后，咱们发现AMP有如下局限性，但愿对于打算了解AMP这一技术，或者有计划接入AMP技术的团队，能够起到借鉴做用。
AMP不支持touch事件，影响交互体验
AMP官方给咱们的解释是：由于不是全部的浏览器都支持passive event，为了最大化浏览器的支持和效能，因此touch事件只开放给AMP内部组件使用，好比amp-carousel。
AMP没有开放获取cookie的权限
由于第三方会缓存AMP页面，出于安全考虑，AMP页面上不开放cookie。不过最新消息是，AMP官方回应后续可能会考虑开放cookie。
只能使用AMP提供的组件
虽然AMP提供了很多组件(而且在持续新增中)，可是开发者没法本身书写JS去实现交互，不适合开发复杂的交互。
eamp框架，让开发AMP项目更简单
eamp是从咱们AMP SEO项目中提取出来的简化版框架，可以让咱们快速开启AMP Node项目，使用者无需从0开始搭建，更能专一amp页面开发。
特色：
- 快速搭建基于node的AMP项目
- 内置自动化上线打包工具，自动将css打包内联，符合AMP规范
- 目录结构清晰，职责划分清楚，便于多人开发协做