网页性能监控自定义小插件

为了实现一个可以监控网页性能指标的小面板，可以通过Chrome的Performance API结合前端框架如Vue.js来创建自定义UI组件。

下面的方法展示了如何构建此功能：

1、HTML部分用于显示当前JavaScript堆栈使用的内存信息以及时间戳：

<div id="performancePanel" class="windows" style="position: fixed; top: 10px; left: 48%; z-index: 100; padding: 10px; color: #00ff51; background-color: black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)">
    当前JS对象占用的内存大小 {{ memory.usedJSHeapSize }} MB <br />
    总可用内存 {{ memory.totalJSHeapSize }} MB <br />
    内存大小限制 {{ memory.jsHeapSizeLimit }} MB <br />
    时间戳 {{ memory.timer }} s
</div>

2、JavaScript代码负责读取并更新上述HTML元素的数据：

import { onMounted } from 'vue';
const memory = reactive({
  usedJSHeapSize: 0,
  totalJSHeapSize: 0,
  jsHeapSizeLimit: 0,
  timer: 0,
});

function updateMemoryInfo() {
  if ('memory' in performance) {
    memory.usedJSHeapSize = Math.ceil(performance.memory.usedJSHeapSize / (1024 * 1024));
    memory.totalJSHeapSize = Math.ceil(performance.memory.totalJSHeapSize / (1024 * 1024));
    memory.jsHeapSizeLimit = Math.ceil(performance.memory.jsHeapSizeLimit / (1024 * 1024));
  }
  memory.timer++;
}

setInterval(updateMemoryInfo, 1000);

onMounted(() => {
  // 初始化时立即获取一次数据
  updateMemoryInfo();
});