Google Amp学习笔记（一）

学习源网址：https://amp.dev/
这个网站内容很丰富，而且有案例可以下载，学习。原文是英文版，且比较长。我的笔记只记录常用的组件以及部份要点。

** AMP 速度快的原因**
1、Inline 的 CSS
所有的CSS都只能Inline；在本页内的css不能>75k。样式只能驻留在head里。
style amp-custom标记，或作为内联style必要的属性。这个限制防止加载外部样式表，但它也保存了网络请求，启用了缓存，并提高了性能。

2、禁用了大部分的JS，尽可能使用AMP组件。
在AMP模式下是不能运行JavaScript，也是禁止运行JavaScdript的，所以所有的Script标签都会报错。

3、延迟加载
资源(图像、数据、视频、脚本等)在需要之前不会加载。只有当用户可能看到图片和广告，或者用户可能快速滚动到图片和广告时，才会下载这些图片和广告。这些媒体资产的等价物(而不是)称为“托管资源”，是因为它们是否以及何时加载并显示给用户是由AMP决定的。
AMP的性能优化之一要求提前宣布他们的height。这有助于计算布局将如何以更好的方式。例如，这是至关重要的，因为AMP预加载第一个视图中所需的所有资源，用户在访问网站时第一次看到的所有资源。

==================================
AMP开始的时候，它只用于为移动设备创建网页。一个网页将有一个AMP版本，用于移动设备，一个版本用普通HTML编写，用于桌面(称为“规范”版本)。然后使用标记，这样搜索引擎就会知道两个文档代表相同的网页。

因此，非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”

==================================

一些概要，简单了解，看看先：
内联的css： amp-custom

<style amp-custom>body {font-family: sans-serif;line-height: 1.5rem;padding: 20px;}p, h2 {border: 1px dotted red;}
</style>

大多数HTML标记可以直接在AMP中使用，但是某些标记，例如标签，必须用等效的AMP组件替换。

替代html里img的 amp-img

<amp-img
src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746"
layout="responsive"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>

适用于移动设备和桌面设备。由于用户可能在任何一种设备上体验您的网页，所以最好在开发时检查这两种设备上的网页。
head中要增加

<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">

菜单
组件中的组件嵌套导航菜单

1)在head里加上

<script async
custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

2)代码块

<amp-sidebar class="sidebar" id="sidebar1" layout="nodisplay" side="left"><div class="navbar-trigger" on="tap:sidebar1.toggle">X</div><nav class="nav"><ul class="label"><li class="nav-item"><a href="#">Our Story</a></li><li class="nav-item nav-dropdown"><amp-accordion layout="container" disable-session-states class="dropdown"><section><header>Our Bikes</header><ul class="dropdown-items"><li class="dropdown-item"><a href="#">Ricotta Racer</a></li><li class="dropdown-item"><a href="#">Cheddar Chaser</a></li><li class="dropdown-item"><a href="#">Parmesan Pacer</a></li></ul></section></amp-accordion></li><li class="nav-item nav-dropdown"><amp-accordion layout="container" disable-session-states class="dropdown"><section><header>Latest Models</header><ul class="dropdown-items"><li class="dropdown-item"><a href="#">Ricotta Racer</a></li></ul></section></amp-accordion></li><li class="nav-item"><a href="#">Contact</a></li></ul></nav>
</amp-sidebar>

Google Amp学习笔记（一）相关推荐

google地图学习笔记（1）
google地图学习笔记(1) 文章目录 google地图学习笔记(1) 关于API_KEY的说明第一个程序:Hello World 支持的地图类型 zoom高度 API Key google地图A ...
Google Sheet 学习笔记
文章目录 Google Sheet 公式: countifs, sumifs vookup 字符串处理 query(data, sql,[headers]) importrange(link, ran ...
Google 深度学习笔记 - Limit of Linear Model
https://www.toutiao.com/a6679981747167298051/ 实际要调整的参数很多如果有N个Class,K个Label,需要调整的参数就有(N+1)K个 Linear ...
Google Guava学习笔记——基础工具类Joiner的使用
Guava 中有一些基础的工具类,如下所列: 1,Joiner 类:根据给定的分隔符把字符串连接到一起.MapJoiner 执行相同的操作,但是针对 Map 的 key 和 value. 2,Spli ...
GEE （Google Earth Engine）最基础代码学习笔记三
GEE (Google Earth Engine)代码学习笔记三本次学习核心为:将JavaScript objects and primitives放入Earth Engine 容器传到服务器,并处 ...
【论文学习笔记-10】ActiveStereoNet（Google ECCV2018）主动式双目相机自监督学习立体匹配网络
[论文学习笔记-10]ActiveStereoNet(Google ECCV2018)主动式双目相机自监督学习立体匹配网络) 自监督训练方法 Experiment ORAL 针对双目立体匹配中无监督存 ...
The Google File System（GFS）学习笔记
文章目录引子 GFS的架构读数据写数据流水线式的网络数据传输记录追加总结引子这篇文章是我学习极客时间徐文浩老师的<大数据经典论文解读>课程的学习笔记,大量的文字和图片来自专 ...
GEE(Google Earth Engine) 最基础代码学习笔记二 —— JavaScript 语言
GEE(Google Earth Engine) 学习笔记二 Javascript 语言 1. 注释 print('Hello World!'); 如果要注释,则在代码前面加//,比如: // pri ...
（转）Tensorflow 实战Google深度学习框架读书笔记
本文大致脉络: 读书笔记的自我说明对读书笔记的摘要具体章节的摘要: 第一章深度学习简介第二章 TensorFlow环境搭建第三章 TensorFlow入门第四章深层神经网络第五章 MN ...

Google Amp学习笔记（一）

Google Amp学习笔记（一）相关推荐

最新文章

热门文章