html2canvas库导致浏览器崩溃，内存泄露的排查与踩坑

问题

有一个项目有需要一个html生成图片的功能，找到了一个star数不错的库html2canvas使用。 深度使用发现，这个库生成速度一般，而且长期使用容易导致浏览器崩溃，尤其是生成很多图片之后。 这就促使我们排查问题，以及使用别的库替代。

排查

html2canvas库

90个图片转换的内存占用(30s)

运行过程中所用内容呈现一直上升的态势

html-to-image库

90个图片转换的内存占用(8s)

正常的曲线是锯齿形，能看出占用内存会被回收

对比后得出结论，html2canvas库存在内存泄露的问题（memory leak）

翻看html2canvas的github源码发现，有人在提交了一个pr解决内存泄露的问题

# Cleanup iframe first to prevent memory leaks, see #1609 #2949

翻看本地的node_modules文件夹，本地项目的代码并没有这段代码，看一下版本号

"html2canvas": "^1.1.4"

目前最新的版本是 1.4.1 ，项目里面落后了几个版本，那么我们升级到最新版再试试看👀

npm remove html2canvas -S && npm install html2canvas -S 

html2canvas库

90个图片转换的内存占用(27s)

变化不大，看来仍然有内存泄露问题，猜测是DOM引起的内存泄露（未清除DOM引用）

查看源代码，尝试在源代码加入：

    // dist/lib/dom/document-cloner.js
    // cleanup iframe first to prevent memory leaks, see #1609
        try{
            const iframe=container.contentWindow;
            container.src='about:blank';
            if(iframe) {
                iframe.document.write('');
                iframe.document.clear();
                iframe.close();
            }
        }catch {}

经测试仍然有问题，有空再做尝试。用html-to-image库作为替代使用。