目錄

webpack理解？

webpack構建流程？

loader解決什么問題？

plugin解決什么問題？

編寫loader和plugin的思路？

webpack熱更新？

如何提高webpack的構建速度？

問git常用命令？

http？http和https區別？

http常見狀態碼？

get和post區別？

地址欄輸入url敲下回車后發生了什么？

瀏覽器渲染機制？

代碼規范？

---

webpack理解？

Webpack 是一個現代的靜態模塊打包工具。它是一個基于配置的構建工具，用于將多個模塊（包括 JavaScript、樣式表、圖像等）打包成一個或多個 bundle，并提供了一種優化資源加載和管理的方式。

主要概念和工作原理：

入口（Entry）：Webpack 通過指定一個入口文件來開始構建過程。入口可以是單個文件或多個文件，Webpack 將從入口文件開始分析依賴關系樹。

輸出（Output）：Webpack 會將打包后的資源輸出到指定目錄。輸出通常是一個或多個 bundles，其中包含被 chunk 包裹的模塊。

模塊（Module）：Webpack 將項目中的所有文件視為模塊。每個模塊都有自己的類型（JavaScript、CSS、圖片等），Webpack 根據不同的類型使用對應的 loader 進行處理。

Loader：Loader 是用于對不同類型的模塊進行處理和轉換的插件。例如，Babel Loader 可以將 ES6/ES7 代碼轉換為瀏覽器可識別的 ES5 代碼。

插件（Plugin）：插件是用于擴展 Webpack 功能的組件。可以用插件來處理更復雜的任務，如生成 HTML 文件、壓縮代碼等。

開發服務器（DevServer）：Webpack 提供了一個開發服務器，用于在開發過程中實時更新修改后的代碼，并提供熱模塊替換功能。

模式（Mode）：Webpack 提供了三種模式，分別是開發模式、生產模式和 none 模式。每種模式都有對應的配置，用于優化構建結果。

通過配置文件（通常是 webpack.config.js），開發人員可以定義入口、輸出、loader、插件等來自定義項目的打包流程。Webpack 會根據配置文件的設置進行相應的處理和優化，最終生成可部署到生產環境的靜態資源。

Webpack 的強大之處在于其模塊化能力、靈活性和可擴展性。它可以處理多樣化的資源類型并支持各種優化策略，使得前端項目的構建變得高效和可控。

webpack構建流程？

Webpack 的構建流程可以概括為以下幾個步驟：

解析配置文件：Webpack 會根據項目根目錄下的配置文件（默認為 webpack.config.js）來獲取構建相關的配置選項。

解析入口文件：Webpack 根據配置文件中指定的入口文件路徑，開始解析入口文件及其依賴關系。

加載模塊：Webpack 使用不同的 loader 來處理不同類型的模塊。在解析過程中，Webpack 會遞歸地加載和解析模塊的依賴關系，并將它們加入到構建過程中。

插件執行：Webpack 在構建過程中提供了許多插件擴展的機會。插件可以用于執行各種任務，如優化、壓縮、代碼分割等。Webpack 會按順序執行這些插件，并根據需要對模塊和資源進行轉換和處理。

輸出文件：在構建完成后，Webpack 將生成的文件輸出到指定的目錄。輸出的文件通常是一個或多個 bundle，包含了被 chunk 包裹的模塊。

優化策略：Webpack 提供了一系列的優化策略，以提高構建結果的性能和體積。例如，代碼壓縮、Tree Shaking（消除未使用代碼）、代碼分割以及緩存等。

開發服務器：在開發過程中，Webpack 提供了一個開發服務器（DevServer），用于實時更新修改后的代碼，并提供熱模塊替換功能。它能夠在內存中構建和提供資源，加快開發效率。

整個流程中，Webpack 會根據配置文件的設置來確定入口文件、輸出路徑、加載器和插件等。在每個步驟中，Webpack 會使用各個加載器處理不同類型的模塊，再通過插件對資源進行轉換和優化。最終，Webpack 將生成的靜態資源輸出到指定目錄，可用于部署到生產環境。

需要注意的是，該構建流程可以根據具體的配置和需求進行調整和擴展，以滿足項目的需求。

loader解決什么問題？

用于解決模塊的轉換和加載問題。它們可以將不同類型的資源（如 JavaScript、CSS、圖片等）轉換為可在瀏覽器中直接使用的形式。

plugin解決什么問題？

用于解決一些特定的問題或實現額外的功能。它們可以在構建過程中介入，并對資源進行處理、優化和管理。

編寫loader和plugin的思路？

編寫 Loader 的思路：

1.了解要處理的文件類型和需要實現的功能。

2.創建一個 JavaScript 模塊，該模塊會導出一個函數作為 Loader 函數。

3.在 Loader 函數中，接收源文件內容作為參數，并對其進行處理和轉換。

4.根據需求，可以使用現有的工具庫或自己編寫代碼來完成轉換邏輯。

5.最后，通過返回轉換后的結果，將其傳遞給 Webpack 構建流程。

編寫 Plugin 的思路：

1.確定插件的目的和功能。

2.創建一個 JavaScript 類，該類定義了插件的行為和配置選項。

3.在類中，實現 Webpack 插件接口（通常是?apply?方法），并在該方法中執行插件的邏輯。

4.在插件邏輯中，可以監聽特定的構建事件，如文件生成、模塊解析、編譯完成等，并在這些事件發生時執行相應的操作。

5.根據需要，可以向構建過程中注入額外的資源、修改輸出文件、優化代碼等。

6.最后，將插件的實例添加到 Webpack 配置的?plugins?屬性中，使其生效。

webpack熱更新？

Webpack 熱更新（Hot Module Replacement，HMR）是 Webpack 提供的一項功能，用于在開發過程中實時更新修改后的代碼，而無需完全刷新頁面。

熱更新的工作原理如下：

在啟動開發服務器（DevServer）時，Webpack 會將 HMR 相關的代碼注入到構建結果中。

當文件發生改變時，Webpack 可以通過 WebSocket 和開發服務器進行通信，通知瀏覽器重新加載被修改的模塊。

瀏覽器接收到更新通知后，使用新的模塊替換舊的模塊，只對有變化的部分進行替換，而不刷新整個頁面。

要使用熱更新，在 Webpack 配置中需要進行以下配置：

開啟熱更新功能：在配置中設置 hot: true。

使用 webpack-dev-server 插件來啟動開發服務器，并設置 hot: true。

對于樣式表，可以使用 style-loader 來自動應用樣式的更新，無需手動刷新。

對于 JavaScript 模塊，需要在入口文件中添加適當的代碼，以便讓 Webpack 監聽模塊的更新并觸發熱更新。

實際上，大多數的現代前端框架（如 React、Vue 等）已經集成了熱更新功能，并且提供了相關的開發工具和插件來簡化配置和使用。

熱更新可以大幅提高開發效率，因為它使得在修改代碼后無需手動刷新頁面即可查看到變化。然而，需要注意的是，熱更新僅適用于開發環境，不應部署到生產環境中。在生產環境中，應該生成優化過的靜態資源供用戶訪問。

如何提高webpack的構建速度？

1使用更快的構建工具：升級 Node.js 版本和 Webpack 版本，以獲得對構建性能的改進。

2合理配置 entry 和 output：根據項目需求，合理配置入口文件和輸出目錄，避免不必要的資源掃描和輸出。

3使用緩存：使用 Webpack 的緩存機制（如 cache-loader 插件）以及 Babel 的緩存配置，以便在重新構建時復用之前的結果，減少重復工作。

4只處理必要的文件：通過配置 include 和 exclude 選項來限制 loader 和 plugin 的處理范圍，只處理必要的文件。

5模塊熱替換（HMR）：在開發環境中啟用 HMR，可以使修改后的模塊實時生效，而無需完全重新構建。

6使用 HappyPack 或 thread-loader：將構建任務并發執行，利用多核 CPU 加速構建過程。

7減小文件體積：通過代碼拆分、Tree Shaking、壓縮等方式減小文件體積，減少網絡傳輸時間。

8懶加載：對于大型應用或頁面，使用懶加載技術（如動態導入）延遲加載非必要的資源。

9優化 loader 和 plugin：選擇高效的 loader 和 plugin，避免使用過度復雜或低效的工具。

10使用 DLL（動態鏈接庫）：將不經常變化的第三方庫打包成 DLL，以減少構建時間。

11開啟并行壓縮：對于需要壓縮的文件，使用 parallel-uglify-plugin 等插件進行并行壓縮。

12分析構建性能：使用 Webpack 的性能分析工具（如 webpack-bundle-analyzer）來識別構建中的瓶頸，并優化相應的配置和代碼。

問git常用命令？

首先我會跟面試官說，我用sourcetree😀

唉罷了，不能太狂，還是說點常用命令表示尊重🙏

git init: 在當前目錄初始化一個新的 Git 倉庫。

git clone <repository>: 克隆（下載）遠程倉庫到本地。

git add <file>: 將文件添加到暫存區。

git commit -m "<message>": 提交暫存區中的文件，并添加提交信息。

git status: 查看工作樹和暫存區的狀態。

git log: 查看提交歷史記錄。

git diff <file>: 查看文件的修改內容。

git branch: 列出所有分支。

git checkout <branch>: 切換到指定的分支。

git merge <branch>: 合并指定分支到當前分支。

git pull: 拉取遠程倉庫的最新變更。

git push: 推送本地提交到遠程倉庫。

git remote add <name> <url>: 添加遠程倉庫的別名和 URL。

git remote -v: 查看遠程倉庫的別名和 URL。

git stash: 暫存當前的修改，以便切換到其它分支。

git reset HEAD <file>: 取消對文件的暫存操作。

git revert <commit>: 撤銷指定的提交。

git rm <file>: 刪除文件，并將刪除操作添加到暫存區。

http？http和https區別？

HTTP（超文本傳輸協議） 是一種常用的協議，適用于對安全性要求不高的場景，傳輸過程中是明文傳輸，對數據不進行加密處理；而 HTTPS 則提供了更加安全的通信方式，適用于需要保護用戶數據隱私和防止篡改的應用場景。

http常見狀態碼？

200 OK：請求成功。服務器成功處理了請求，并返回相應的內容。

301 Moved Permanently：永久重定向。請求的資源已經被分配了新的 URL，以后應使用新的 URL。

302 Found：臨時重定向。請求的資源暫時移動到了其他 URL，客戶端應繼續使用原始 URL。

400 Bad Request：無效請求。服務器無法理解或無法處理該請求。

401 Unauthorized：未授權。需要身份驗證才能獲得訪問權限。

403 Forbidden：禁止訪問。服務器拒絕訪問所請求的資源。

404 Not Found：未找到。服務器無法找到請求的資源。

500 Internal Server Error：服務器內部錯誤。服務器在處理請求期間發生了意外情況。

502 Bad Gateway：錯誤的網關。作為代理或網關的服務器從上游服務器接收到無效響應。

503 Service Unavailable：服務不可用。服務器暫時無法處理請求（可能是由于過載或維護）。

get和post區別？

請求參數位置：GET 請求將參數附加在 URL 的查詢字符串中（例如 example.com/path?param1=value1?m2=value2），而 POST 請求將參數放在請求體中。

請求參數長度限制：GET 請求對參數長度有限制，不同瀏覽器和服務器可能有不同限制，通常在 2000-8000 字節之間。POST 請求沒有這個限制。

安全性：GET 請求參數暴露在 URL 中，容易被竊取和篡改，因此不適合傳輸敏感信息。POST?請求將參數放在請求體中，相對安全一些。

緩存機制：GET 請求默認可以被緩存，可以通過設置響應頭來控制緩存行為；POST 請求默認不會被緩存。

冪等性：GET 請求是冪等的，即多次重復請求得到的結果應該是相同的，不會對服務器產生副作用。POST 請求在多次重復請求時可能會對服務器產生副作用，如插入重復數據。

使用場景：GET 請求適用于獲取資源、查詢操作，對于無需修改服務器狀態的操作；POST 請求適用于提交表單數據、新增資源、修改服務器狀態等需要發送大量數據或進行寫操作的場景。

總結起來，GET 請求適合獲取數據，對服務器無副作用；POST 請求適合發送數據、進行修改操作。

地址欄輸入url敲下回車后發生了什么？

1、URL 解析：瀏覽器解析輸入的 URL，并分解為協議、域名、端口號和路徑等組成部分。

2、DNS 解析：瀏覽器向本地 DNS 服務器發送域名查詢請求，以獲取對應的 IP 地址。如果本地 DNS 緩存中沒有該域名的記錄，則會進行迭代查詢，直到找到對應的 IP 地址。

3、建立 TCP （傳輸控制協議）連接：瀏覽器使用 HTTP 或 HTTPS 協議，通過操作系統底層的網絡 API（如 sockets）來建立與服務器的 TCP 連接。這個過程涉及三次握手，即客戶端向服務器發送 SYN 包，服務器回復 SYN+ACK 包，最后客戶端發送 ACK 包確認連接建立。

4、發送 HTTP 請求：建立好 TCP 連接后，瀏覽器向服務器發送 HTTP 請求。請求中包含請求方法（GET、POST 等）、路徑、請求頭（如 User-Agent、Cookie 等）和可選的請求體。

5、服務器處理請求：服務器接收到請求后，根據請求路徑和其他信息，進行相應的處理。可以是返回靜態文件、執行動態代碼、查詢數據庫等操作。

6、服務器發送響應：服務器將處理結果打包成 HTTP 響應，包括響應狀態碼、響應頭（如 Content-Type、Content-Length 等）和響應體（如 HTML 內容、JSON 數據等），通過建立的 TCP 連接發送給瀏覽器。

7、瀏覽器渲染頁面：瀏覽器接收到響應后，根據響應中的內容類型進行相應處理。如果是 HTML 頁面，瀏覽器會解析 HTML、CSS 和 JavaScript，并將其渲染顯示在窗口中。

8、斷開 TCP 連接：當服務器完成響應并關閉連接時，或者瀏覽器接收到指定的數據長度后，會斷開與服務器的 TCP 連接。

這些步驟描述了從用戶輸入 URL 到瀏覽器顯示網頁的主要過程。在實際情況中，可能還有其他的網絡優化技術和緩存機制來提高性能和減少延遲。

瀏覽器渲染機制？

1. 解析HTML，構建DOM樹；
2. 解析CSS，構建CSSOM樹；
3. 把DOM和CSSOM組合成 渲染樹（render tree）；
4. 布局和繪制 渲染樹。

代碼規范？

自查：
一：常規檢查
代碼是否能正常運行
代碼能否實現需求功能
編輯器是否有報錯或波浪號警示
控制臺有沒有明顯報錯
定時器是否及時清除
是否已經刪除了所有的console和debugger
組件卸載掉時候不要忘記清除定時器

二：安全檢查
引入的包是否存在風險
代碼注釋中是否包含敏感詞匯
eslint是否有報錯未修復
接口是否進行了異常捕獲，并且拋出？
文檔檢查：是否有符合規范的注釋。

是否有做異常處理，尤其是在接口請求失敗的時候？

命名規范：
普通文件以小寫字母命名
react模塊組件文件命名遵循大駝峰
類命名遵循大駝峰
命名要有意義
標識符不要用前置或后置下劃線
函數名用小駝峰，文件名需要和函數名一致
類/單例/函數庫/對象 用大駝峰。?

組件名和導出名應一致

render 不要太臃腫, 一眼可以看完,可以通過拆分組件簡化

組件名稱和定義該組件的文件名稱建議要保持一致

循環列表不要忘了key,不推薦使用index作為key值

按需導入
Taro中編碼必須使用單引號

ReactNative圖片須壓縮
ScrollView禁止嵌套
require 中的圖片名字必須是一個靜態字符串
避免在 render 函數里創建新數組/對象

總是在自動關閉的標簽前加一個空格，正常情況下也不需要換行.
多行的JSX標簽寫在 ()里.

避免使用var

避免使用!important

盡可能不使用any

避免useEffect 依賴過多

老天保佑🙏 求求了，別問我這些，本寶寶記不住哇😭