博客 / 列表

謝爾登_ - 面試官最喜歡問的Webpack中的loader和plugin到底有什麼區別？

基本概念 ​Loader​：對單個資源（文件）做轉換的函數（把一個文件從一種內容轉換為另一種內容），在 module 層面運行。 ​Plugin​：在整個構建過程的生命週期裏插入鈎子邏輯（修改編譯器、生成資源、注入行為等），在 compiler/compilation 層面運行。 概念説明 Loader 輸入：某個源文件（例如

生命週期 , webpack , Css , 前端開發

謝爾登_ - 原來Webpack在大廠中這樣進行性能優化！

性能優化方案 優化分類： 優化打包後的結果（分包、減小包體積、CDN 服務器） == 更重要 優化打包速度（exclude、cache-loader） 代碼分割（Code Splitting） 一、主要目的 ​減少首屏加載體積​：避免一次性加載全部代碼 ​利用瀏覽器緩存​：第三方庫（如 React、Lodash）變動少，可單獨緩存

服務器 , 加載 , Css , 前端開發 , Javascript

謝爾登_ - 關於XSS和CSRF，面試官更喜歡這樣的回答！

這是我們前端最常見的兩種攻擊手段，也是面試中最常考的前端攻擊。這篇文章我用最精煉、最優雅，也是面試官最喜歡的回答方式來講解下 XSS 和 CSRF。 一、XSS（跨站腳本） 原理 攻擊者把 惡意腳本 注入到受信任頁面並被瀏覽器執行，腳本 利用頁面的信任上下文（Cookies、localStorage、DOM）竊取數據或劫持會話。 常見類型 ​反射

轉義 , 富文本 , 前端開發 , HTML , Javascript

謝爾登_ - 簡單聊聊webpack搖樹的原理

Webpack 的 Tree Shaking（搖樹）是一項用於消除 JavaScript 上下文中未引用代碼的優化手段，它能有效減小打包體積。 核心原理 Tree Shaking 的本質是 ​死代碼消除​，它依賴 ​ES6 模塊（ESM）的靜態語法結構​。 ​靜態分析​：ESM 的 import/export 語句必須位於模塊頂層（注意：模塊頂層不是模塊文件頂部的意思

webpack , 靜態分析 , Css , 前端開發

謝爾登_ - 面試官問你這些，其實是在問你JavaScript執行原理！

一、執行上下文（Execution Context）與環境記錄（Environment Record） 執行上下文是函數/全局/模塊代碼執行時的抽象環境，包含幾部分： ​LexicalEnvironment​（詞法環境）——存 let/const/class、catch 參數、塊級作用域、函數參數、箭頭函數 this 等詞法綁定 不掛載到 global

詞法 , 作用域 , 執行上下文 , Css , 前端開發 , HTML

謝爾登_ - 事件循環其實很簡單！

一、概念 JavaScript 是單線程執行（基於執行棧 / 調用棧 call stack），事件循環負責不斷地從各種任務隊列裏取任務執行——以保證異步任務的函數回調按規則有序運行，瀏覽器環境和 Node.js 環境都使用事件循環，儘管他們的事件循環邏輯並不相同。 之所以函數的執行基於“棧”這種結構，是因為 js 函數允許嵌套，先調用的函數需要等待內部函數的調用執行完畢才

任務隊列 , 事件循環 , Vue , Css , 前端開發 , HTML

謝爾登_ - 原型理解從入門到精通

原型這塊知識點，其實在我們工作中的使用非常簡單。但是俗話説“面試造火箭，工作擰螺絲”，在面試中，面試官不時就會考察一些花裏胡哨的問題，所以，我們只有將這個概念和他的相關知識理解透徹，才能以不變應萬變。 兩個容易混淆但要分清的東西 ​每個普通對象都有內部隱式屬性 ​[[Prototype]]​​（常見訪問名 ​proto​） ——

構造函數 , Css , 原型鏈 , 前端開發 , 原型對象 , HTML

謝爾登_ - 一文講清 this 所有知識點

瀏覽過網絡上超多篇面經後，關於 this 的考察給我的感覺就是——不會為了難而難。看過很多作者發佈自己對於 this 的“炫技”寫法，再看真實面試和工作場景中的使用。我認為，最重要的還是掌握最基本的使用，“炫技”的一些寫法根本拿不上真實項目，“誰都讀不懂的代碼”不是“高級”而是“一場災難”。 一、綁定規則 new（構造調用）綁定（優先級最高）

詞法 , 作用域 , 嚴格模式 , Css , 前端開發 , HTML

謝爾登_ - 身為大廠前端的你，不能不知道Babel + Polyfill！

〇、Babel 概述 Babel 的工作原理 = “把代碼變樹 → 改樹 → 再變回代碼”。 也就是三個階段： Parse（解析）：ESNext（ES 新語法） → AST 語法樹 Transform（轉換）：插件修改 AST Generate（生成）：AST → 舊 JS 代碼（瀏覽器都可以識別的代碼） Babel 是一個“代碼轉換工具

bundle , 語法樹 , Css , 前端開發 , babel , HTML

謝爾登_ - 跨域問題解決方案彙總

全文默認講的是瀏覽器端發起的 HTTP 請求的“跨域”問題（同源策略導致的受限）。 跨域 / 同源策略概述 ​**同源（same-origin）**​：協議、域名（host）、端口 三者完全相同稱為同源。 例如 https://example.com:443 和 http://example.com 不是同源（協議不同）。 ​**同源策略（SOP）**

access , Nginx , Css , 前端開發 , 跨域 , HTML

謝爾登_ - HTTPS 究竟比 HTTP 好在哪？

一、HTTP vs HTTPS 概覽 HTTPS = HTTP + 加密認證（基於 TLS），能防止被中間人竊聽與篡改，並證明服務器身份。 非對稱（RSA/ECDSA）用於​做身份認證與安全協商密鑰​（但慢）。 對稱加密速度快，適合實際數據傳輸。 握手用非對稱協商對稱會話密鑰，然後用對稱加密通信。 二、SSL/TLS 握手 先看 ​傳統 TLS1

服務器 , HTTP , 客户端 , Css , 前端開發 , HTML

謝爾登_ - Access-Control-Allow-Origin 在企業中的用法

接上篇文章説道，跨域解決方案中的 CORS 方案，會配置一個 Access-Control-Allow-Origin 的配置項，而且我們一般不直接配置為 *，這樣做的原因是什麼以及企業中的最佳實踐是怎麼樣的，這篇文章給你答案！ 簡單概括 Access-Control-Allow-Origin: * ​允許任意來源的頁面讀取你的響應內容​（對瀏覽器端的 JS

緩存 , 請求頭 , access , Css , 前端開發 , HTML

謝爾登_ - 跨域問題解決方案的棄子——JSONP

今天一位學弟“哭着”來找我，説他面試美團（實習崗）的時候，被問到了跨域問題的解決方案，回答的並不好。我還正想着，這麼常見的問題回答不出來，這不就是基礎不過關。但誰知道，面試官讓他封裝 JSONP 來實現跨域！怪我當時還告訴他們這種方案現在很少用，看一眼八股瞭解即可，現在可謂是啪啪打臉！ 既然都問到了這個問題，那這篇文章就來詳細講講跨域解決方案的棄子——JSONP

Css , 解決方案 , 前端開發 , 跨域 , HTML , Json