Google Amp学习笔记
学习源网址：https://amp.dev/zh_cn/documentation/courses/
原文是英文版，且比较长。
笔记中简化了一些，记录我们常用的组件以及一些要点。
关于 AMP 加速的原因
1、Inline 的 CSS
所有的CSS都只能Inline;在本页内的css不能>75k
2、禁用了大部分的JS
在AMP模式下是不能运行JavaScript，也是禁止运行JavaScdript的，所以所有的Script标签都会报错。
3、图片
img 标签全部要改为 amp-img
4、页面里是不能有form标签的，删除所有的form。
知识要点
CSS和AMP：AMP对CSS的使用施加了一些限制：
1）样式只能驻留在文档的头上。
<style amp-custom>
body {
font-family: sans-serif;
line-height: 1.5rem;
padding: 20px;
}
p, h2 {
border: 1px dotted red;
}
</style>
构建AMP站点的目标是尽可能使用AMP组件。
大多数HTML标记可以直接在AMP中使用，但是某些标记，例如标签，必须用等效的AMP组件替换。
添加图片 amp-img
<amp-img
src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746"
width=”640”
height="480">
</amp-img>
上面的图片在页面中的图像不会缩小到适合较小的屏幕，它只是溢出到侧面。
<amp-img
src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746"
layout="responsive"0
width="640"
height="480">
</amp-img>
layout类型responsive以便在调整窗口大小时自动缩放。响应布局使图像假定父容器的尺寸，同时尊重原始的高宽比。如果父容器只有320像素宽，则图像将保持其纵横比并被调整为320x240(而不是640x480)
嵌入视频：
在文档中嵌入一个YouTube视频，需要2步：
1）在head里，添加：
<script async
custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
</script>
2）视频id为BlpMQ7fMCzA.
<amp-youtube
data-videoid="BlpMQ7fMCzA"
layout="responsive"
width="480"
height="270">
</amp-youtube>
旋转木马
AMP实现组件：
1）在head里添加：
<script async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
2）在相应的代码位置中添加：
<amp-carousel layout="responsive" width="412" height="309" type="slides" loop>
<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
width="412" height="309" layout="responsive"></amp-img>
<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
width="412" height="309" layout="responsive"></amp-img>
<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>
嵌入社交媒体
1）在head中添加
<script async
custom-element="amp-social-share"
src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js">
</script>
2）在相应的位置添加
<div class="social-bar">
<amp-social-share type="email" width="44" height="44"></amp-social-share>
<amp-social-share type="linkedin" width="44" height="44"></amp-social-share>
<amp-social-share type="tumblr" width="44" height="44"></amp-social-share>
<amp-social-share type="twitter" width="44" height="44"></amp-social-share>
</div>
因此，非AMP文档包含指向AMP文档的链接，如下所示：
<link rel="amphtml" href="https://www.site.com/amp/document.html">
AMP文档包含一个指向非AMP文档的链接，如下所示：
<link rel="canonical" href="https://www.site.com/document.html">
现在AMP功能更全面了，除非您需要在桌面页面上添加其他功能，否则在移动和桌面上使用AMP就更容易了。这样，你只需要维护一页而不是两页！尽管如此，仍然需要。在这种情况下，只需将页面链接到自身，
<link rel="canonical"
href="https://www.site.com/amp/document.html">
对所有设备使用单一AMP页面称为“规范AMP”
适用于移动设备和桌面设备。由于用户可能在任何一种设备上体验您的网页，所以最好在开发时检查这两种设备上的网页。
head中要增加
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
AMP中的延迟加载
“延迟加载”是指资源(图像、数据、视频、脚本等)在需要之前不会加载。当AMP下载资源时，它会优化下载，以便首先下载当前最重要的资源。只有当用户可能看到图片和广告，或者用户可能快速滚动到图片和广告时，才会下载这些图片和广告。这些媒体资产的等价物(而不是)之所以称为“托管资源”，是因为它们是否以及何时加载并显示给用户是由AMP决定的。放大器可以在任何时候决定卸载当前用户不可见的资源。AMP的性能优化之一要求提前宣布他们的身高。这有助于计算布局将如何以更好的方式。例如，这是至关重要的，因为AMP预加载第一个视图中所需的所有资源，用户在访问网站时第一次看到的所有资源。