获取图片的占用内存大小

利用一次异步请求

# 利用fetch来请求, 需要注意的是这种请求会受到同源策略的限制
fetch('http://example.com/a.png', {
    headers: {
        responseType: blob,
    }
}).then( blob => blob.size)
  .catch( e => e);

利用canvas转blob来获取size

async function getImgSize(url) {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    const img = document.getElementById("tulip");
    context.drawImage(img, 0, 0);
    const blob = await canvas.toBlob(blob => blob);
    return blob?.size || 0;
}

利用performance来获取

const imgElems = document.getElementsByTagName('img');
for ( let i=0, len = imgElems.length; i < len; i++ )
{
    const url = imgElems[i].src || imgElems[i].href;
    if (url && url.length > 0)
    {
        const iTime = performance.getEntriesByName(url)[0];
        console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize
    }
}

需要注意到是，上诉三种方法都受到同源策略的限制

如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。