内容简介：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。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 1.内存优化（一）内存泄漏
- 内存泄露与内存溢出的区别
- 谈谈对物理内存和虚拟内存的理解以及内存分配原理，一文彻底搞懂
- [译] 图解 Go 内存管理与内存清理
- Swoole 源码分析——内存模块之共享内存
- Swoole 源码分析——内存模块之内存池
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Head First HTML5 Programming（中文版）
埃里克•弗里曼 (Eric Freeman)、伊丽莎白•罗布森 (Elisabeth Robson) / 中国电力出版社 / 2012-9 / 78.00元
《Head First HTML5 Programming(中文版)》内容简介：你可能想创建具有动态性、交互性、包含丰富数据而且互连的Web页面。先等一下，Web页面？为什么不用HTML5创建成熟的Web应用呢？另外，为什么不使用现代技术，像在移动设备上一样轻松地应用到桌面浏览器呢？当然，你肯定希望使用最新的HTML5技术来完成，比如地理定位、视频、2D绘制、Web存储、Web工作线程等，是不是？......一起来看看 《Head First HTML5 Programming（中文版）》 这本书的介绍吧!
