中級(jí)前端面試題2022

1、中級(jí)前端面試題2022中級(jí)前端面試題目總結(jié)如下：一、一個(gè)完整的URL解析過程：用戶輸入U(xiǎn)RL地址，對(duì)URL地址進(jìn)行DNS域名解獲得IP地址，建立 TCP連接（三次握手），瀏覽器向web服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求報(bào)文，服 務(wù)器返回HTTP響應(yīng)報(bào)文給客戶端，關(guān)閉TCP連接（四次揮手）,瀏覽器解析 文檔資源并渲染頁(yè)面。解析過程：瀏覽器解析的資源（html , svg,Xhtml等），解析完成后都會(huì)生 成一個(gè)完整的DOM Tree , css

2、資源則會(huì)解析成CSS Rule Tree ,生成之后進(jìn)行 瀏覽器渲染，保證腳本執(zhí)行前已完成DOM渲染會(huì)放在body標(biāo)簽結(jié)束之后。二、EventLoop 是什么?Event Loop即事件循環(huán)，是指瀏覽器或Node的一種解決JavaScript單線 程運(yùn)行時(shí)不會(huì)阻塞的一種機(jī)制，也就是我們經(jīng)常使用異步的原理，是T 程序結(jié)構(gòu), 用于等待和發(fā)送消息和事件。執(zhí)行過程：事件循環(huán)的111頁(yè)序,決定了 JavaScript代碼的執(zhí)行順序。它從 scr

3、ipt（整體代碼）開始第一次循環(huán)（即宏任務(wù)X之后全局上下文進(jìn)入函數(shù)調(diào)用棧。 直到調(diào)用棧清空（只剩全局）,然后執(zhí)行所有的micro-task （微任務(wù)\當(dāng)所有可 執(zhí)行的micro-task （微任務(wù)）執(zhí)行完畢之后。循環(huán)再次從macro-task （宏任務(wù)） 開始，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，然后再執(zhí)行所有的micro-task （微任 務(wù)），這樣一直循環(huán)下去。三、什么是HTTP和HTTPSHTTP :超文本傳輸協(xié)議，是一個(gè)基于請(qǐng)求與響

4、應(yīng)，無狀態(tài)的，應(yīng)用層的協(xié)每個(gè)聲明的屬性，都會(huì)有一個(gè)專屬的依賴收集器subs ,當(dāng)頁(yè)面使用到某個(gè)屬 性時(shí)，觸發(fā)ObjectdefineProperty - get函數(shù)，頁(yè)面的watcher就會(huì)被 放至U 屬性的依賴收集器subs中，在數(shù)據(jù)變化時(shí)，通知更新；當(dāng)數(shù)據(jù)改變的時(shí)候， 會(huì)觸發(fā)ObjectdefineProperty -set函數(shù)，數(shù)據(jù)會(huì)遍歷自己的依賴收集器 subs ,逐個(gè)通知watcher,視圖開始更新。Vue3.x雙向綁定響應(yīng)式

5、健康里，Proxy可以直接監(jiān)聽對(duì)象和數(shù)組的變化, 并且有多達(dá)13種攔截方法。并且作為新標(biāo)準(zhǔn)將受到瀏覽器廠商重點(diǎn)持續(xù)的性能 優(yōu)化。Proxy只會(huì)代理對(duì)象的第一層，Vue3是怎樣處理這個(gè)問題的呢?判斷當(dāng) 前Reflect.get的返回值是否為Object,如果是則再通過reactive方法做代理， 這樣就實(shí)現(xiàn)了深度觀測(cè)。監(jiān)測(cè)數(shù)組的時(shí)候可能觸發(fā)多次get/set,那么如何防止 觸發(fā)多次呢?我們可以判斷key是否為當(dāng)前被代理對(duì)象target

6、自身屬性，也可 以判斷舊值與新值是否相等，只有滿足以上兩個(gè)條件之一時(shí)，才有可能執(zhí)行 trigger。六、vue的優(yōu)點(diǎn)是什么？低耦合。視圖(View )可以獨(dú)立于Model變化和修改，一個(gè)ViewModel 可以綁定到不同的“View“上,當(dāng)View變化的時(shí)候Model可以不變，當(dāng) Model變化的時(shí)候View也可以不變。可重用性。你可以把一些視圖邏輯放在一個(gè)ViewModel里面，讓很多 view重用這段視圖邏輯。獨(dú)立開發(fā)。開發(fā)人員可以