當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

(字节/华为/美团)前端面经记录冷冷清清的金三银四

發(fā)布時間：2023/12/9 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 (字节/华为/美团)前端面经记录冷冷清清的金三银四小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

大家好，我是若川。持續(xù)組織了8個月源碼共讀活動，感興趣的可以點此加我微信 ruochuan12?參與，每周大家一起學(xué)習(xí)200行左右的源碼，共同進(jìn)步。同時極力推薦訂閱我寫的《學(xué)習(xí)源碼整體架構(gòu)系列》?包含20余篇源碼文章。歷史面試系列

從畢業(yè)到現(xiàn)在已經(jīng)在北京3年了，當(dāng)年一起來北京的同學(xué)，如今都有了要離開的打算。我也在萌生了想要去成都的想法。然而從投遞簡歷開始，就感受到了今年確實不是很景氣。很多大廠不是裁員就是鎖HC，面試邀約都顯得非常寶貴。

字節(jié)（北京）

一面

HTTPS建立連接過程

http緩存，強(qiáng)緩存時cache-control字符集是什么 publichttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

深拷貝的實現(xiàn)，如果遇到function怎么辦需要判斷類型，對于基礎(chǔ)類型，直接賦值，對于復(fù)雜類型則需要遞歸處理，并同時設(shè)置map，避免嵌套。對于function可以通過 new Function(' return '+ fn.toString())的方式拷貝

webpack 有用過哪些loader、webpack做過哪些優(yōu)化 loader：babel-loader、ts-loader、style-loader、css-loader、less-loader 優(yōu)化：提取公共代碼、代碼分割、代碼壓縮、按需加載、預(yù)加載

微前端的問題，設(shè)計思路，有遇到哪些問題，如何做樣式隔離。公用路由的設(shè)計采用路由分層的方式，將路由劃分為4層，第一層用來區(qū)分是iframe還是微應(yīng)用，第二層用來區(qū)分具體的app頁面名稱由此在配置表中拿到具體的配置信息，第三層為子應(yīng)用的路由，第4層為子應(yīng)用的參數(shù)。由此實現(xiàn)基座與微應(yīng)用的路由共享。

樣式隔離，一是通過qiankun自身提供的樣式沙箱 { sandbox : { experimentalStyleIsolation: true } } ，二是vue組件樣式使用scoped，三是頂層樣式增加私有類名面試官反饋說，iframe還是微應(yīng)用對于用戶來說是無感的，配置表區(qū)分iframe還是微應(yīng)用即可，不必多占一層路由

為什么要使用composition-api 首先因為業(yè)務(wù)性質(zhì)需要兼容ie所以項目只能使用vue2 通過使用@vue/composition-api方式使用新特性。轉(zhuǎn)變以往的vue選項式開發(fā)，為更貼近函數(shù)式的代碼開發(fā)。使原本關(guān)聯(lián)邏輯分散在各個選項中，組件代碼龐大的問題的問題得到解決，提高代碼易讀性、可維護(hù)性。同時通過抽取hook實現(xiàn)邏輯復(fù)用，提升效率。相較于mixin具有隱式依賴等缺點，更具備可用性。

兩數(shù)之和https://leetcode-cn.com/problems/two-sum/

純數(shù)字版本號數(shù)組排序

function?versionSort(versions)?{return?versions.sort((a,?b)?=>?{const?aArr?=?a.split(".");const?bArr?=?b.split(".");while?(aArr.length?||?bArr.length)?{const?A?=?aArr.shift()?||?0;const?B?=?bArr.shift()?||?0;if?(A?-?B?!==?0)?{return?A?-?B;}}}); }

二面

http請求頭有哪些字段 Accept系列、Cache-Control、Cookie、Host等等

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers2. 原型鏈

https://juejin.cn/post/69344983614750720143. 工作中遇到的具有挑戰(zhàn)的事情從零開始搭建完善的工具庫，如何組織代碼？如何保持資源的動態(tài)引入？如何來做單元測試？4. 單頁面通信，多頁面通信這個我一下蒙了。但是感覺應(yīng)該是路由通信、借助cookie、localStorage通信，以及iframe的通過addEventListener和postMessage通信 5. 微前端樣式隔離同上 6. 網(wǎng)絡(luò)安全展開說幾種安全問題：XXS CSRF、點擊嵌套劫持、CDN劫持等防范主要圍繞同源策略，cookie的sameSite 、http-only，referer的驗證，CSP等方式來避免https://zhuanlan.zhihu.com/p/83865185

webpack與rollup的區(qū)別 webpack大而全，功能全面配置完善，同時loader與plugin非常豐富。并且具有deveServer方便開發(fā)調(diào)試 rollup小而美，相較沒有webpack完善但是同樣體積更小速度更快。類似壓縮等基礎(chǔ)功能也要通過插件實現(xiàn)。更適合做一些工具庫的打包處理

介紹一下你寫的webpack loader 工具為了兼容vue2、vue3兩個版本，核心代碼是完全相同的，差異只是在vue特性api的引入上，vue2從@vue/composition-api中引入，vue3從vue中引入.所以loader做的事情就是在構(gòu)建vue2版本的時候?qū)mport { *** } from 'vue' 替換為 import { *** } from '@vue/composition-api'

職業(yè)規(guī)劃希望在未來的兩到三年時間，拓充技術(shù)能力的同時，在業(yè)務(wù)能力上有所沉淀成為業(yè)務(wù)，形成一定的見解，同時謀求從大頭兵向小組長的一個轉(zhuǎn)變

實現(xiàn)具有并發(fā)限制的promise.all

function?promsieTask(taskList,?maxNum)?{return?new?Promise((resolve,?rejuct)?=>?{let?runCount?=?0;let?complated?=?0;const?taskNum?=?taskList.length;const?resArr?=?[];let?current?=?0function?handler()?{if(runCount>=maxNum)?returnconst?a?=?taskNum?-?complated;const?b?=?maxNum?-?runCountconst?arr?=?taskList.splice(0,?a>b?b:a);arr.forEach((task,?index)?=>?{const?d?=?current+indextask.then((res)?=>?{console.log(current,index,res)resArr[current]?=?res;},(reason)?=>?{resArr[current]?=?reason;}).finally(()?=>?{complated++;runCount--;if?(complated?===?taskNum)?{resolve(resArr);}handler();});});current?+=?taskList.length}handler();}); }

三面

業(yè)務(wù)相關(guān)，聊一下做的印象最深的項目，有哪些關(guān)鍵指標(biāo)衡量效果,有哪些進(jìn)步優(yōu)化空間這個具體到業(yè)務(wù)指標(biāo)原來沒有怎么想過，答得不是很好

從具體的業(yè)務(wù)中講講和學(xué)習(xí)的關(guān)系這個問題也是沒有考慮的很好，講的很虛。是講的最近做的一個項目的重構(gòu)，從設(shè)計模式的方面，和vue底層的方面講了一下。后面想想應(yīng)該從一些新技術(shù)或者以前不熟悉的東西入手，講一邊業(yè)務(wù)開發(fā)通過新技術(shù)拓展能力，一方面將學(xué)習(xí)通過實踐的方式加深理解

對自我的認(rèn)知和未來規(guī)劃因為問業(yè)務(wù)相關(guān)回答的不是很好，所以著重講了一下希望加強(qiáng)業(yè)務(wù)能力

筆試題合并兩個遞增鏈表

/***?Definition?for?singly-linked?list.*?function?ListNode(val)?{*?????this.val?=?val;*?????this.next?=?null;*?}*/ /***?@param?{ListNode}?l1*?@param?{ListNode}?l2*?@return?{ListNode}*/ var?mergeTwoLists?=?function(l1,?l2)?{const?head?=?new?ListNode()let?current?=?headwhile(l1&&l2){if(l1.val<l2.val){current.next?=?l1?l1?=?l1.next}else{current.next?=?l2l2?=l2.next}current?=?current.next}if(l1){current.next?=?l1}if(l2){current.next?=?l2}return?head.next };

HR面

畢業(yè)以來的工作履歷

當(dāng)時為什么沒有走校招

去年換工作的時候收到的offer和選擇

有沒有收到其他公司的offer，有沒有什么傾向性

選擇工作有什么著重點

華為OD（成都）

機(jī)試題

輸入一個正整數(shù)，輸出他的兩個素數(shù)因子，如沒有輸出 -1 -1

輸入兩個數(shù)組，分別從兩個數(shù)組中取出一個元素相加，和作為一個元素，求K個這樣的元素的最小和。坐標(biāo)完全相同，屬于同一個元素。

輸入一個n*m的多維數(shù)組，輸出一個字符串，按順序?qū)⒆址械拿恳粋€字符在數(shù)組中查找，要求查找位置必須相鄰，且每一個元素只能使用一次。輸出字符串在數(shù)組中的坐標(biāo) 牛客網(wǎng)的測試用例無法調(diào)試，只知道通過率分別是100%，95%，95%.實在想不出邊界條件了。這里就不放出代碼誤導(dǎo)大家了。

一面

http 請求頭有哪些關(guān)鍵字，反映客戶端信息的是那個字段同上 User-Agent

http請求觸發(fā)catch的原因可能有哪些攔截器捕獲其他異常，比如204，請求處理函數(shù)執(zhí)行異常，返回資源異常（不符合接口定義）

302、304什么含義 302：臨時重定向 304：資源未修改，使用緩存

項目重構(gòu)前是什么狀態(tài) 部門內(nèi)第一個是使用組合式模式開發(fā)落地的項目，由于前期不熟悉缺乏經(jīng)驗。導(dǎo)致項目數(shù)據(jù)流動混亂、功能雜糅、請求相互依賴，不但沒有突出組合式邏輯清晰代碼復(fù)用的優(yōu)點，反而導(dǎo)致代碼可維護(hù)性差，白屏?xí)r間長。通過梳理邏輯功能，重新組織頁面、組件，按照單一原則抽離hook，解耦無關(guān)邏輯。梳理數(shù)據(jù)流動，無關(guān)請求并行觸發(fā)。提升代碼可維護(hù)性，加快首屏渲染。

微前端的技術(shù)方案是怎么確定的，有沒有遇到什么問題，樣式隔離，數(shù)據(jù)管理，路由沖突

是主要由我決定的。采用qiankun的原因，一是方案成熟，文檔健全，社區(qū)案例多。二是我自身以前有過一些經(jīng)驗，對qiankun比較了解，能夠快速落地
樣式隔離，一是通過qiankun自身提供的樣式沙箱 { sandbox : { experimentalStyleIsolation: true } } ，二是vue組件樣式使用scoped，三是頂層樣式增加私有類名
數(shù)據(jù)管理，qiankun本身有提供globalState相關(guān)api，但是子應(yīng)用只能在onchange事件觸發(fā)時才能拿到公共數(shù)據(jù)。所以先聲明公共數(shù)據(jù)，通過initGlobalState注冊，然后在微應(yīng)用注冊階段通過props方式預(yù)先傳遞給子應(yīng)用。在子應(yīng)用側(cè)，通過mounted鉤子和onClobalStateChange共同維護(hù)公共數(shù)據(jù)
路由沖突，子應(yīng)用是需要與基座共享路由的，所以在路由激活子應(yīng)用的模式下。預(yù)先分配給子應(yīng)用一個激活路由，這個路由同時也是子應(yīng)用的baseRoute，在掛載階段通過props傳遞，子應(yīng)用拿到baseRoute作為前綴注冊路由。從而實現(xiàn)路由共享。

qiankun的打包配置

https://qiankun.umijs.org/zh/guide2. 了解市面上其他的微前端方案么 1、是類似乾坤、飛冰這種基于singleSpa的方案 2、是類似美團(tuán)那種，相同技術(shù)架構(gòu)的，自研原生實現(xiàn) 3. 為什么使用Monorepo組織代碼倉庫我們這個庫，設(shè)計上就是要能夠支持vue2、vue3兩個版本，以及不同業(yè)務(wù)需要的采用Monorepo組織代碼倉庫，方便管理維護(hù)不同的功能包、既做到了獨立發(fā)布，又能在項目中統(tǒng)一維護(hù) 4. webpack知道有哪些插件lodaer么？5. webpack你知道哪些優(yōu)化

構(gòu)建階段、多線程、緩存
資源產(chǎn)物 ? 代碼壓縮、代碼分割、提取公共代碼、懶加載、預(yù)加載

leetcode 452題

https://leetcode-cn.com/problems/minimum-number-of-arrows-to-burst-balloons/

二面

http1 和http2的區(qū)別壓縮請求頭，二進(jìn)制分幀、多路復(fù)用

https://zhuanlan.zhihu.com/p/1025610342. 講一下loader和plugin webpack的loader主要用來處理特定的文件，進(jìn)行轉(zhuǎn)換 plugin通過wepack提供的構(gòu)建鉤子可以實現(xiàn)loader無法實現(xiàn)的功能，比如deveServer、代碼分割等 3. extenral 通過extenrals 選項，可以將依賴從輸出的bundle中移除，并保持資源引入 4. 講一下微前端微前端并不是為了取代iframe，他們都有所適用的場景。對于部分相互獨立并沒有什么復(fù)雜數(shù)據(jù)交互的項目來說iframe就很合適，而且天生具備很好的隔離。而對于具有數(shù)據(jù)交互，尤其是在一個大項目中拆解出不同的業(yè)務(wù)功能模塊來說，微前端的模式更合適。5. vue2和vue3的響應(yīng)式 vue2的響應(yīng)式是基于Object.definePropert 數(shù)據(jù)劫持與數(shù)組常用方法的改寫來實現(xiàn)的。對于復(fù)雜數(shù)據(jù)類型，需要層層遞歸劫持，性能較差 vue3是通過原生api proxy 代理實現(xiàn)的，不需要遞歸，也不需要改寫方法，性能更好，支持更好。但是由于代理只是對目標(biāo)對象，在傳遞響應(yīng)式對象時，操作不當(dāng)容易丟失響應(yīng)性。6. 講一下es6 這個就是老生常談了，大家仁者見仁智者見智 7. promise、promise.all ,promise與async await的區(qū)別，async await如并發(fā) promise 8. 計算島嶼周長

//?給定一個 row x col 的二維網(wǎng)格地圖 grid ，其中：grid[i][j]?= 1 表示陸地， grid[i][j]?=?0?表示水域。 //?網(wǎng)格中的格子?水平和垂直?方向相連（對角線方向不相連）。整個網(wǎng)格被水完全包圍，但其中恰好有一個島嶼（或者說，一個或多個表示陸地的格子相連組成的島嶼）。 //?島嶼中沒有“湖”（“湖”?指水域在島嶼內(nèi)部且不和島嶼周圍的水相連）。格子是邊長為 1 的正方形。網(wǎng)格為長方形，且寬度和高度均不超過 100?。計算這個島嶼的周長。 //?示例1：輸入：grid =?[[0,1,0,0],[1,1,1,0],[0,1,0,0],[1,1,0,0]] //?輸出：16 //?解釋：它的周長是上面圖片中的 16 個黃色的邊 //?示例2：輸入：grid =?[[1]] //?輸出：4function?search(grid)?{let?res?=?0grid.forEach((line,?i)?=>?{line.forEach((item,?j)?=>?{if?(item?===?1)?{dp(i,?j)}})});function?dp(i,?j)?{if?(i?==?0?||?grid[i?-?1][j]?==?0)?{res++}if?(i?+?1?==?grid.length?||?grid[i?+?1][j]?==?0)?{res++}if?(j?==?0?||?grid[i][j?-?1]?==?0)?{res++}if?(j?+?1?==?grid[0][1].length?||?grid[i][j?+?1]?==?0)?{res++}}return?res } const?grid?=?[[0,1,0,0],[1,1,1,0],[0,1,0,0],[1,1,0,0]] console.log(search(grid))

三面

這一面就是簡單溝通了一下現(xiàn)在的工作情況。電話面試大概10分鐘就結(jié)束了

美團(tuán)（成都）

一面

http 緩存cache-control字符集 max-age\public\private\no-cache\no-store\

網(wǎng)絡(luò)安全，頁面出現(xiàn)廣告什么原因 XSS腳本添加頁面？頁面劫持、代理？CDN，iframe嵌套同上

微前端樣式隔離，js隔離原理同上

babel原理

loader和plugin的區(qū)別同上

map和object的區(qū)別 map補(bǔ)足了js沒有這種字典類似功能的短板。雖然好像map能做的key/value object也可以實現(xiàn)。但是map可以按照順序遞歸，key可以是對象等復(fù)雜數(shù)據(jù)類型

Object.assgin 與 ...復(fù)制對象的區(qū)別這個除了使用方式上，并沒有感覺有什么不同，之后嘗試了一下表現(xiàn)也是一樣的

有做過組件庫，或者這種公共基礎(chǔ)么？有考慮哪些設(shè)計原則單一原則、拓展性、可靠性

有用過哪些ide的能力（變更函數(shù)名？）這個沒懂是想問什么

尾遞歸優(yōu)化這個是從調(diào)用棧的角度來講的，通過尾遞歸優(yōu)化的方式，釋放中間變量

https://zhuanlan.zhihu.com/p/39371113411. ts 用過那些函數(shù)，interface和type的區(qū)別 interface 可以拓展 extends interface能夠聲明合并 type不可以extends、implement但是可以類型交叉 type可以聲明類型別名、聯(lián)合類型、元組 interface不可以 12. 扁平化嵌套數(shù)組有幾種方式

flat
toString().split(',')
遞歸

二面

你最近做的事情在做一個lowCode平臺的代碼重構(gòu)，項目采用vue3但是之前是組合式的寫法。我們重構(gòu)主要做了兩件事，一是將選項式改為組合式，并抽離hook；二是將整個渲染配置數(shù)據(jù)從組件中剝離出來，通過響應(yīng)式的方式構(gòu)建單項數(shù)據(jù)流維護(hù)

介紹數(shù)據(jù)流，是否了解市面上其他公共狀態(tài)管理工具，了解Piniahttps://pinia.vuejs.org/introduction.html#basic-example通過vue3提供的響應(yīng)式api，我們獲得了無需借助第三方工具，即可實現(xiàn)公共響應(yīng)式數(shù)據(jù)的維護(hù)。我們總結(jié)了一些經(jīng)驗，可以直接定義響應(yīng)式數(shù)據(jù)，以及更新他的set方法通過代碼引入，props傳遞以及porvide/inject的方式靈活使用。感覺這部分表達(dá)為什么不用市面上已有的狀態(tài)管理庫而用我們的方案，這部分講的不夠自信，理由不夠充分

展開問業(yè)務(wù)

問微前端的選型原因一是qiankun的技術(shù)方案相對比較完善，無論是常見問題還是社區(qū)經(jīng)驗都比較豐富二是我個人之前有一定的知識儲備，使用qiankun能夠容易落地

如何尋找到兩個dom節(jié)點的最近公共父節(jié)點通過從下向上遞歸，并將父節(jié)點儲存，比較

美團(tuán)二面感覺面的不是很好二面之后就沒有后續(xù)了

·················?若川簡介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結(jié)，已經(jīng)堅持寫了8年，點擊查看年度總結(jié)。
同時，最近組織了源碼共讀活動，幫助3000+前端人學(xué)會看源碼。公眾號愿景：幫助5年內(nèi)前端人走向前列。

掃碼加我微信 ruochuan02、拉你進(jìn)源碼共讀群

今日話題

目前建有江西|湖南|湖北?籍前端群，想進(jìn)群的可以加我微信 ruochuan12?進(jìn)群。分享、收藏、點贊、在看我的文章就是對我最大的支持~

總結(jié)

以上是生活随笔為你收集整理的(字节/华为/美团)前端面经记录冷冷清清的金三银四的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： GitHub 最受欢迎的Top 20 J
下一篇： 2017年html5行业报告,云适配发布