简介

performance是html5的新特性之一,通过它,页面的开发者们可以非常精确的统计到自己页面的表现情况,从而有针对性的进行优化,提升用户体验。

下面是小姐姐对performance相关API的学习总结,一起上车吧~

performance.timing

返回一个PerformanceTiming对象,用来获取完整的页面加载信息。

是时候祭出这张图了:

我们会比较关注的几个时间段及其耗时的计算方法如下:

  • DNS解析:timing.domainLookupEnd - timing.domainLookupStart
  • 建立连接:timing.connectEnd - timing.connectStart
  • 发送请求:timing.responseStart - timing.requestStart
  • 接收请求:timing.responseEnd - timing.responseStart
  • 解析DOM树:timing.domInteractive - timing.domLoading
  • 页面加载完成:timing.domContentLoadedEventStart - timing.domInteractive
  • DOMContentLoaded事件耗时:
    timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart
  • DOM加载完成:timing.domComplete - timing.domContentLoadedEventEnd
  • DOMLoad事件耗时:timing.loadEventEnd - timing.loadEventStart

performance.now

返回一个DOMHighResTimeStamp对象,获取从timing.navigationStart开始到调用该方法的时间,精确到千分之五毫秒(5微秒)。

下面是该方法的使用场景之一:通过计算代码块的起始位置以及结束位置performance.now()的差值,来获取一个比较精确的代码执行时间。

看代码:

var startTime, endTime;

startTime = window.performance.now();

doSomething();

endTime = window.performance.now();

console.log(endTime - startTime);

资源性能数据

performance提供若干API允许我们对页面中加载的资源进行性能分析。

performance.getEntries

获取一组当前页面已经加载的资源PerformanceEntry对象。接收一个可选的参数options进行过滤,options支持的属性有nameentryTypeinitiatorType

var entries = window.performance.getEntries();

返回值如下图所示:

  • name,根据entryType不同,该值有不同含义。entryTyperesource时,name表示资源的路径。
  • entryType,取值有:resourcemarkmeasure等,详情戳这里
  • initiatorType,初始化该资源的资源类型:

    - 初始化资源是一个`Element`时,取值为节点的`localName`,通过`element.localName`获取。
    - 初始化资源是一个`css`文件时,取值为`css`。
    - 初始化资源是一个`XMLHttpRequest`时,取值为`xmlhttprequest`。
    - 初始化资源是一个`PerformanceNavigationTiming`对象时,取值为空字符串。
  • startTime,一个DOMHighResTimeStamp对象,开始获取该资源的时间。
  • duration,一个DOMHighResTimeStamp对象,获取该资源消耗时长。

performance.getEntriesByName

根据参数nametype获取一组当前页面已经加载的资源数据。name的取值对应到资源数据中的name字段,type取值对应到资源数据中的entryType字段。

var entries = window.performance.getEntriesByName(name, type);

performance.getEntriesByType

根据参数type获取一组当前页面已经加载的资源数据。type取值对应到资源数据中的entryType字段。

var entries = window.performance.getEntriesByType(type);

performance.setResourceTimingBufferSize

设置当前页面可缓存的最大资源数据个数,entryTyperesource的资源数据个数。超出时,清空所有entryTyperesource的资源数据。

window.performance.setResourceTimingBufferSize(maxSize);

performance.onresourcetimingbufferfull

entryTyperesource的资源数量超出设置值的时候会触发该事件。

performance.clearResourceTimings

移除缓存中所有entryTyperesource的资源数据。

自定义计时接口

performance.mark

创建一个DOMHighResTimeStamp保存在资源缓存数据中,可通过performance.getEntries()等相关接口获取。

  • entryType为字符串mark 
  • name为创建时设置的值
  • startTime为调用mark时的时间
  • duration为0,因为mark没有时长
window.performance.mark(name)

performance.clearMarks

移除缓存中所有entryTypemark的资源数据。

performance.measure
计算两个mark之间的时长,创建一个DOMHighResTimeStamp保存在资源缓存数据中,可通过performance.getEntries()等相关接口获取。

  • entryType为字符串measure 
  • name为创建时设置的值
  • startTime为调用measure时的时间
  • duration为两个mark之间的时长
window.performance.measure(name, startMark, endMark);

performance.clearMeasures

移除缓存中所有entryTypemeasure的资源数据。

performance.navigation

返回一个PerformanceNavigation类型的只读对象:

  • type,进入页面的方式:

    - `TYPE_NAVIGATENEXT(0)`,通过点击链接,书签,在浏览器地址栏输入地址,或者通过脚本跳转
    - `TYPE_RELOAD(1)`,通过点击页面内的刷新按钮,或者通过`Location.reload()`方法
    - `TYPE_BACK_FORWARD(2)`,通过点击页面内的前进后退按钮
    - `TYPE_RESERVED(255)`,其他方式
  • redirectCount ,表示到达此页面之前经过多少次重定向。

performance.toJSON

返回一个包含performance对象所有属性的JSON对象。

THE END

以上就是全部内容啦,有意见或者建议欢迎积极留言哦,笔芯~

HTML5 Performance的更多相关文章

  1. 2018年html5入门到精通教程电子书百度云盘下载共22本

    名称 查看 <HTML5启动和运行>(HTML5.Up.and.Running)扫描版[PDF] 下载 <Pro HTML5 Performance>(Pro HTML5 Pe ...

  2. (转) [it-ebooks]电子书列表

    [it-ebooks]电子书列表   [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...

  3. 使用Javascript监控前端相关数据

    项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 functi ...

  4. Web性能优化系列

    web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 同时,本系列将还会穿插浏览器兼容性相关问题的解决方案,因为在我看来,兼容性同样属于 ...

  5. HTML5的学习--performance获取加载时间的工具

    前段时间因为项目需要获取页面加载的时间,就去看了下HTML5中的performane. 可以用其获得页面详细的加载时间. 关于performance的详细内容可以查看 http://www.cnblo ...

  6. HTML5的学习--performance

    HTML5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析. 它是浏览器的直接实现,比在网页中用js设置D ...

  7. HTML5 学习总结(一)——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  8. 基于HTML5实现3D热图Heatmap应用

    Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...

  9. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

随机推荐

  1. List<T>去重复

    代码 class ListDistinctDemo { static void Main(string[] args) { List<Person> personList = new Li ...

  2. 极速体验|使用 Erda 微服务观测接入 Jaeger Trace

    在大型网站系统设计中,随着分布式架构,特别是微服务架构的流行,我们将系统解耦成更小的单元,通过不断的添加新的.小的模块或者重用已经有的模块来构建复杂的系统.随着模块的不断增多,一次请求可能会涉及到十几 ...

  3. MATLAB菜鸟入门笔记【作图章】

    1.函数标签[legend]         http://blog.csdn.net/wangcj625/article/details/6287735/

  4. 舒服,给Spring贡献一波源码。

    你好呀,我是歪歪. 这周我在 Spring 的 github 上闲逛的时候,一个 issues 引起了我的兴趣. 这篇文章,是我顺着这个 issues 往下写,始于它,但是不止于它: https:// ...

  5. svn服务支持网页显示并增加在线预览功能,支持视频在线播放

    1.svn服务器支持网页显示 VisualSVN Server是一个非常不错的SVN Server程序,方便,直观,用户管理也异常方便.不过,它本身并没有提供在线修改密码的功能.由于在实际使用过程中, ...

  6. 《手把手教你》系列基础篇(七十七)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 上篇(详解教程)

    1.简介 今天主要是讲解和分享:TestNG中一个类中有多个测试方法的时候,多个测试方法的执行顺序或者依赖关系的问题.如果不用dependsOnMethods,testNG会自动根据@Test方法名称 ...

  7. WPF中的事件及冒泡事件和隧道事件的区别

    WPF中的事件及冒泡事件和隧道事件的区别 冒泡事件表示事件从元素树向上到达根元素.这样您就可以在源元素的上方层级对象处理事件.例如,您可向嵌入的 Grid 元素附加一个 Button.Click 处理 ...

  8. OpenCV基础_二

    阈值和平滑处理 cv2.threshold()二值化函数 ret,thresh = cv2.threshold(src, thresh, maxval, type[, dst]) 参数 src:所要进 ...

  9. springboot通过maven下载依赖失败解决

    公司直接用不了内网遇到的好的坑.导入网上的springboot项目的启动入口一致有报错,如:Cannot resolve symbol 'SpringApplication' maven配置设置都做了 ...

  10. ITerm让MAC终端更加灵活高效

    一.ITerm2简介 1.安装 iTerm2 是一款完全免费的,专为 Mac OS 用户打造的命令行应用.直接在官网上http://iterm2.com/ 下载并安装即可. 2.配置 设置ITerm为 ...