前端面試資料整理【相關知識篇】

donggg 發表於 2022-05-18
前端 面試

瀏覽器

瀏覽器快取

MEMORY CACHE | DISK CACHE

memory cache 與 disk cache 的區別:

  • memory cache 更快
  • memory cache 會隨著瀏覽器關閉而回收,disk cache 不會

兩者什麼時候使用?

200 -> response -> 關閉瀏覽器 -> 請求相同地址 -> disk cache -> 重新整理 -> memory cache

瀏覽器幀率

從一個畫素渲染到頁面的全過程。

迴流與重繪

css樹和dom樹,合併生成渲染樹。
發生迴流必發生重繪。

垃圾回收

演算法有哪幾種?分別原理是什麼?

  • 引用計數:通過計算變數被引用的次數確實是否進行垃圾回收。缺點是當出現迴圈引用時,無法清除;另外就是有時間開銷,要不停監控物件。優點是速度快,發現後立即回收。
  • 標記清除:執行過程分兩次,第一次確定變數是否被引用並標記,第二次將未被引用的變數回收並清除標記。缺點是執行兩次,回收過程程式終止執行;產生記憶體碎片;。優點是可以識別迴圈引用
  • 標記實現:標記清除的基礎上增加了對碎片空間的整理,將碎片移動併合併成一個連續空間

V8中使用的是那種?

為了減少GC可以做那些優化?

如何通過 performance 監控瀏覽器?

如何通過 timeline 找到頻繁垃圾回收,減少阻塞?

計算機

快取

協商快取與強快取

強快取是指,不直接從伺服器中獲取資料,直接從快取中獲取,通常是通過服務端設定 http 頭實現。
協商快取是指,伺服器與客戶端通過標識確定是否從快取還是伺服器中獲取資源。

http

http1.1 比 http1 多了 E-Tag,用於協商快取的欄位
http2 多了二進位制傳輸,流媒體之類

http 工作流程

ps. TCP 三次握手:C - 你在嗎?-> S - 我在 -> C - 知道了-> S

非簡單請求比簡單請求多了“預檢”OPTION,響應“預檢請求”後才開始正式通訊。

簡單請求:POST, GET, HEAD
非簡單其你去:

  • DELETE,PATH,PUT
  • 傳送 json 資料。
  • 自定義頭部欄位

http1.0、 http1.1 、 http2.0、https

http 存在的效能障礙主要是兩個點:頻寬與延遲。頻寬目前通過硬體提升,延遲又分為3種,瀏覽器阻塞、DNS 查詢、建立連線。瀏覽器阻塞通常是因為瀏覽器會限制最大連線數,DNS 是查詢過程消耗的時間,建立連線,通常是 http 協議在 TCP 中經過3次握手 4次揮手。

http1.0 時代,1996年,主要是處理簡單的html頁面
http1.1 時代,1999年,增加了 css 與 js 檔案,為了加快網站的載入速度

  • 快取策略,頭增加了 Expire,If-Modified-sice
  • 擴充了錯誤狀態碼
  • 為了適配主機使用虛擬機器時,會公用一個 IP,所以增加了 Host 欄位。在 http1.1中,請求和響應都要增加該欄位。
  • 增加了長連線,Connect: keep-alive,在一個長連線下,不用重複建立連線和關閉連線的消耗。

    • header 壓縮

    https,參考,預設是443埠
    C -hash支援 ->S
    S -公鑰加密的認證->C
    C 驗證認證
    C -對稱加密(RSA)加密文字和公鑰 -> S

    http2.0 時代,基於谷歌剔除的SPDY方案做了升級

    • 傳輸用二進位制,而不是 http1.* 時的文字
    • 支援服務端的 push
    • 多路複用:在一個連線中,即可實現並行,而不是原來有序阻塞。通過將對二進位制資料幀進行順序標識,客戶端接收到的資料進行合併,而不會出現錯位。因為一個連線即可完成,所以對伺服器來說相當於增加了併發量(原來需要發4個連線,現在一個連線能達到4個連線的效果)。
    • 豐富快取型別:協商快取
    • header 壓縮

websocket

原理:類似於http 需要握手,但是不同的是具有持久的連結
頭有 upgrade 標識 websocket 通訊

跨域

有哪些不用的考慮跨域?
script, link,img src 這種不需要考慮跨域

跨域的解決方案?

  • nginx
  • cors
  • jsonp 需要後端和前端協商回撥函式名

安全

常見的攻擊與阻止有哪些?

CSRF
待補充

XSS
待補充

source-map
原始碼解析

中間人攻擊
待補充

從瀏覽器輸入URL到返回頁面的過程

參考

相關文章