中級前端面試題2022

1、中級前端面試題2022中級前端面試題目總結(jié)如下：一、一個完整的URL解析過程：用戶輸入URL地址，對URL地址進行DNS域名解獲得IP地址，建立 TCP連接（三次握手），瀏覽器向web服務(wù)器發(fā)送一個HTTP請求報文，服 務(wù)器返回HTTP響應報文給客戶端，關(guān)閉TCP連接（四次揮手）,瀏覽器解析 文檔資源并渲染頁面。解析過程：瀏覽器解析的資源（html , svg,Xhtml等），解析完成后都會生 成一個完整的DOM Tree , css資源則會解析成CSS Rule Tree ,生成之后進行 瀏覽器渲染，保證腳本執(zhí)行前已完成DOM渲染會放在body標簽結(jié)束之后。二、EventLoop 是什么?E

2、vent Loop即事件循環(huán)，是指瀏覽器或Node的一種解決JavaScript單線 程運行時不會阻塞的一種機制，也就是我們經(jīng)常使用異步的原理，是T 程序結(jié)構(gòu), 用于等待和發(fā)送消息和事件。執(zhí)行過程：事件循環(huán)的111頁序,決定了 JavaScript代碼的執(zhí)行順序。它從 script（整體代碼）開始第一次循環(huán)（即宏任務(wù)X之后全局上下文進入函數(shù)調(diào)用棧。 直到調(diào)用棧清空（只剩全局）,然后執(zhí)行所有的micro-task （微任務(wù)當所有可 執(zhí)行的micro-task （微任務(wù)）執(zhí)行完畢之后。循環(huán)再次從macro-task （宏任務(wù)） 開始，找到其中一個任務(wù)隊列執(zhí)行完畢，然后再執(zhí)行所有的micro-tas

3、k （微任 務(wù)），這樣一直循環(huán)下去。三、什么是HTTP和HTTPSHTTP :超文本傳輸協(xié)議，是一個基于請求與響應，無狀態(tài)的，應用層的協(xié)議，?；赥CP/IP協(xié)議傳輸數(shù)據(jù)，互聯(lián)網(wǎng)上應用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，所有 的WWW文件都必須遵守這個標準。設(shè)計HTTP的初衷是為了提供一種發(fā)布和 接收HTML頁面的方法。HTTPS ：是一種通過計算機網(wǎng)絡(luò)進行安全通信的傳輸協(xié)議，經(jīng)由HTTP進 行通信,利用SSL/TLS建立全信道,加密數(shù)據(jù)包。HTTPS使用的主要目的是提 供對網(wǎng)站服務(wù)器的身份認證，同時保護交換數(shù)據(jù)的隱私與完整性。PS:TLS是傳輸層加密協(xié)議,前身是SSL協(xié)議,由網(wǎng)景公司1995年發(fā)布， 有

4、時候兩者不區(qū)分。四、https加密方式共享密鑰加密（對稱密鑰加密）：客戶端和服務(wù)器公用一個密匙用來對消息 加解密，這種方式稱為對稱加密。客戶端和服務(wù)器約定好一個加密的密匙。客戶 端在發(fā)消息前用該密匙對消息加密，發(fā)送給服務(wù)器后，服務(wù)器再用該密匙進行解 密拿到消息。公開密鑰加密（非對稱密鑰加密）：客戶端和服務(wù)端均擁有一個公有密匙和 一個私有密匙。公有密匙可以對外暴露，而私有密匙只有自己可見。使用公有密 匙加密的消息，只有對應的私有密匙才能解開。反過來，使用私有密匙加密的消 息，只有公有密匙才能解開。這樣客戶端在發(fā)送消息前，先用服務(wù)器的公匙對消 息進行加密，服務(wù)器收到后再用自己的私匙進行解密。五、V

5、ue2.X的雙向綁定響應式原理什么是響應式，也即是說，數(shù)據(jù)發(fā)生改變的時候，視圖會重新渲染，匹配更 新為最新的值。Object.defineProperty為對象中的每一個屬性，設(shè)置get和set方法,每個聲明的屬性，都會有一個專屬的依賴收集器subs ,當頁面使用到某個屬 性時，觸發(fā)ObjectdefineProperty - get函數(shù)，頁面的watcher就會被 放至U 屬性的依賴收集器subs中，在數(shù)據(jù)變化時，通知更新；當數(shù)據(jù)改變的時候， 會觸發(fā)ObjectdefineProperty -set函數(shù)，數(shù)據(jù)會遍歷自己的依賴收集器 subs ,逐個通知watcher,視圖開始更新。Vue3.

6、x雙向綁定響應式健康里，Proxy可以直接監(jiān)聽對象和數(shù)組的變化, 并且有多達13種攔截方法。并且作為新標準將受到瀏覽器廠商重點持續(xù)的性能 優(yōu)化。Proxy只會代理對象的第一層，Vue3是怎樣處理這個問題的呢?判斷當 前Reflect.get的返回值是否為Object,如果是則再通過reactive方法做代理， 這樣就實現(xiàn)了深度觀測。監(jiān)測數(shù)組的時候可能觸發(fā)多次get/set,那么如何防止 觸發(fā)多次呢?我們可以判斷key是否為當前被代理對象target自身屬性，也可 以判斷舊值與新值是否相等，只有滿足以上兩個條件之一時，才有可能執(zhí)行 trigger。六、vue的優(yōu)點是什么？低耦合。視圖(View

7、)可以獨立于Model變化和修改，一個ViewModel 可以綁定到不同的View上,當View變化的時候Model可以不變，當 Model變化的時候View也可以不變?？芍赜眯浴Ｄ憧梢园岩恍┮晥D邏輯放在一個ViewModel里面，讓很多 view重用這段視圖邏輯。獨立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel),設(shè) 計人員可以專注于頁面設(shè)計，使用Expression Blend可以很容易設(shè)計界面并生 成xml代碼。可測試。界面素來是比較難于測試的，而現(xiàn)在測試可以針對ViewModel來 寫。七、vue中v-if和v-show有什么區(qū)別?v-if和v-show都會讓元素顯

8、示和隱藏，但是v-if是通過移除口添加dom 元素,v-show是通過display:none來實現(xiàn)隱藏，v-show是css切換,v-if是 完整的銷毀和重新創(chuàng)建，使用頻繁切換時用v-show,運行時較少改變時用v-if, V-if二false v-if是條件渲染，當false的時候不會渲染，使用v-if的時候， 如果值為false ,那么頁面將不會有這個html標簽生成，v-show則是不管值是 為true還是false , html元素都會存在，只是css中的display顯示或隱藏， v-show僅僅控制元素的顯示方式,將display屬性在block和none來回切 換；而v-if會

9、控制這個DOM節(jié)點的存在與否。當我們需要經(jīng)常切換某個元素 的顯示/隱藏時，使用v-show會更加節(jié)省性能上的開銷；當只需要一次顯示或 隱藏時，使用v-if更加合理。八、vue中的父子組件傳值和兄弟組件傳值都是如何實現(xiàn)的？父向子傳值，主要通過子組件的props ,獲取父組件綁定的數(shù)據(jù)子向父傳值，主要通過子組件利用$emit觸發(fā)父組件上的事件，兄弟組件傳 值利用eventbus的方式，主要利用創(chuàng)建T空的vm實例，作為中間者。組件是vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這 就意味著不同組件之間的數(shù)據(jù)無法相互引用。針對不同的使用場景，如何選擇行 之有效的通信方式？： props emit缺點：如果組件嵌套層次多的話，數(shù)據(jù)傳遞比較繁瑣；: provide