前言

本文用于記錄最近的前端學(xué)習(xí)情況與找實(shí)習(xí)情況。

首先說一下我的基本情況，目前是研二。本科北京語言大學(xué)-信息科學(xué)學(xué)院-數(shù)字媒體技術(shù)，雖然是個(gè)雙非學(xué)校，但是各位老師都很好，教學(xué)質(zhì)量高。主修課程包括數(shù)據(jù)結(jié)構(gòu)、python、C++、網(wǎng)頁設(shè)計(jì)基礎(chǔ)、計(jì)算機(jī)網(wǎng)絡(luò)、人機(jī)交互、計(jì)算機(jī)圖形學(xué)、游戲軟件設(shè)計(jì)與開發(fā)等，但是說實(shí)話，現(xiàn)在已經(jīng)如霧里看花，關(guān)于這些知識都已經(jīng)模糊了（就好像上了兩年大學(xué)之后，看高中物理化學(xué)之類，捂臉）。由于成績比較好，然后卷了些計(jì)算機(jī)設(shè)計(jì)大賽之類，湊了些附加分，以學(xué)業(yè)成績/綜合測評均排名第一（1/50）的成績，拿了保研資格。研究生來到了上海大學(xué)-上海電影學(xué)院-數(shù)字媒體創(chuàng)意工程，研究生的課程多為論文匯報(bào)，課程成績也不再重要，重要是的要發(fā)論文。本專業(yè)的畢業(yè)要求是發(fā)一篇sci或者兩篇ei。要求頗高，擔(dān)心無法畢業(yè)，于是決定先把論文搞出來，總之也是經(jīng)歷了一些亂七八糟，很幸運(yùn)的，發(fā)出了論文。當(dāng)然投遞第一篇的時(shí)候擔(dān)心中不了，于是很快進(jìn)行第二篇的工作，第一篇結(jié)果出來的時(shí)候，第二篇實(shí)驗(yàn)已經(jīng)做完了，遂寫完論文，投了出去。至此研究生階段的小論文硬性要求解決，大論文暫時(shí)不著急，自認(rèn)可以出去實(shí)習(xí)，準(zhǔn)備找工作了。

這個(gè)時(shí)候已經(jīng)來到了3月底。而我的前端之旅就從3月27日的一個(gè)決定開始了。

我之前出于對游戲的向往，是做unity更多一些，但是本人unity水平就也不高，屬于是一個(gè)能用吧，做了一些小demo，也是2D內(nèi)容居多。27號晚上翻看了boss直聘上的崗位，又進(jìn)行了一些思考?？偨Y(jié)而言就是，感覺上游戲unity開發(fā)崗比前端崗少些，而unity它似乎也只能做游戲?？赡苁莻€(gè)人興趣問題吧，我不大喜歡國內(nèi)手游，比較喜歡一些獨(dú)立游戲（如空洞騎士、死亡細(xì)胞之類），我想我可能對游戲沒有那么熱愛，我更想做一些跟生活相關(guān)的，更具備實(shí)用意義的東西，而且這些也更能讓父母家人理解。于是在這天晚上，我下了一個(gè)對我而言非常重大的決定——轉(zhuǎn)前端。

在這邊要非常感謝我的幾位學(xué)長學(xué)姐（也是做前端開發(fā)的），在學(xué)習(xí)前端方面給了我很多建議和鼓勵(lì)，鞠躬。

OK，那讓我們進(jìn)入正題。

前端學(xué)習(xí)路線

學(xué)習(xí)路線參考：B站【objtube的盧克兒】的視頻與他的網(wǎng)站。

• HTML+CSS：之前是在網(wǎng)頁設(shè)計(jì)基礎(chǔ)的本科課程上學(xué)過，算是有一點(diǎn)基礎(chǔ)。HTML復(fù)習(xí)了一下常用文本標(biāo)簽、屬性以及HTML表單。CSS則是復(fù)習(xí)了幾種導(dǎo)入方式、CSS選擇器、常用屬性與盒子模型。幾種布局方式額外學(xué)了一下，包括浮動(dòng)、定位、flex布局、grid布局，了解了一下動(dòng)畫方面的內(nèi)容，包括transform（translate/rotate/scale）、transition、@keyframe、animation。學(xué)習(xí)方式主要是看B站的一些視頻，弄不清楚的地方會(huì)去MDN看文檔。同時(shí)為了熟悉一下所學(xué)的內(nèi)容，進(jìn)行了一個(gè)小練習(xí)，大概是按B站的首頁布局，寫了一個(gè)類似的靜態(tài)頁面。
• JavaScript：由于B站相關(guān)JavaScript的視頻動(dòng)輒40+小時(shí)，感覺太長且啰嗦，并且自認(rèn)還是有一些編程基礎(chǔ)的，于是這塊的主要學(xué)習(xí)方式是看博客，主要參考的是CSDN【輕松的小希】博客，看不明白的地方也是會(huì)找別的博客來看。DOM和BOM有額外再去了解，這邊比較推薦B站【鋒華前端工程師】DOM視頻與B站【鋒華前端工程師】BOM視頻，言簡意賅。同時(shí)為了熟悉JS語法，這段時(shí)間在leetcode上刷了一些題，大概60道左右，持續(xù)時(shí)間為：3.29-4.13，半個(gè)月左右。
• ES6：JS的新語法，會(huì)用到很多，也是面試的重點(diǎn)，一定要好好學(xué)。這邊我是主要看了B站【小馬哥_老師】的視頻進(jìn)行的學(xué)習(xí)，內(nèi)容主要包括：let與const、模板字符串、函數(shù)相關(guān)（參數(shù)默認(rèn)值、剩余參數(shù)、擴(kuò)展運(yùn)算符、箭頭函數(shù)）、解構(gòu)賦值、擴(kuò)展對象、新數(shù)據(jù)類型Symbol、Set與Map、數(shù)組新方法、迭代器與生成器、Promise、async與await、class語法糖、模塊化import與export。
• Ajax：前端必須要掌握的技術(shù)，異步請求，無刷新獲取數(shù)據(jù)。主要看了B站【尚硅谷】的視頻，講解的非常細(xì)致，內(nèi)容包括Ajax優(yōu)缺點(diǎn)、HTTP報(bào)文組成、node.js與Express寫簡單服務(wù)器（為學(xué)Ajax做準(zhǔn)備）、原生Dom方法XMLHttpRequest發(fā)送Ajax（包括請求超時(shí)與網(wǎng)絡(luò)異常處理、手動(dòng)取消請求、重復(fù)發(fā)送問題等等）、JQuery發(fā)送Ajax、Axios發(fā)送Ajax、fetch發(fā)送Ajax、跨域問題、解決跨域的方法。這塊是有跟著敲，做了一些小練習(xí)。大約用時(shí)1周。
• Vue2+Vue3：開始學(xué)習(xí)前端框架，之前本科大創(chuàng)用mpvue做過一個(gè)微信小程序（雖然現(xiàn)在都忘了），結(jié)合看了一些網(wǎng)上的說法，Vue更易上手之類，我選擇了Vue來進(jìn)行學(xué)習(xí)。這邊主要是看B站【尚硅谷】張?zhí)煊砝蠋煹慕坛?/a>，他是先講的Vue2后講了Vue3。個(gè)人覺得就使用方面，Vue2和Vue3沒有差太多，屬于是學(xué)完Vue2花那么一點(diǎn)時(shí)間了解一下Vue3就能很快上手的。所以如果跟我一樣選擇了這個(gè)教程的同學(xué)在學(xué)Vue2的時(shí)候也不用心急。我學(xué)Vue2的時(shí)候前期是有跟著敲，做ToDoList案例之類，但后期腳手架部分，Vue2和Vue3差的有點(diǎn)子多，就沒有再跟著敲了。這塊兒的內(nèi)容有點(diǎn)多，我就不一一列出來了，可以參考CSDN【夢入_凡塵】博客（但我今天去看了一下發(fā)現(xiàn)它要收費(fèi)了，捂臉，可以找找別的筆記）。這個(gè)教程Vue3講的相對簡單，而且教程本身比較老了，2021年的，中間Vue3也有一些更新，因此我也有找一些別的Vue3新特性相關(guān)博客與視頻進(jìn)行學(xué)習(xí)。老師語速比較慢，我2倍速看的，大概花了2周多一點(diǎn)。
• Webpack+Vite：看的是B站【李立超老師】的視頻，大概介紹了為什么需要構(gòu)建工具、Webpack基本配置、Webpack與Vite的區(qū)別、Vite的使用這些。具體可以參考【Rachel】同學(xué)的筆記。
• Git：之前是用Github Desktop比較多，但是要工作的話還是必須得掌握以下Git的。因此去學(xué)了一下，看的是B站【GeekHour】的視頻。文檔獲取可以根據(jù)視頻簡介操作。
• Vue3項(xiàng)目：雖然學(xué)了Vue但是沒寫過項(xiàng)目總覺得不熟練，無法應(yīng)用，此外，找實(shí)習(xí)也是需要一些項(xiàng)目經(jīng)歷的，如果只有本科大創(chuàng)的微信小程序的話過于單?。ǘ艺f實(shí)話，我真的不記得我怎么寫的這個(gè)微信小程序了，捂臉）。因此決定跟B站【尚硅谷】賈成豪老師的視頻做一個(gè)Vue3項(xiàng)目。項(xiàng)目內(nèi)容包括登錄、數(shù)據(jù)增刪改查、菜單按鈕權(quán)限管理、數(shù)據(jù)大屏等等。項(xiàng)目技術(shù)棧包括：Vue3、TypeScript、Vite、Vue-Router、Pinia、Element-plus、Axios、Echarts。前期項(xiàng)目配置比較繁瑣，并且決定使用element-plus按需引入有點(diǎn)坑到自己，尤其是圖標(biāo)方面（捂臉）。文檔可以參考【奧斯卡】同學(xué)的筆記。項(xiàng)目地址：http://124.223.50.156（用的騰訊云的試用輕量級云服務(wù)器，鏈接可能會(huì)掛）。其實(shí)并沒有做完，做了一半發(fā)現(xiàn)有些對數(shù)據(jù)增刪改查的內(nèi)容過于重復(fù)，學(xué)不到什么東西，于是跳過了，之后打算慢慢補(bǔ)完。大概花了1個(gè)月。
• 前端八股：不要小看八股文，面試真的問了挺多的。而且學(xué)習(xí)前端八股可以幫助加深一些內(nèi)容的記憶和一些原理方面的理解，總之還是很有用的！這邊我主要是參考CSDN上的一些博客，牛客網(wǎng)的一些面經(jīng)，以及B站【前端程序員來了】的面試系列視頻（當(dāng)然沒有看視頻，直接按簡介領(lǐng)取了資料看的文檔）文檔內(nèi)容挺全的，常見八股都有，有些內(nèi)容講的還是不夠清楚，會(huì)另外再查。非常推薦【W(wǎng)eb前端面試-面試官系列】博客，比較后面才找到，我還沒有看完，但是感覺寫的很好。另外有關(guān)互聯(lián)網(wǎng)與瀏覽器如何運(yùn)作方面，非常推薦B站【objtube的盧克兒】的幾個(gè)干貨視頻，配合動(dòng)畫講的非常清晰。

以上路線學(xué)習(xí)大概是從3.28-5.20（中間五一回了一趟家，因?yàn)槭罴僖獙?shí)習(xí)，大概率不回了）。歷時(shí)約兩個(gè)月。

找實(shí)習(xí)經(jīng)驗(yàn)分享

找實(shí)習(xí)渠道：boss直聘、實(shí)習(xí)僧、各家公司官網(wǎng)。到找到實(shí)習(xí)為止，boss上68溝通過，19投簡歷；實(shí)習(xí)僧18投遞，4被查看，2不適合；官網(wǎng)上投遞了拼多多、B站、美團(tuán)、阿里、京東，前端崗都投了，包括暑期實(shí)習(xí)和日常實(shí)習(xí)。從5.21開始投遞簡歷，5.24收到第一個(gè)愛奇藝的面試邀請，又陸續(xù)收到一些筆試測評（包括拼多多、美團(tuán)、京東、阿里、眾安保險(xiǎn)），5.27周一收到包括安鹿、B站、美團(tuán)3個(gè)面試邀請。

因?yàn)殚_始投遞的時(shí)候已經(jīng)是5.21了，我的想法是實(shí)習(xí)3個(gè)月，然后大概9月去準(zhǔn)備秋招之類。所以還是挺急的，當(dāng)時(shí)給自己的時(shí)間是到5月底，要是沒有好的實(shí)習(xí)就打算去小公司了。我也了解了一下暑期實(shí)習(xí)，雖然可以轉(zhuǎn)正，但是流程時(shí)間太長了些，需要先筆試，而后經(jīng)過一二三甚至四面。感覺如果是3月份可以一試，但現(xiàn)在已經(jīng)5月底了，因此重心沒有放在暑期實(shí)習(xí)上，而是更加偏向日常實(shí)習(xí)。

個(gè)人投實(shí)習(xí)的感覺是boss如果真的需要人手，如果理你了走流程還比較快。但是上面也有很多是其實(shí)并不著急，或者暫時(shí)不招只是掛著的，就是不咋理人。此外，如果有比較想去的公司hr理你說要安排面試，然后后面就沒消息了的，可以去問問，我是因?yàn)槟菐准椅乙膊皇呛芨信d趣，就也沒有再接著聊。新增的崗位會(huì)回的比較快，然后有已讀的功能還是可以看出一些態(tài)度的。實(shí)習(xí)僧雖然可以直接投遞簡歷，但是理人的挺少的，還容易被標(biāo)不適合，說實(shí)話還挺打擊人的。不過我個(gè)人感覺還是官網(wǎng)投遞最快，如果投的暑期實(shí)習(xí)會(huì)很快給發(fā)筆試鏈接，不過我感覺暑期實(shí)習(xí)的筆試真挺難的，筆試完不一定啥時(shí)候約面試，也有可能做的不好直接被刷。日常的話就是直接約面試，大廠可能會(huì)讓手撕算法題，得看是什么廠子。emmm，不過這個(gè)投遞經(jīng)驗(yàn)可能也與時(shí)間、崗位相關(guān)，這邊只是分享一下這次的投遞。

下面是我大概的一個(gè)筆試面試流程。

拼多多的筆試對我而言還挺難的，3道單選，3道編程。編程環(huán)境過于難受了，就一個(gè)文本框，還不讓切屏用IDE。

京東測評就不說了，當(dāng)時(shí)狀態(tài)不太好，感覺腦子有點(diǎn)不在轉(zhuǎn)，倒計(jì)時(shí)有點(diǎn)太快了。

安鹿面試較為簡單，常規(guī)八股，問的比較少。對實(shí)際會(huì)用比較看重，問了一些項(xiàng)目，還有一些基礎(chǔ)內(nèi)容比如Vue中的Computed和Watch區(qū)別，Git沖突了怎么辦這些。

B站面試跟面試官聊的挺開心的，我感覺還闊以，但是結(jié)束之后，回過頭一看又發(fā)現(xiàn)好多沒有回答出來。問了很多CSS相關(guān)，比如，如何讓一個(gè)元素垂直水平居中、如何讓一個(gè)元素不顯示以及幾個(gè)方法之間的區(qū)別；微任務(wù)、宏任務(wù)相關(guān)，讓看Promise輸出，一開始說錯(cuò)了，面試官有指出我的問題，重新讓我看，感覺學(xué)到很多；深拷貝與淺拷貝的概念，如何實(shí)現(xiàn)淺拷貝（我復(fù)習(xí)的時(shí)候更多看深拷貝，忽略了淺拷貝，把它概念搞錯(cuò)了）；項(xiàng)目場景，我介紹我的項(xiàng)目，他根據(jù)我的項(xiàng)目提出進(jìn)一步的需求，讓我說怎么實(shí)現(xiàn)，這個(gè)我就不太會(huì)了，是websocket相關(guān)；還問了前端優(yōu)化手段（我沒做過優(yōu)化，也是有些一知半解，就說了合理利用前端緩存和精靈圖，面試官深挖了一下，為什么精靈圖更快）。但是阿B流程好慢，一直沒有結(jié)果。

美團(tuán)一面八股文內(nèi)容比較常規(guī)，有些忘了，就聊一下印象比較深刻的手寫代碼。給了兩道編程題，一是用Vue實(shí)現(xiàn)一個(gè)數(shù)字每隔1秒+1的業(yè)務(wù)，這個(gè)我在之前翻面經(jīng)的時(shí)候有看到，使用setInterval嵌套setTimeout解決，但沒有深究原理，被問了為什么這樣實(shí)現(xiàn)，沒說上來，面試官稍微解答了一下；二是檢查整數(shù)是否回文，用字符串方法寫出來了，但是空間復(fù)雜度O(n)，面試官讓寫進(jìn)階，空間復(fù)雜度要O(1)，沒有寫出來，以為涼了，沒想到吃晚飯的時(shí)候就電話約了二面，二面快開始的時(shí)候，hr又電話說業(yè)務(wù)那邊商量了一下，覺得我表現(xiàn)的還可以，就讓我過了，給了OC。（真的很感動(dòng)了。

愛奇藝一開始面試官問的比較常規(guī)，基本都答出來了。然后20分鐘過去，面試官說他基本沒啥問題了，但是他們那邊想要進(jìn)行二面，問我現(xiàn)在是否方便，我想反正之后也沒有事情，那就一起面了吧。于是答應(yīng)了，后面這位二面的面試官風(fēng)格比較獨(dú)特，他拿著我的簡歷看到我本科的成績和主修課程，一門一門開始拷打我，從計(jì)算機(jī)網(wǎng)絡(luò)、數(shù)據(jù)結(jié)構(gòu)、C++到計(jì)算機(jī)圖形學(xué)，還有我之前做的Unity。怎么說呢，本科學(xué)的真的忘了，然后吧，也沒想到會(huì)被問，沒咋樣復(fù)習(xí)，計(jì)網(wǎng)和數(shù)據(jù)結(jié)構(gòu)還能謅一些，其他的我就是一整個(gè)一問三不知了（捂臉）。面完有點(diǎn)小崩，跟朋友嚶嚶嚶去了。

眾安保險(xiǎn)的筆試也很難，10+單選，1多選，3編程。只有最后一道編程80%，其他都不行。真的要好好練一練筆試會(huì)考的東西了，也要好好刷刷力扣。

這么經(jīng)歷下來，感覺自己也蠻幸運(yùn)的。接到美團(tuán)電話的時(shí)候，都不敢相信hhh，跟hr確認(rèn)了好幾遍，收到郵件Offer才有實(shí)感。感覺大廠日常實(shí)習(xí)比較寬容，問八股文很多。大廠會(huì)要求手寫代碼，這個(gè)就只能看自己的算法能力和現(xiàn)場發(fā)揮了。說實(shí)話刷題成本還是挺高的，有時(shí)候一道題寫一下午，但還是要堅(jiān)持?？偨Y(jié)來說，算法能力不太行，需要多刷題；筆試考的一些小知識點(diǎn)掌握不夠全面，尤其是看代碼說輸出，會(huì)很繞，需要額外練習(xí)一下。

在5月找到實(shí)習(xí)算是完成了我的階段性目標(biāo)。在這邊記錄一下。入職之后應(yīng)該也不會(huì)輕松，而且我也有很多想學(xué)的東西，比如React、uniapp、nodejs等等等等。

道阻且長，行則將至。與諸位共勉~