当前位置: 首页 > news >正文

AMP HTML助力移动Web提速

Google开源了旨在提升移动Web使用体验的受限HTML(restricted HTML)规范。

\\

加速移动页面(AMP)是一个由Google发起的项目并很快被大约30家内容出版商支持,该项目的目的是使得普通网页能够在移动设备上实现更快甚至是瞬间的加载。用户可以从这种更加接近无缝加载的体验中获益,而出版商们也从中期待更多的广告收入,原因是页面加载提速后会明显降低网页跳出率,据最近的一项调查显示,如果一个页面的加载时间大于10秒钟则该页面的跳出率可达58%之高。

\\

AMP的目标是使用受限HTML以及缓存技术来提高移动网络中静态内容的性能。这个框架并不引入新的Web开发语言或相关技术,而是在现有技术的基础上完成。除少数限制外,出版商们仍然可以自由地创建和发布他们的内容。当然,他们也被建议在全世界范围内使用内容缓存来加速网页加载。Google可以为那些对AMP感兴趣的出版商们免费提供缓存服务。

\\

AMP网页使用一组受限的HTML标签,这意味着现有的浏览器无需任何改动就可以渲染AMP网页。存储这些网页的服务器可将AMP网页与其它HTML页面同等对待或者也可以对其使用一些优化措施,例如:将图像的大小调整为窗口(viewport)的大小,内联(inline)某些图像或者CSS,压缩(minify)HTML和CSS,提前加载外部组件等等。

\\

由于性能方面的原因,一些HTML标签被禁止使用: applet, base, embed, form, frame, frameset, object, param。除按钮(Button)外,输入元素被禁止使用。除了application/ld+json类型的脚本以及为加载AMP运行时环境和页面头部最后一个元素的必须的脚本标签以外,其余的脚本都被禁止。audio,img和video被替换成了自定义元素: amp-audio, amp-img和amp-video。amp-iframe取代了iframe,该amp-iframe元素对原有的iframe进行了某些限制。此外Google还设计了一些其它的自定义元素:amp-anim, amp-ad, amp-pixel, amp-twitter等。所有这些元素设计的目的都是为了在页面的预加载、加载及渲染等环节强化某些规则以最大限度地提高页面性能。

\\

除了AMP脚本以外,个人写的JavaScript脚本也在被禁止的行列。AMP脚本(本身也是JavsScript写的)用来加载AMP运行时环境,该环境实现了AMP的自定义元素、调度执行资源加载以及在开发过程中验证页面。AMP运行时环境决定了是否以及何时来加载一个资源。

\\

第三方内容(包括第三方JS),比如内嵌广告或者网页分析脚本等可以借用AMP的元素(amp-ad, amp-pixel)包含进来, 这些元素被强制要求运行在一个iframe沙盒中。跟踪像素(Tracking pixels)是用来做分析用的。

\\

根据规范构建出的AMP组件也许会包含在首页中执行的JavaScript,不过,优先级会较低。这些组件被用于某些应用提供的服务,这些应用包括Instagram、Twitter或者YouTube。CSS也可以被包含,不过也必须遵守某些特定的规则。

\\

速度索引(Speed Index)用来衡量某些经AMP优化过的网页,据AMP团队透露,他们注意到经过优化后,网页性能的提升从15%到85%不等。为了展示AMP网页的速度,他们已经建立了一个Google Search的demo。要运行这个demo,需要使用移动设备访问下面的链接:g.co/ampdemo。AMP规范并不是最终版,仍然在完善之中。

\\

为了使用AMP技术发布内容,一些出版商已经加入了这个项目,以下是其中的一些出版商名单,他们是: BBC、金融时报、经济学人、赫芬顿邮报、纽约时报以及华盛顿邮报。

\\

查看英文原文:Speeding Up the Mobile Web with AMP HTML

\\

感谢张龙对本文的审校。

\

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ,@丁晓昀),微信(微信号:InfoQChina)关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入InfoQ读者交流群06e1fec4a87eca3142d54d09844c629f.png)。

相关文章:

  • RCC BUCK-BOOST变压器设计
  • Android开发UI之给ImageView添加蒙版
  • 【转】你真的了解setTimeout和setInterval吗?
  • [CareerCup] 13.1 Print Last K Lines 打印最后K行
  • 4月数据库流行度排行榜 MySQL能否追上Oracle
  • 监控方案设计
  • 浅析:Android--Fragment的懒加载
  • iText生成pdf中文字体解决方案
  • c#xml操作
  • VC常用代码之创建进程
  • 第六章 对象作用域与servlet事件监听器
  • JavaScript HTML DOM 事件
  • 3D-HEVC的TAppDecorder
  • Hibenate second-level ehcache
  • JVM垃圾回收日志结构分析
  • 【跃迁之路】【477天】刻意练习系列236(2018.05.28)
  • android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
  • CSS盒模型深入
  • HTTP中的ETag在移动客户端的应用
  • iBatis和MyBatis在使用ResultMap对应关系时的区别
  • Linux下的乱码问题
  • overflow: hidden IE7无效
  • PV统计优化设计
  • Web设计流程优化:网页效果图设计新思路
  • 二维平面内的碰撞检测【一】
  • 机器学习学习笔记一
  • 模型微调
  • 设计模式 开闭原则
  • 使用parted解决大于2T的磁盘分区
  • 运行时添加log4j2的appender
  • 阿里云API、SDK和CLI应用实践方案
  • 积累各种好的链接
  • 新年再起“裁员潮”,“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • ​Python 3 新特性:类型注解
  • ![CDATA[ ]] 是什么东东
  • #gStore-weekly | gStore最新版本1.0之三角形计数函数的使用
  • $.ajax()方法详解
  • (12)Hive调优——count distinct去重优化
  • (6)添加vue-cookie
  • (c语言)strcpy函数用法
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (保姆级教程)Mysql中索引、触发器、存储过程、存储函数的概念、作用,以及如何使用索引、存储过程,代码操作演示
  • (附源码)ssm高校实验室 毕业设计 800008
  • (附源码)小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • (力扣记录)1448. 统计二叉树中好节点的数目
  • (免费领源码)Java#ssm#MySQL 创意商城03663-计算机毕业设计项目选题推荐
  • (十八)用JAVA编写MP3解码器——迷你播放器
  • (算法)Travel Information Center
  • (心得)获取一个数二进制序列中所有的偶数位和奇数位, 分别输出二进制序列。
  • (一) storm的集群安装与配置
  • (转)大型网站的系统架构
  • .Net 代码性能 - (1)
  • .net 反编译_.net反编译的相关问题
  • .NET开源的一个小而快并且功能强大的 Windows 动态桌面软件 - DreamScene2
  • .NET委托:一个关于C#的睡前故事