前端工程面試題詳解-導覽

本系列彙整了常見的前端工程面試題，包含 HTML、CSS、前端工具、前端效能優化

HTML

• 什麼是 HTML 語意化？
• 請說明 DOMContentLoaded, load, beforeunload, unload 的觸發時機
• <script> 應該放在 HTML 的什麼位置？<link> 呢？
• <script> 的 async 與 defer 有什麼不同？

CSS

• 請說明 CSS 選擇器的優先級
• CSS 中 px、em、rem 的區別？又該如何選擇用哪個？
• 說說你對 CSS 盒模型 (Box Model) 的理解
• 偽類 (pseudo-classes) 和偽元素 (pseudo-elements) 是什麼？
• 請解釋 CSS position 有什麼值和作用？
• CSS 中 display 的值有什麼？inline、block 和 inline-block 有什麼差異？display:none 和 visibility:hidden 的差別？
• CSS 水平垂直置中的方法 (flex, grid)

前端工具

• 什麼是前端模組化？
• webpack 中的 loader 和 plugin 的差別是什麼？
• Vite 是什麼？為什麼要用 Vite？它解決了哪些問題？又是如何解決？
• Bun 是什麼? 為什麼要用 Bun? 它解決了哪些 Node.js 的問題?

前端效能優化

• 回流 (reflow) 和重繪 (repaint) 是什麼？以及如何優化？

其他

• 前端圖片格式選擇，什麼時候該用 JPG、 PNG、WebP 或 SVG 呢？
• 什麼是 SPA (Single-Page Application)？有什麼優點和缺點？