基于TypeScript+D3.js的排序算法可视化应用内存测量需求

核心思路 #

要展示排序时的内存占用，我们可以利用Chromium内核浏览器（Chrome/Edge等）支持的performance.memory API获取内存数据，重点统计两个实用指标：

• 排序过程中的峰值内存占用（最能反映算法的内存开销）
• 排序前后的内存使用增量

代码修改实现 #

以下是加入内存统计逻辑后的完整按钮点击事件代码：

let sortingInProgress = false
let timeInfo = '0.00 s'
let memoryInfo = '0 MB'
let peakMemory = 0
let memorySampler: number | null = null

const sortingPromise = new Promise<void>(resolve => {
    START_BUTTON.addEventListener('click', async () => {
        if (sortingInProgress) {
            console.log('stopped')
            return
        }
        sortingInProgress = true
        START_BUTTON.disabled = true
        SELECT_DATA_SIZE.disabled = true
        SELECT_SORTING_ALGORITHM.disabled = true

        // 初始化内存统计
        if (!performance.memory) {
            memoryInfo = '浏览器不支持内存统计'
        } else {
            const initialMemory = performance.memory.usedJSHeapSize
            peakMemory = initialMemory
            // 启动内存采样定时器，每10ms记录一次峰值
            memorySampler = window.setInterval(() => {
                const currentMemory = performance.memory.usedJSHeapSize
                if (currentMemory > peakMemory) {
                    peakMemory = currentMemory
                }
            }, 10)
        }

        const startTime = performance.now()
        const sort = SelectAlgorithm(data, algorithmType)
        await sort(updateBars)
        const endTime = performance.now()

        // 停止采样并计算内存数据
        if (memorySampler) {
            clearInterval(memorySampler)
            memorySampler = null
            // 转换为MB单位（1MB = 1024*1024字节）
            const peakMemoryMB = (peakMemory / (1024 * 1024)).toFixed(2)
            const memoryDeltaMB = ((peakMemory - performance.memory.usedJSHeapSize) / (1024 * 1024)).toFixed(2)
            memoryInfo = `峰值: ${peakMemoryMB} MB | 增量: ${memoryDeltaMB} MB`
        }

        const totalTime = ((endTime - startTime) / 1000).toFixed(2)
        timeInfo = `${totalTime} s`

        resolve()
    })
})

sortingPromise.then(() => {
    svg.selectAll('rect').style('fill', 'black')
    sortingInProgress = false
    SELECT_DATA_SIZE.disabled = false
    SELECT_SORTING_ALGORITHM.disabled = false
    SORT_TIME.textContent = timeInfo
    // 假设页面有一个用于展示内存的DOM元素，比如id为memory-info的span
    if (typeof MEMORY_INFO !== 'undefined') {
        MEMORY_INFO.textContent = memoryInfo
    }
})

关键细节说明 #

• 内存采样逻辑：用定时器定期采样内存数据，确保能捕获排序过程中的内存峰值（单次采样无法反映动态变化的内存情况）
• 兼容性处理：先判断performance.memory是否存在，避免在不支持的浏览器上抛出错误
• 单位转换：将浏览器返回的字节数转换为用户更易读的MB单位
• DOM展示：需要在页面中添加一个用于显示内存信息的元素（例如<span id="memory-info"></span>），并在代码中对应引用

注意事项 #

• performance.memory是Chromium专属的非标准API，Firefox等浏览器暂不支持；若需更广兼容，可尝试使用PerformanceObserver监听内存性能条目，但兼容性仍有限
• 采样间隔可按需调整：间隔越小统计越精准，但会带来轻微性能开销，10ms是兼顾精度与性能的均衡选择

内容的提问来源于stack exchange，提问作者IvonaK