AICon 上海站|日程100%上线,解锁Al未来! 了解详情
写点什么

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:5112504
用户头像

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

关注

评论

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

有return的情况下try catch finally的执行顺序

技术小生

7月月更

快速搭建个人博客网站——Hexo

空城机

Hexo 个人博客 7月月更

音频的价值、AI Codec 的意义与算法能力的边界丨一期一会 • 音频工程师专场

声网

音频技术 一期一会

向量化引擎对HTAP的价值与技术思考

OceanBase 数据库

oceanbase

网信办严厉查处诱导未成年人参与直播打赏行为:直播打赏行业乱象必须整治

石头IT视角

Python动态属性有什么用

和牛

测试

中国经济网:“元宇宙”炙手可热

CECBC

优必选科技眼中的AI机器人时代

优必选科技

AI 机器人

【Docker 那些事儿】初始 Kubernetes 容器管理平台(下)

Albert Edison

Docker Kubernetes 容器 云原生 7月月更

Envoy分布式链路追踪

阿泽🧸

envoy 7月月更

附答案 | 最强Python面试题之Python基础题(1)

KEY.L

7月月更

机器学习-集成学习

AIWeker

机器学习 7月月更

G1GC算法读书笔记(更新中)

老猎人

元宇宙浪潮震撼来袭,抓住时机,齐心协力

CECBC

【刷题记录】17. 电话号码的字母组合

WangNing

7月月更

在 SAP 云平台上部署和运行 Docker 应用

汪子熙

Docker Kubernetes 云原生 SAP 7月月更

SeekTiger的Okaleido有大动作,生态通证STI会借此爆发?

股市老人

什么是云渲染?渲染速度有多快?一文告诉你

Finovy Cloud

计算机 云渲染 集群渲染

Vue Cli Study

程序员海军

vuecli 7月月更

Ansible项目最佳实践

穿过生命散发芬芳

ansible 7月月更

一个15年ABAP老兵的建议:了解这些基础知识,对ABAP开发有百利而无一害

汪子熙

后台开发 SAP abap Netweaver 7月月更

用 React 结合 SAP UI5 Web Components 来开发 SAP Fiori 应用

汪子熙

JavaScript 前端开发 SAP SAP UI5 7月月更

[ kitex 源码解读 ] Kitex 扩展性设计思路

baiyutang

Go golang 云原生 微服务框架 kitex

在线XML转CSV工具

入门小站

工具

Elephant Swap的LaaS方案优势分析,致eToken表现强势

BlockChain先知

数据中台建设误区

奔向架构师

数据中台 7月月更

超干货!彻底搞懂单工、半双工、全双工的区别与联系

wljslmz

网络技术 7月月更 通信模式 双工

等额本金递增还款/等额本金递减按揭房贷还款计算器

入门小站

工具

如何在OneFlow中新增算子

OneFlow

深度学习 算子

振奋人心!元宇宙!下一代互联网的财富风口

CECBC

linux 上查找包含特定文本的所有文件

入门小站

Linux

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