【JS 基础】performance.getEntries方法

目录

1. performance.getEntries方法

一

浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。而通过window.performance.getEntries方法，则可以以数组形式，返回这些请求的时间统计信息，每个数组成员均是一个PerformanceResourceTiming对象！

进而可获取页面所有资源总大小！

统计页面上的静态资源加载耗时与资源大小：

(function () {

    // 浏览器不支持 return false

    if (!window.performance && !window.performance.getEntries) {

        return false;

    }

 

    var result = [];

    // 获取当前页面所有请求对应的PerformanceResourceTiming对象进行分析

    window.performance.getEntries().forEach(function (perf) {

        result.push({

            'url': perf.name,

            'entryType': perf.entryType,

            'type': perf.initiatorType,

            'duration(ms)': perf.duration,
            
            'name': perf.name,       
            'encodedSize': perf.encodedBodySize,         
            'decodedSize': perf.decodedBodySize  

        });

    });

 

    // 控制台输出统计结果

    console.table(result);

})();

注意：performance.getEntries方法获取的有些资源的 encodedSize 与 decodedSize 为 0 或者为 undefined

总结

• performance.getEntries方法获取的有些资源的 encodedSize 与 decodedSize 为 0 或者为 undefined