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 不會直接從本地快取獲取資源，而是先向伺服器驗證資源的有效性。