& Google前沿的AMP技术

Posted 2022-10-15 jstll

首先要知道什么是AMP以至于为什么要选择AMP？

AMP他并不是一门新技术，他只是一种能够让页面更快打开的一种办法。之所以用他是因为AMP能够带来SEO排名优化。另外Google搜索结果对AMP页面有预加载处理，能让用户更快地达到我们的定向页面。

AMP项目开发

AMP项目开发和普通站点开发几乎是一样的，但为了最大限度提升性能，AMP项目页面应该注意几点譬如：

1、为了避免javascript 延缓页面渲染，AMP页面不能包含自己编写的Javascript。

2、css都必须内联，以减少HTTP请求，并且有50KB的大小限制。

3、AMP页面允许第三方Javascript，但仅限在沙盒环境下的iframe中。

4、几乎可以使用所有原生的html标签，但对img等会产生外部资源依赖的标签，只能使用amp-img自定义标签。

基于这些页面上所有的交互逻辑都必须通过css实现，无法依赖JS，这样的话对于实现比较复杂的交互时AMP就不太优秀了，其实这也是和AMP原则相一致的，JS虽然丰富了页面同时也是页面优化噩梦的开始。当开发完成后必须保证页面是符合AMP规范的，只有符合AMP规范的页面才能被搜索引擎收录。（在Chrome中安装AMP 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页面开发工作基本完成可以发布了。

 

 

可能会出的问题：

1、AMP对表达式有限制，超过50控制台会报错，解决=> 对于这个问题除非AMP放开复杂度限制，否则我们能做的只能是尽量提前运算，当需要某个计算结果的时候可以直接使用，要尽量简化交互，减少参数。这个问题在使用的时候一般都会遇到。

2、AMP限制编写Javascript，不允许读写Cookie、localStorage，但很多时候我们需要用，我们的解决方法是=>通过http set - cookie 方式解决前端无法记录cookie的问题。

3、amp-form只能提交ajax post请求，无法做到post表单形式跳转。所以在开发过程中尽量避免出现post表单形式的请求，一般改用ajax post加页面跳转的形式来提交，在迫不得已的情况下可以考虑通过增加非amp的中间路由，在中间页中构造表单并自动提交数据。

4、AMP CROS:用户最终访问的是AMP Cache,如果页面上有额外的异步请求，就会有跨域限制，所以我们要在服务端开启跨域，返回头设置AMP-Access-Control-Allow-Source-Origin.

5、amp-iframe有sandbox属性，用来指定iframe内部的站点权限，默认值为空，如果希望iframe内部可以执行js脚本，则需要设置成“allow-scripts”；如果需要添加内部发送同域请求的权限，则需要设置成“allow-scripts allow-same-origin”，如果amp-iframe的src是同域站点，那么sandbox属性必须不能包含allow-same-origin，这样做杜绝了脱离amp控件发送请求的可能性。

6、AMP下统计页面埋点必须是基于amp自带的统计控件，目前amp封装了市面上大部分第三方统计系统，一般公司内部统计工具没有amp对应的控件，这个要评估统计工具。