#自绘控件

avatar
给你们讲一个懒猫相册开发者的故事吧 时间拉到2022年，那时候公司入职了一个小伙子 擅长写Vue和玩Linux，小伙子平时不太喜欢说话，所以第一个月就没有怎么管。那时候我们正在测试硬件模具，看了小伙子写代码能力还可以，我说开发相册App吧，然后我就去深圳了。 过了半个月回来的时候，问进度，同事说小伙子骑自行车摔了一跤，把手臂摔断了。哎呀，怎么这么不小心啊 等小伙子手好了，就继续开始写相册，第一版懒猫相册写出来的时候被我狠狠的喷了。我说用户有可能有30万张图片，你们怎么用传统的Web控件就开始写了？浏览器的原理，如果超过2000个DOM元素，像Vue和React这种响应式前端框架，光首次layout计算都需要很长时间，而且你们为了上传去重，居然每个相册都用md5计算？你们知道万一用户手里是一个红米那样的渣渣手机呢？图片还没有上传，手机的电都被你们暴力算md5算没电了 那天我这个商务真的对研发的同学好一顿教育啊，哎，教育是教育，等消了气，我又给全体前端开发做了一次前端技术培训。 培训的内容主要讲解动画的原理，怎么通过自绘、逐帧曲线变化，来欺骗用户的视觉，形成流畅的自绘控件。自绘控件的原理就是通过画布绘制，把相册这种几十万的对象的场景，从传统的DOM指数性能消耗，减少为单屏的常量绘制。因为像相册这样，你是不可能把几十万的对象都弄成DOM的，而且Vue/React这种动态属性绑定的设计，尤其耗费性能，几十万对象一上去，layout非常耗时（白屏），任何操作都会让浏览器性能榨干，甚至内存过爆卡死。而自绘控件永远都只用绘制可视范围内的对象，现代计算机绘制任何一个屏幕的内容都是非常非常快的，只用做好动画帧分解就好了。 讲完自绘后，我又讲了为了动画流畅，我们可以适当的实现双缓冲，简而言之，就是你的绘制对象要超过用户的屏幕，这样当用户滚动的时候，屏幕外的内容已经准备好了，就不用每次滚动都需要重新绘制，减少因现绘制导致的屏幕反复闪烁。 为了让同学们听懂，我在白板上用画静态图片的方式一帧一帧的讲解，画了整整两白板，甚至还表演起来了动画的变化。 当时下课的时候，我问同学们听懂了没？大家似懂非懂的点点头。我讲完又去深圳整硬件了，因为快过年了，要赶进度，出差路上我还在想，虽然自绘控件可以解决任何超多对象的图形App性能问题，但是真的要做到极限性能，需要对图形绘制的原理、坐标的计算还有数据结构的设计都要想的非常清晰才行，要不很容易写出意大利面条的代码，无法维护。当时我还在整硬件，就那么想了想，没有对小伙子能够实现自绘抱有希望。 春节后上班第一天，相册1.0就写出来了，我当时听了非常震惊，我说怎么做到的？同事说，相册的小伙子春节一天都没回家，就在武汉吃泡面，吃了20天，一个人从零写了相册的自绘控件。 我靠，他居然没回家啊？ 我用了一下新版相册，非常惊喜，看来小伙子完全懂了。新版的相册利用了自绘和双缓冲，实现30万张照片任意拖拽，0.5秒内把家中照片全部绘制到用户的手机上，使用体验非常棒，我们应该是5G云相册里面缩略图显示最快的厂商了，这完全归功于懒猫相册的开发者，从零撸的自绘控件。 你们看，一个应届毕业生，只要又决心，用心学习，死磕就可以快速成长为技术大牛！ 好了，今天的故事就讲到这里了，喜欢我们创业故事的朋友，欢迎点赞、收藏、转发 喜欢我们产品的老板，欢迎购买懒猫微服，评论区打1有优惠！
从月薪1800到被裁后独立开发，程序员的逆袭之路· 29 条信息
#懒猫相册 #开发者故事 #技术突破 #性能优化 #应届生 #自绘控件 #Vue #React