當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

一名运营，自学一年前端，成功入职杭州某独角兽企业，他的面试经验和学习方法等分享...

發布時間：2023/12/9 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了一名运营，自学一年前端，成功入职杭州某独角兽企业，他的面试经验和学习方法等分享... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

大家好，我是若川。這是我的微信群里小伙伴@年年的投稿。他是19年畢業，之前做的是運營相關的工作，在我的交流群里非常活躍，自學一年前端，目前成功轉行入職杭州一家獨角獸企業。相信他的文章能帶給大家一些啟發和激勵。

0 寫在最前面

我是年年，于19年畢業的，之前兩份工作都不是開發相關，也就是0經驗轉行。工作之余持續學習前端大概一年半，前后大概面了一個半月，最后上了岸，去了杭州一家還算不錯的獨角獸。

由于本身學歷（專科）和專業(農業)不符合，面的公司以中小廠為主。知識點可能在也是比較簡單的，所以本文不適用于很多大佬，見諒。但是希望能給一些正在學習中的未畢業的和轉行的一些建議或者激勵。

現梳理一下基于我個人面試過程中被問到的一些問題(包括但不限于)，更多的是個人經驗的分享。

文章大綱如下

1 面試前的準備

1.1 寫簡歷

在開始面試之前，一份優秀的簡歷也是十分重要，

關于簡歷怎么寫推薦兩篇文章，

前端 Offer 提速：如何寫出有亮點的簡歷
面試被問項目經驗不用慌，按這個步驟回答絕對驚艷

關于寫簡歷的平臺也推薦兩個

超級簡歷^[1] --- 更簡約，黑底白字
木及簡歷^[2] --- 秋風大佬的作品，樣式會豐富些，基于markdown

1.2 明確目標

做一件事情，要先明確目標，定下一個可觸及的清晰目標。

跟他人交流，了解自身能力的偏向 ?---- 和群友溝通過程中，較多群友對我的評價為基礎比較扎實

了解層級區別 --- 通過百度等渠道了解大廠的層級定位的主要特點(我是以阿里p級為標準)

結合上面兩點，定下目標 --- 我依據上面兩點，并對自己的學習能力進行評估，這邊對自己的級別定位于 p4/5的定義

這里截取p4要求中，我覺得面試官最看重的一點，這也是面試者著重要體現出來的東西

在專業領域，具有學習能力和潛能

最終上岸的這家主管也和我說是看中了我的學習和潛能。

1.3 爭取面試機會

基于自身的學歷和專業，又因為現在boss上大部分都是hr在看簡歷，所以我的簡歷很多情況下都會被忽略。

為了更多的面試機會，我完善了boss直聘的在線簡歷（很多hr都會看在線簡歷），然后又編寫了一些話術去爭取。

關于爭取話術中提及的東西

可以是你的項目展示地址（已上線）
可以是你的博客或github
可以是證明你學習能力的一些東西（我是番茄todo計時，幕布編輯文字統計）

舉個例子（我是這么爭取的）

1.4 梳理知識點

1.4.1 整體大綱

很多小伙伴也有想跳槽的想法，但是又不知道該如何梳理，這里的話我推薦雙越老師的兩門面試課（我是買了然后都看完了~放心食用）。

快速搞定前端技術一面匹配大廠面試要求^[3]
前端框架及項目面試^[4]

這兩門課更多是一個梳理的過程，知識點更多是點到為止，給到一個正確的大綱，跟隨過一遍，把自身不知道的深入一下。

ps:雙越老師其他的課也很不錯，我的node就是學習他慕課微博項目學習來的。

除了這兩門課，也推薦字節面試飛書文檔^[5]，這個文檔比較齊全，之前是看天天大佬發群里后收藏的，我的手寫題是跟著這里整理的。

1.4.2 梳理工具推薦

我喜歡用 思維導圖 （xmind、幕布）去記錄，個人感覺樹形的結構更容易去梳理和記憶，md更多是線性的瀏覽。

1.5 面試知識的記憶小技巧

1.5.1 背誦知識---反向提問加深記憶

這就是為什么我喜歡用思維導圖的原因

舉個例子

如上是常見的css的一些知識點，那么我們在復習的時候，打開了思維導圖，默認把節點關閉后。就可以給自己提問了，然后嘗試解答

margin上下左右設置負值分別是怎么樣
margin 垂直方向的重疊的現象有哪些，解決方案是有哪些？
BFC的創建方式有哪些

思維導圖的好處就出來了，如果你用的是markdown，你一眼就能看到答案，但是用思維導圖你就很方便的把答案隱藏了，不會背的展開，會被的默認關閉，那么后續的記憶就很方便了。

1.5.2 手寫知識點---寫注釋

很多小伙伴會苦惱手寫題，覺得手寫題麻煩，面試的時候很容易丟分。

個人看了比較多的手寫題后，認為好的手寫題就是三步走

對傳入參數的處理（類型判斷）

對功能的實現（優化---性能等）

對返回結果的處理（類型判斷）

那么關于如何記憶手寫題，個人是寫注釋，然后背誦注釋，這樣就可以把記代碼改成記文字，容易許多。

舉個例子

function?myNew(constructFn)?{//?1.進行類型判斷if?(typeof?constructFn?!==?'function')throw?new?Error('傳入的參數必須是一個函數');//?1.2?模仿ES6?new方法的target屬性指向構造函數myNew.target?=?constructFn;//?2.創建對象?并進行?原型鏈連接const?newObj?=?Object.create(constructFn.prototype);//?3.?更改this綁定計算函數返回結果//?3.1?獲取剩余參數const?argsArr?=?[].slice.call(arguments,?1);//?3.2?計算結果const?fnReturnResult?=?constructFn.apply(newObj,?argsArr);//?4.返回//?4.1?對類型進行判斷//?是對象?但是不能是nullvar?isObject?=?typeof?fnReturnResult?===?'object'?&&?fnReturnResult?!==?null;//?是函數類型var?isFunction?=?typeof?fnReturnResult?===?'function';//?4.2如果是對象類型?返回結果?不是則返回新創建的對象if?(isObject?||?isFunction)?{return?fnReturnResult;}return?newObj; }

1.6 刷題平臺推薦

為了防止面試官出一些奇奇怪怪，或者說一些涉及知識點比較細（不常用的）的題目，我在很多平臺刷過很多題（以js相關的選擇題為主）。

牛客網---感覺題型偏老，不推薦
- 我刷完了專項訓練里面的所有選擇題（500多道題也靠著刷題到了lv5）
高級前端面試小程序 ?--- 特別推薦 ?題型比較新穎，題庫里的題也適合面試梳理，選擇題不算特別多
- 這個我不知道刷了幾道，只是到后面做的基本是重復的題了
前端面試星球 ?小程序 --- 推薦
- 這個我刷的沒有前兩個多，因為有些題型有點多，涉及的面挺廣的，后面會慢慢刷的。

1.7 準備項目

之前有小伙伴問過我，0經驗或轉行的項目怎么辦。這里的話我是這么做的:

基于工作，發掘需求--- 熟悉自身工作后，基于整條業務線，去發掘是否有可以用編程加快或者完善的地方

基于需求，定下目標--- 基于該需求，和平時業務的積累，思考如何實現（我是做了一個全棧的回收后臺）

學習相關技術--- 由于是全棧，我先后學習了react和node相關知識，并構建出了第一個版本的后臺

投入使用后，繼續學習從而迭代--- 我第一版的后臺是umi+ant pro 構建的，后續學習了慕課的jira（主講hooks+ts的），基于hooks+ts 對項目進行了重構。

這樣的項目可能會比直接從慕課等網站上學習來的寫在簡歷上的要好看或者實用許多。

2 面試中碰到的知識點

這里的知識點只會說相關總知識點，然后給上相關知識點的文章推薦

2.1 ? JS相關

2.1.1 執行機制相關

概念性 ---這一次，徹底弄懂 JavaScript 執行機制^[6]
筆試題型 --- 呆呆大佬的promise題^[7] 刷完之后可以和上學一樣整理相關的題型模板

我刷完后總結出的解題模板（解題思路太多了就截圖了）

整理的題型分類

面試碰到的問題

說說什么是微任務，宏任務，常用那些微/宏任務
說說js的執行機制
setTimeout的第二個參數是按照怎么樣的方式入隊的
一些筆試題

2-this

概念性 --- 川神的面試官問系列^[8]
筆試題型---還是推薦呆呆大佬的this題^[9]

我刷完后總結出的解題模板和思路

面試碰到的問題

一些筆試題

3-原型和原型鏈

這個我反而覺得沒啥難的，只要記住

實例.proto =實例的構造函數的.prototype 這個很多就不難了

冴羽大佬的原型相關文章^[10]

4-繼承

冴羽大佬的多種繼承的實現及優缺點^[11]

面試碰到的問題

了解繼承嗎，說說幾個你常用的繼承，追問優缺點
class的extend做了什么（和組合寄生式繼承一樣）

5-閉包

我從來不理解JavaScript閉包直到有人這樣向我解釋它^[12]

面試碰到的問題

一些筆試題

6-垃圾回收

基本原理及了解(個人覺得夠用了) --- 從 4 個面試題了解「瀏覽器的垃圾回收」^[13]
深入了解(更深層次的細節及原理)---你真的了解垃圾回收機制嗎^[14]

面試碰到的問題

說說v8的垃圾回收
標記清除法的缺點

7-數據類型

面試碰到的問題

列舉js中的數據類型
數組中那些方法是會改變原數組的
symbol 可以用new調用嗎
symbol 的使用場景

2.2 Css相關

css一般會問一些常見布局的實現，以及一些屬性的區別，這個有很多，只舉我碰到的

2.2.1-布局相關

布局大全推薦文章^[15]

一列定寬，一列自適應的實現方式（盡可能多）
多列布局的實現方式
行內元素和塊元素的垂直居中

2.2.2 屬性相關

說說場景的定位及該定位參考原點
visibility:none 和 display:none 以及 opacity:0 的區別
flex這個復合屬性的含義是

2.3 http

這個面下來問的不是很多，沒有問特別難的題

狀態碼相關

301 302 304的區別
200 狀態碼一定是服務器返回的嗎

get和post的區別

http1.1和2.0的區別

說說http緩存

2.4 React相關

我只準備了react，且看了一些源碼。

這個建議大家平時學習工作過程中去明確自己沒有特別明白的地方，然后再去看相關的文章或者源碼，全部看的話比較容易放棄。

整體推薦資料

拉勾 ?修言大佬的 react深入淺出專欄^[16]
掘金 ?我不是外星人的react小冊^[17]
魔術師卡頌的公眾號和b站
- 可以先選擇性的看，了解自身不太知道或不太明確的知識點，卡頌老師都講的淺顯易懂，每次看完都是覺得醍醐灌頂。

2.4.1 虛擬dom相關問題

概念

虛擬DOM 本質是 JS和DOM之間的一個映射緩存，是對真實DOM的描述（重點）

處理流程

數據+“模板”（不一定是模板如JSX）---> 虛擬DOM--->真實DOM--->掛載到界面里

缺點

更大的JS計算（它不可避免地涉及遞歸、遍歷等耗時操作） 當dom更新量不大的時候，性能反而不如其他方案(一般面試官更想聽缺點)

內存占用較高

react選擇虛擬dom 的原因

提供更爽、更高效的研發模式（函數式編程的UI編程方式），還有一個不錯的性能

容易實現跨平臺成本更低

降低了代碼抽象能力，避免人為操作DOM，降低代碼風險

2.4.2 diff算法

推薦---15張圖，20分鐘吃透Diff算法核心原理^[18]

我之前是自己整理的，前段時間在掘金看了該文章覺得很不錯。

2.4.3 生命周期

這個一般只會讓你去寫各個期間的生命周期。

但是這里還是推薦大家去看一下卡頌老師對生命周期的講解視頻^[19]，對生命周期有更深層次的了解

2.4.4 事件機制相關問題

合成事件處理流程

原生DOM層

1.元素觸發事件 2.事件冒泡到 document（react 17后掛載到app根節點）

合成事件層

3.Syntheic Event 實例化成統一的react event

事件處理函數

4.dispatchEvent 處理將event事件給到對應的處理器

這樣設計的好處

更好的兼容和跨平臺（脫離原生自己實現一套邏輯）

全部掛在到document上減少內存消耗避免頻繁解綁（事件指派原理）

方便事件的統一管理（如事件機制）

2.4.5 hook相關

設計hook的原因

組件之間難以復用狀態邏輯

復雜的組件變得難以理解

this指向問題

類難以做編譯優化

hook為什么不能在條件語句中使用

只要 Hook 的調用順序在多次渲染之間保持一致，React 就能正確地將內部 state 和對應的 Hook 進行關聯
hook是基于鏈表實現的要確保 Hooks 在每次渲染時都保持同樣的執行順序如果在循環、條件或者嵌套中調用hook會導致取值錯位執行錯誤的hook

useCallback 和 useMemo的區別

這個直接看官網

useEffect相關

推薦卡頌老師的關于useEffect的一切

useState相關

推薦卡頌老師的關于useState的一切

關于hook 搞懂useState和useEffect 其余的就不難了

2.4.6 源碼相關

源碼相關的答案可能比較長，這里就只列舉被問到的

說說setState

redux的dispatch做了什么

redux的中間件是怎么掛載的，執行順序（compose函數）

說說useEffect的處理流程

react-router兩種路由的原理

2.5 手寫題

2.5.1 this指向相關

手寫new

手寫apply和call

手寫bind

以上這三個，只推薦川神寫的文章 ?對應合集，讓你學會從60分到100分的去書寫這4個筆試題，并帶有完整的剖析，方便自己整理寫注釋。

2.5.2 正則相關

千分位分割
下劃線和駝峰命名互轉
電話的驗證

2.5.3 其余碰到的題

deepclone --- 如何寫出一個驚艷面試官的深拷貝^[20] 個人一般只會加上map解決循環引用的問題
柯里化 ?--- 通用柯里化函數^[21]
防抖 --- 冴羽大佬的博客^[22]
節流 --- 冴羽大佬博客^[23]

3 面試后的總結

3.1 找個平臺輸出或者記錄

這次能上岸我覺得自己的爭取很重要，那么為了爭取自己之前鋪墊的整理和記錄也很重要。

所以我覺得如果你也有跳槽的想法，可以嘗試的去掘金或者自己建立一個博客去輸出自己的文章。

個人幕布整理了14w字的筆記，番茄todo計時800個小時左右，然后又把筆記上傳到了博客，這些比較好看的數據最終讓我獲得了面試機會，并成功找到自己覺得不錯的工作。

3.2 語氣方面

語氣的話盡可能保持溫柔一些，不要過于強勢，面試官對你的第一印象及交流的感覺很重要，盡可能保證舒服。(個人會在面試之后詢問面試官對我的看法，基本都有提到這一點)

3.3 如果遇到不會的問題

面試中碰到不會的問題，可以先進行思考和再次詢問梳理，如果真的不會也沒有關系，先道個歉然后讓面試官給到一些引導或者提示，如果最終還是沒有想出來，在面試結束后會再次詢問。展現出個人對技術的熱情。

比如我碰到沒有準備的算法題會直接道歉說沒有做相關準備，碰到業務題不會了，會尋求引導，最后再問面試官他們公司的實際做法。

3.4 問到你的優點和缺點

知乎高贊文章^[24]

3.5 最重要的保持耐心

最好先騎驢找馬，一邊工作一邊整理和面試。我是整理的差不多了也面了幾家后才辭職的。
對于像我這種轉行或者0經驗的，很難遇到一個合適的面試官，他看重你身上的潛力。所以說要保持耐心，多面面，和我一樣你也會碰到那個看重你的面試官的。

4 感謝

在這里感謝一些人，因為沒有這些人，我可能現在還在掙扎。

先感謝我的女朋友還有我家的貓貓，在很多焦慮的時候，是她們給予慰藉。

然后感謝川神（若川），一個平易近人的大佬，基本有問必答，在他的交流群中學到了很多也交到了很多好朋友。（這里推薦一下川神最近組織的源碼共讀活動1個月，200+人，一起讀了4周源碼）

再然后就是感謝各個川神群里的好朋友啦，謝謝文淵、sodala、AaronKwong、冷月心、夜、zhouying、月樺、東東、窗外放晴等人對我的肯定，幫助及建議，讓我對自己有個相對明確的認知和目標定位，也避免了找工作的一些坑。

參考資料

[1]

超級簡歷: https://www.wondercv.com/

[2]

木及簡歷: https://resume.mdedit.online/editor/#

[3]

快速搞定前端技術一面匹配大廠面試要求: https://coding.imooc.com/class/400.html

[4]

前端框架及項目面試: https://coding.imooc.com/class/419.html

[5]

字節面試飛書文檔: https://bytedance.feishu.cn/base/app8Ok6k9qafpMkgyRbfgxeEnet?table=tblEnSV2PNAajtWE&view=vewJHSwJVd

[6]

這一次，徹底弄懂 JavaScript 執行機制: https://juejin.cn/post/6844903512845860872

[7]

呆呆大佬的promise題: https://juejin.cn/post/6844904077537574919

[8]

川神的面試官問系列: https://juejin.cn/post/6844903746984476686

[9]

還是推薦呆呆大佬的this題: https://juejin.cn/post/6844904083707396109

[10]

冴羽大佬的原型相關文章: https://github.com/mqyqingfeng/Blog/issues/2

[11]

冴羽大佬的多種繼承的實現及優缺點: https://github.com/mqyqingfeng/Blog/issues/16

[12]

我從來不理解JavaScript閉包直到有人這樣向我解釋它: https://juejin.cn/post/6844903858636849159

[13]

從 4 個面試題了解「瀏覽器的垃圾回收」: https://juejin.cn/post/6861967094318284814

[14]

你真的了解垃圾回收機制嗎: https://juejin.cn/post/6981588276356317214

[15]

布局大全推薦文章: https://juejin.cn/post/6844903574929932301

[16]

react深入淺出專欄: https://kaiwu.lagou.com/course/courseInfo.htm?courseId=510#/sale

[17]

react小冊: https://juejin.cn/book/6945998773818490884

[18]

15張圖，20分鐘吃透Diff算法核心原理: https://juejin.cn/post/6994959998283907102

[19]

卡頌老師對生命周期的講解視頻: https://www.bilibili.com/video/BV16t4y1r7oJ?p=1

[20]

如何寫出一個驚艷面試官的深拷貝: https://cloud.tencent.com/developer/article/1497418

[21]

通用柯里化函數: https://juejin.cn/post/6844904093467541517

[22]

冴羽大佬的博客: https://github.com/mqyqingfeng/Blog/issues/22

[23]

冴羽大佬博客: https://github.com/mqyqingfeng/Blog/issues/26

[24]

知乎高贊文章: https://zhuanlan.zhihu.com/p/139952856

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信江西?拉你進群。

總結

以上是生活随笔為你收集整理的一名运营，自学一年前端，成功入职杭州某独角兽企业，他的面试经验和学习方法等分享...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Taro+react开发（26）taro
下一篇：前端学习（3196）：虚拟dom和真实d