JavaScript性能优化 - TimeLine 记录内存

82 阅读1分钟

在之前使用浏览器任务管理器来判断内存是否存在问题,而如果想去定位问题具体跟什么样的脚本有关,任务管理器就不是那么好用了。所以定位问题还要使用到时间记录内存变化的方式,来演示一下我们可以怎样更精确的定位到当前内存的问题跟哪一段代码是相关的或者说在什么时间节点上发生的。

这里我们就通过脚本编写完成,首先呢还是先说明一下这个里面我们接下来会做这样几个操作:第一放置一个 DOM 节点然后添加一个点击事件;第二在事件触发之后在JS内部去做两件事情,1. 通过创建大量的DOM节点来模拟内存的消耗、2. 通过数组的方式配合着其他方法形成一个非常非常长的字符串也去模拟当前大量的内存消耗。

<html>
<body>
    <button id="btn">Add</button>
    <script>
        const arrList = [];
        function test () {
            for (let i = 0; i < 1000000; i++) {
                document.body.appendChild(document.createElement('p'))
            }
            arrList.push(new Array(10000000).jion(x))
        }
        document.getElementById('btn').addEventListenter('click', test)
    </script>
</body>
</html>