一步一步教你使用AMP技术来编写html
一、什么是AMP？
AMP，全称是 Accelerated Mobile Pages， 是 Google 推出的开源前端框架。
AMP 的推出是为了提升html网页的加载速度，据说amp制作的页面打开速度比传统的html快了近一倍有余，交互速度也快了近2倍，被称为目前 WEB 开发最快的框架。
二、AMP如何做到性能提升的呢？
从以下11个方面amp提升了性能
1、异步执行所有 AMP Javascript
2、AMP 组件可能包含了 JavaScript, 但已被精心设计以确保不会造成性能下降。
3、静态调整所有资源的大小
4、别让扩展机制阻止渲染
5、将所有的第三方 JavaScript 排除在关键路径之外
6、所有 CSS 必须内联且尺寸限制
7、字体触发必须高效
8、最小样式重新计算
9、仅运行 GPU 加速的动画
10、优先资源加载
11、瞬时加载页面
12、Google AMP Cache关键资源CDN加速
三、开发一个amp html页面
点击下面代码的右上角按钮“在线编辑运行代码”在bfwstudio webide中打开代码
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <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> <link rel="canonical" href="/static/samples/standalone/amp-website.html"> <title>AMP Website Demo</title> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script> <style amp-custom> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } body > * { margin: 0.5rem 0 0.5rem 0.5rem; } amp-carousel { margin: 0; } input[type=number] { width: 2rem; } .red { color: red; } </style> </head> <body> <h2>AMP is easy</h2> <p>Here is a responsive image carousel implemented in AMP. Tap on one of the images to enter the lightbox mode.</p> <amp-carousel type="slides" width="400" height="300" layout="responsive" lightbox> <amp-img src="https://unsplash.it/400/300?image=10" width="400" height="300" layout="responsive" alt="a sample image"> </amp-img> <amp-img src="https://unsplash.it/400/300?image=11" width="400" height="300" layout="responsive" alt="a sample image"> </amp-img> <amp-img src="https://unsplash.it/400/300?image=12" width="400" height="300" layout="responsive" alt="a sample image"> </amp-img> <amp-img src="https://unsplash.it/400/300?image=13" width="400" height="300" layout="responsive" alt="a sample image"> </amp-img> </amp-carousel> <h2>AMP is interactive</h2> <p>AMP provides a rich set of built-in actions for creating interactive websites.</p> <button on="tap:greeting.show">Show</button> <button on="tap:greeting.hide">Hide</button> <button on="tap:greeting.toggleVisibility">Toggle</button> <span id="greeting" hidden>Hello</span> <p>... and this is how you toggle a class attribute.</p> <button on="tap:greeting2.toggleClass(class='red')">Toggle red</button> <span id="greeting2">Hello</span> <h2>AMP is dynamic</h2> <p>AMP offers different ways to render dynamic content on a page. With amp-list it's possible to client-side render data pulled in from a JSON endpoint.</p> <amp-list id="time" layout="fixed-height" height="18" src="/documentation/examples/api/time" binding="refresh" single-item items="."> <template type="amp-mustache"> The time is: {{time}} <button on="tap:time.refresh">Refresh</button> </template> </amp-list> <p>Here is another example, a simple calculator implemented with amp-bind:</p> <input type="number" on="input-debounced:AMP.setState({a: event.valueAsNumber})" value="0"> + <input type="number" on="input-debounced:AMP.setState({b: event.valueAsNumber})" value="0"> = <span [text]="a + b">0</span> </body> </html>11从上面的标记结构我们来分析一下amp的标记结构与html的区别
| AMP规则 | 说明 |
|---|---|
以 <!doctype html> doctype 开头。 | 适用于 HTML 的标准。 |
包含顶级 <html ⚡> 标记（也可以使用 <html amp>）。 | 将网页标识为 AMP 内容。 |
包含 <head> 和 <body> 标记。 | 在 HTML 中是可选标记，但在 AMP 中则必须包含。 |
包含 <meta charset="utf-8"> 标记，以此作为其 <head> 标记的第一个子级。 | 标识网页的编码。 |
包含 <script async src="https://cdn.ampproject.org/v0.js"></script> 标记，以此作为其 <head> 标记的第二个子级。 | 包含并加载 AMP JS 库。 |
在其 <head> 内包含 <link rel="canonical" href="$SOME_URL"> 标记。 | 指向常规 HTML 版 AMP HTML 文档，如果不存在此类 HTML 版本，则指向其自身。 |
在其 <head> 标记内包含 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 标记。还建议您添加 initial-scale=1。 | 指定自适应视口。 |
在其 <head> 标记内包含 AMP 样板代码。 | CSS 样板最初会隐藏内容，直到 AMP JS 加载完毕为止。 |
| 使用style amp-custom | 每个 AMP 页面都只有一个嵌入的样式表，并且还有一些不允许您使用的选择器 |
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
除了组件之外，amp还有丰富的网站模板，直接下载就能运行，amp模板地址：https://amp.dev/zh_cn/documentation/templates/?format=websites
四、AMP限制
1、!important 限定符 禁止使用该限定符。 这是 AMP 网页能够强制实施其元素尺寸设定规则的必要条件。 更多规范和限制 https://amp.dev/zh_cn/documentation/guides-and-tutorials/learn/spec/amphtml/?format=websites
注意：
1、在制作 AMP 网页和内容时，强烈建议您使用 HTTPS 协议（而非 HTTP）。虽然 AMP 文档本身或者图片和字体并不需要使用 HTTPS，但是很多 AMP 功能（例如视频、iframe 等）都需要使用 HTTPS。为确保您的 AMP 网页能够充分利用所有 AMP 功能，请使用 HTTPS 协议。要详细了解 HTTPS，请参阅“为什么说 HTTPS 很重要”。
2、做好跨域请求处理，由于用户可能从AMP Cache访问你的网页, 所以访问的域名可能是某个cdn域名, 存在跨域的可能, 需要服务端做好相应配置
{{collectdata}}
网友评论0