AMP是如何提升性能?

AMP简介

Google推出移动网页加速项目AMP
AMP介绍

AMP是如何提升性能?

以下的优化点是AMP页面能被快速加载的原因:

  • 只允许异步脚本
  • 静态计算资源尺寸大小
  • 不让 外部插件阻塞渲染
  • 让所有第三方JavaScript离开关键路径
  • 所有CSS必须内联
  • 字体触发必须高效
  • 最小化样式重计算
  • 只运行GPU加速动画
  • 加载资源的优先级策略
  • 瞬间加载页面

下面这个视频是APM引擎的lead ,Malte Ubl对AMP的介绍,内容跟下面的段落差不多。

只允许异步脚本

JavaScript很强大,它能修改页面的所有东西,但是它也会阻塞DOM的构建并延迟页面的渲染(使用 JavaScript 添加交互)。为了防止JavaScript延迟页面渲染,AMP只允许异步的JavaScript。

AMP页面不能包括自己写的JavaScript,相反,页面的交互特性用自定义的AMP元素处理。自定义的AMP元素的背后可能有JavaScript代码,但是它们都是经过精心设计而不会导致性能下降。

虽然在内联框架中运行第三方JS,但是它不能阻塞渲染。比如,如果第三方JS用 性能特别差的document.write API 它也不会阻塞主页面渲染。

静态计算资源尺寸大小

外部资源,比如图片、广告、内联框架<iframe>必须在HTML里声明他们的尺寸,所以在资源下载之前,AMP就能决定元素的大小和位置。AMP可以不用等待资源下载完成就直接加载页面布局。

AMP从资源布局中解耦文档布局。整个文档布局只需要一次HTML请求。因为AMP避免了代价昂贵的重计算样式和布局。所以当资源加载的时候,不会有任何的重布局。

不让 外部插件阻塞渲染

AMP不会让外部插件阻塞页面渲染。AMP支持外部插件包括 lightboxes, instagram embeds, tweets, 等等。然而,这些需要增加额外的HTTP请求,这些请求会阻塞页面布局和渲染。

所有用到自定义脚本的页面必须告诉AMP系统一个自定义的标签。比如, amp-iframe 脚本告诉系统这儿有个 amp-iframe 标签. AMP 在知道里面包含什么前就能生成一个内联页框(iframe box)。

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

让所有第三方JavaScript离开关键路径

第三方JS喜欢用同步JS加载,还喜欢用document.write。比如,如果你有5个广告,每个广告有3个同步加载。每次链接有1秒延时,光是JS加载就需要18秒。

AMP页面只在内联框架iframe沙盒中有第三方JavaScript。把第三方JS代码限制在iframe中,它们就不会阻塞主页面的运行。即使它们触发多次样式重计算,但iframes中几乎没有DOM,而样式重计算和布局通常是针对DMO尺寸。所以相比对页面的样式重计算和布局,对iframes的重计算是非常快速的。

使用有限的 inline CSS 样式

CSS阻塞所有的渲染、页面加载,同时它很臃肿。在AMP HTML页面中,只用内联风格的CSS允许使用。比起大多web页面,这个限制会从渲染关键路径去除1个或多个HTTP请求。

同时,内置样式块(sheet)最大可以有50KB大小。但是对大多复杂的页面来说,这些大小已经足够大了,当然这仍然需要页面作者维护良好的CSS风格。

字体触发必须高效

网页字体很大,所以字体优化 对性能来说非常高效。一个有少量同步脚本或外部样式块的传统页面,浏览器也需要等待这些大字体下载。

AMP页面在字体开始下载之前都不会发出HTTP请求。这是因为AMP的JS是异步的,而且允许在线的内置样式块;在下载字体时,没有HTTP请求阻塞浏览器。

最小化样式重计算

当你测量某些元素时,它会触发昂贵的样式重计算,因为浏览器需要布局整个页面。在AMP页面,所有DOM在写之前会先全部读完。这确保了每帧最多只有一次样式重计算。

你可以阅读这篇 渲染性能学习更多关于样式和布局重计算的影响。

只运行GPU加速动画

动画加速的唯一方式是将它们运行在GPU上。GPU知道图层,它知道如何在图层上展示元素,它会移动图层、淡入淡出图层,但是它不会更新页面布局;不过它会把任务抛给浏览器,这并不是很好。

关于动画相关的CSS的规则能保证动画是GPU加速。特别是AMP只允许动画、仿射变换和不透明度,所以不需要布局。可以从使用转换和不透明度的动画修改了解更多知识。

加载资源的优先级策略

AMP控制所有资源下载。它给资源下载分优先级,只在需要时加载,并预取懒加载资源。

当AMP加载资源,它会优化下载策略,当前最重要的资源会最先被下载。图片和广告只会在它们需要可视的时候、在上半版面或者用户快速滚动的时候被下载。

AMP会预取懒加载的资源。资源尽量晚加载,预取尽量早。这种方式,加载会很快,但是只有在资源展示给用户的时候CPU才会被使用。

瞬间加载页面

想确保HTTP请求尽量快速,使用新的 preconnect API 还是比较繁琐。用AMP,在用户显示指明他们想前往的页面前,该页面就被渲染了。在用户选择前往该页面前,它就可能已经准备好了,所以页面就像瞬间被加载一样。

虽然页面内容可以被预渲染,但是预渲染也会消耗大量的CPU资源。AMP会在两者中优化取平衡。预渲染只下载上半版面的资源,而且不会渲染非常消耗CPU资源的元素。

当AMP为瞬间加载页面的效果做预渲染时,只有上半版面的资源会被下载。当AMP文档做预渲染时,一些可能很耗CPU的资源(比如第三方iframes)不会被下载

更多详情: why AMP HTML doesn’t take full advantage of the preload scanner.

帮忙让AMP更快

AMP是个开源项目,我们需要你的帮助来让它更快。 how to contribute.

参考

原文:https://www.ampproject.org/docs/get_started/technical_overview.html#font-triggering-must-be-efficient

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容