Làm sao tối ưu hiệu năng SwiftUI quanh view identity và diffing?

Question

IT Interview Practice · Accepted Answer

SwiftUI chạy lại `body` mỗi khi state được quan sát đổi, rồi **diff** cây view mới với cây cũ và chỉ cập nhật phần khác. Vấn đề hiệu năng đến từ việc bắt diff làm quá nhiều: **identity** không ổn định, **observation** quá rộng, và tính toán `body` tốn kém. Khắc phục bằng cách kiểm soát identity, thu hẹp phạm vi state, và giữ `body` rẻ.

## Diffing và identity hoạt động ra sao

SwiftUI khớp các view giữa các lần render bằng **identity**. Với list đó là `id`; nếu id không ổn định, SwiftUI bỏ đi và dựng lại view (mất state và animation) thay vì cập nhật nó.

```swift
// TỆ: dùng index của mảng làm id — reorder/insert phá identity, dựng lại toàn bộ
ForEach(items.indices, id: \.self) { i in Row(items[i]) }

// TỐT: identity ổn định gắn với dữ liệu
ForEach(items) { item in Row(item) }      // items: Identifiable, id ổn định
```

## Thu hẹp phạm vi observation

Một `ObservableObject` re-render **mọi** view đang quan sát nó mỗi khi **bất kỳ** thuộc tính `@Published` nào đổi. Hãy tách model lớn, hoặc chuyển sang **Observation framework** (`@Observable`, iOS 17+) vốn theo dõi việc đọc *theo từng thuộc tính*, nên view chỉ re-render khi một thuộc tính nó thực sự dùng thay đổi.

```swift
@Observable final class Feed {     // iOS 17: theo dõi phụ thuộc chi tiết
    var unreadCount = 0            // view chỉ đọc .posts sẽ không re-render vì cái này
    var posts: [Post] = []
}
```

## Giữ body rẻ

`body` chạy rất thường xuyên, nên đừng bao giờ làm việc nặng inline:

```swift
var body: some View {
    List(sortedItems) { ... }      // TỆ nếu sortedItems sort mỗi lần render
}
// TỐT: tính dữ liệu dẫn xuất trong model, không phải trong body
```

- Tách subview để một thay đổi state re-render một view **nhỏ**, không phải cả màn hình.
- Dùng `LazyVStack`/`List` cho collection lớn để các hàng ngoài màn hình không bị dựng.
- Thêm `.equatable()` hoặc `EquatableView` để ngắn mạch diffing trên các subtree ổn định.

## Bẫy thường gặp

- `AnyView` xoá bỏ type identity và phá diffing theo cấu trúc — tránh ở các đường nóng.
- Truyền một closure/array literal mới mỗi lần render có thể vô hiệu hoá child view một cách không cần thiết.

## Tại sao điều này quan trọng

Trên màn hình ProMotion 120Hz bạn chỉ có ~8ms mỗi frame; một `body` sort mảng lớn hoặc re-render cả list sẽ rớt frame và giật khi scroll. Phỏng vấn senior dò view identity và phạm vi observation vì đó chính là nơi app SwiftUI thực tế trở nên chậm — và là nơi vài sửa đổi chính xác khôi phục sự mượt mà.

Diffing và identity hoạt động ra sao

Thu hẹp phạm vi observation

Giữ body rẻ

Bẫy thường gặp

Tại sao điều này quan trọng

Câu hỏi liên quan