Performance API | 青训营笔记-前端监控平台

170 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天

Performance API

属性

  1. navigation

    返回一个对象,这个对象表示出现在当前浏览上下文的 navigation 类型,比如获取某个资源所需要的重定向次数。

    eg

    navObject = performance.navigation;
    
  2. timeOrigin
    返回一个表示 the performance measurement 开始时间的高精度 timestamp

    eg

    var timeOrigin = performance.timeOrigin
    
  3. timing
    返回一个 PerformanceTiming 对象,这个对象包括了页面相关的性能信息。

    eg

    timingInfo = performance.timing;
    

方法

  1. Performance.clearMarks()
    用途:从浏览器的 performance entry 缓存中移除声明的标记。
    用法:

    performance.clearMarks();
    performance.clearMarks(name);
    

    注:name表示时间戳的名字,无参数时删除所有带entry type的entries,无返回值。

    eg

    function clear_mark(name) {
    if (performance.clearMarks === undefined) {
        console.log("performance.clearMarks Not supported");
        return;
    }
    //移除所有标记了此名称的 peformance entry
    performance.clearMarks(name);
    }
    function clear_all_marks() {
    if (performance.clearMarks === undefined) {
        console.log("performance.clearMarks Not supported");
        return;
    }
    //从 performance 缓冲区中移除所有标记的 performance entry
    performance.clearMarks();
    }
    
  2. Performance.clearMarks()
    用途:从浏览器的性能入口缓存区中移除声明的度量衡。
    用法:

    performance.clearMeasures();
    performance.clearMeasures(name);
    

    注:name表示时间戳的名字,无参数时删除所有带entry type的measure,无返回值。

    eg

    function clear_measure(name) {
    if (performance.clearMeasures === undefined) {
        console.log("performance.clearMeasures Not supported");
        return;
    }
    // 根据给定的 name 移除所有标记类型为 "measure" 的性能入口
    performance.clearMeasures(name);
    }
    function clear_all_measures() {
    if (performance.clearMeasures === undefined) {
        console.log("performance.clearMeasures Not supported");
        return;
    }
    // 移除性能缓存区中所有标记类型为 "measure" 的性能入口
    performance.clearMeasures();
    }
    
  3. Performance.clearResourceTimings()
    用途:从浏览器的性能数据缓冲区中删除所有performance entries带有entryType“ resource”的内容,并将性能数据缓冲区的大小设置为零。
    用法:

    performance.clearResourceTimings();
    

    注:无参数,无返回值。

  4. Performance.getEntries()
    用途:此方法返回 PerformanceEntry 对象数组。 用法:

    entries = window.performance.getEntries();
    entries = performance.getEntries({name: "entry_name", entryType: "mark"});
    

    注:参数为字典,返回值为数组。

  5. performance.getEntriesByName()
    用途:返回一个给定名称和 name 和 type 属性的PerformanceEntry对象数组。 用法:

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

    注:参数为name字符串、type(可选),返回值为数组。

  6. performance.getEntriesByType()
    用途:返回给定类型的 PerformanceEntry 列表。
    用法:

    entries = window.performance.getEntriesByType(type);
    

    注:参数为type字符串,返回值为数组。

  7. Performance.mark() 用途:在浏览器的性能缓冲区中使用给定名称添加一个timestamp(时间戳) 。
    用法:

    performance.mark(name);
    

    注:参数为name字符串,返回值为创建的PerformanceMark条目。。

  8. Performance.measure()
    用途:在浏览器性能记录缓存中创建了一个名为时间戳的记录来记录两个特殊标志位(通常称为开始标志和结束标志)。 被命名的时间戳称为一次测量(measure)。
    用法:

    performance.measure(name, startMark, endMark);
    

    注:参数为name(测量名字)、startMark(开始时间戳的名字)、endMark(结束时间戳的名字),返回值为创建的PerformanceMeasure条目。。

  9. Performance.now()
    用途:从time origin之后到当前调用时经过的时间
    用法:

    const t = window.performance.now();
    
  10. performance.setResourceTimingBufferSize()
    用途:将浏览器的资源计时缓冲区大小设置为指定数量的“ resource”performance entry type对象。
    用法:

    performance.setResourceTimingBufferSize(maxSize);
    

    注:参数为maxsize,无返回值。

  11. performance.toJSON()
    用途:返回性能对象属性的 JSON 表示。 用法:

    var js;
    js = window.performance.toJSON();
    

事件

  1. Performance: resourcetimingbufferfull event
    说明:当浏览器的资源计时缓冲区已满resourcetimingbufferfull时触发该事件。
    用法:
    function buffer_full(event) {
    console.log("WARNING: Resource Timing Buffer is FULL!");
    performance.setResourceTimingBufferSize(200);
    }
    function init() {
    // Set a callback if the resource buffer becomes filled
    performance.onresourcetimingbufferfull = buffer_full;
    }