大三前端第一次出去实习的工作总结

4,140 阅读20分钟

刚刚结束了从三月份开始的实习,离职当日刚刚好实习了四个月,这是我第一份实习,感觉自己在这个过程中懵懵懂懂也有了蛮大的成长,想法也发生了潜移默化的变化。而去年的这个时候我才刚刚踏上前端的旅程,心里还蛮多感慨的,因此想借这篇文章总结下这四个月里的感受和收获吧!

先简单描述一下我是如何找到这份实习的以及工作内容等一些基础情况吧

如何找的实习

回溯到三月份的时候,那时正是大家猛烈冲刺暑假实习的日子,看着暑假实习并不多的岗位,和我还处于小白菜级别的算法以及刚刚开课的计网,我每天都挺焦虑的。

做了几场笔试题,感觉很多东西都答不上来,再加上刚好是学长姐春招的时候,听到了很多学长学姐说有实习经历找工作会容易很多,就转战找日常实习了。

当时第一天投简历就收到了现在这家公司的邀请查看简历,然后约了面试。当时紧张的在牛客上疯狂研究它的面经,然后不断巩固自己的项目介绍和自我介绍。也是一些机缘巧合,刚好自己做的项目类型和技术栈挺契合公司的,就面进去了,于是就开始了我的实习之旅

工作内容与感受

部门的业务主要是做toB方向的后台系统的,同时我的mentor还负责组件库的升级更新,所以我也有幸接触到组件库的业务。

刚到公司主管就给我们几个实习生做了一个简单的培训,告诉了我们公司业务线的构成以及处理业务的流程,还给我定了个培训计划,看了几天公司的代码规范和项目代码就做了一些简单的加开关换样式等需求了。

第一个月--我的第一个大需求

刚来后几天mentor请假了几天,于是主管就临时给了我一个页面加载速度优化的任务,让我参考他提供的解决方案提升后台项目的首屏加载速度。

当时的我只知道webpack配置和性能优化一点皮毛的我,感觉几乎都翻遍了全网的性能优化的文章和webpack相关插件的文章了hhh,还经常问我的mentor和leader(PS:我的mentor/leader还有其他同事们都好好,经常问一些智障问题没被嫌弃),最后总算是做完发布上线了,加载速度优化了35%。也有幸得到了主管给的机会在其他前端面前分享并发到了公司分享平台上。

以前自己做项目的时候感觉性能优化的问题并没有那么重视,只是看到面试官常考这些问题,才在自己的项目中实践一点皮毛;而实际项目的体量实际是太大了,无论是构建的内容加载的内容都会很多,因此性能优化是很重要的。 实习的第一个月让我体会到了实际的项目里性能优化是一个多么重要的事情。

首屏加载时间优化之在工作中实践-掘金 (这是我所总结的文章,欢迎大家指点一二!)

第二个月-我的第二个大需求

在第一个月的时间里除了做首屏加载时间优化的任务之外,做的都是一些前后端交流少或者纯样式只需要给设计走查的任务。第一个月更多也是在熟悉公司的代码规范,以及做业务提单拆单、提交代码、提测、测试走查、设计走查、产品走查发布上线等业务流程。

第二个月就开始做一些新的功能模块了,第二个月主要做了一个核心权限设置的页面,需要调取接口查看开关们的状态、全选单选、上传图片裁切图片等等。虽然也是一个比较常规的业务需求,但是让我深深的学到了如何与其他岗位合作能够提升效率(都是伤心的实践后总结的

与后端:因为第一次做没有一开始就和后端对接接口,所以蛮多东西做完后还得修改。

  • 第一个是后端做完后后我开发中才发现后端返回的是一个单独修改某个开关的接口,而产品需要的是点击保存就批量修改,最后就让后端去重新写了个批量修改的接口;
  • 第二个是后端返回给我了一个一键恢复默认设置的接口,但我当时想着是恢复默认设置嘛!那就把值全部设为前端定的默认值就好啦!结果后面才发现后端给我这个接口就是为了让我不要写死在前端,为了后面能够方便修改默认设置。

这次实践让我明白了和后端提前对接口真的太重要了,一定要聊清楚让后端做什么以及不明白的接口要去问清楚是干嘛用的!

与设计和产品:

与后端合作有这么多的感悟,怎么能少的了设计和产品呢,毕竟看到最经常掐架的就是开发和产品以及设计了(狗头)

因为这个需求蛮赶的,但是设计师也很忙出图比较晚,产品让我先自己搭一下把功能做了,于是我就很自信的按照产品的原型图把页面搭了,于是悲惨的事情就发生了... 设计稿出来后和产品的原型图差距也太大了吧!不只是样式上,连组件都要重新拆分的那种。于是我就含泪疯狂改。

这个故事让我以后再也不敢在设计稿出来前做功能了,如果一定要做的话,先去问清楚设计整体架构是啥样的,这样起码能保证分好的组件不会变。后来我mentor告诉我,如果设计实在忙,可以先按照自己最轻松的做法和设计说自己的想法,让设计按照我们的想法去设计,这样效率会提高不少。

总的来说,好像最重要的就是提前沟通了,提前沟通真的能让效率提高不少!

第三个月--我的一个独立项目

很快实习的时间就来到了第三个月,感觉实习后的时间是过的很快的,第三个月主管看我也熟悉地差不多啦,就给了我一个实时数据大屏的项目,并且当时每个人手上的活都蛮多的,于是让我独立做这个项目。这同样是一个让我有好多感慨的项目。

第一个感慨——不要太相信自己的效率

这个项目给我的第一个感慨就是——不要太相信自己的能力,估时估久一点!!!!不要小瞧项目细节!!

当时拿到这个项目后之前只是简单调过echarts,但没有实际开发过业务的大屏项目,看到一篇文章说他做了两天就把大屏项目做完了,当时我一个自信,想着页面就是搭个布局,改个折线图,改个地图,调个SDK组件,写个榜单列表,再轮询调接口嘛!应该很快的。再加上平时他们会把我的工时折一半,我自信的给自己估了个三天,再折半就六天嘛!于是命运的轮盘开始转动,我的悲剧开始了...

首先第一个给我的下马威就是调SDK,本来以为调个SDK很快的,结果因为没有在后台项目里调过这个SDK,光是和负责SDK的人沟通和调SDK就花了一天多,总算调完后还需要实现很多功能细节。

慢慢地发现,这个项目细节也太多了!!其实实际上很多业务项目的细节都是很多的,比如数字的动效、轮询接口的时机、切换选项如何重新带动画地渲染图表,怎么让返回的城市数据可以变成点匹配到地图上并按照数据大小控制点的大小,如何控制轮询的时机,比如我在查看列表的时候就不要轮询刷新数据了等等,还有要按照设计稿去改变echarts图表的样式以及sdk的样式等等。

更悲惨的是很多项目细节都是测试测的时候飞bug才注意到的hhh,测试测的时候接口的轮询把它的电脑给轮关机了才发现我没有在组件销毁的时候销毁接口的轮询(只能说非常尴尬)

同时因为自己估时短,功能还没做完设计就找上门来走查了,于是每天最怕的就是产品和设计出现在我背后问问什么时候可以走查...产品哥每天上班第一件事就是跑到我后面问我进度怎么样了,然后拍拍我的肩膀说不要太辛苦,我两眼发光的问:可以延期吗! 他冷酷的说不行!

也比较影响心态吧,因为催的赶,所以提测的也早,每天都是不断在飞bug和改bug的阶段...虽然最后做了两个星期也是如期上线了,但我和测试都加了好几个晚上的班...并且成了飞bug之王qaq

估工时真是一门比较难的问题,后面我mentor告诉我,估时要这么估:

  • 不能只估自己做的时间,要把改bug的时间给算上,如果产品要加内容,要和他评估好这个加的部分所要的时间,让产品排个优先级。如果需要时间实在蛮长的,让他估量一下是不是这个版本要做,还是下次优化(我当时是产品加什么我就马上做什么,所以就更做不完了);
  • 估时的时候其实就是理解一遍需求了,要仔细思考业务细节,毕竟很多时候业务细节比做样式更费时,不要只关注样式实现去了
  • 不过最重要的还是要多留意自己平时开发时候实际用了多久,这样才能估的比较准,看来还是要实践出真知呀

第二个感慨——沟通的艺术之学会如何告诉产品和设计某个需求难做很重要

终于把难熬的开发过程熬过去啦!进入了痛苦的走查过程,每天都会收到设计提的一些bug单,但有一个bug是要我写一串算法去实现某显示。这个需求可难坏我这个算法白菜了,让chatGPT帮我写了一版,但是还是有很多特殊情况没有考虑到,直接上线的话会在一些临界点出问题。再加上还有其他功能bug要改,于是我和设计师说这个比较难改,我改完功能bug后再改吧。

于是设计师每天都来追问我进度,我说实在是有点难,需要点思考时间,但感觉并没有什么说服力。后来我观察设计师和我mentor的聊天学到了几招。

第一招:列举技术,说明工时很长(说服力-一星)

但实际上设计师得保证你能按照他的设计稿还原呀,这个还是得做,还是得按时上线。所以请出第二招

第二招:给出替代方案(说服力-二星)

我mentor经常觉得某个样式比较难写的时候,会拿着一个组件去问设计那边按照这个组件行不行,这样那边看到这个组件觉得也可以就会同意我mentor的方案,我mentor就可以美滋滋的按照自己轻松的方式写完啦!

但这个方法对于我来说好像不太管用,因为设计师说让我问问其他人嘛!

第三招:告诉他你问过其他人了,其他人也觉得难做(说服力-三星)

后面让把这个需求请教了我mentor,我mentor就帮我去想算法了,后面的确算法比之前更好了,但还是会出问题,这下设计同意后面再优化了~

参考文章:如何告诉后端出身的领导:这个前端需求很难实现 - 掘金 (juejin.cn)

(当时这么做的时候还没想到可以总结这些方法,只是下意识去模仿我mentor,后面发现掘金也有一篇文章,于是上面三招是参考文章总结滴!)

后面第四个月因为我快要离职啦,就是收一些之前的尾。总的来说这四个月真的学到了蛮多自己自学学不到的内容

技术收获

除了通过做需求对实际开发有了更深的了解,在公司也学到了蛮多技术层面的内容。

1、开发效率工具

我的mentor是一个效率工具爱好者,他日常的口头禅是:“我要想想我该怎么做能更高效呢?”,上班第一天他就给我推荐了好多效率管理的方法,真的让我发现了新大陆!

像用cursor去让AI辅助我们读源码,用git graph等git可视化工具去辅助我们提交代码和创建分支等操作,用github-copilot去让小机器人帮我们写代码,用utools工具去辅助我们想要切换hosts、计算时间戳等零碎的需要等等。

以前自学的时候信息还是蛮闭塞的,只知道要赶着学完某个知识点和做完某个项目,对于代码的优化和效率的优化其实考虑蛮少的。在公司待的这段时间后,干活前也开始想着怎么提升效率了。

详细的已经记录在这篇文章里面啦 想早点下班? 以下工具可以让你效率加倍! - 掘金 (juejin.cn)

2、git的实际应用

之前自己开发的时候并没有那么多需要用git的情况,也就是为了凑github的点亮数每天开发完后commit然后push上去,但在实际开发中对于commit的提交是很严格的,并且使用场景也变多了,于是乎我又学了很多新玩法。

①提交代码可视化

之前提交代码的时候我都是直接在控制台直接输入命令提交的,有时候会出现一些覆盖了别人的代码我还不知道的情况,等到别人找上来了我才知道(尴尬)

现在我会使用vscode左栏自带的提交了。输入提交文案点击Commit即可。一般提交前点击一个一个文件看修改的地方对不对就不会有覆盖问题发生啦! image.png

②暂存代码

在实际业务中经常会出现我正在做着某个需求,测试突然间跑过来说让你改个bug,很急很急的那种,这个时候点击右上角-Stash-Stash就可以把代码先暂存在本地了,如下图:

image.png

等bug处理完后再去git graph工具中找到stash的那条记录,点击Apply Stash即可

image.png

③常用的取消提交系列

像我这样的马虎蛋经常合并了代码或者提交了代码后发现搞错了,比如提交的单号没写对等等。总是要用到取消操作,于是乎熟练了一下的命令

完全取消提交/合并

git reset --hard HEAD~1
git push --force

某个需求这个版本不发了,但是后面可能会发想保留提交记录以便后面重写:点击那段提交然后右键revert

image.png

修改commit信息(75条消息) Git修改commit信息方法大全,提交日志、姓名、邮箱都能改_Hi丶ImViper的博客-CSDN博客

④手动打tag

来到公司后才接触到发布版本需要打tag的问题

git tag vx.x.x这样打

git push origin master:master --tags tags提交远程的方法

3、前端技术上

①代码规范和优化

学会了BFC命名css样式名,这样就不会出现样式名冲突的问题了

还学会了如何写注释:

  • 那些由于特殊业务问题而导致的问题一定要写好注释,比如轮询函数时设置的轮询时间为什么是3s而不是其他;
  • 同时也不是什么函数和变量都要写注释,对于那种看英文名就可以知道是做什么用的变量可以不写注释,避免注释太冗杂;
  • 对于文件开头要写注释说明是什么文件,否则一个大项目几百个文件,都得读一遍去思考是干什么的也太痛苦了

以及在写代码的时候也考虑到优化了:

  • 对于图片和字体文件:要留意它的大小,看是否阻碍当前页面的其他重要资源加载或者加载太久
  • 考虑函数的复杂度,过于长的函数是否可以拆分成多个函数写
  • 考虑到组件的渲染时机,像弹窗这些点击按钮才会出现的组件,是否能在点击按钮后再渲染?重复的弹窗的情况下,里面的接口是否能够只调用一次?

②Webpack

在做首屏加载时间优化需求的时候,为了读懂公司的vue-config.js文件为何那样配置,研读了好多文档,这样学习的方式比自己背面试题有用太多太多了。

同时也学会了通过寻找插件的方式去解决当前的问题,如果解决不了也学会了自定义插件了

③echarts

学会了使用echarts去根据实际业务的样式稿进行一些复杂配置,根据业务场景的话要实现动效、渐变折线图、轴线等距、切换图表动画等等其实还蛮细节的,需要一点一点去查文档,查文章才能完成,也是自己根据看文档看文章完成的开发经历吧

(实际上是为了实现业务需求组看了好多好多的文章,真的很想写几篇文章出来总结,要是写出来了就把链接放这!)

④websocket

在做业务的时候调的某个SDK就是websocket技术实现的,也借此机会好好的去了解了websocket的原理,以及在是如何在nodejs中的socket-io写服务端,用socket-client写客户端。

⑤SDK技术

之前认识的前端造轮子只停留在做样式组件库层面,但这次之后了解了SDK技术,SDK就是一整个软件开发包,它把核心的逻辑处理部分封装起来,只提供一套API来调用。

⑥性能优化

过去在自己做性能优化的时候只考虑到在代码层面用懒加载、虚拟列表;在webpack配置的时候使用loader进行图片压缩、css和js压缩,有听闻CDN,浏览器缓存,web worker,服务器渲染等更加复杂的性能优化方式,但从未思考具体怎么做的。 有幸公司的项目都用了这些优化方式,所以我也可以学到具体怎么用啦 (也是打算总结一篇文章,总结完放这里!)

第一次实习的感受

总算是写完实习中的日常和收获了,接下来就是快到结尾了(真没想到自己这么啰嗦)

其实在这次实习前,我属于是对于职场的世界有点恐惧和害怕的,现在回想起刚进公司的我,感觉就是大家眼中所想象的那种眼里饱含愚蠢,未经世事的大学生形象hhh。还记得刚开始见HR的时候被同行的人一眼看穿我是实习生,我问你怎么知道的,他说因为你的眼神很未经世事哈哈哈。

实习下来感觉前端团队真的很有活力,大家都好好,我的mentor还有身边的人真的很爱前端这门技术。把其实一开始做前端只是想糊口饭的我也带着喜欢上这条路啦(所以现在就开始频繁记录,很怕错过我的每一个成长的时刻)。

还有一个感觉就是觉得自己谈论技术更加自信了,在主管和mentor的影响下,我做某件需求的时候会更加去深挖技术和思考了,像之前做项目的时候只是看到网上是那么配置的,也没自己去思考过是为什么。也没有那么怕接下来的秋招了,只想着继续踏实学习,大胆迈步吧!

写着写着就写了这么多了,如果有人能看到这里那我真的非常感谢,因为我真的太啰嗦了哈哈哈,甚至觉得某些内容太多了拿出去重新写了一篇文章,实在是太想把我的实习经历记录下来了,因为感觉自己实习这段时间成长了很多回忆起来又不知道从何思考,现在写出了这篇文章终于清晰多了。 接下来就向着新的里程碑出发吧!

又到了立flag环节

也许刚刚你以为这篇文章已经完了,但前端人在结束了一个里程碑,继续往前迈进的时候怎么能少得了flag呢!又到了立flag的时候啦,希望接下来的半年能努力完成我的flag!

1、巩固基础(算法和计网)

如开头所说的之前的算法和计网真的很薄弱,所以接下来的计划技术巩固基础了。

算完代码随想录的算法题和剑指offer的算法题

学完小林codding的计网篇,能内化的那种

2、回归原生开发-试着自己用typescript去造工具

框架开发久了后感觉自己慢慢的局限于框架开发了,实习后也了解到很多轮子其实是原生typescript去写的,希望自己接下来能造个轮子!

3、学会读源码

在过去开发中经常是遇到问题只知道去找文章,在使用vue框架的时候只知道使用它的组件,但其实并没有很清楚里面的原理,有的时候会有那种局限感,接下来要学习vue的源码,并在其中去学会读源码!

4、学习react框架并做一个项目

接下来半年继续努力吧!