前端工程面试题详解-导览

本系列汇整了常见的前端工程面试题，包含 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)？有什么优点和缺点？