100*100的 canvas 佔多少記憶體?
100*100的 canvas 佔多少記憶體?
在三年前端,面試思考 中提到了一個題目,非常有新意,這裡分享一下當時面試的思考過程。
解題思路
其實真正的答案是多少我並不清楚,面試過程中面試官也不期待一個準確的答案,而是看你的思考過程。
如果瞭解過 Canvas 且做過濾鏡相關的工作,可能呼叫過imageData = ctx.getImageData(sx, sy, sw, sh);
這個 API。我記得這個 API 返回的是一個 ImageData 陣列,包含了 sx, sy, sw, sh 表示的矩形的畫素資料。
而且這個陣列是 Uint8 型別的,且四位表示一個畫素。
我在面試的時候只能想起來這些資訊。猜想一下,我們在定義顏色的時候就是使用 rgba(r,g,b,a) 四個維度來表示,而且每個畫素值就是用十六位 00-ff 表示,即每個維度的範圍是 0~255,即 2^8 位,即 1 byte, 也就是 Uint8 能表示的範圍。
所以 100 * 100 canvas 佔的記憶體是 100 * 100 * 4 bytes = 40,000 bytes。