2021年终总结

前言

2022年了，我居然还在阿里干外包，是什么支撑下去的，曾经打死也不做外包的小伙子，如今马上就要待满3年了。剩下的时间已经不多了，多想外包生涯停留在3年内，离开的想法越来越强烈。今天是2022.2.7正月初七，开工上班，天降大雪。

工作

2021前半年带我的正式员工走了，接下来项目组走了不少人，同时又来了不少人，毕竟是阿里吗，不缺人来。在5月份的时候我也面了一家国企，福利什么的都很好，就是工资稍微低了，和主管沟通之后说可以把工资涨到我满意，就这样我考虑留下来了。接下来的一段时间就开始跟着另一个正式员工继续做消消乐项目（前端就我们两个，她负责游戏局内，我负责游戏玩法），一直做到年底消消乐项目才开始稳定迭代，不需要这么多人手。我开始转向其他项目，从这个项目开始，评审会、代码什么的都是我在写，那个带我的主管开始转向幕后，旁边做做指导，codereview这样，有什么特别难搞的东西才会出面。大部分的需求也都能按时完成，整个产品经理不知道是刚来的原因还是其他什么原因，总是动不动就要改东西，测试都测完了又要加需求改页面，开会开到爆，反攻无数次，弄的我们开发人员苦不堪言。直到大年三十前一天才总算平静下来。总的来说这一年工作上还算看的过去，干外包自己能学到什么东西，跟主管还是有很大的关系的。在做消消乐项目的时候就学到了很多优化相关的技术，因为对于他们正式员工来说，性能是和kpi挂钩的。

生活

2021年初的时候相亲了一个老家的妹子，认识一周订婚了，回杭州的时候把她带来了杭州。我们3月份一起备考公务员（我们双双落榜）她心情很失落，我倒是没什么感觉，没考上就没考上，准备20天能进面试就见鬼了，我一遍一遍的安慰她不要灰心重新振作，一切有我呢。五一一起去塘栖古镇游玩，因为她说喜欢吃西瓜，整个暑假我每天提一个西瓜回去。暑假结束教培行业倒了，她跟着一起失业了，我请了几天假陪着她一起回了老家看望双方父母。回来杭州之后约了婚纱摄影，去湘湖拍了婚纱照，中秋去盐官看了钱塘江大潮（很一般，并没有他们说的那么震撼）。十一我们一起去了山东威海旅游，九龙湾、韩乐坊、刘公岛、海水浴场，画中画...我们玩的很开心，去威海之前，在上海转乘，也就在上海过了一夜，和堂妹在外滩看了一晚的灯光秀，不过那天南京东路地铁突然停运了，我们只得从南京路步行街走到人民广场（累🥱），我们还计算了旅游的花费，上海一天，威海3天总共4k多一点，我以为会很多，计算完居然还好。10月底我们回家在亲朋友好的见证下领证结婚了，往后的日子要一起走了。本想年底回家过年好好的去走走亲戚的，没想到计划赶不上变化，她因为工作原因必须留在杭州，不能出省。就这样我们两第一次在外地过年，我领了500消费券，她又因为公司的原因不能领过年消费券，500的消费券必须要其实就是满1000减500（😔）。本以为消费券很多，没想到2天就用没了，每天领的红包不是10块就是15块（好气哦）。回想这一年，她忙时我做饭，我忙时她做饭，要是我们都不想做饭就一起出外面吃，日子就这样过着。她这一年也是曲曲折折，工作也是换了又换，加上临近结婚需要用钱，也是因为这个原因我选择一直待在这里，最起码目前还是有一份稳定的收入，今年可不能再这样，父母安康，老婆也有了稳定的工作，我要考虑去外面闯一闯了，外包不是最终的归宿。

学习

从2020年开始我一直在github提交代码，下半年一直在研究webpack，啃了半年，似乎还是一知半解，总体上知道个大概。放缓了写博客的步伐，2021全年在博客园只写了12篇博客，一来自己认识到文章质量的重要性，二来没有时间，这三年来在外包一年一个职级，刚进来是中级，第二年是高级，去年是资深，相应的工作就会变得更繁重，很多杂七杂八的事都要处理，很难有自己的时间去学习一些提升的东西；慢慢有了家庭，精力难免会被分散，以前回到家可以再学习一会，现在下班之后要照顾家里，要和老婆唠嗑，要一起做饭打扫卫生，要增进感情。人都是有温度的，也慢慢越向往老婆孩子热炕头的安宁日子，想要稳定的工作。不过我依旧想留在互联网行业，很简单，快节奏适应慢节奏很容易，慢节奏适应快节奏确认难，不得不承认在互联网公司能学到的技术经验一定比非互联网更多。很多周末都会去图书馆或者星巴克看书、做题、学习新东西。过去一年的学习不够充实，学到的新技能并不多，虽然我可以独立应付现在工作中产品需求，但是能做出一个东西来不是最基本的要求吗，时刻要挖掘自己的剩余价值。性能问题和体验问题都是前端要着重考虑的。我想接下来还要系统梳理一下过去一年工作中、学习中遇到的问题和解决问题的过程，如何能做的更好，减少bug产出。

webpack与工程化

说到工程化，我们首先的反应就是webpack打包工具,这个在工作中基本不会用到，webpack层面的基本包在脚手架上，我们开发业务系统时直接拿来使用的，相应的代码切割、按需加载、tree-shaking、代码压缩什么的都是弄好的。我在学习webpack的过程中也都是一点一点剥离开来自己写demo来看的。学习的时候会觉得工程化把原本简单的js、css、html变得复杂了，其实不然，遇到相对复杂的系统直接使用三剑客是很难进行后续的开发扩展和维护的，引入模块化、工程化的思想会让我们把复杂的业务逻辑梳理顺畅，便于后续维护。webpack帮助我们将js模块打包成js bundles,我们不需要关心打包的过程，只需要把打包之后的bundle文件在html通过script标签引入一下，这一步其实也都可以包在脚手架里头。webpack按需加载和代码切割是组合使用的，将需要的动态引入的js专门打包至一个bundle文件，直到需要引入的时候动态的构造一个script标签引入。tree-shaking是指在打包过程中移除自始至终都没有用到过的代码，这项技术依赖于es module可以支持代码的静态分析，即模块之间的依赖关系可以在代码编译之前搞的清清楚楚，因此我们可以知道哪些代码没有用到（dead code），构建的时候可以将其移除。代码压缩我们第一时间就会想到uglify.js，但是它和webpack、es module放在一起使用就要特别注意，uglify压缩代码和babel解析es6成es5的先后次序问题，因为直接让uglify压缩es6的代码就会报不知名错误或者直接不压缩，很容易发生白屏等严重影响体验的前端问题。

react前端技术栈

react是工作中的使用的唯一的技术栈，最近3年一直在使用react技术栈开发系统，这都是阿里这边钉死的，我们不能使用其他技术栈。在使用react开发项目的时候，经常会发生子树重新渲染的问题，函数式组件React.memo、useCallback和useMemo等进阶的hook就要合理的运用起来。还有一个很常见的问题就是使用了定时器，就要在不使用或者页面销毁前及时销毁它，不然整个页面突然崩了，当然事件监听（点击，触摸等）也是同理。一些常用的组件尽量不要自己写，轮播、倒计时、虚拟列表等等，要有工具思维，先去react生态周边找找大神写的组件。我们使用的是函数式组件（react function components+cssModule+ts）开发项目模块，基本上一些可复用的代码都会抽成自定义的hooks，对于请求这一层，我们通常会抽成一个复用的函数，然后需要调用接口的时候统一通过传入参数调用这个函数，这样我们可以统一的进行请求错误处理、加请求锁、数据mock等操作。

其他

还有一些其他的东西也在学习，浏览器相关的内容，开发过程中我们比较在意首屏时间（即从白屏之后第一次有内容展示在页面上的这段时间），浏览器解析文档的过程，js操作dom会阻塞文档渲染（超过浏览器的刷新帧率页面会卡顿）等。当然首屏展示的内容基本上就是一张图片，是不能正常交互的，这里就引出了可交互时间和DOMContentLoaded周期函数，可交互时间顾名思义就是我们用户从进入页面开始到可以正常操作系统页面（即首页所需的请求数据返回后再渲染的页面）的等待时间。DOMContentLoaded 事件被触发的时机是初始的HTML文档被完全加载和解析完成之后，而无需等待样式表、图像和子框架的完全加载（这是mdn上的原话，我觉得解释的很清楚），即标签都已经加载解析完成的时候，链接的资源可能还没完全加载，这个在chrome开发者工具可以观察到。还有一些动画相关的,css有帧动画(animation)和过渡动画(transition),这两项都是比较简单的，一般来说要和transform搭配，才会取得不错的效果。js动画我们就要结合浏览器刷新频率了，这里需要提到requestAnimationFrame(),该方法接收一个回调函数fn作为参数，这个钩子会在浏览器的下一次重绘之前调用fn，fn默认带了一个时间戳的参数（与performance.now等值）,该方法与浏览器同等刷新，所以这是js写动画的首选。当然Element.animate(keyframes,options)也是可以的，这个和css animation大同小异，不过有一点要特别注意：Element.animate(keyframes,options)中options没有fillMode属性，换成了fill属性，当时看源码才发现。

总结

我觉得过去一年还是学到一点东西，只是多少的问题，只要在工作岗位上应该多多少少都能获得一点东西。对技术怀敬畏之心，多学习，多思考，希望2022能顺利的找个更好的工作。