一步一步教你使用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" ...
点击查看剩余70%
{{collectdata}}
网友评论0