SDWebImage: nó là gì, các khái niệm chính và UIImageView

SDWebImage là gì?

SDWebImage là thư viện tải ảnh bất đồng bộ trên các nền tảng Apple (iOS, macOS, tvOS, watchOS). Nó cung cấp một phân loại cho UIImageView với phương thức sd_setImage, tải, lưu vào bộ nhớ đệm và hiển thị ảnh từ bất kỳ nguồn nào chỉ trong một dòng mã.

Thư viện hỗ trợ tải dần (ảnh xuất hiện khi các byte được nhận), ảnh động (GIF, APNG), biến đổi (làm tròn, cắt xén, đóng dấu mờ) và bộ giải mã tùy chỉnh. Theo Thống kê GitHub, SDWebImage có hơn 25.000 sao và được sử dụng trong các ứng dụng lớn, bao gồm Twitter, Pinterest và Instagram.

Kiến trúc được xây dựng trên một chuỗi thành phần: Coder (giải mã), Cache (lưu trữ), Loader (mạng) và Transformer (xử lý). Mỗi thành phần có thể thay thế, cho phép điều chỉnh thư viện theo các yêu cầu cụ thể của dự án.

Cách SDWebImage hoạt động: trình quản lý và bộ nhớ đệm

SDWebImageManager là thành phần trung tâm điều phối quá trình tải. Nó nhận URL, kiểm tra bộ nhớ đệm, tải dữ liệu, giải mã thành UIImage và chuyển nó đến ImageView hoặc Completion Handler. Trình quản lý hoạt động thông qua một singleton dùng chung, có thể truy cập từ bất kỳ đâu trong ứng dụng.

Quá trình tải

Trình quản lý kiểm tra tuần tự Bộ nhớ đệm (NSDictionary với UIImage), sau đó Bộ nhớ đệm ổ cứng (hệ thống tập tin). Khi không tìm thấy, một yêu cầu mạng được thực hiện qua NSURLSession. Sau khi tải, dữ liệu được giải mã, trải qua các biến đổi và được lưu vào cả hai bộ nhớ đệm. Toàn bộ quá trình chạy trong hàng đợi nền, kết quả được chuyển đến hàng đợi chính.

• Bộ nhớ đệm — tra cứu O(1), lưu UIImage với giới hạn bộ nhớ có thể cấu hình
• Bộ nhớ đệm ổ cứng — đọc từ hệ thống tập tin, lưu dữ liệu nén
• NSURLSession — tải với hỗ trợ HTTP/2 và thời gian chờ có thể cấu hình

Phân loại UIImageView

UIImageView+WebCache là một phân loại Objective-C (có thể truy cập từ Swift) thêm phương thức sd_setImage. Phương thức này chấp nhận URL, placeholder, các tùy chọn (SDWebImageOptions) và một khối hoàn thành. Phân loại tự động hủy yêu cầu trước đó khi ô bảng được tái sử dụng thông qua cơ chế sd_cancelCurrentImageLoad.

Các lớp chính của SDWebImage

Kiến trúc SDWebImage được chia thành nhiều mô-đun với các vùng trách nhiệm rõ ràng. Mỗi lớp giải quyết một nhiệm vụ — từ tải đến hiển thị.

SDWebImageManager

SDWebImageManager là mặt tiền cho tất cả các thao tác ảnh. Nó chứa các tham chiếu đến ImageCache (SDImageCache) và ImageLoader (SDWebImageDownloader). Thông qua ủy quyền SDWebImageManagerDelegate, bạn có thể chặn việc tải và thay đổi URL hoặc hành vi.

SDImageCache

SDImageCache là bộ nhớ đệm hai cấp (bộ nhớ + ổ cứng) được khởi tạo với một không gian tên duy nhất. Bộ nhớ đệm lưu UIImage với giới hạn có thể cấu hình (mặc định — cho đến khi cảnh báo bộ nhớ hệ thống). Bộ nhớ đệm ổ cứng lưu dữ liệu trong thư mục Library/Caches với thời gian lưu trữ có thể cấu hình (mặc định 7 ngày).

SDWebImageDownloader

SDWebImageDownloader là một trình khách HTTP dựa trên NSURLSession với hỗ trợ tiêu đề, thời gian chờ và thử lại. Trình tải xuống loại bỏ trùng lặp các yêu cầu giống nhau thành một lời gọi mạng duy nhất và phân phối kết quả cho tất cả người đăng ký.

Kiến trúc bộ nhớ đệm của SDWebImage

SDWebImage triển khai bộ nhớ đệm hai cấp với thứ tự kiểm tra xác định: đầu tiên là bộ nhớ, sau đó là ổ cứng. Khóa bộ nhớ đệm là URL tuyệt đối của ảnh không có tham số truy vấn hoặc băm MD5 của nó.

Khi nhận được cảnh báo bộ nhớ, iOS thông báo cho SDImageCache qua UIApplicationDidReceiveMemoryWarningNotification, sau đó bộ nhớ đệm được xóa hoàn toàn. Bộ nhớ đệm ổ cứng được xóa theo TTL hoặc khi vượt quá giới hạn, sắp xếp các tệp theo ngày truy cập cuối cùng.

Để quản lý bộ nhớ đệm thủ công, các phương thức sau đây có sẵn: clearMemory, clearDisk, calculateSize. Bộ nhớ đệm có thể bị vô hiệu hóa cho các yêu cầu cụ thể bằng cách sử dụng các tùy chọn SDWebImageCacheMemoryOnly hoặc SDWebImageAvoidAutoSetImage.

Ví dụ sử dụng SDWebImage trong Swift

SDWebImage cung cấp một số giao diện để tải ảnh: từ phân loại UIImageView đơn giản đến trình quản lý nâng cao với xử lý tùy chỉnh.

Tải cơ bản trong UIImageView

sd_setImage là phương thức chính để tải ảnh vào UIImageView. Nó chấp nhận URL, placeholder và các tham số tùy chọn thông qua Options và Context. Tất cả Completion Handler được thực thi trên luồng chính.

let imageView = UIImageView()
imageView.sd_setImage(
    with: URL(string: "https://example.com/photo.jpg"),
    placeholderImage: UIImage(named: "placeholder"),
    options: [.progressiveLoad, .retryFailed],
    context: [.imageThumbnailPixelSize : CGSize(width: 300, height: 300)]
)

Phương thức trả về SDWebImageToken (một thao tác) có thể bị hủy nếu cần. Bên trong, sd_setImage gọi SDWebImageManager.load, chuyển ImageView làm Target để tự động đặt ảnh.

Tải với biến đổi tùy chỉnh

SDWebImage hỗ trợ Transformer — một giao thức với một phương thức duy nhất transformedImage. Các biến đổi tích hợp bao gồm: hình tròn, góc bo tròn, lớp phủ bộ lọc màu và thay đổi kích thước. Các biến đổi có thể được kết hợp bằng toán tử &&.

let transformer = SDImageResizingTransformer(
    size: CGSize(width: 200, height: 200),
    scaleMode: .aspectFill
)
let roundedTransformer = SDImageRoundCornerTransformer(
    radius: 16,
    corners: .allCorners,
    borderWidth: 0
)
imageView.sd_setImage(
    with: url,
    placeholderImage: placeholder,
    context: [.imageTransformer : transformer && roundedTransformer]
)

Sử dụng với SwiftUI

Thư viện cung cấp WebImage — một thành phần View cho SwiftUI với hỗ trợ placeholder, chỉ báo tiến trình và xử lý lỗi. Thành phần tự động đăng ký vào vòng đời View và hủy tải khi nó biến mất.

struct CachedImageView: View {
    let url: URL

    var body: some View {
        WebImage(url: url) { phase in
            if let image = phase.image {
                image.resizable()
            } else if phase.error {
                Color.red
            } else {
                ProgressView()
            }
        }
    }
}

Biến đổi ảnh trong SDWebImage

SDWebImage cung cấp một hệ thống biến đổi linh hoạt thông qua giao thức SDImageTransformer. Các biến đổi được áp dụng sau khi giải mã nhưng trước khi lưu vào bộ nhớ đệm — kết quả biến đổi được lưu trên đĩa dưới một khóa mới, ngăn chặn việc áp dụng lại trong các yêu cầu sau đó.

Các biến đổi tích hợp bao gồm: SDImageResizingTransformer (thay đổi kích thước với mode), SDImageRoundCornerTransformer (góc bo tròn với viền tùy chọn), SDImageFlipTransformer (lật ảnh) và SDImageFilterTransformer (bộ lọc CoreImage). Việc kết hợp được thực hiện thông qua toán tử &&, tạo ra một chuỗi xử lý.

Đối với các biến đổi tùy chỉnh, chỉ cần triển khai giao thức SDImageTransformer với phương thức transformedImageWithImage:forKey:. Khóa biến đổi được tự động thêm vào khóa bộ nhớ đệm, ngăn chặn xung đột giữa các phiên bản khác nhau của cùng một ảnh.

So sánh SDWebImage và Kingfisher

Trên nền tảng iOS, các đối thủ cạnh tranh chính của SDWebImage là Kingfisher (Swift thuần túy) và Nuke. Lựa chọn giữa SDWebImage và Kingfisher thường được xác định bởi ngôn ngữ dự án và chức năng yêu cầu.

SDWebImage vẫn là lựa chọn ưu tiên cho các dự án Objective-C hoặc dự án kết hợp. Kingfisher phù hợp hơn cho các dự án Swift thuần túy nhờ an toàn kiểu và cú pháp Swift bản địa. Cả hai thư viện đều có kiến trúc bộ nhớ đệm và hiệu suất tương tự.

Thiết lập SDWebImage trong dự án iOS

SDWebImage có thể được tích hợp qua Swift Package Manager, CocoaPods hoặc Carthage. Thư viện được chia thành các mô-đun: lõi (SDWebImage), Coder (định dạng bổ sung) và MapKit (cho MKAnnotationView).

// Trình quản lý gói Swift (Package.swift)
dependencies: [
    .package(
        url: "https://github.com/SDWebImage/SDWebImage.git",
        from: "5.19.0"
    )
]

// CocoaPods (Podfile)
pod 'SDWebImage', '~> 5.19.0'
// Plugin cho WebP và SVG:
pod 'SDWebImageWebPCoder'
pod 'SDWebImageSVGCoder'

Sau khi cài đặt, thư viện đã sẵn sàng sử dụng mà không cần cấu hình thêm. Để tùy chỉnh bộ nhớ đệm, hãy tạo một thể hiện của SDImageCache với không gian tên duy nhất và chuyển nó đến SDWebImageManager trong quá trình khởi tạo. Cấu hình toàn cục được thực hiện thông qua SDWebImageManager.shared.

// Tùy chỉnh bộ nhớ đệm
let config = SDImageCacheConfig()
config.maxDiskAge = 14 * 86400 // 14 ngày thay vì 7
config.maxDiskSize = 500 * 1024 * 1024 // 500 MB
config.shouldCacheImagesInMemory = .true

let cache = SDImageCache(
    namespace: "custom",
    diskCacheDirectory: FileManager.default.urls(
        for: .cachesDirectory,
        in: .userDomainMask
    ).first?.appendingPathComponent("custom_cache"),
    config: config
)
SDWebImageManager.sharedImageCache = cache