中級前端面試題2022

中級前端面試題2022

中級前端面試題目總結如下：

一、一個完整的URL解析過程：

用戶輸入URL地址，對URL地址進行DNS域名解獲得IP地址，建立

TCP連接（三次握手），瀏覽器向web服務器發(fā)送一個HTTP請求報文，服

務器返回HTTP響應報文給客戶端，關閉TCP連接（四次揮手）,瀏覽器解析

文檔資源并渲染頁面。

解析過程：瀏覽器解析的資源（html,svg,Xhtml等），解析完成后都會生

成Y完整的DOMTree,css資源則會解析成CSSRuleTree,生成之后進行

瀏覽器渲染，保證腳本執(zhí)行前已完成DOM渲染會放在body標簽結束之后。

二、EventLoop是什么？

EventLoop即事件循環(huán)，是指瀏覽器或Node的一種解決JavaScript單線

程運行時不會阻塞的一種機制，也就是我們經(jīng)常使用異步的原理，是f程序結構,

用于等待和發(fā)送消息和事件。

執(zhí)行過程：事件循環(huán)的順序，決定了JavaScript代碼的執(zhí)行順序。它從

script（整體代碼）開始第一次循環(huán)（即宏任務X之后全局上下文進入函數(shù)調(diào)用棧。

直到調(diào)用棧清空（只剩全局），然后執(zhí)行所有的micro-task（微任務\當所有可

執(zhí)行的micro-task（微任務）執(zhí)行完畢之后。循環(huán)再次從macro-task（宏任務）

開始，找到其中一個任務隊列執(zhí)行完畢，然后再執(zhí)行所有的micro-task（微任

務），這樣一直循環(huán)下去。

三、什么是HTTP和HTTPS

HTTP:超文本傳輸協(xié)議，是一個基于請求與響應，無狀態(tài)的，應用層的協(xié)

議，?；赥CP/IP協(xié)議傳輸數(shù)據(jù)，互聯(lián)網(wǎng)上應用最為廣泛的一種網(wǎng)絡協(xié)議，所有

的WWW文件都必須遵守這個標準。設計HTTP的初衷是為了提供一種發(fā)布和

接收HTML頁面的方法。

HTTPS:是一種通過計算機網(wǎng)絡進行安全通信的傳輸協(xié)議，經(jīng)由HTTP進

行通信，利用SSL/TLS建立全信道，加密數(shù)據(jù)包。HTTPS使用的主要目的是提

供對網(wǎng)站服務器的身份認證，同時保護交換數(shù)據(jù)的隱私與完整性。

PS:TLS是傳輸層加密協(xié)議，前身是SSL協(xié)議，由網(wǎng)景公司1995年發(fā)布，

有時候兩者不區(qū)分。

四、https加密方式

共享密鑰加密（對稱密鑰加密）：客戶端和服務器公用一個密匙用來對消息

加解密，這種方式稱為對稱加密?？蛻舳撕头掌骷s定好一個加密的密匙?？蛻?/p>

端在發(fā)消息前用該密匙對消息加密，發(fā)送給服務器后，服務器再用該密匙進行解

密拿到消息。

公開密鑰加密（非對稱密鑰加密）：客戶端和服務端均擁有一個公有密匙和

一個私有密匙。公有密匙可以對外暴露，而私有密匙只有自己可見。使用公有密

匙加密的消息，只有對應的私有密匙才能解開。反過來，使用私有密匙加密的消

息，只有公有密匙才能解開。這樣客戶端在發(fā)送消息前，先用服務器的公匙對消

息進行加密，服務器收到后再用自己的私匙進行解密。

五、Vue2.X的雙向綁定響應式原理

什么是響應式，也即是說，數(shù)據(jù)發(fā)生改變的時候，視圖會重新渲染，匹配更

新為最新的值。

Object.defineProperty為對象中的每一個屬性，設置get和set方法,

每個聲明的屬性，都會有一個專屬的依賴收集器subs,當頁面使用到某個屬

性時，觸發(fā)ObjectdefineProperty-get函數(shù)，頁面的watcher就會被放到

屬性的依賴收集器subs中，在數(shù)據(jù)變化時，通知更新；當數(shù)據(jù)改變的時候，

會觸發(fā)ObjectdefineProperty-set函數(shù),數(shù)據(jù)會遍歷自己的依賴收集器

subs,逐個通知watcher,視圖開始更新。

Vue3.x雙向綁定響應卷據(jù)原理，Proxy可以直接監(jiān)聽對象和數(shù)組的變化,

并且有多達13種攔截方法。并且作為新標準將受到瀏覽器廠商重點持續(xù)的性能

優(yōu)化。Proxy只會代理對象的第一層，Vue3是怎樣處理這個問題的呢？判斷當

前Reflectget的返回值是否為Object,如果是U照通過reactive方法做代理，

這樣就實現(xiàn)了深度觀測。監(jiān)測數(shù)組的時候可能觸發(fā)多次get/set,那么如何防止

觸發(fā)多次呢？我們可以判斷key是否為當前被代理對象target自身屬性，也可

以判斷舊值與新值是否相等，只有滿足以上兩個條件之一時，才有可能執(zhí)行

trigger.

六、vue的優(yōu)點是什么?

低耦合。視圖(View)可以獨立于Model變化和修改，一個ViewModel

可以綁定到不同的"View"上,當View變化的時候Model可以不變，當

Model變化的時候View也可以不變。

可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多

view重用這段視圖邏輯。

獨立開發(fā)。開發(fā)人員可以專注于業(yè)務邏輯和數(shù)據(jù)的開發(fā)(ViewModel),設

計人員可以專注于頁面設計，使用ExpressionBlend可以很容易設計界面并生

成xml代碼。

可測試。界面素來是比較難于測試的，而現(xiàn)在測試可以針對ViewModel來

寫。

七、vue中v-if和v-show有什么區(qū)別?

v-if和v-show都會讓元素顯示和隱藏,但是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會控制這個DOM節(jié)點的存在與否。當我們需要經(jīng)常切換某個元素

的顯示/隱藏時，使用v-show會更加節(jié)省性能上的開銷；當只需要一次顯示或

隱藏時，使用v-if更加合理。

八、vue中的父子組件傳值和兄弟組件傳值都是如何實現(xiàn)的?

父向子傳值，主要通過子組件的props,獲取父組件綁定的數(shù)據(jù)

子向父傳值，主要通過子組件利用$emit觸發(fā)父組件上的事件，兄弟組件傳

值利用eventbus的方式，主要利用創(chuàng)建一個空的vm實例，作為中間者。

組件是vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這

就意味著不同組件之間的數(shù)據(jù)無法相互引用。針對不同的使用場景，如何選擇行

之有效的通信方式？

1：prop