20 篇有 "frontend interview" 標籤的文章
什麼是 Event Loop？
Event loop 是一個持續運行的機制，負責監控 Call Stack 是否為空，並依序從 Microtask Queue 和 Task Queue 中選取任務放入 Call Stack 執行。此外，它也協調瀏覽器的渲染操作，確保在必要時刷新畫面。 JavaScript…
Read more →前端開發者不可不知的Debounce與Throttle
在前端開發中，debounce 是一種將多次函式呼叫合併成一次呼叫的技巧，適用於表單驗證以及自動完成等場景。Throttle 是確保函式能夠以固定頻率被執行，適用於無限捲動等場景。這篇文章將會探討 debounce 和 throttle…
Read more →SSR 與 CSR 深度解析：從渲染方式到效能最佳化
本文詳細比較 SSR (Server-Side Rendering，伺服器端渲染) 與 CSR (Client-Side Rendering，客戶端渲染) 的特點和優缺點，並探討如何最佳化效能。了解渲染技術背後的原理，以便選擇適合您專案的策略。 目錄 CSR (Client…
Read more →每個軟體工程師都應該懂的HTTPS：深入淺出加密原理、TLS協議
HTTPS 不僅是資訊安全中不可或缺的要角，對軟體工程師而言也是很必要的知識。簡單的說，HTTPS 是安全版本的 HTTP。HTTP 和 HTTPS 的差別在於，HTTPS 使用 TLS 協議來加密 HTTP 請求和回應。TLS…
Read more →軟體工程師薪資談判大解密！內行人爆料：掌握這個技巧，薪水瞬間飆升
順利通過了技術面試，到了要談薪水的關卡卻因為不知道如何談判而吃大虧？如果只要痛苦幾十分鐘就可以爭取更多薪水，為什麼不嘗試呢？這篇文章整理了關於談薪水方式以及自己實際談薪水的一些心得，求職地點在台灣，面試經驗以外商/台商各半，大多數公司都稍有規模，少數 startup…
Read more →經典前端面試題：從瀏覽器網址列輸入 URL 按下 enter 發生了什麼？
從瀏覽器網址列輸入URL按下enter發生了什麼？這個問題是一道常見的面試題，其中至少包含了域名解析、建立 TCP 連接、發起 HTTP(S) 請求、伺服器處理並返回請求、瀏覽器渲染頁面等步驟。 域名解析 (DNS Lookup) 建立 TCP 連接 瀏覽器發起 HTTP(S…
Read more →JavaScript Hoisting 是什麼？ let, const, var 的差異是什麼？
JavaScript 在 ES6 let 和 const 問世之前，都是用 var 來定義變數，但是 var 有許多迥異於其他程式語言的特性，像是使用函式作用域 (function-level scope)，以及具有變數 hoisting…
Read more →JavaScript this 的用法
在 JavaScript 中，「this 是什麼」絕對是讓人頭痛難題前三名。This 和物件方法息息相關，因此這篇文章會先介紹在物件方法、物件方法中的 this 是如何被決定的，把握一個簡單原則就可以知道 this 到底是誰。另外，arrow function 的 this…
Read more →深入了解 CORS (跨來源資源共用): 如何正確設定 CORS？
這篇文章將會帶你了解 CORS (Cross-Origin Resource Sharing) 的概念和設定方法，確保您的網站能在遵守同源政策的前提下正確處理跨來源請求。學習如何設定 Access-Control-Allow-Methods、Access-Control…
Read more →Cookie 是什麼：如何使用 JavaScript 操作 document.cookie
了解什麼是 cookie，學習如何使用 JavaScript 讀取和設定 cookie，掌握 Path、Domain、Max-Age、Expires、Secure、HttpOnly、SameSite 等參數的應用，並深入探討 cookie 安全性議題。 目錄 Cookie…
Read more →JavaScript Prototype (原型) 是什麼？
在 JavaScript 中，每個物件都有一個 prototype (原型)，物件可以從原型上繼承屬性和方法，達到復用程式碼的效果，這就是所謂的 prototypal inheritance…
Read more →Preload, Prefetch 和 Preconnect 的差異
現代瀏覽器提供了 preload、prefetch 和 preconnect 等功能，能讓開發者指定 link tag 的 rel 屬性提示瀏覽器提前下載圖片、JS、CSS等資源，以達到最佳化效能的效果。這篇文章將會教你這三種 resource hint…
Read more →JavaScript ES6 Class：深入淺出類別概念與應用
深入了解 JavaScript ES6 class 的概念及使用方法，探討 class 與 prototype 的關係，學會利用 extends 實現繼承，掌握 constructor、super 的使用技巧，以及瞭解靜態方法的應用。看完這篇保證讓你對 JavaScript…
Read more →如何使用 JavaScript 的 call 和 apply
這篇教學會介紹 JavaScript 中 apply() 和 call() 的使用方法，以及運用到 apply() 和 call() 的應用，包括 Call Forwarding、Cache 和 Method Borrowing。 目錄 JavaScript apply() JS…
Read more →JavaScript Closure (閉包)
JavaScript 中的閉包 (Closure) 是函式以及其語彙環境 (Lexical Environment) 的組合，所有的函式都能夠記住被創造的當下的環境以及變數。這篇教學將會從 JavaScript…
Read more →瀏覽器事件：Event Bubbling, Event Capturing 及 Event Delegation
這篇教學介紹瀏覽器事件的運作原理，包含event bubbling、event capturing。第二部分介紹event delegation的寫法及應用時機。教學內容主要參考javacript.info 的 Introduction into Events。 目錄 Event…
Read more →JavaScript Promise 的用法
JavaScript 中的 Promise 是專門用來執行非同步操作的資料結構，提供了 then、catch、all、race 等方法，使得複雜的非同步流程變得簡潔好管理。這篇文章將會介紹 promise 的 resolve 和 reject，如何使用 then…
Read more →Caterpillar Method
令 A = [a0, a1, …, an-1], ai > 0，要如何判斷是否存在一組 (p, q)，其中 p <= q，使得 sum(ap, ap+1, … aq) = s？我們可以用下面介紹的Caterpillar Method。 目錄 Caterpillar Method…
Read more →瀏覽器渲染效能最佳化 (Browser Rendering Optimization)
這篇教學簡介瀏覽器轉譯/渲染(Browser Rendering)的原理，如何使用Chrome DevTool找到效能瓶頸，以及如何避開導致效能瓶頸的作法。 Critical Rendering Path What Goes Into One Frame? Layout and…
Read more →JavaScript new 運算子及建構函式的用法
JavaScript 中可以使用 JavaScript new 運算子及建構函式建立物件。定義建構函式的必要步驟：1. 宣告建構函式 2. 在建構函式中，將物件屬性定義在 this 上 3. 將物件方法定義在建構式的 prototype 屬性裡 4. 用 new…
Read more →