Accelerated Mobile Pages（简称AMP，意为“加速移动页面”）是Google带领开发的开源项目，目的是为提升移动设备对网站的访问速度。
使用AMP的好处：
提供可靠和快速的页面渲染，加快页面加载时间，特别是做移动端web页面的加载时间。
使用AMP构建的页面能极大提高网站加载速度，并影响你的网站做google搜索中的排名。
提高网页转化率。据google统计，在移动端如果一个页面3秒钟还没有完成加载，那么有90%以上的方可会关掉网页离开。所以加载时间是一个能否获取有效流量非常重要的技术指标。但目前的网页技术并不能满足3秒完成加载这个黄金时间点，google端的数据显示目前移动页面的加载时间大约为8秒左右，这意味着绝大多数网站90%以上的有效流量损失。而AMP项目就是为解决网页加载速度而生。
AMP网页3大核心构成：
AMP HTML。AMP HTML为来确保实现页面加载可靠性对一些常规HTML标记做来一些限制。如：
<link
rel="stylesheet" href="/style.css">
禁止使用外部css（一些特殊外部css除外），避免http请求。取而代之的是使用<style
amp-custom>h1{color:red;}</style>
<script>alert('Hello World');</script> 禁止使用
<img src="demo.jpg" alt="Deom Image" /> 禁止使用，取而代之是amp-img。
AMP JS。AMP JS由一系列的js库组成，内容涵盖amp-form（form 表单验证，数据提交等),
amp-lightbox(弹框),amp-lightbox-gallery(图片lightbox组)，amp-carousel（幻灯片滑动切换),
amp-anim(动画), amp-analytics(数据分析，包括google analytics，facebook
pixel以及其他分析工具和自定义分析工具)。
AMP缓存。AMP缓存是一种基于代理的内容传送网络，可提取和缓存 AMP HTML 网页，并自动改进网页性能。
使用AMP的案例：
https://www.myntra.com/amp/lipstick
https://globalnews.qq.com
https://tasty.co/
https://www.iene.mediaset.it/
AMP代码例子：
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end)
0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal
both;animation:-amp-start 8s steps(1,end) 0s 1 normal
both}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Hello AMP</h1>
<amp-img src="hello-amp.jpg" alt="Hello AMP" height="400" width="800"></amp-img>
</body>
</html>
必要代码包括以下（这里不是说其他代码不是必要的如：<!doctype html>,<meta charset="utf-8">,head,body等，只是因为它们太常见因此不讲）：
<html amp lang="en">，看清楚，里面一定要包含一个"amp"。
<script
async
src="https://cdn.ampproject.org/v0.js"></script>，amp核心。另外还可以选择性的加载一些其他amp组建，如amp-form,amp-ifram,amp-vimeo,amp-youtube等等。
<link
rel="canonical"
href="$SOME_URL">，canonical标签，如果一个网页包含2个版本amp版本和非amp版本，那么canonical用来指向amp版本的网页，如果google搜索到非amp版本的网页，通过canonical标签可以知道此网页对应的amp版本页面网址。
组件标签：
<amp-img>，相当于img，实际上最终也是通过amp-img js生成了html img标签。
<style amp-custom>，相当于内联样式表，记住除了一些特殊外部样式文件引用外，amp网页禁止使用外部样式表和内联样式。
AMP验证&调试：
打开浏览器控制台，在网页url后面加“#development=1”
在线验证https://validator.ampproject.org/
以上是AMP基础知识的讲解，涵盖了我在amp开发使用中的内容，下一讲我会从amph常用组件开始，如：amp-img有哪些属性，怎么绑定事件，如何自定义加载动画等等。
