【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

Web 性能 API——帮你分析 Web 前端性能

  • 2015-06-04
  • 本文字数:2816 字

    阅读完需:约 9 分钟

开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求。其中,网页的性能直接决定了用户的体验,而随着新型客户端浏览设备的出现与网站功能的日益复杂化,对于性能的专注也达到了前所未有的高度。

传统的网站性能监测通常有以下几种方式:

  • 借助传统的开发者工具查看网络请求,例如浏览器的 F12 工具、 Fiddler Charles 等等。基本方式是通过追踪 HTTP 请求与响应的时间,以图形的方式列出所有资源的下载情况。这种方式依赖于人为操作,难以实现批量测试与统计。
  • 使用侵入式的 JavaScript 代码检测 DOM 事件的发生时间。例如 DOMContentLoaded 和 document.onreadystatechange 等等。这种方式会在页面中引入额外的代码,加重了开发者与测试人员的负担,还有可能因为检测代码本身的潜在问题影响页面的性能。
  • 使用第三方的服务与工具,例如 WebPagetest Pingdom 等等,这些服务通常能够实现在不同浏览器和不同地域进行测试,并且为用户提供一些优化建议。但某些服务需要排队等待,并且多次测试结果之间往往区别较大。第一条方式的问题也同样存在。

除此之外,以上各种方式的测量指标都比较单一,基本只能起到计时和流量计算的作用。对于其它一些指标,例如电池状态等无能为力。并且难以实现自动化,以及在持续集成流程中统计测试结果。

W3C Web 性能工作小组与各浏览器厂商都已认识到性能对于 web 开发的重要性,为了解决当前性能测试的困难,W3C 推出了一套性能API 标准,各种浏览器对这套标准的支持如今也逐渐成熟起来。这套API 的目的是简化开发者对网站性能进行精确分析与控制的过程,最终实现性能的提高。其中还包括了一些新协议与HTML 元素的提议,目的是让内容的展现更快、更加优化。

性能API 示例

整套标准包含了10 余种API,各自针对性能检测的某个方面。为了保证整套标准的质量与互操作性,W3C 按照惯例对它们应用了规范成熟度流程,这些API 各自处于流程的不同阶段。在下图中可以看到它们当前的进展:

以下将通过简单的示例介绍目前已属于W3C 推荐标准(REC)的三个API。

Navigation Timing (导航计时)

Navigation Timing API 能够帮助网站开发者检测真实用户数据(RUM),例如带宽、延迟或主页的整体页面加载时间。开发者可以用以下 JavaScript 代码检测页面的性能:

复制代码
varpage = performance.timing,
plt = page.loadEventStart - page.navigationStart,
console.log(plt);
// Page load time (PTL) output for specific browser/user in ms

需要注意的是,Navigation Timing 的目的是用于分析页面整体性能指标。如果要获取个别资源(例如 JS、图片)的性能指标,请使用 Resource Timing API。

W3C 刚刚宣布了 Navigation Timing 2 ,它将替代之前的版本。

High Resolution Timing(高精度计时)

该 API 规范所定义的 JavaScript 接口能够提供精确到微秒级的当前时间,并且不会受到系统时钟偏差或调整的影响。对于性能分析来说,精确的测量结果意义重大。

复制代码
varperf = performance.now();
// console output 439985.4570000316

Page Visibility (页面可见性)

通过这一规范,网站开发者能够以编程方式确定页面的当前可见状态,从而使网站能够更有效地利用电源与CPU。

当页面获得或失去焦点时,文档对象的 visibilitychange事件便会被触发。

复制代码
document.addEventListener('visibilitychange', function(event){if(document.hidden){// Page currently hidden.}else{// Page currently visible.}});

这一事件对于了解页面的可见状态十分有用,举例来说,用户可能会同时打开多个浏览器标签,而你希望只在用户显示你的网站页面时才进行某些操作(比如播放一段音频文件、或是执行一段 JavaScript 动画),就可以通过这一事件进行触发。对于移动设备来说,如果用户在某个标签中打开了你的网站,但正在另一个标签中浏览其它内容时,这一特性能够节省该设备的电池消耗。(虽然对于你的网站性能来说意义不大……)

其它部分 API 功能简介

  • Resource Timing (资源计时)——对单个资源(如图片)的计时,可以对细粒度的用户体验进行检测。
  • Performance Timeline (性能时间线)——以一个统一的接口获取由 Navigation Timing、Resourcing Timing 和 User Timing 所收集的性能数据。
  • Battery Status (电池状态)——能够检测当前设备的电池状态,例如是否正在充电、电量等级等等。可以根据当前电量决定是否显示某些内容(例如视频、动画等等),对于移动设备来说非常实用。
  • User Timing (用户计时)——可以对某段代码、函数进行自定义计时,以了解这段代码的具体运行时间,类似于 stop watch 的作用。
  • Beacon (灯塔)——可以将分析结果或诊断代码发送给服务器,它采用了异步执行的方式,因此不会影响页面中其它代码的运行。对于收集测试结果并进行统计分析来说是一种十分便利的工具。
  • Animation Timing (动画计时) - 通过 requestAnimationFrame 函数让浏览器精通地控制动画的帧数,能够有效地配合显示器的刷新率,提供更平滑的动画效果,减少对 CPU 和电池的消耗。
  • Resource Hits (资源提示) - 通过 html 属性指定资源的预加载,例如在浏览相册时能够预先加载下一张图片,加快翻页的显示速度。
  • Frame Timing (帧计时)——通过一个接口获取与帧相关的性能数据,例如每秒帧数和 TTF。该标准目前尚未被支持。
  • Navigation Error Logging (导航错误日志记录)——通过一个接口存储及获取与某个文档的导航相关的错误记录。该标准目前尚未被支持。

浏览器支持

下表列举了当前主流浏览器对性能 API 的支持,其中标注星号的内容并非来自于 Web 性能工作小组。

规范 Internet Explorer Firefox Chrome Safari Opera iOS Safari Android Navigation Timing 9 31 全部 8 26 8 (不包括 8.1) 4.1 High Resolution Timing 10 31 全部 8 26 8 (不包括 8.1) 4.4 Page Visibility 10 31 全部 7 26 7.1 4.4 Resource Timing 10 34 全部 - 26 - 4.4 Battery Status* - 31 (部分支持) 38 - 26 - - User Timing 10 - 全部 - 26 - 4.4 Beacon - 31 39 - 26 - - Animation Timing 10 31 全部 6.1 26 7.1 4.4 Resource Hints - - 仅限 Canary 版 - - - - Frame Timing - - - - - - - Navigation Error Logging - - - - - - - WebP* - - 全部 - 26 - 4.1 Picture element and srcset attribute * - - 38 - 26 - -其它

DZone.com 在《Performance & Monitoring 2015》这份白皮书中专门介绍了性能 API 以及 W3C 所推荐的新协议、标准及 HTML 元素,并提供了简单的示例。可以在这里下载完整的白皮书(需要注册)。本文中的示例代码即来自于该白皮书。

如果想了解有关Web 性能API 的更多内容,可以参考 W3C 官方文档或这篇博客


感谢徐川对本文的审校。

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

2015-06-04 09:5112128
用户头像

发布了 428 篇内容, 共 171.4 次阅读, 收获喜欢 36 次。

关注

评论

发布
暂无评论
发现更多内容

☕【Java实战系列】「技术盲区」Double与Float的坑与解决办法以及BigDecimal的取而代之!

洛神灬殇

BigDecimal Java 开发 12月日更 Double和Float

农业与科技结合?快来看Amazon Rekognition自定义标签的作用吧

亚马逊云科技 (Amazon Web Services)

AI/ML

巧用机器学习托管服务,自动化合约处理从此不在话下!

亚马逊云科技 (Amazon Web Services)

AI/ML

模块七作业

心怀架构

首次开源!一行代码轻松搞定中英文语音识别、合成、翻译核心功能!

百度大脑

人工智能

架构实战营模块七课后作业

Geek_99eefd

#架构实战营 「架构实战营」

业界福音!快来使用Amazon Transcribe服务减轻添加字幕的繁琐工序负担吧

亚马逊云科技 (Amazon Web Services)

AI/ML

使用 Amazon IoT 和 Amazon SageMaker 进行设备实时预测性维护

亚马逊云科技 (Amazon Web Services)

AI/ML

53 K8S之资源监控与资源指标

穿过生命散发芬芳

k8s 28天写作 12月日更

如何真正学习Go 语言

宇宙之一粟

golang 学习方法 Go 语言 12月日更

Redis RDB 持久化详解

程序员历小冰

redis 持久化 28天写作 12月日更

如何让用户给我们做推荐?

石云升

AARRR 产品思维 28天写作 12月日更

新能源当道,如何构建一个电动汽车电池告警预测平台?

亚马逊云科技 (Amazon Web Services)

AI/ML

动手训练属于自己的无人车,这个超强服务现已开源!

亚马逊云科技 (Amazon Web Services)

AI/ML

低代码实现探索(九)后台模型 json定义

零道云-混合式低代码平台

微众七年营造,ABCD“四梁八柱”建构数字时代的信任底座

脑极体

apacheunomi漏洞介绍及代码分析

网络安全学海

黑客 网络安全 信息安全 渗透测试 安全漏洞

飞桨中国行——生产制造专场

百度大脑

人工智能

即刻到位!快速落地 Amazon 智能工厂解决方案

亚马逊云科技 (Amazon Web Services)

AI/ML

深入浅出 OceanBase 运维之弹性扩缩容

OceanBase 数据库

直播 弹性扩容 OceanBase 开源

太香了,终于有人耗时1000小时打造出python从入门到精通全套路线图+视频+笔记

Java全栈架构师

Python 数据库 架构 面试 程序人生

SageMaker Neo优化目标检测模型加速推理

亚马逊云科技 (Amazon Web Services)

AI/ML

YB时代即将来临,三问数据存储

脑极体

在Amazon SageMaker中灵活使用多种存储服务

亚马逊云科技 (Amazon Web Services)

AI/ML

编写代码最应该做好的事情是什么?

李子捌

Java 28天写作 21天挑战 12月日更

开源驱动未来 | 2021新一代人工智能院士高峰论坛暨Open/O启智开发者大会开源专场顺利召开

OpenI启智社区

人工智能 开源社区 启智开发者大会

25天,手码Python数据分析+八大核心项目实战25W字总结,我献出了我的膝盖

Java全栈架构师

Python 数据挖掘 程序员 架构 数据分析

重装上阵——Graviton2提升ElastiCache for Redis的性价比!

亚马逊云科技 (Amazon Web Services)

AI/ML

销售易携手DataPipeline,推动“实时感知-主动决策-客户成功”的变革!

DataPipeline数见科技

大数据 中间件 数据融合 数据迁移 数据管理

模块7作业

小何

「架构实战营」

有向无环图在新增节点时的环状检测

waitmoon

DAG

Web性能API——帮你分析Web前端性能_语言 & 开发_邵思华_InfoQ精选文章