monitor v8 memory usage in chrome based browsers.

memory-stats.vue

<template>
  <div ref="el" class="stats" :style="style">
    <div class="memory">
      Mem: {{ memory }}
    </div>
    <svg :viewBox="'0 0 60 '+chartHeight" class="chart" :style="'height: ' + chartHeight + 'px;'">
      <polyline
        :points="chartData"
      />
    </svg>
  </div>
</template>

<script setup>
import { useDraggable } from '@vueuse/core'
const memory = ref('')
const chartData = ref('')
const chartHeight = ref(40)
const chartBytes = []

const el = ref(null)

// `style` will be a helper computed for `left: ?px; top: ?px;`
const { style } = useDraggable(el, {
  initialValue: { x: window.innerWidth - 82, y: 2 },
})

const perf = window.performance || {}
// polyfill usedJSHeapSize
if (!perf && !perf.memory)
  perf.memory = { usedJSHeapSize: 0 }

if (perf && !perf.memory)
  perf.memory = { usedJSHeapSize: 0 }

// support of the API?
if (perf.memory.totalJSHeapSize === 0)
  console.warn('totalJSHeapSize === 0... performance.memory is only available in Chrome .')

// TODO, add a sanity check to see if values are bucketed.
// If so, reminde user to adopt the --enable-precise-memory-info flag.
// open -a "/Applications/Google Chrome.app" --args --enable-precise-memory-info

let lastTime = Date.now()
let lastUsedHeap = perf.memory.usedJSHeapSize
let msMin = lastUsedHeap
let msMax = lastUsedHeap

function updateChart() {
  const ms = lastUsedHeap
  msMin = Math.min(msMin, ms)
  msMax = Math.max(msMax, ms)
  chartBytes.shift()
  chartBytes.push(ms)
  chartData.value = chartBytes.map(b => b ? (b - msMin) / (msMax - msMin) : null).reduce((acc, cur, index) => cur ? `${acc}${index},${(1 - cur) * chartHeight.value} ` : '', '')
}

function bytesToSize(bytes, nFractDigit) {
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
  if (bytes == 0) return 'n/a'
  nFractDigit = nFractDigit !== undefined ? nFractDigit : 0
  const precision = Math.pow(10, nFractDigit)
  const i = Math.floor(Math.log(bytes) / Math.log(1024))
  return `${Math.round(bytes * precision / Math.pow(1024, i)) / precision} ${sizes[i]}`
}

function update() {
  // refresh only 30time per second
  if (Date.now() - lastTime < 1000 / 30) return
  lastTime = Date.now()

  const delta = perf.memory.usedJSHeapSize - lastUsedHeap
  lastUsedHeap = perf.memory.usedJSHeapSize
  const color = delta < 0 ? '#830' : '#131'

  const ms = perf.memory.usedJSHeapSize
  memory.value = bytesToSize(ms, 2)
  if (chartBytes.length < 60)
    chartBytes.push(ms)
}

let loop = true

requestAnimationFrame(function rAFloop() {
  update()
  if (loop)
    requestAnimationFrame(rAFloop)
})

const interval = setInterval(updateChart, 1000)

onBeforeUnmount(() => {
  loop = false
  clearInterval(interval)
})

</script>

<style scoped>
.stats{
  width: 80px;
  opacity:0.8;
  cursor:pointer;
  background-color:#020;
  position: fixed;
  z-index: 9999999;
  display: flex;
  flex-flow: column;
}
.stats .memory {
  color:#0f0;
  font-family:Helvetica,Arial,sans-serif;
  font-size:9px;
  font-weight:bold;
  line-height:15px;
  flex: 0 1 auto;
}
.stats .chart {
  background-color: #131;
  flex: 1 1 auto;
  margin: 2px
}
.stats .chart polyline {
  fill: none;
    stroke: #0f0;
    stroke-width: 1px;
}
</style>