Web性能API——帮你分析Web前端性能
开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求。其中,网页的性能直接决定了用户的体验,而随着新型客户端浏览设备的出现与网站功能的日益复杂化,对于性能的专注也达到了前所未有的高度。
\\
传统的网站性能监测通常有以下几种方式:
\\
- 借助传统的开发者工具查看网络请求,例如浏览器的F12工具、Fiddler、Charles等等。基本方式是通过追踪HTTP请求与响应的时间,以图形的方式列出所有资源的下载情况。这种方式依赖于人为操作,难以实现批量测试与统计。\\t
- 使用侵入式的JavaScript代码检测DOM事件的发生时间。例如DOMContentLoaded和document.onreadystatechange等等。这种方式会在页面中引入额外的代码,加重了开发者与测试人员的负担,还有可能因为检测代码本身的潜在问题影响页面的性能。\\t
- 使用第三方的服务与工具,例如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(资源计时)——对单个资源(如图片)的计时,可以对细粒度的用户体验进行检测。\\t
- Performance Timeline(性能时间线)——以一个统一的接口获取由Navigation Timing、Resourcing Timing和User Timing所收集的性能数据。\\t
- Battery Status(电池状态)——能够检测当前设备的电池状态,例如是否正在充电、电量等级等等。可以根据当前电量决定是否显示某些内容(例如视频、动画等等),对于移动设备来说非常实用。\\t
- User Timing(用户计时)——可以对某段代码、函数进行自定义计时,以了解这段代码的具体运行时间,类似于stop watch的作用。\\t
- Beacon(灯塔)——可以将分析结果或诊断代码发送给服务器,它采用了异步执行的方式,因此不会影响页面中其它代码的运行。对于收集测试结果并进行统计分析来说是一种十分便利的工具。\\t
- Animation Timing(动画计时) - 通过requestAnimationFrame函数让浏览器精通地控制动画的帧数,能够有效地配合显示器的刷新率,提供更平滑的动画效果,减少对CPU和电池的消耗。\\t
- Resource Hits(资源提示) - 通过html属性指定资源的预加载,例如在浏览相册时能够预先加载下一张图片,加快翻页的显示速度。\\t
- Frame Timing(帧计时)——通过一个接口获取与帧相关的性能数据,例如每秒帧数和TTF。该标准目前尚未被支持。\\t
- 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 \u0026amp; Monitoring 2015》这份白皮书中专门介绍了性能API以及W3C所推荐的新协议、标准及HTML元素,并提供了简单的示例。可以在这里下载完整的白皮书(需要注册)。本文中的示例代码即来自于该白皮书。
\\
如果想了解有关Web性能API的更多内容,可以参考W3C官方文档或这篇博客。
\\
感谢徐川对本文的审校。
\\
给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ,@丁晓昀),微信(微信号:InfoQChina)关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入InfoQ读者交流群)。
Web性能API——帮你分析Web前端性能相关推荐
- 前端性能优化:1.什么是前端性能优化
1.1 性能的起因 人无我有,人有我优,人优我廉,人廉我专 1.2 性能的影响 1.2.1 用户的留存 根据Google营销平台提供的调研发现,如果网站页面加载时间超过3,就会有53%的移动网站的访问 ...
- linux查看磁盘性能sar,基于sar分析磁盘IO性能
#refer: http://lovesoo.org/linux-sar-command-detailed.html sar(System Activity Reporter系统活动情况报告)是目前 ...
- HTML 利用 Web Audio API 进行音频可视化
利用Web Audio API 进行音乐可视化 1.什么是 Web Audio API: 官方:Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对 ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- 利用Web Audio API将振动数据转化为音频数据并播放
年初在公司做了一个需求:传感器采集到了机器的振动数据,要在网页中利用这个数据播放出振动的声音. 之前只了解过HTML中的<audio>元素可以通过src属性指定音频文件路径来播放音频,现在 ...
- 使用 Web Speech API 在浏览器中朗读文本
Web Speech API有两个功能:语音合成(语音阅读)和语音识别(语音到文本的转换).SpeechSynthesis API允许您在浏览器中选择语音并大声朗读任何文本. 无论是应用程序中的语音警 ...
- webrtc 语音流java_Web语音处理 - Web Audio API WebRTC
概述 很多设备都具备native的语音输入功能,并提供App来提供语言录入等功能.如果你想开发一些语言应用,那么针对不同的设备平台,包括desktop和移动设备如ios.android,你可能需要使用 ...
- 【HTML】前端性能优化之CDN和WPO的比较
CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题.WPO解决方案,如Radware的FastView,则在前端进行性能提升处理,使页面更有效地呈现在浏览器 ...
- (译)2019年前端性能优化清单 — 上篇
(译)2019年前端性能优化清单 - 上篇 (译)2019年前端性能优化清单 - 中篇 (译)2019年前端性能优化清单 - 下篇 写在译前:首先介绍一下我自己,一个跨行业的.完全非科班生的文科单身狗 ...
最新文章
- 革命性存储:易安ESATA系列产品详解
- 涨跌因子计算器下载哪里下载_网易超级计算器appv1-网易超级计算器v1下载
- Ubuntu通过apt-get安装指定版本和查询指定软件有多少个版本
- java resume过时方法_学点开发|关于Java多线程用法解析
- hikaridatasource连接池_细数springboot中的那些连接池
- JAVA实现N皇后问题(回溯法)
- 工业机器人维保调查表_《工业机器人系统集成及维护》课程建设调研报告
- Js+fromdata
- 【javaEE】——计算机基础知识(进程的理解和通信)01
- Flutter语言开发的高仿抖音App源码
- QCC3040---earbud init module
- NC Cloud参照过滤(主子表、单表、查询区、报表)
- 著书立说,就现在——IT东方会T-Book出书专场第二期圆满举办
- CSS 盒子模型(border、padding、margin)
- 电信运营商的 MBOSS 系统
- 水经注,bigemap 功能对比
- python3.4教程_Python教程(四)
- 【面试大全-缓存】-Redis有哪些适合的场景
- 苹果应用商店审核指南中文翻译
- 最多有多少个点在一条直线上
热门文章
- Oracle Dump 分析学习总结
- ITCAST视频-Spring学习笔记(使用JDK中的Proxy技术实现AOP功能)
- Python2与Python3的区别:
- Bootstrap入门(二十一)组件15:警告框
- 根据文字计算Label的尺寸
- Linux Shell常用技巧(七)
- [Mac技巧]Mac下显示隐藏文件
- Aspx页面中直接编写javascript脚本
- QSAR生命的发动机卟啉c20h14n4---用反向传导做卟啉的分子模型
- Paper Reading: Papers in Frontiers of NLP 2018 collection