---
# System prepended metadata

title: 前端問題

---




### 1.常見 CSS 效能優化方法？

a. 避免使用過度複雜的選擇器
![Screenshot 2025-04-21 at 11.51.59 AM](https://hackmd.io/_uploads/BJ0W-BQ1eg.png)

b. 優先使用 Class 選擇器
[![Screenshot 2025-04-21 at 11.52.54 AM](https://hackmd.io/_uploads/Bye4bHXkel.png)
](https://)

c. 減少不必要的 CSS 重繪與回流
- 避免頻繁改變 layout 屬性（如 width, top, margin）
- 避免使用表格作版面排版
- 儘可能使用 transform, opacity 做動畫（不會觸發 reflow）


<hr/>

### 2. 怎麼實作響應式設計（Responsive Design）

a.  使用媒體查詢（Media Queries）
媒體查詢是實作響應式設計最常見的方式，可依據螢幕寬度設定不同的樣式。

b. 使用彈性布局（Flexbox / Grid）
這些 CSS 技術可讓你建立可調整的版面，配合媒體查詢使用更有效。

c.  使用相對單位（%, em, rem, vw/vh）
避免硬寫固定 px，改用相對單位讓內容更具彈性。

<hr/>

### Promise 與 async/await 的差異與實務用法？



