前端面試題一

韓旭明 發表於 2021-01-18

前端面試題一

從他蓬鬆且凌亂的頭髮可以看出,坐在我面前這位面試小哥來者不善,我的自我介紹也變得那麼形式化。(他推了推眼鏡,彷彿在說你趕緊介紹完吧,我要開始吊打你了小子!),一道犀利的眼神從我臉上掃過,我故作鎮定...

1、網路方面還可以吧(我默默的點點頭),說說TCP的長連線和短連線的區別?

如果瞭解得比較深入,可以說說各自的優缺點。

一、短連線

概念:客戶端與伺服器建立連線開始通訊,一次/指定次數通訊結束之後就斷開本次TCP連線,
     當下次再次通訊時,再次建立TCP的連結。
   
優點:不長期佔用伺服器的記憶體,那麼伺服器能處理的連線數量是比較多的
   
缺點:1、因為要等到傳送或者獲取資源時,才去請求建立連線,而且http協議只能客戶端主動向服務端傳送資料後,服務端才返回
   	對應的資料,那麼服務端想主動傳送資料給客戶端呢?Websocket可以讓服務端主動傳送資料給客戶端,或者要等到下一次要請求資料時,才傳送,比如我們採用
   	輪詢(30秒或者更長)拉取訊息, 那麼伺服器與客戶端通訊的實時性就喪失了。
   
      2、客戶端採用輪詢來實時獲取資訊,或者說大量的客戶端使用短連線的方式通訊,那麼就浪費了大量的CPU和頻寬資源用於建立連線
   	和釋放連線,存在資源浪費,甚至是無法建立連線。比如經典的http長輪詢(微信網頁客戶端端)
複製程式碼

前端面試題一

二、長連線


概念:	TCP與伺服器建立連線之後一直處於連線狀態,直到最後不再需要服務的時候才斷開連線

優點:	1、傳輸資料快
	2、伺服器能夠主動第一時間傳輸資料到客戶端

缺點:	1、因為客戶端與伺服器一直保持這種連線,那麼在高併發分散式叢集系統中客戶端數量會越來越多,佔 用很多的系統資源
	2、TCP本身是一種有狀態的資料,在高併發分散式系統會導致後臺設計比較難做
複製程式碼

前端面試題一

2、既然你提到了WebSocket,那就說明你用過咯,說說他的特點?

完了這是跟我槓上了,我依稀記得一些...,可以看出對基礎考察得比較厲害

1、最大的特點就是服務端可以主動向客戶端傳送資料

2、與 HTTP 協議有著良好的相容性。預設埠是80和443,並握手階段採用HTTP協議,因此握手時不容易遮蔽,能通過各種HTTP代理伺服器。

3、資料格式比較輕量,效能開銷小,通訊高效。

4、可以傳送文字,也可以傳送二進位制資料。

5、沒有同源限制,客戶端可以與任意伺服器通訊。

6、協議識別符號是ws(如果加密,則為wss,加密層是TLS),伺服器網址就是 URL。
複製程式碼

3、看你簡歷用過地圖,說說現在地圖都有哪幾種座標系?

這個我只回答出了前面兩種,確實沒太瞭解過這些。應該是還有的,可以自行查閱

1、GCJ-02 座標系:國測局座標,火星座標系(高德、騰訊、Google中國地圖都使用它)
2、BD-09座標系:(百度中國地圖所採用的座標系)
3、WGS-84座標系:地心座標系,GPS原始座標體系(在中國,任何一個地圖產品都不允許使用GPS座標,據說是為了保密)
複製程式碼

4、可以手寫一個new()嗎?

挽了挽衣袖,開擼

function myNew() {
  var constr = Array.prototype.shift.call(arguments);
  var obj = Object.create(constr.prototype);
  var result = constr.apply(obj, arguments);
  return result instanceof Object? result : obj;
}
複製程式碼

5、http是什麼?

全部抬起小腦袋,不要再說http是超文字傳輸協議,它的英文是 HyperText Transfer Protocol。

HTTP是一個在計算機世界裡專門在兩點之間傳輸文字、圖片、音訊、視訊等超文字資料的約定和規範。
複製程式碼

6、http和https的區別?

1、HTTP協議執行在TCP之上,所有傳輸的內容都是明文,HTTPS執行在SSL/TLS之上,SSL/TLS執行在TCP之上,
所有傳輸的內容都經過加密的。

2、可以說https是http的加強版(http+SSL/TLS=https)

3、http埠號是80,https是443.

4、HTTPS協議需要到CA申請證照,一般免費證照很少,需要交費。
複製程式碼

此時面試官小哥哥喝了一口82年的咖啡,心想這小子什麼來頭?

7、Vue中的computed和watch的區別?

1、computed:是一個有快取的watcher,依賴的屬性發生變化就會更新檢視。 適用於計算比較消耗效能的計算場景。當表示式過於
複雜時,在模板中放入過多邏輯會讓模板難以維護,可以將複雜的邏輯放入計算屬性中處理

2、watch:沒有快取性,更多的是起到一個觀察的作用。可以監聽某些資料執行回撥,當需要深度監聽時,將deep:true開啟即可。
複製程式碼

8、v-model的原理說一下?

通過Observer來監聽自己的model資料變化,通過Compile來解析編譯模板指令,最終利用Watcher搭起Observer和Compile之間的通訊
橋樑,達到資料變化->檢視更新在初始化vue例項時,遍歷data這個物件,給每一個鍵值對利用Object.definedProperty對data的鍵值
對新增get和set方法,利用了事件監聽DOM的機制,讓檢視去改變資料
複製程式碼

9、說一下 Event Loop的執行順序

考察巨集微任務

1、一開始整個指令碼作為一個巨集任務執行
2、執行過程中同步程式碼直接執行,巨集任務進入巨集任務佇列,微任務進入微任務佇列
3、當前巨集任務執行完出隊,檢查微任務列表,有則依次執行,直到全部執行完
4、執行瀏覽器UI執行緒的渲染工作
5、檢查是否有Web Worker任務,有則執行
6、執行完本輪的巨集任務,回到2,依此迴圈,直到巨集任務和微任務佇列都為空
複製程式碼
巨集任務:script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering

微任務:MutationObserver、Promise.then()或catch()、fetch API、V8的垃圾回收過程、Node獨有的process.nextTick
複製程式碼

10、介紹一下虛擬DOM

1、虛擬DOM本質就是用一個原生的JavaScript物件去描述一個DOM節點。是對真實DOM的一層抽象。

2、在瀏覽器中操作DOM是很昂貴的。頻繁的操作DOM,會產生效能問題,所以需要這一層抽象,在patch過程中儘可能地一次
   性將差異更新到DOM中,這樣保證了DOM不會出現效能很差的情況。

3、Vue2.x中的虛擬DOM主要是借鑑了snabbdom.js,Vue3中借鑑inferno.js演算法進行優化。
複製程式碼

11、跨域瞭解嗎,如何解決,為什麼會產生跨域?

跨域的產生是由於瀏覽器的同源策略,同源策略指的是:
  1、域名
  2、埠號
  3、協議名
只要有一個不同就稱為跨域

解決跨域:
  1、jsonp跨域(只能解決get) 原理:動態建立一個script標籤。利用script標籤的src屬性不受同源策略限制,因為所有的src屬性
     和href屬性都不受同源策略的限制,可以請求第三方伺服器資源內容

  2、伺服器設定對CORS的支援 原理:伺服器設定Access-Control-Allow-Origin HTTP響應頭之後,瀏覽器將會允許跨域請求
  
複製程式碼

12、說一下回流和重繪

迴流:對 DOM 結構的修改從而引發 DOM 幾何尺寸變化的時候,會發生迴流的過程。

過程:由於DOM的結構發生了改變,所以需要從生成DOM這一步開始,重新經過樣式計算、生成佈局樹、建立圖層樹、再到生成繪製
列表以及之後的顯示器顯示這整一個渲染過程走一遍,開銷是非常大的。
複製程式碼
重繪:當 DOM 的修改導致了樣式的變化,並且沒有影響幾何屬性的時候,會導致重繪。

過程:由於沒有導致 DOM 幾何屬性的變化,因此元素的位置資訊不需要更新,所以當發生重繪的時候,會跳過生存佈局樹和建立圖層樹
的階段,直接到生成繪製列表,然後繼續進行分塊、生成點陣圖等後面一系列操作。
複製程式碼

小哥哥思量了半分鐘,場面一度很尷尬,說先面到這兒吧,你先等一會兒。(後來叫來了技術總監,弱弱的我心裡竟然有點小慌) 最後技術總監沒問技術,問了我專案問題,還好沒有打擊我

前端面試題一

這家最後還是過了,但是沒有選擇去,因為覺得平臺不是我想要的,而且感覺沒有什麼誠意...