當我們掌握了基本的資料處理策略後，接下來要面對的挑戰是如何讓表格在各種裝置上都能提供良好的使用者體驗，同時處理大量資料時保持流暢的效能。今天我們將深入探討響應式設計、進階性能優化，以及實務開發中的最佳實踐。

網頁展示：Day5

響應式與行動端適配

行動端表格處理策略

傳統桌面版表格在行動裝置上往往面臨螢幕空間不足的問題。單純的縮放會讓內容變得難以閱讀，所以我們通常改成卡片的形式，不過如果是公司後台的話通常不會有行動端的問題，面對客戶才會使用到這樣的佈局轉換。

卡片式佈局轉換

ng-zorro 提供了 nz-card 組件，我們可以透過 Angular 的 BreakpointObserver 服務和 *ngIf 指令，在不同螢幕尺寸下切換顯示模式。在桌面版顯示 nz-table，在行動版則將每一行資料轉換為 nz-card。

這種方式的優點是每張卡片可以完整顯示所有重要資訊，使用者無需橫向滑動即可瀏覽。缺點是垂直空間佔用較多，不適合需要快速掃視大量資料或是需要比較多筆資料的場景。

橫向滑動 vs 垂直堆疊

另一種策略是保持表格結構，但允許橫向滑動。ng-zorro 的 nz-table 原生支援 nzScroll 屬性，可以設定 { x: '800px' } 來啟用橫向滾動。這適合欄位較少或使用者習慣表格檢視的情況。

垂直堆疊則是將部分欄位折疊到下一行顯示，保持表格的可讀性同時充分利用螢幕寬度。這可以透過 ng-zorro 的 responsive utilities 和條件渲染來實現。

觸控操作優化

行動端的觸控特性需要特別考量。ng-zorro 的組件已經針對觸控進行了優化，但我們仍需注意：

• 確保按鈕和可點擊區域足夠大（ng-zorro 的 nz-button 預設就符合觸控標準）
• 適當調整 nz-table 的行高，使用 nzSize="middle" 或自訂 CSS
• 利用 ng-zorro 的手勢支援，如 nz-carousel 的滑動功能

斷點設計與欄位優先級

建立欄位重要性分級

不同螢幕尺寸下，並非所有欄位都同等重要。我們需要建立一套欄位優先級系統：

• 核心欄位：在任何螢幕尺寸都必須顯示（如主要識別資訊、狀態）
• 重要欄位：在中等螢幕以上顯示（如關鍵數據、日期）
• 輔助欄位：只在大螢幕顯示（如詳細描述、次要資訊）

響應式斷點策略

ng-zorro 內建了響應式設計系統，支援 xs、sm、md、lg、xl、xxl 等斷點。我們可以使用 NzBreakpointService 來檢測當前螢幕尺寸，動態調整表格欄位的顯示。

在小螢幕上，可以使用 nz-dropdown 或 nz-popover 來隱藏次要資訊，透過「更多」按鈕觸發。中等螢幕可以顯示更多欄位，但仍需保持良好的可讀性。大螢幕則可以展示完整資訊。

動態欄位管理

結合 Angular 的服務和 Observable，我們可以建立一個響應式的欄位管理系統。當螢幕尺寸改變時，自動調整顯示的欄位，無需手動重新整理頁面。

ng-zorro 的 nz-table 支援動態欄位配置，透過 *ngFor 循環渲染 th 和 td，可以輕鬆實現響應式欄位管理。

性能優化與進階技術

虛擬滾動實作

實作原理深度解析

虛擬滾動的核心概念是「只渲染使用者看得到的部分」。當我們有 10,000 筆資料時，不需要在 DOM 中創建 10,000 個元素，而是只創建螢幕可視範圍內的元素（通常 10-20 個），然後動態更新這些元素的內容。

ng-zorro 提供了 nz-table 的虛擬滾動支援，透過 nzVirtualItemSize、nzVirtualMaxBufferPx 和 nzVirtualMinBufferPx 等屬性來配置虛擬滾動行為。底層使用了 Angular CDK 的 Virtual Scrolling，但提供了更簡潔的 API。

實作關鍵技術要點

使用 ng-zorro 的虛擬滾動時，需要設定表格的 nzScroll 屬性來指定容器高度，例如 { y: '500px' }。同時設定 nzVirtualItemSize 來指定每行的預估高度。

關鍵在於正確的資料管理。ng-zorro 的虛擬表格需要完整的資料陣列，並且建議使用 trackByFn 來優化渲染效能。資料結構設計時要考慮到虛擬滾動的特性，避免複雜的巢狀結構。

性能監控與調優

實作虛擬滾動後，需要監控實際效能提升。使用 Chrome DevTools 的 Performance 頁籤，觀察 Interaction to Next Paint (INP) 指標，這能準確測量**用戶操作（如滾動、點擊）後，畫面實際更新所需要的時間。**這是一個相對容易識別的數字。

INP 效能目標：

• 良好：< 200ms
• 需要改善：200-500ms
• 差：> 500ms

使用時機與限制

虛擬滾動並非萬能解決方案。它適合：

• 資料量超過 500 筆且項目高度相對固定
• 需要流暢滾動體驗的長列表
• 記憶體使用量是關鍵考量的場景

不適合的情況包括：

• 需要全域搜尋或篩選功能（會破壞虛擬滾動的連續性）
• 項目高度差異很大
• 需要複雜的多選操作或展開/收合功能
• 與 nz-table 的某些功能衝突（如樹狀表格、分組表格）

效能展示
以下都是一頁展示1000筆資料的頁面。

使用虛擬滾動的更新時間為 80 毫秒

不使用虛擬滾動的更新時間為 3,120 毫秒

這樣的差異來自於虛擬滾動只會預先載入指定高度的 tr ，如果沒有預先載入的話，他會一次載入 1000 個 tr，才會導致更新的時間差異這麼巨大。
以下提供簡要的程式碼差異，大家可以自己改來試試看。

使用虛擬滾動

不使用虛擬滾動

開發實務

TS vs HTML 定義選擇

TypeScript 定義的優勢場景

當表格欄位超過 20 個，或者需要複雜的動態欄位管理時，TypeScript 定義方式更有優勢。我們可以建立一個 NzTableColumn 介面，統一管理欄位的顯示名稱、排序設定、格式化規則等。

這種方式特別適合：

• 需要根據使用者權限動態顯示欄位
• 欄位配置需要儲存到後端
• 多個頁面共用相似的表格結構
• 需要複雜的欄位排序和顯示/隱藏功能

ng-zorro 的表格可以很好地支援這種方式，透過 *ngFor 動態生成表頭和內容，配合類型安全的欄位定義。

HTML 直接定義的適用情境

對於欄位較少（20 個內）且結構相對固定的表格，HTML 直接定義更直觀。開發者可以直接在模板中看到完整的表格結構，除錯和維護都更容易。

特別是當每個欄位都需要大量客製化排版或是有些特殊商業邏輯的時候，HTML 定義方式的靈活性更高。

結論

在實際專案中，這些技術通常需要組合使用。重要的是根據具體需求選擇合適的解決方案。