Question

我正在创建类似于快速拨号表单的扩展名。
它会创建带有图像缩略图的新标签页 screenshot以便更好地理解

这些图像是从base64数据库的数组中读取的在html中，我有容器div，其中我从数组循环创建缩略图。我一直在尝试不同的方法来实现小的（合理的）内存使用，但没有运气。

这是一个

 chrome.storage.local.get('imgArray', function (result) {
    var imgArray = result.imgArray;

    var cnt = document.createElement('div');
    cnt.id = 'contaier';
    cnt.style.left = l+'px';
    cnt.style.bottom = 0+'px';
    cnt.style.width = l2+'px';
    document.body.appendChild(cnt); 

    for (var i=0, l=imgArray.length; i<l; i++) {
        var sp = document.createElement('div');
        sp.id = lv.id;
        sp.className = 'thumbNail';
        cnt.appendChild(sp);
        sp.setAttribute("style", "background-image: url('" + imgArray[i].ss2 + "');");  

        /* other minor elements.... not important*/
    }

    imgArray=null;
});

每次调整窗口大小时，内存都会以10-20MB的速度跳跃，并且累积速度非常快，因此我可以轻松获得400-500MB的内存使用量，用于20-25个小图像预览。

我确实在创建缩略图时使用了不同的img尺寸，所以我有大约的图像。 1000x500px （imgArray [i] .ss）和500x250px （imgArray [i] .ss2）
较小的图像确实消耗较少的内存（不多）但仍然是mem。积累是一样的......

使用canvas的另一种方法，以避免bg-image：

for (var i=0, l=imgArray.length; i<l; i++) {
    (function(lv) {
        var sp = document.createElement('div');
        sp.id = lv.id;
        sp.className = 'thumbNail';
        cnt.appendChild(sp);

        var canvas = document.createElement("canvas");
        canvas.className = 'stImg';

        var ctx = canvas.getContext("2d");


        var img = new Image;
        img.onload = function(){
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
        img.src = lv.ss2;       

        sp.appendChild(canvas);     

    }(imgArray[i]));        
}

我也尝试使用img元素，在thumbnail div中。取消原始阵列有点帮助，但这不是一个真正的问题我必须使用base64图像，基本上每次重绘DOM都会占用内存，永远不会释放它....

有没有办法保持低内存使用率？或者一些避免重绘的技术（如果这首先是实际问题）......

使用base64图像时出现内存泄漏

0 个答案: