一、需求场景：

最近闲来无事，boss提出了一个要求，研究相关代码并完成一个关于编辑图片功能的性能优化，该功能的主要界面展示如下：

通过了几分钟的短暂试用，发现就是一个简单的裁剪并保存用户选择并上传的图片作为用户头像的功能。

主要功能点如下：

1. 选择图片并上传。
2. 拖动中间选择区域的位置或者大小选择设置的图片区域。
3. 点击确定按钮，完成图片设置。

初步一看，貌似没有什么值得优化的地方，通过与boss深入了解后知晓，在选择容量较大（超过10MB）的图片时，浏览器响应速度会变得异常缓慢，具体表现是

拖动中间选择区域的位置或者大小时，大约3-4秒才响应一次，严重影响了使用者的用户体验，作为一名专（zhuang）业（bi）的前端人员来说，是完全不能容忍的。

二、性能分析：

作为一名专（zhuang）业（bi）的前端人员来说，遇到问题的首要肯定是先进行性能分析。一般来说浏览器的性能问题无非就是CPU和内存消耗占用。

通过对比查看性能管理器中的chrome内存占用后发现，选择大容量图片前，chrome的内存占用是883MB，而选择大容量图片后，chrome的内存占用达到了2232MB，

内存占用暴涨将近了200%！这就是出现性能问题的所在。事不宜迟，开始着手研究并解决问题。

三、查看代码：

通过查看代码，发现实现该功能的程序猿（也可能是媛）是通过在背景渲染一张完整的image，前景的图片选择区域设置一个透明度为0.3的蒙版（图中的黑色背景区域），

然后在选择区域（图中绿色方框）的背景区域再渲染一张image，再通过动态设置background-position的top、left和size来达到预览并获取选中区域图片的目的。

html结构如下：