2024高頻前端面試題合集(一)_ZenDei技術網路在線

1、請簡述Js Bridge JavaScript Bridge 是一種技術，用於在不同的編程語言或環境中傳遞數據和調用函數。在 Web 開發中，JavaScript Bridge 通常指在 JavaScript 和其他語言（如 Java、Objective-C、Swift 等）之間建立通信的機制。 ...

1、請簡述Js Bridge

JavaScript Bridge 是一種技術，用於在不同的編程語言或環境中傳遞數據和調用函數。在 Web 開發中，JavaScript Bridge 通常指在 JavaScript 和其他語言（如 Java、Objective-C、Swift 等）之間建立通信的機制。

在移動應用開發中，特別是混合應用開發（Hybrid App Development）中，JavaScript Bridge 是常用的技術。它允許開發人員通過 JavaScript 代碼與原生應用程式交互，調用原生功能或者將原生數據傳遞到 JavaScript 環境中。

具體來說，在移動應用開發中，開發人員可以使用 JavaScript Bridge 實現以下功能：

調用原生功能：通過 JavaScript Bridge，JavaScript 代碼可以調用原生應用程式提供的功能，比如攝像頭、地理位置、感測器等。
獲取原生數據：JavaScript 代碼可以通過 Bridge 從原生應用程式中獲取數據，比如設備信息、文件系統中的文件等。
事件通知：原生應用程式可以通過 Bridge 向 JavaScript 環境發送事件通知，以便 JavaScript 代碼可以做出相應的處理。
性能優化：通過 JavaScript Bridge，開發人員可以選擇性地將一些耗時的操作委托給原生代碼執行，從而提高應用程式的性能和響應速度。

總的來說，JavaScript Bridge 構建了 JavaScript 和原生代碼之間的橋梁，使得在混合應用開發中能夠更方便地利用原生功能和數據，同時也使得開發過程更靈活和高效。

2、請說一下SSR的單機QPS

SSR（Server-Side Rendering，伺服器端渲染）是一種將網站或應用程式的界面在伺服器端渲染成 HTML，然後再將渲染好的 HTML 發送到客戶端的技術。SSR 的單機 QPS（Queries Per Second，每秒查詢率）取決於多個因素，包括伺服器性能、應用程式的複雜度、併發請求處理能力等。

通常情況下，單機 SSR 的 QPS 受限於伺服器的性能。如果伺服器性能足夠強大，並且應用程式的邏輯相對簡單，那麼單機 SSR 的 QPS 可能會很高。然而，如果伺服器資源有限或者應用程式有複雜的計算邏輯，那麼單機 SSR 的 QPS 將會受到限制。

除了伺服器性能之外，網路帶寬和延遲也會影響 SSR 的 QPS。如果伺服器的帶寬有限或者網路延遲較高，那麼單機 SSR 的 QPS 可能會受到限制。

另外，SSR 的實現方式也會影響單機 QPS。一些 SSR 框架可能會採用非同步處理請求的方式，從而提高併發處理能力，進而提高 QPS。

總的來說，單機 SSR 的 QPS 取決於多個因素，包括伺服器性能、應用程式複雜度、網路帶寬和延遲等。在實際應用中，可以通過性能測試來評估單機 SSR 的 QPS，以確保滿足應用程式的性能需求。

3、請說一下eggJs的初始化原理

Egg.js 是一個基於 Node.js 和 Koa 框架的企業級應用開發框架，它提供了一套約定優於配置的開發規範，能夠幫助開發者快速構建穩定、可擴展的應用。Egg.js 的初始化原理主要包括以下幾個方面：

目錄結構約定： Egg.js 使用一套統一的目錄結構約定，開發者只需要按照約定將應用的代碼組織到指定的目錄中，框架會自動載入並運行這些代碼。這種約定優於配置的方式可以減少開發者在項目初始化階段的工作量，同時也有利於團隊協作和項目維護。
啟動流程： Egg.js 的初始化過程從應用啟動開始，框架會先載入配置文件，然後初始化應用和插件，最後啟動應用伺服器。在初始化過程中，框架會依次執行各個階段的初始化邏輯，並將初始化過程中的錯誤信息記錄下來，方便開發者進行排查和調試。
插件機制： Egg.js 提供了強大的插件機制，開發者可以通過 npm 安裝各種插件來擴展框架的功能。在初始化過程中，框架會自動載入並初始化應用依賴的插件，使得插件的功能可以無縫集成到應用中。
框架核心： Egg.js 的核心部分是基於 Koa 框架進行封裝的，它提供了一套面向企業級應用開發的解決方案，包括路由、中間件、控制器、服務等組件。在初始化過程中，框架會載入並運行這些核心組件，從而構建出一個完整的應用程式。

總的來說，Egg.js 的初始化原理基於一套統一的目錄結構約定和插件機制，通過載入配置文件、初始化應用和插件，並啟動應用伺服器來完成應用的初始化過程。這種約定優於配置的開發模式可以幫助開發者快速構建穩定、可擴展的企業級應用。

4、前端錯誤如何捕獲，promise的錯誤是如何捕獲的

前端錯誤捕獲是 Web 開發中非常重要的一環，它可以幫助開發者及時發現並解決應用程式中的問題。在前端開發中，主要有以下幾種方式來捕獲錯誤：

try-catch 塊： 可以使用 try-catch 塊來捕獲同步代碼中的錯誤。將可能拋出異常的代碼放在 try 塊中，然後使用 catch 塊來捕獲異常併進行處理。


try {

// 可能拋出異常的代碼

} catch (error) {

// 處理異常

}

window.onerror： 可以通過 window 對象的 onerror 事件來捕獲全局的 JavaScript 錯誤。當頁面中發生未捕獲的 JavaScript 錯誤時，onerror 事件會被觸發，並傳遞錯誤信息、錯誤所在文件、錯誤行號等相關信息。


window.onerror = function(message, source, lineno, colno, error) {

// 處理錯誤

};

Promise 錯誤捕獲： 對於 Promise 中的錯誤，可以通過 .catch() 方法來捕獲並處理。Promise 的錯誤會沿著 Promise 鏈向後傳遞，如果沒有在鏈中的某個位置進行捕獲處理，最終會觸發 unhandledrejection 事件。


somePromise.catch(function(error) {

// 處理 Promise 中的錯誤

});

unhandledrejection 事件： 當 Promise 中的錯誤未被捕獲時，會觸發 unhandledrejection 事件。可以通過監聽這個事件來捕獲未被處理的 Promise 錯誤。


window.addEventListener('unhandledrejection', function(event) {

// 處理未被捕獲的 Promise 錯誤

});

資源載入錯誤： 對於資源載入錯誤，比如圖片載入失敗、CSS 文件載入失敗等，可以通過監聽相應的事件來捕獲並處理。


window.addEventListener('error', function(event) {

// 處理資源載入錯誤

});

綜上所述，前端錯誤可以通過 try-catch 塊、window.onerror、Promise.catch()、unhandledrejection 事件以及資源載入錯誤事件來捕獲和處理。這些方法可以幫助開發者及時發現並解決應用程式中的問題，提高應用的穩定性和用戶體驗。

5、vue的dom diff演算法

Vue.js 使用 Virtual DOM 和 diff 演算法來提高頁面更新的效率。下麵是 Vue.js 中的 Virtual DOM 和 diff 演算法的簡要說明：

Virtual DOM（虛擬 DOM）

概念： Virtual DOM 是一個 JavaScript 對象表示的虛擬 DOM 樹，它與真實 DOM 一一對應。Vue.js 在每次數據變化時都會重新生成一個新的 Virtual DOM 樹，然後通過 diff 演算法比較新舊兩棵 Virtual DOM 樹的差異，最終只對差異部分進行更新，從而減少對真實 DOM 的操作，提高頁面更新的效率。
優勢： Virtual DOM 的存在使得開發者可以在不直接操作真實 DOM 的情況下更新視圖，從而簡化了開發流程並提高了性能。

diff 演算法

概念： diff 演算法是用來比較兩棵 Virtual DOM 樹的差異，並將差異應用到真實 DOM 上的演算法。Vue.js 中的 diff 演算法採用了一種叫做"雙端比較"的策略，即同時從新舊兩棵 Virtual DOM 樹的頭部和尾部開始比較節點，從而儘可能地減少比較的次數和提高性能。
過程： diff 演算法的具體過程如下：

從兩棵 Virtual DOM 樹的根節點開始，逐層比較節點類型和屬性，並記錄下差異；
當發現節點類型相同但屬性不同時，更新差異；
當發現節點類型不同或者節點位置發生變化時，將整個子樹視為一個差異，暫時忽略其子節點的比較；
最後根據記錄的差異，更新真實 DOM。

優化： Vue.js 中的 diff 演算法還進行了一些優化，比如通過設置唯一的 key 來標識每個節點，從而減少節點比較的次數，提高 diff 演算法的效率。

綜上所述，Vue.js 中的 Virtual DOM 和 diff 演算法可以幫助開發者高效地更新視圖，並且通過一些優化策略提高了頁面更新的性能。

vue3的dom diff演算法

Vue 3 中的 diff 演算法與 Vue 2 中的略有不同，主要是因為 Vue 3 使用了新的響應式系統和編譯器，進一步優化了 diff 演算法的性能和效率。以下是 Vue 3 中的 diff 演算法的一些特點：

靜態標記和靜態提升： Vue 3 編譯器會標記靜態節點，即在組件渲染期間不會發生變化的節點。在 diff 過程中，靜態節點會被忽略，從而減少了不必要的比較操作。此外，Vue 3 的編譯器還會對靜態節點進行靜態提升，將其提升到 render 函數之外，從而進一步減少了渲染時的計算成本。
優化的組件更新： Vue 3 引入了基於 Proxy 的響應式系統，使得在組件更新時能夠更精確地追蹤依賴關係。在 diff 過程中，Vue 3 會比較新舊節點的依賴關係，並只對發生變化的節點進行更新，而不需要重新渲染整個組件。
Fragments 和 Teleport： Vue 3 支持 Fragments（片段）和 Teleport（傳送門）等新的特性，它們可以幫助開發者更靈活地組織頁面結構。在 diff 過程中，Vue 3 會正確處理這些新特性，確保它們能夠正確地與其他節點進行比較和更新。
Patch Flag 和 Block Tree： Vue 3 中引入了 Patch Flag 和 Block Tree 的概念，用於表示節點的更新狀態和依賴關係。在 diff 過程中，Vue 3 會利用 Patch Flag 和 Block Tree 來跳過不需要比較的節點，從而進一步提高了 diff 演算法的效率。

總的來說，Vue 3 在 diff 演算法方面進行了一系列的優化和改進，通過靜態標記、優化的組件更新、新特性的支持以及 Patch Flag 和 Block Tree 的引入等方式，提高了 diff 演算法的性能和效率，從而進一步提升了 Vue 應用程式的性能和用戶體驗。

6、vue的ChildNode diff演算法

Vue 的 ChildNode Diff 演算法是 diff 演算法的一個組成部分，用於比較和更新組件的子節點。它主要用於處理組件的子節點列表變化，例如在列表渲染、條件渲染等場景下的子節點變化。

Vue 的 ChildNode Diff 演算法主要有以下幾個特點：

通過索引進行比較： Vue 通過比較新舊子節點列表中的節點類型和 key，以及子節點在列表中的位置，來確定新舊子節點之間的對應關係。如果節點類型相同且 key 相同，則認為是相同的節點；如果節點類型相同但 key 不同，則認為是不同的節點；如果節點類型不同，則直接移除舊節點並插入新節點。
雙端比較： Vue 採用了一種雙端比較的策略，從新舊子節點列表的頭部和尾部開始比較節點，以儘可能減少比較的次數。這種策略可以在大部分情況下有效地減少節點移動的次數，提高 diff 演算法的效率。
復用已有節點： 在比較過程中，如果發現新節點與舊節點是相同類型且擁有相同的 key，Vue 將會復用已有的節點而不是銷毀並重新創建節點。這樣可以減少不必要的 DOM 操作，提高渲染性能。
針對特殊情況的優化： 在某些特殊情況下，比如只有一個子節點、沒有子節點、只有文本節點等情況下，Vue 會進行特殊處理，避免不必要的比較操作，從而進一步提高 diff 演算法的效率。

總的來說，Vue 的 ChildNode Diff 演算法是 diff 演算法的一個重要組成部分，它通過比較新舊子節點列表來確定節點之間的對應關係，並儘可能復用已有節點以減少 DOM 操作，從而提高組件更新的效率和性能。

7、HTTP的400、401、403的區別

HTTP 狀態碼 400、401 和 403 分別表示客戶端請求錯誤、未經授權和禁止訪問，它們之間有一些區別：

400 Bad Request（請求錯誤）： 這個狀態碼表示伺服器無法理解客戶端發送的請求，通常是因為請求中包含了語法錯誤、無效的參數或格式不正確等問題。當伺服器收到 400 錯誤時，通常會返回一個錯誤頁面或者錯誤信息，提示客戶端檢查請求內容並修正錯誤。
401 Unauthorized（未經授權）： 這個狀態碼表示客戶端發送的請求需要進行身份認證，但是沒有提供有效的身份憑證（如登錄憑證、令牌等）。通常情況下，伺服器會返回一個包含身份認證要求的響應，併在響應頭中包含一個 WWW-Authenticate 頭欄位，提示客戶端提供有效的身份憑證。
403 Forbidden（禁止訪問）： 這個狀態碼表示客戶端沒有許可權訪問請求的資源，即使提供了有效的身份憑證。伺服器收到請求後，會認識到請求者身份合法，但是伺服器拒絕該請求訪問所請求的資源。通常情況下，伺服器會返回一個錯誤頁面或者錯誤信息，說明客戶端無權訪問該資源。

總的來說，400 表示客戶端請求錯誤，401 表示未經授權需要身份認證，403 表示伺服器拒絕訪問，即使客戶端提供了有效的身份憑證。這些狀態碼可以幫助客戶端識別和處理不同類型的請求問題。

請說一下瀏覽器緩存，http緩存，什麼是強緩存，什麼是協商緩存，Cache-Control中max-age、no-cache的作用

瀏覽器緩存是指瀏覽器在本地存儲資源的副本，以減少網路請求並加快頁面載入速度。HTTP 緩存是指通過 HTTP 頭部欄位控制客戶端（瀏覽器）和伺服器之間對緩存資源的管理和交互。

強緩存

強緩存是指客戶端在請求資源時，首先檢查本地是否有緩存副本，並通過特定的 HTTP 頭部欄位（例如 Expires 和 Cache-Control 中的 max-age）判斷緩存是否過期。如果緩存未過期，則直接從本地緩存中獲取資源，不會向伺服器發送請求，從而減少了網路延遲和伺服器負載。

協商緩存

協商緩存是指客戶端在本地緩存失效時，向伺服器發送一個請求，詢問該資源是否有更新。伺服器通過比較資源的標識（如 ETag 和 Last-Modified 等）來判斷資源是否已經更新。如果資源未發生變化，則伺服器返回 304 Not Modified 狀態碼，併在響應頭部中包含新的緩存標識，客戶端根據這個標識更新本地緩存；如果資源已經更新，則伺服器返回新的資源內容。

Cache-Control 中的 max-age 和 no-cache

max-age： Cache-Control 頭部欄位中的 max-age 指令指定了資源在客戶端的緩存有效時間，單位為秒。例如，max-age=3600 表示資源在客戶端緩存有效期為 3600 秒（1 小時），過期之後需要重新向伺服器驗證是否有更新。
no-cache： Cache-Control 頭部欄位中的 no-cache 指令表示客戶端在使用緩存資源時必須先向伺服器發送一個請求，驗證資源是否發生了變化。與 max-age 不同的是，no-cache 不會直接從本地緩存獲取資源，而是先向伺服器驗證資源的有效性。