AMP HTML 页面初探- Hello , Accelerated Mobile Page

时间 2019-11-05

标签 amp html 页面初探 hello accelerated mobile page 栏目 HTML 繁體版

原文原文链接

本文首发于个人博客html

AMP已经出来好久了，最近看到官方说12月会在北京上海有路演，才想起本身很久没接触这个AMP了，以前为了试一试，把本身博客的about页面改为了AMP页面，当时还在上线先后用了google developer toos - pagespeed 测了下速，确实快了许多，我的感受仍是有速度的提高。可是不知道咋地就是还没看到市场上火起来，大概是它暂时局限于内容页面。好了，如今又有roadshow了，那我也又来尝尝这口粥。git

RoadShowgithub

AMP - Wht ?

AMP 的全称是 Accelerated Mobile Page，能够理解成加速的移动平台网页。它指的是采用特定的开发技术和规范，让您的网页在手机等移动平台上能更加高速运行和显示，给您的客户提供更好的用户体验。这个开源的和开放型技术如今受到了互联网业界的极大关注，全球的不少公司开始在更新他们的网站开发，使用 AMP 技术加强他们的网站的运行速度和跨平台支持，让他们的网页在众多移动设备上更好地展示。web

这是我最粗略的介绍。官方介绍-英 & 官方介绍-中网络

官方网站-英 & 官方网站-中app

AMP - Why ?

一、利益受到了威胁
二、赚取更多的利益
三、为了用户
四、新的东西挺好玩儿

哈哈，随意介绍了三点缘由，看看市场上的人都怎么说。async

一、利益受到了威胁。流量为王的时代，Google发现本身的饼被人一点一点的啃着，我靠，如何能忍。再看到流量一点一滴的网Facebook和苹果新闻应用等产品流时，坐不住了，因而便有了Accelerated Mobile Pages（AMP）应战。ide

二、若是在移动端一个页面3秒钟尚未完成加载，那么有90%以上的访问者会关掉网页或者访问其余网页。因此，你能让这样的流量跑掉嘛？花花的银子啊。工具

三、为了用户。随着网络的发展，移动web已经占领着大片市场，但移动web的性能却赶不上桌面web和移动app，愈来愈多的人抱怨移动web的性能网络的网速太慢。话很少说，为了用户，AMP就出生了。性能

四、Google做为行业巨头，探索些标志性的造福人类的东西，天然为之。

AMP - Now ?

AMP目前的使用者，应该局限于大型的新闻网站，或者内容网站，例如博客。WordPress就支持AMP。

另外，谷歌也宣布了百度、搜狗、雅虎日本的搜索结果将会与“Accelerated Mobile Pages”(AMP，加速移动页面)直接对接，也就是说上述三大搜索引擎将会支持AMP。要知道，百度、搜狗在中国的搜索市场占有率，想一想，PC有百度，移动有搜狗，应该说市场仍是挺起来了。

AMP - More ?

我今儿就不写什么原理了，好比：

这些须要的童鞋前往网址或官方网站就能够自行查看了，后面再慢慢的推一些实践文章。
不过，本身从教程一步一步的来，就能够写出个简单的demo页面了。

AMP - Diff ?

闪电是AMP页面的标志:

再装个AMP 检测Chrome插件： AMP Validator

若是不是AMP页面，图标就是灰的。
若是是AMP页面且符合规范，就是绿色的，若是不符合规范，只是警告的红色。

装上这个插件后，随意打开个页面，应该就是灰色的，也阔以打开个人博客关于我页面，应该就是绿色的。

也阔以打开调试工具，查看elements，第一行长这样：

<!doctype html>
<html ⚡ lang="zh_CN" amp-version="1510956201635" class="i-amphtml-singledoc i-amphtml-standalone" style="padding-top: 0px;">

在设计AMP html时头部也是这么写的：

<!doctype html>
<html ⚡>

或者：

<!doctype html>
<html amp>

这些元素 AMP Page 必备：

以文档类型 <!doctype html> 开头
包含顶级 <html ⚡> 标记（也接受 <html amp>）
包含 <head> 和 <body> 标记（这些标记在 HTML 中是可选的）
在<head>内包含一个 <link rel="canonical" href="$SOME_URL"> 标记，该标记指向 AMP - HTML 文档的常规 HTML 版本，或在此类 HTML 版本不存在的状况下指向文档自己
包含 <meta charset="utf-8"> 标记做为<head>标记的第一个子项
在<head>标记内包含 <meta name="viewport" content="width=device-width,minimum-scale=1"> 标记。还建议包括 initial-scale=1
包含 <script async src="https://cdn.ampproject.org/v0...;></script> 标记做为<head>中的最后一个元素（这样作将会包括并加载 AMP JS 库）
在其 <head> 标记内包含如下内容：

<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>

完整的demo能够查看
My AMP Page，或者官方的 Learn AMP by Example

嗯，此次我就写到这里，没有知足胃口我很抱歉，今天就简单介绍下AMP，以及AMP Page长啥样。

若是手头这个wap项目要改用AMP HTML，那我就能好好的折腾，写点博客了。

有时间咱就先一块儿玩玩吧~