HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

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

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

关注

评论

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

基于华为云ModelArts的水表读数识别开发实践【华为云至简致远】

科技云未来

水表读数识别项目

Taro小程序跨端开发入门实战

京东科技开发者

小程序 taro 开发 移动端

永续合约交易所系统开发逻辑详情

开发微hkkf5566

2022年中国全民健身发展白皮书

易观分析

行业分析 健身

写给 Java 程序员的前端 Promise 教程

CRMEB

用完华为云会议解决方案,我直接卸载了之前的会议软件【华为云至简致远】

科技云未来

云会议产品

调研阶段复盘

Geek_XOXO

复盘

2022纯手工打造1700道Java高级工程师面试宝典(含面试题解析)

Java工程师

Java 面试 八股文

mysql进阶(二十九)常用函数汇总

No Silver Bullet

MySQL mysql常用函数 8月月更

科创人·优锘科技COO孙岗:错误问题找不到正确答案,求索万物可视的大美未来

科创人

它们不一样!透析【观察者模式】和【发布订阅模式】

掘金安东尼

前端 设计模式 8月月更

Qt下异步使用C++调用Python文件

Geek_163f36

国内部分手机游戏开始显示用户IP属地

郑州埃文科技

游戏 手游 IP归属地

QCon 回顾 | Data Fabric:逻辑统一、物理分散

网易数帆

大数据 数据湖 降本增效 Data Fabric

急了,Mysql索引中最不容易记的三个知识点通透了

知识浅谈

8月月更

运筹帷幄决胜千里,Python3.10原生协程asyncio工业级真实协程异步消费任务调度实践

刘悦的技术博客

Python 协程 Async Python3 协程原理

华为云分布式缓存服务Redis开通及使用规划教程【华为云至简致远】

科技云未来

redis'

基于华为云弹性云服务器ECS(搭载openEuler的鲲鹏通用计算增强型)完成鲲鹏代码迁移工具实践【华为云至简致远】

科技云未来

鲲鹏服务器 弹性云服务器ESC

EMQ畅谈IoT数据基础软件开源版图,引领本土开源走向全球

EMQ映云科技

开源 物联网 IoT emq 8月月更

企业“数字化转型”成功的2个必备条件!

优秀

数字化转型

以数治企,韧性成长,2022 年中国 CIO 数字峰会成功举行

金蝶云·苍穹

Beetl使用记录

Geek_163f36

*打卡—>什么是云数据库&&沙箱实验如何用python和数据库来爬虫?【华为云至简致远】

科技云未来

云数据库

华为云服务之弹性云服务器ECS的深度使用和云端实践【华为云至简致远】

科技云未来

弹性云服务器ECS

Java泛型的继承场景

Geek_163f36

APICloud AVM 封装日期和时间选择组件

YonBuilder低代码开发平台

安卓 低代码开发 多端开发

腾讯云产品可观测最佳实践 (Function)

观测云

10分钟快速入门RDS【华为云至简致远】

科技云未来

RDS

基于ECS实现一分钟自动化部署【华为云至简致远】

科技云未来

自动化部署

Grid 布局介绍

CRMEB

一起来学华为云数据库,RDS实践【华为云至简致远】

科技云未来

云数据库

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