码迷,mamicode.com
首页 > 其他好文 > 详细

& Google前沿的AMP技术

时间:2019-09-11 15:47:59      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:tps   访问   数据   执行   提升性能   nic   开启   post请求   ora   

首先要知道什么是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对应的控件,这个要评估统计工具。

 

& Google前沿的AMP技术

标签:tps   访问   数据   执行   提升性能   nic   开启   post请求   ora   

原文地址:https://www.cnblogs.com/jstll/p/11506406.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!