今晚特马资料图

创意数字品牌全案服务

BRANDING DESIGN AGENCY.

品牌咨询电话

0571-89937222
AMP改造教程,?#31243;窤MP接入解决方案
02-18 阅读:466


Ps:一、二主要解释一些专有名词,具体“ AMP 开发规范 ”可以直接参阅第三专题!


《 AMP 开发文档 》

一、框架组成:

谷歌AMP - HTML框架由 AMP HTMLAMP JSAMP Cache 三大核心组件构成!

1.AMP HTML

AMP HTML 是为了 确保网页?#38405;?的 具有 某些限制 的 HTML。

AMP HTML 本质上是使用自定义 AMP属性扩展 的 HTML。

尽管 AMP HTML 网页中的大多数标记都?#27973;?#35268; HTML 标记,但部分 HTML 标记替换为了 AMP 专用标记(另请参阅 AMP 规范中的 HTML 标记)。利用这些自定义元素(称为 AMP HTML 组件)可以轻松高效地实现常见的模式。

例如,amp-img 标记?#21830;?#20379;完整的 srcset 支持,即使在尚不支持该标记的浏览器中也是如此。

2.AMP JS

AMP JS 库可确保快速渲染 AMP HTML 网页。

AMP JS 库 可实现所有 AMP 的最佳?#38405;?#20570;法、管理资源加载,并为您提供?#21414;?#25552;到的自定义标记,所有这些都是为了确保快速渲染您的网页。

最重大的优化之一就是它可使来自外部资源的所有内容保持异步,让网页中的任何内容都能毫无阻碍地渲染。

其他?#38405;?#25216;术还包括:将所有 iframe 沙盒化,加载资源之前对网页?#21414;?#20010;元素的布局进行预先计算,以及禁用?#38405;?#32531;慢的 CSS 选择器。

3.AMP Cache

Google AMP Cache 可用于提供缓存的 AMP HTML 网页。

Google AMP Cache 是一种基于代理的内容交付网络,用于交付所有有效的 AMP 文档。它?#21830;?#21462; AMP HTML 网页,对这些网页进行缓存,并自动改进网页?#38405;堋?#20351;用 Google AMP Cache ?#20445;?#25991;档,所有 JS 文件及所有?#35745;?#37117;从使用 HTTP 2.0 的同一来源加载,从而可实现最高效率。

此外,Google AMP Cache 还带有内置验证系统,可确认网页能够正常工作,并且不?#35272;?#20110;外部资源。?#25628;?#35777;系统运行一系列断言,确认网页的标记符合 AMP HTML 规范。

Google AMP Cache 可以理解为谷歌官?#25945;?#20379;的免费CDN服务。


二、运作原理:

01.仅允许异步脚本

02.静态确定所有资源的大小

03.不让扩展机制阻塞渲染

04.将所有第三方 JavaScript 保存在非关键路径下

05.有 CSS 都必须内嵌并具有大小限值

06.字体触发必须高效

07.最大程度减少样式重新计算次数

08.仅运行 GPU 加速动画

09.设定资源加载的优先级

10.瞬时加载页面


三、开发规范:

1.AMP页面源码 必须包含的标记

  • 必须以“

  • 必须包含顶级标签:“

  • 必须包含“

  • 必须包含“”标签,且作为其头标记的第一个子标记!

  • 必须包含“?#20445;?/p>

  • 必须包含“”标签!

  • 必须包含“

    ”标签!

  • 必须包含AMP样板代码(head > style[amp-boilerplate]和noscript > style[amp-boilerplate]):


以上八个“必须”必须严格遵守!

2.AMP HTML 规范

01.HTML 标签

  • 禁止添加“

本文关键词:接入 AMP 改造 解决方案 教程
返回
今晚特马资料图 新疆时时彩走势图查询 云南快乐10分开奖查询 腾讯麻将挂 兰斯曼 曼城赛程 PC蛋蛋赚钱秘籍 糖果游行返水 江苏十一选五时时彩 绝地求生地图 天津时时彩4星