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

时间: 2024-11-05 12:10:49

AMP是如何提升性能?的相关文章

Mozilla推火狐7测试版:重点提升性能

北京时间8月20日消息,火狐6刚刚发布,Mozilla就推出了火狐7的测试版,并且重点对性能进行了提升. 火狐7的开发代号为Aurora,目前已经面向Windows.Mac OS X和Linux推出.该浏览器新增了一项名为MemShrink的功能,希望改变用户对火狐浏览器内存消耗过大的印象.Mozilla 称,MemShrink可以将火狐7的内存使用量降低20%至50%.不仅可以加快速度,而且可以减少软件崩溃的情况发生. 除此之外,火狐7增强了JavaScript垃圾收集功能.不仅加快了该功能的

传统内核协议栈为什么不使用零拷贝,也就是内存映射来提升性能?

问题描述 传统内核协议栈为什么不使用零拷贝,也就是内存映射来提升性能? 如题,传统内核协议栈为什么不使用零拷贝,也就是内存映射来提升性能? 内核TCP/IP协议在中断处理阶段将网卡中数据拷贝到内核缓冲区,协议处理完后再将其拷贝到用户态,第一次拷贝很快,第二次拷贝很慢,大约占了整个处理流程的一半时间以上: 现在的零拷贝技术不再进行内核到用户的拷贝,而是直接进行一次内存映射,以此来提升网络性能. 那么,我想问的是:内核协议栈是否可以使用零拷贝技术?若不能,主要原因是什么? 在此,我的一个想法是:是不

SQL Server中提前找到隐式转换提升性能的办法

原文:SQL Server中提前找到隐式转换提升性能的办法     http://www.cnblogs.com/shanksgao/p/4254942.html 高兄这篇文章很好的谈论了由于数据隐式转换造成执行计划不准确,从而造成了死锁.那如果在事情出现之前发现了这类潜在的风险岂不是更好?     那么我们来看一个简单的例子,如代码清单1所示.   1: SELECT * 2: FROM HumanResources.Employee 3: WHERE NationalIDNumber = 2

php-求大神解答 关于PHP项目提升性能的方法

问题描述 求大神解答 关于PHP项目提升性能的方法 公司有个PHP的项目,但是在要上线时发现项目的并发访问量和安全性都不是很好,现在老大给我任务 ,叫我看看java这边有没有什么办法提升项目的并发量,但是我工作一年多,对性能这块不是很了解, 网上查询说的nginx+apache+php可以提升并发量,但是我用了nginx做代理,但是测试的性能不是很理想, 求大神指点方向,十分感谢!!!

JavaScript提升性能的常用技巧总结【经典】_javascript技巧

本文讲述了JavaScript提升性能的常用技巧.分享给大家供大家参考,具体如下: 1.注意作用域 随着作用域链中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.访问全局变量总是要比访问局部变量慢,因为要遍历作用域链.  1). 避免全局查找   将在一个函数中会多次用到的全局对象存储为局部变量总是没错的. 2). 避免 with 语句  with会创建自己的作用域,因此会增加其中执行代码的作用域链的长度. 2.选择正确的方法 性能问题的一部分是和用于解决问题的算法或者方法有关的.

《解读NoSQL》——2.3 策略地使用RAM、SSD和磁盘提升性能

2.3 策略地使用RAM.SSD和磁盘提升性能 NoSQL系统如何通过不同类型的存储介质来提升系统性能?通常,传统的数据库管理系统不会关注存储管理方面的选项.与之不同,NoSQL系统被设计成使用最少的昂贵的资源提供快速的用户响应. 如果你对数据库架构不熟悉,那么分清查询从RAM(易失的随机读取记忆体)取得的数据和从磁盘驱动器取得的数据之间存在的性能差异,无疑是一个良好的开始.大多数人都知道,当他们关闭了工作了漫长一天的电脑,在RAM中的数据都会消失并且在下次使用时需要重新加载.而保存在固态硬盘(

Facebook 重写 React 和 Relay 框架,旨在提升性能

Facebook 已完全重写用于构建用户界面的 React 框架.新的项目名称为 React Fiber,其在公布之前就已在 Facebook.com 运行使用.现在,Facebook 将此项目公示,并计划在今年推出 React 16.0 之后将它向开发者开放. 同时,Facebook 也表示已重写 React 的数据驱动框架 Relay. React Fiber React Fiber 包含 React 最初的开发理念,也兼容现有的基于 React 的应用程序.Facebook 将其作为 Re

50点提高PHP编程效率 引入缓存提升性能

  0.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数"(译注:PHP手册中说echo是语言结构,不是真正的函数,故把函数加上了双引号). 1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 2.$row['id'] 的速度是$row[id]的7倍. 3.echo 比 print 快,并且使用echo的多重参数(译注:

asp.net的10个提升性能或扩展性的秘密(二)

简介 Asp.net有很多值得你挖掘的"秘密",当你发现了它们,将会给你网站的性能和可扩展性带来巨大提升!例如,对于Membership以及Profile提供程序有一些秘密的瓶颈,它们很容易被解决,从而使认证和授权更加快速.另外,asp.net的http管线可以为每一个请求作处理,防止执行了某些不必要的代码而遭受攻击.不只是这些,asp.net工作进程能够突破默认限制,从而完全发挥它的威力.在浏览器端(不是在服务器端)的页面分段输出缓存能显著减少由于请求访问所需要占用的大量下载时间.在