目錄
1.項目第一次加載太慢優化?/ vue 首屏加載過慢如何優化
2.說說了解的es6-es10的東西有哪些
ES6（ES2015）之后，JavaScript 新增了許多實用的數組和對象方法，下面為你詳細介紹：
3.常見前端安全性問題
XSS：攻擊者通過注入惡意腳本，在用戶瀏覽器中執行，竊取 Cookie、會話令牌等敏感信息
跨站請求偽造（CSRF）
跨域資源共享（CORS）與安全
前端如何處理密碼安全？需要
如何避免 URL 中的敏感信息泄露？? ?
其他常見安全問題
總結：前端安全核心原則
4.vite和webpack在熱更新上有啥區別?
5.在項目中，webpack使用過哪些常見的plugin（插件）和loader（加載器）
?Loader（加載器）
Plugin（插件）
常用loader
常用plugin
1.項目第一次加載太慢優化?/ vue 首屏加載過慢如何優化
????????首屏加載慢的常見原因，比如有打包后的文件過大、資源加載順序不合理，素材資源一次性加載過多等等。
- 首先從代碼層面優化，路由懶加載，分模塊加載文件，合理使用路由懶加載可使首屏 JS 體積減少 40%-60%，然后對于工具庫，盡量采用按需引入的方式。然后合理使用v-if和v-show，合理使用watch和computed，使用v-for必須添加key
- 然后從資源層面優化，圖片壓縮（Squoosh）+ WebP 格式 + 懶加載（Intersection Observer），優先使用字體圖標，大文件放在cdn上，比如阿里云七牛云
- ?然后構建配置優化，使用骨架屏，開啟Brotli?、gzip壓縮代碼，減少代碼包的大小，使用Tree Shaking移除 JavaScript 上下文中未被引用代碼（它通過分析代碼中的導入（import）和導出（export）語句，判斷哪些代碼是 “活的”（被引用），哪些是 “死的”（未被引用），從而在打包時剔除 “死代碼”。作用：大幅減少打包后的代碼體積，提升應用加載速度，尤其對使用大型第三方庫的項目優化效果顯著。）
2.說說了解的es6-es10的東西有哪些
????????塊級作用域：let/const?解決?var?的變量提升和閉包問題
????????箭頭函數（Arrow Functions）綁定外層?this，簡化回調
????????類（Class）語法糖：基于原型鏈的面向對象封裝
????????模塊（ES Module）標準化導入導出
????????解構賦值（Destructuring）、擴展運算符
ES6（ES2015）之后，JavaScript 新增了許多實用的數組和對象方法，下面為你詳細介紹：
- Array.from()：可將類數組對象或可迭代對象轉換為真正的數組。
- Array.find()：返回數組中滿足提供的測試函數的第一個元素的值，否則返回?undefined。
- Array.findIndex()：返回數組中滿足提供的測試函數的第一個元素的索引，若沒有找到則返回 -1。
- Object.assign()：用于將一個或多個源對象的所有可枚舉屬性復制到目標對象，返回目標對象。
- Object.keys()：返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和正常循環遍歷該對象時返回的順序一致。
- Object.values()：返回一個給定對象自身的所有可枚舉屬性值的數組，值的順序與使用?for...in?循環的順序相同。
3.常見前端安全性問題
????????前端安全的主要領域，比如 XSS、CSRF、SQL 注入（雖然更多是后端，但前端也可能涉及）、點擊劫持、跨域問題、密碼安全、文件上傳安全等等。然后，每個領域下有哪些常見的問題，比如 XSS 的類型、預防措施，CSRF 的原理和防護方法，這些都是面試中常問的。
XSS：攻擊者通過注入惡意腳本，在用戶瀏覽器中執行，竊取 Cookie、會話令牌等敏感信息
????????預防措施：1.輸入輸出轉碼，對用戶輸入（如表單、URL 參數）和輸出（如 HTML、URL、JavaScript）進行編碼（如使用textContent代替innerHTML?2.Cookie 安全屬性：設置HttpOnly（防止 JS 讀取 Cookie）、Secure（僅 HTTPS 傳輸）
跨站請求偽造（CSRF）
????????攻擊者誘導用戶執行非自愿的操作（如轉賬、修改密碼），利用用戶已登錄的會話憑證。
攻擊原理：用戶登錄 A 網站后，瀏覽器攜帶 Cookie 訪問惡意網站 B，B 向 A 發送偽造請求（如隱藏的表單提交或自動發送的 GET 請求）。
????????防御措施：Token 驗證：提交時校驗 Token 與用戶會話是否匹配。設置Cookie的SameSite=Strict/Lax，限制跨站請求攜帶 Cookie（Strict完全禁止，Lax允許部分安全場景）。
跨域資源共享（CORS）與安全
????????限制允許的源：使用Access-Control-Allow-Origin指定單一可信域名（如https://api.example.com），避免使用*（通配符）。
????????預檢請求（Preflight）：對復雜請求（如含Content-Type: application/json的 POST 請求），瀏覽器先發送 OPTIONS 請求驗證權限，需確保服務端正確響應。
前端如何處理密碼安全？需要
- ?輸入強度校驗：通過正則表達式檢查密碼復雜度（如大小寫、數字、特殊字符，長度限制）。
- 掩碼顯示：使用
input type="password"隱藏輸入內容，避免明文泄露。 - 避免本地存儲：絕不將密碼明文存儲在
localStorage/sessionStorage或 Cookie 中（應通過 HTTPS 傳輸，由后端加密處理）。 - 防暴力破解：前端配合后端限制登錄嘗試次數，或添加驗證碼。
如何避免 URL 中的敏感信息泄露？? ?
- 避免明文參數：絕不通過 URL 傳遞密碼、Token 等敏感信息（如
https://api.com/login?token=xxx），應通過 POST 請求體或 Header 傳輸。 - URL 編碼：對用戶輸入的參數進行編碼（如
encodeURIComponent），防止特殊字符導致的注入攻擊（如路徑遍歷../）。 - 路由參數校驗：對動態路由參數（如
/user/123）進行合法性校驗，防止越權訪問（如篡改 ID 訪問他人數據）。?
其他常見安全問題
-
如何理解 Web 安全中的 “同源策略”？它的作用是什么？答：瀏覽器限制不同源（協議、域名、端口均相同）的頁面之間交互，防止惡意網站竊取數據，作用是：阻止跨域讀取 Cookie、DOM、AJAX 請求，是瀏覽器的核心安全機制。
-
什么是依賴項安全？如何防范 npm 包的漏洞？答：避免使用未維護的庫，選擇下載量高、社區活躍的包。使用
package-lock.json或yarn.lock鎖定依賴版本，防止版本劫持。 -
簡述 HTTPS 的作用及前端相關配置 ：作用：加密傳輸數據，防止中間人攻擊、數據篡改和竊聽。確保證書有效（非自簽名），使用 HSTS（HTTP Strict Transport Security）頭強制瀏覽器僅通過 HTTPS 連接。
總結：前端安全核心原則
- 輸入輸出校驗：永遠不信任用戶輸入，對所有輸入進行嚴格過濾和轉義。
- 最小權限原則：限制資源訪問范圍（如 CORS、CSP），避免過度開放權限。
- 關注最新漏洞：定期學習 XSS、CSRF、依賴漏洞等最新攻擊手段及防御方案（如 2023 年的 CORS 漏洞
confusion attacks）。
4.vite和webpack在熱更新上有啥區別?
? ? ? ? 1.實現機制，vite使用瀏覽器原生的ES模塊導入功能，可以實現模塊級別的熱更新，即只更新修改的模塊，而不需要刷新整個頁面。這樣可以提供更快的開發迭代速度。而在webpack中，熱更新是基于文件級別的，Webpack 會對整個項目進行打包，需要重新構建并刷新整個頁面。(Webpack 的熱更新（HMR，Hot Module Replacement）機制不依賴特定的模塊導入規范，而是通過?HotModuleReplacementPlugin?插件和 開發服務器（如 webpack-dev-server）實現，其核心原理是在模塊更新時，通過注入運行時代碼來替換舊模塊)
? ? ? ? 2.熱更新速度，由于 Vite 在開發環境下不需要打包，所以熱更新速度非常快。當修改一個模塊時，Vite 只需要重新編譯該模塊，并將更新后的模塊發送給瀏覽器，幾乎可以實現即時更新。而webpack?需要重新編譯整個模塊或部分相關模塊，然后再將更新后的代碼推送給瀏覽器。尤其是在項目規模較大、依賴關系復雜時，重新編譯的時間會明顯增加。
? ? ? ??綜上所述，Vite 在熱更新方面具有速度快、配置簡單等優勢，更適合現代前端開發的快速迭代需求；而 Webpack 雖然熱更新配置相對復雜，但它的生態系統成熟，對于復雜項目的熱更新也能提供有效的支持。
5.在項目中，webpack使用過哪些常見的plugin（插件）和loader（加載器）
?Loader 主要專注于文件的轉換，將不同類型的文件轉換為 Webpack 可處理的模塊；而 Plugin 的功能更廣泛，可在 Webpack 構建過程的各個階段執行各種任務。???????
?Loader（加載器）
- 作用：Loader 的功能就是對不同類型的文件（如 CSS、圖片、字體等）進行轉換，讓 Webpack 能夠理解并處理這些文件。簡單來說，Loader 就是將非 JavaScript 文件轉化成 Webpack 可處理的模塊。
- 使用方式：在 Webpack 配置文件里，借助
module.rules屬性來配置 Loader。每個規則包含test和use兩個關鍵屬性，test用于匹配文件類型，use用于指定要使用的 Loader。 - 示例：處理 CSS 文件時，一般會用到
style-loader和css-loader。css-loader的作用是解析 CSS 文件里的@import和url()語句，style-loader則把 CSS 代碼注入到 HTML 文件的<style>標簽中。
module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
};?
Plugin（插件）
- 作用：Plugin 能夠在 Webpack 構建過程的各個階段執行特定的任務，它的功能更為廣泛，可用于優化打包結果、管理資源、注入環境變量等。
- 使用方式：在 Webpack 配置文件里，通過
plugins屬性來配置 Plugin。首先要引入 Plugin，接著在plugins數組里創建 Plugin 實例。 - 示例：
HtmlWebpackPlugin可自動生成 HTML 文件，并把打包后的 JavaScript 文件注入其中。
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
};常用loader
css-loader：解析 CSS 文件里的@import和url()語句，把 CSS 文件轉化為 JavaScript 模塊。less-loader：將 Less 文件編譯成 CSS 文件，同樣常與css-loader、style-loader配合。file-loader：處理文件資源，像圖片、字體等，將文件復制到輸出目錄，并返回文件的公共 URLbabel-loader：借助 Babel 將 ES6 + 代碼轉換為向后兼容的 JavaScript 代碼，以確保在舊版本瀏覽器中也能正常運行。
常用plugin
HtmlWebpackPlugin：自動生成 HTML 文件，并且把打包后的 JavaScript 和 CSS 文件注入到 HTML 文件中。TerserPlugin：壓縮和混淆 JavaScript 代碼，減少文件大小，提高加載速度。CopyWebpackPlugin：將指定的文件或目錄復制到輸出目錄，適用于處理靜態資源。MiniCssExtractPlugin：將 CSS 提取到單獨的文件中，而非將其注入到 JavaScript 文件里，從而提升性能。
)
——Mcu模塊配置及代碼詳解(上))
