大概春節(jié)之后吧，就有字節(jié)跳動(dòng)的hr聯(lián)系到我佑附，看到我的信息是明年畢業(yè)了，要不要試一下實(shí)習(xí)面試仗考，我就想著反正不虧音同，就試一下吧哈哈。

面試前

• 整理一下自已目前為止所做的項(xiàng)目秃嗜，做一下項(xiàng)目的總結(jié)权均，找到項(xiàng)目中的亮點(diǎn)和難點(diǎn)顿膨，做出一份歸納，以便在面試過程中可以和面試官聊一下叽赊。
• 算法題刷題恋沃，這個(gè)不用多說了吧，找工作找實(shí)習(xí)都需要刷一下的必指，前端的話刷到leetcode中等難度就可以了囊咏，感興趣也可以做一下較難的題。我大概刷了50道leetcode吧塔橡，各種類型都做一下那樣梅割。
• 前端面試題，強(qiáng)烈建議刷鸥鸺遥客上的前端系列面試題户辞，上面基本上能夠涵蓋百分之六十的面試題，熱度高的那些題刷個(gè)二十題就差不多了惦银。
• 鍛煉一下說話聊天的能力咆课，可以練習(xí)一下講解自已做的項(xiàng)目，說一下亮點(diǎn)和難點(diǎn)扯俱，確保表達(dá)清晰书蚪，邏輯清晰，語言流暢迅栅。

然后就是殊校，面試是開攝像頭的，面試之前整理一下儀容读存，留個(gè)好印象也挺重要的~~

一面

首先是自我介紹为流，一面的自我介紹應(yīng)該詳細(xì)一點(diǎn)，畢竟是第一次介紹自已让簿。

question one

在自我介紹的時(shí)候聊到了自已做過的項(xiàng)目敬察，面試官就針對(duì)我做過的項(xiàng)目深入地問下去，在做小程序時(shí)我有對(duì)微信的幾個(gè)基本api進(jìn)行了二次封裝尔当，分別如下：

• 對(duì)于全局?jǐn)?shù)據(jù)共享莲祸，進(jìn)行簡(jiǎn)單的消息中心封裝
• 對(duì)于全局路由管理，基于Map進(jìn)行路由判斷封裝
• 對(duì)于云函數(shù)調(diào)用椭迎，基于promise鏈?zhǔn)饺裰模M(jìn)行攔截器封裝

其實(shí)上面的三個(gè)對(duì)于基本api的封裝，是在做創(chuàng)維的項(xiàng)目時(shí)有一定的思考之后進(jìn)行的畜号，熟悉前端主流框架vue的同學(xué)應(yīng)該不會(huì)陌生缴阎，分別對(duì)應(yīng)三個(gè)主流開發(fā)工具包：vuex，vue-router简软，axios

只是小程序由于其天然js橋的環(huán)境隔離蛮拔，并不能上述成熟的工具述暂，我就嘗試著自已進(jìn)行簡(jiǎn)單的封裝了；如果對(duì)上述三個(gè)工具包的源碼有一定的研究的話语泽，在小程序端把基本功能封裝出來是不難的贸典，如果感興趣的話视卢，可以看我的博客：https://blog.csdn.net/weixin_43783814/article/details/113358070

跟面試官講解了一輪之后踱卵，可能講解的不是很清楚吧，然后我就請(qǐng)求了共享屏幕据过，直接打開代碼給面試官看惋砂，讓面試官一邊看代碼一邊聽我的講解了。

這一部分講完绳锅，面試就已經(jīng)開始了大約半個(gè)小時(shí)了西饵，這也是一面的主要部分了~

question two

問：既然聊到了小程序，可以聊一下小程序生態(tài)嗎鳞芙？
答：首先小程序是為了解決跨端應(yīng)用問題的眷柔，原理是js橋，進(jìn)行底層的隔離原朝，再把對(duì)應(yīng)的鉤子暴漏出去形成小程序開發(fā)過程中使用的API驯嘱。

ps：這里對(duì)于js橋的原理，大家去搜索一下了解一下吧喳坠，上述回答是簡(jiǎn)易版鞠评，真正面試肯定要聊多一點(diǎn)的。

問：小程序開發(fā)中壕鹉，怎么做全局環(huán)境和頁面獨(dú)立環(huán)境的隔離剃幌？
答：首先，根據(jù)js橋的隔離晾浴，小程序也是類似單頁面應(yīng)用的架構(gòu)负乡，根據(jù)app.json中的配置項(xiàng)為主頁面進(jìn)行基礎(chǔ)配置而已，比如說導(dǎo)航欄其實(shí)是js橋在在節(jié)點(diǎn)樹末端加入官方寫好的組件并且通過display:fixed完成的脊凰。全局入口環(huán)境是app.js抖棘，js橋在背后完成了頁面的棧式管理，所以只要在app.js中綁定方法或者類就可以完成全局環(huán)境的隔離了笙各。

ps：對(duì)于小程序底層钉答，可以參考小程序官方文檔和一些博客講解，這里問的比較深了杈抢，我并沒有答得很好数尿，希望大家如果遇到這個(gè)問題，可以答得更好

問：小程序開發(fā)中惶楼，怎么取到特定的頁面或組件
答：小程序頁面是棧式管理的右蹦，有特定的api可以取到這個(gè)棧诊杆；如果要取到特定的組件，需要在引入組件時(shí)綁定id何陆，然后可以通過selectComponent()取到對(duì)組件的引用

question 3

問：你剛才說有做過博客網(wǎng)站的項(xiàng)目晨汹，有什么印象深刻的地方嗎？
答：前端方面主要都是寫頁面贷盲，寫邏輯淘这，沒有太多亮點(diǎn)；后端方面也是增刪改查為主巩剖，印象深刻的就是對(duì)于評(píng)論模塊的處理铝穷。

問：評(píng)論模塊怎么處理的？
答：思考過后佳魔，采用兩張表解決這個(gè)問題曙聂，一張表存儲(chǔ)根評(píng)論，與博客文章多對(duì)一相關(guān)鞠鲜；一張表存儲(chǔ)根評(píng)論下的子評(píng)論或者回復(fù)宁脊，需要記錄是屬于回復(fù)根評(píng)論的或者是回復(fù)子評(píng)論的

問：有沒有考慮過一張表就能解決呢？
答：如果使用一張表的話贤姆，就采用類似于樹的結(jié)構(gòu)榆苞，需要記錄父評(píng)論的id，如果是根評(píng)論的話庐氮，父評(píng)論id就是空了

問：既然這樣语稠，寫一個(gè)函數(shù)來處理一下這個(gè)結(jié)構(gòu)吧，轉(zhuǎn)成前端需要的結(jié)構(gòu)

1-1

ps：這個(gè)問題挺經(jīng)典的弄砍，不給出代碼了仙畦，大家自已試一下吧

q&a

反問階段，由于當(dāng)時(shí)我網(wǎng)絡(luò)出現(xiàn)問題了音婶，就跳過結(jié)束了~~

二面

一樣的慨畸，先是自我介紹，這次自我介紹就可以簡(jiǎn)短一點(diǎn)了衣式，上一輪的面試官其實(shí)已經(jīng)記錄了挺多信息的了寸士，不用說太多了

question 1

問：能不能聊一下，一個(gè)html文件中碴卧，<script></script>通常寫在哪弱卡？為什么？
答：如果單個(gè)頁面住册，寫在html代碼之后婶博，其實(shí)通過webpack等構(gòu)建工具構(gòu)建出來的代碼也是寫在html代碼后面的，這是為了讓瀏覽器渲染效率提高所做的荧飞。因?yàn)闉g覽器在把我們寫的代碼轉(zhuǎn)換成我們看到的頁面是先維護(hù)兩棵樹的凡人，一棵樹是元素節(jié)點(diǎn)信息的樹名党，一棵是節(jié)點(diǎn)樣式信息的樹，在兩棵樹構(gòu)建完成后才會(huì)進(jìn)行樹的合并挠轴，生成一棵包含樣式传睹，屬性等各種信息的節(jié)點(diǎn)樹，最后才根據(jù)這棵節(jié)點(diǎn)信息樹把頁面畫出來岸晦。而因?yàn)閖s腳本語言是可能會(huì)操作元素節(jié)點(diǎn)信息的樹的欧啤，所以瀏覽器在碰到j(luò)s腳本時(shí)會(huì)停下樹的構(gòu)建而先把js代碼執(zhí)行完，這樣會(huì)造成頁面性能的變差委煤，所以盡量把js腳本放到html代碼的后面堂油，或者使用async，defer異步加載腳本碧绞。

ps：瀏覽器原理前端的同學(xué)還是要了解一下的，搜一下資料看一下即可

問：既然說到渲染的過程吱窝，做道題吧讥邻，把這個(gè)描述對(duì)象渲染成節(jié)點(diǎn)樹

2-1

ps：經(jīng)典前端面試題，問題不大

question 2

問：

2-2

ps：也是經(jīng)典面試題吧院峡，通過不同瀏覽器支持的特殊js-api可以檢測(cè)兴使；css里也有wekit這樣的標(biāo)準(zhǔn)可以檢測(cè)，大家搜一下就知道了照激。

question 3

問：

2-3

ps：依然是經(jīng)典面試題发魄，自測(cè)一下吧

question 4

問：

2-4

js基礎(chǔ)，后面追問了new Number(1)==new Number(1)

question 5

問：

2-5

不多說了俩垃，js基礎(chǔ)励幼；

因?yàn)橛玫搅?code>Array.from()，追問：這個(gè)函數(shù)第二個(gè)參數(shù)是什么口柳，第一個(gè)參數(shù)是不是傳入任何變量都可以苹粟？

ps：Array.from()傳入的第一個(gè)參數(shù)是可枚舉變量，可選的第二個(gè)參數(shù)是枚舉函數(shù)

question 6

問：下面的代碼會(huì)渲染出container實(shí)際高度是多高跃闹？怎么解決child不占高度的問題嵌削？

2-6

ps：css基礎(chǔ)，大家應(yīng)該都懂~~

q&a

反問：怎么實(shí)現(xiàn)全球語言的應(yīng)用適配

二面總結(jié)

二面聊的就比較少了望艺，以做題為主苛秕，其實(shí)做的題不止上面這些的，還有幾題因?yàn)槭敲嬖嚬倏陬^述說的找默，我沒能截下圖艇劫，過了也挺久了，記不起來了啡莉，但總體還是基礎(chǔ)為主港准，難度沒有太高

三面

三面的面試官看起來感覺是個(gè)大佬~~

question 1

問：怎么學(xué)習(xí)前端的旨剥？什么契機(jī)開始學(xué)習(xí)？
ps：這種問題可以事先準(zhǔn)備好答案了浅缸，回答時(shí)可以自信一點(diǎn)

問：看書的話看些什么書來學(xué)習(xí)前端轨帜？如果讓你推薦一些書給別人學(xué)習(xí)，你會(huì)推薦哪些衩椒？為什么蚌父？

問：ES6中哪些特性或者方法你覺得很好？平常開發(fā)時(shí)用哪些比較多毛萌？

問：(前面聊到了Object.assign()是淺拷貝) 能說一下深拷貝和淺拷貝嗎苟弛？
ps：對(duì)于這個(gè)問題網(wǎng)上有很多答案，但我個(gè)人覺得都不太準(zhǔn)確阁将。如果了解計(jì)算機(jī)基礎(chǔ)的話膏秫，應(yīng)該能明白無論什么語言，數(shù)組和對(duì)象變量其實(shí)都是一個(gè)指針做盅，指向具體數(shù)組或?qū)ο髷?shù)據(jù)存儲(chǔ)的位置缤削，而arr[i]中的i其實(shí)表示的是指針指向的位置向后移動(dòng)多少個(gè)單位取數(shù)據(jù)。所以淺拷貝本質(zhì)上拷貝的是指針吹榴，而深拷貝是把所有數(shù)據(jù)拷貝一份的意思~~

問：那就實(shí)現(xiàn)一下深拷貝吧

3-1

ps：經(jīng)典面試題亭敢，問題不大

question 2

問：聊一下數(shù)據(jù)庫？如何防止死鎖图筹？如何解決死鎖帅刀？
ps：計(jì)算機(jī)基礎(chǔ)，可事先組織好語言远剩，當(dāng)八股文背吧~~

問：聊一下計(jì)算機(jī)網(wǎng)絡(luò)扣溺？
ps：自頂向下聊一下即可

問：tcp是如何確保雙方通信無誤的？
ps：傳輸層的算法聊一下即可

問：三次握手四次握手的過程聊一下民宿？
ps：必背的內(nèi)容娇妓，不多說了~

問：url的各段分別是什么作用？
ps：基礎(chǔ)問題活鹰，分段講一下url就行哈恰。對(duì)于#后面的部分我擴(kuò)展地聊了一下用于前端路由的實(shí)現(xiàn)，然后再聊了一下前端路由器和路由組件的實(shí)現(xiàn)原理(面試官對(duì)我的擴(kuò)展講述挺滿意的)
在回答問題中如果遇上自已擅長的東西可以擴(kuò)展將一下志群，能給面試官留下好印象~~

問：寫個(gè)函數(shù)着绷，解析query

3-2

ps：牛客上有原題锌云，不多說了

q&a

我繼續(xù)問了二面的問題：如何實(shí)現(xiàn)應(yīng)用在多語言環(huán)境下的切換荠医？

四面

剛剛面完四面，四面有點(diǎn)翻車了，可能會(huì)導(dǎo)致涼了~~

question 1

問：前面的幾輪面試感受如何彬向？
答：面試官風(fēng)格不同兼贡，有些聊天比較多，有些寫題比較多~~

問：那你喜歡聊天還是寫題娃胆？
答：當(dāng)然是喜歡聊天啊哈哈~

問：看到前面面試官有記錄下你聊你之前寫過的項(xiàng)目遍希，可不可以聊一下前面沒有講過的東西呢？
答：個(gè)人覺得有亮點(diǎn)的都聊過了里烦，還有一些簡(jiǎn)單的項(xiàng)目也沒有聊的必要了凿蒜。還有一個(gè)是跟老師做的項(xiàng)目，基于python qt 做的桌面應(yīng)用

ps：萬惡的開始胁黑，聊了python qt废封，就被抓著問底層了，后面直接裂開~~

問：

4-1

ps：答得不好丧蘸，沒準(zhǔn)備這方面的東西

question 2

問：在用qt開發(fā)時(shí)漂洋，和前端開發(fā)有什么不同？有什么相同触趴？
ps：不給出答案了氮发，應(yīng)該沒多少同學(xué)知道qt吧~~

問：python qt 的事件機(jī)制與前端的事件機(jī)制分別是怎么樣？
ps：python qt 的我就不給出答案了冗懦，前端的事件機(jī)制就是指冒泡和捕獲那一套

問：(聊到html本質(zhì)上只是一段字符串，其實(shí)單純用js也可以寫出頁面) 實(shí)現(xiàn)一下描述對(duì)象轉(zhuǎn)xml吧

4-2

ps：其實(shí)和前面二面一道題幾乎一樣

question 3

問：聊一下js和python的基礎(chǔ)數(shù)據(jù)類型仇祭？

問：你覺得python和js有什么不一樣披蕉？
ps：js是解釋型語言，python是編譯型語言乌奇，要了解到j(luò)s其實(shí)和html沒什么區(qū)別没讲，本質(zhì)上是一段字符串~

問：語言特性上有什么不一樣的？
ps：我聊了一下礁苗，js其實(shí)是沒有類的概念的爬凑，js的類其實(shí)是通過對(duì)象和原型鏈構(gòu)造出來的~

問：還有嗎？
ps：暫時(shí)想不到了(難受)

問：python和js的垃圾回收機(jī)制分別時(shí)怎么樣试伙？
ps：python的我就不聊了嘁信，js的垃圾回收機(jī)制要分為瀏覽器端和node端的，這里跟大家聊一下吧：

/** 內(nèi)存控制
 *  在V8引擎中疏叨，主要將內(nèi)存分為新生代和老生代兩代潘靖，新生代中的對(duì)象為存活時(shí)間較短的對(duì)象，老生帶中為存活時(shí)間較長的對(duì)象
 * 
 *  在分代的基礎(chǔ)上蚤蔓，新生代中的對(duì)象主要通過Cheney算法進(jìn)行垃圾回收
 *  Cheney算法是一種采用復(fù)制的方式實(shí)現(xiàn)的垃圾回收算法卦溢，將內(nèi)存分為From空間和To空間，分配對(duì)象時(shí)先在From空間進(jìn)行分配
 *  當(dāng)開始進(jìn)行垃圾回收時(shí)，會(huì)檢查From空間中存活的對(duì)象单寂，這些存活的對(duì)象將被復(fù)制到To空間中贬芥，而非存活空間占用的空間將被釋放，
 *  完成復(fù)制之后宣决，F(xiàn)rom空間和To空間的角色發(fā)生對(duì)換
 * 
 *  而當(dāng)一個(gè)對(duì)象經(jīng)過多次復(fù)制依然存活時(shí)蘸劈，它會(huì)被認(rèn)為是生命周期較長的對(duì)象，隨后會(huì)被移動(dòng)到老生帶中疲扎，這個(gè)過程稱為晉升
 * 
 *  在分代的基礎(chǔ)上昵时，老生帶中的對(duì)象通過Mark-Compact方法管理，標(biāo)志整理的意思
 *  在標(biāo)記階段遍歷堆中所有的對(duì)象椒丧，并標(biāo)記活著的對(duì)象壹甥，
 *  在整理階段，先清除沒有標(biāo)記的對(duì)象壶熏，再將活著的對(duì)象往一端移動(dòng)句柠，防止出現(xiàn)內(nèi)存空間不連續(xù)的問題
 */

這個(gè)問題很難簡(jiǎn)短說清楚，大家可以讀一下<<node深入淺出>>這本書棒假，書中有詳細(xì)的說明

question 4

問：

4-3

ps：情商問題溯职，可以先組織好語言

問：開個(gè)腦洞

4-4

ps：沒有統(tǒng)一答案，開腦洞聊一下

q&a

我繼續(xù)追問了多語言適配的問題

ps：其實(shí)我每一輪問這個(gè)問題都是不斷深入的問的帽哑，并不是一樣的問題谜酒，這里不展開說了~

總結(jié)

不知道能不能通過技術(shù)面試，四輪面下來妻枕，感覺面試官還是很希望面試者能夠多聊一下自已做過的東西僻族，有什么覺得自已做得比較好的地方的。盡量多準(zhǔn)備一些可以自已聊的東西屡谐，準(zhǔn)備多一些項(xiàng)目去聊(我三個(gè)項(xiàng)目述么，到后面都不夠聊了)，但是不要去抄別人的東西愕掏，一定要是自已真正懂的度秘，不然被面試官抓住漏洞問你，你又沒有深入了解和思考的話就涼了~~

希望大家春招順利６拧＝Ｊ帷！