带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器（2）

带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器（1）https://developer.aliyun.com/article/1349482?groupCode=tech_library

3） memory

performance.memory 属性提供了与内存使用情况相关的性能指标，可以帮助我们了解页面的内存限制、已使用内存、垃圾回收次数等信息。

以下是一些常用的 memory 属性：

• performance.memory.jsHeapSizeLimit：表示 JavaScript 堆的大小限制。
  
• performance.memory.usedJSHeapSize：表示已使用的 JavaScript 堆大小。
  
• performance.memory.totalJSHeapSize：表示 JavaScript 堆的总大小。
  

这些 memory 属性可以用于监控页面的内存使用情况，及时发现内存泄漏或过度使用内存的问题。

示例代码：

console.log(`JavaScript 堆大小限制: ${performance.memory.jsHeapSizeLimit}`);
console.log(`已使用的 JavaScript 堆大小: ${performance.memory.usedJSHeapSize}`);
console.log(`JavaScript 堆的总大小: ${performance.memory.totalJSHeapSize}`);

4） navigationTiming

performance.getEntriesByType('navigation') 方法返回与页面加载时间相关的详细信息，提供了更详细的页面加载时间指标，如重定向时间、解析 DOM 树时间、首次渲染时间等。

以下是一些常用的 navigationTiming 属性：

• navigationTiming.redirectTime：表示重定向时间。
  
• navigationTiming.domInteractiveTime：表示 DOM 解析完成的时间。
  
• navigationTiming.domContentLoadedTime：表示 DOMContentLoaded 事件触发的时间。
  
• navigationTiming.loadEventTime：表示 load 事件触发的时间。
  

这些 navigationTiming 属性可以用于更细粒度地分析页面加载的各个阶段所花费的时间。

示例代码：

const entries = performance.getEntriesByType('navigation');const navigationTiming = entries[0];
console.log(`重定向时间: ${navigationTiming.redirectTime}`);
console.log(`DOM 解析完成时间: ${navigationTiming.domInteractiveTime}`);
console.log(`DOMContentLoaded 事件触发时间: ${navigationTiming.domContentLoadedTime}`);
console.log(`load 事件触发时间: ${navigationTiming.loadEventTime}`);

5） 其他方法

Performance API还提供了一些其他方法，用于测量和记录时间戳、添加标记、计算代码执行时间等。

以下是一些常用的方法：

• performance.now()：返回当前时间戳，可用于测量代码执行时间。
  
• performance.mark()：添加一个时间戳标记，用于记录关键时刻。
  
• performance.measure()：计算两个时间戳标记之间的时间间隔。
  
• performance.getEntriesByName()：获取指定名称的时间戳标记信息。
  

这些方法可以帮助我们精确测量代码的执行时间和关键事件的发生时间。

示例代码：

const startTime = performance.now();
// 执行一些耗时的操作
const endTime = performance.now();const executionTime = endTime - startTime;
console.log(`代码执行时间: ${executionTime} 毫秒`);
performance.mark('start');// 执行一些操作
performance.mark('end');
performance.measure('操作耗时', 'start', 'end');const measurements = performance.getEntriesByName('操作耗时');
console.log(`操作耗时: ${measurements[0].duration} 毫秒`);

带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器（3）https://developer.aliyun.com/article/1349480?groupCode=tech_library