Trong thế giới phát triển web, một số quy tắc về hiệu suất đã trở thành chân lý. Trong nhiều năm, các nhà phát triển được dạy rằng việc sử dụng transform và opacity trong CSS đảm bảo hiệu ứng mượt mà, trong khi các thuộc tính như top và left gây ra hiện tượng reflow tốn kém và giật lag. Nhưng điều gì sẽ xảy ra nếu sự thông thái phổ biến này không còn hoàn toàn đúng? Một bài viết kỹ thuật gần đây và cuộc thảo luận trong cộng đồng sau đó đã tiết lộ rằng các trình duyệt hiện đại thông minh hơn nhiều so với những gì chúng ta nghĩ, và thực tế của việc tối ưu hóa hiệu suất phức tạp hơn so với các quy tắc đơn giản thường thấy.
Lời hứa về Hiệu suất và Thực tế
Bài viết gốc đã trình bày một sự phân đôi rõ ràng: một phiên bản chưa tối ưu sử dụng các thuộc tính top và left được cho là kích hoạt reflow, so với một phiên bản đã tối ưu sử dụng transform để tận dụng khả năng tăng tốc GPU. Kết quả được hứa hẹn là rất ấn tượng - phiên bản chưa tối ưu chỉ đạt 21 FPS trong khi phiên bản đã tối ưu duy trì mức 60 FPS mượt mà. Tuy nhiên, khi các nhà phát triển trong phần bình luận thực sự phân tích hiệu suất của cả hai cách triển khai, họ phát hiện ra một điều đáng ngạc nhiên. Nhiều người bình luận báo cáo rằng không phiên bản nào liên tục bỏ sót khung hình trong các trình duyệt hiện đại, và sự khác biệt về hiệu suất ít đáng kể hơn nhiều so với tuyên bố. Một nhà phát triển nhận xét sau khi phân tích: Không trình duyệt nào thực hiện reflow, hoặc tất cả các reflow đều đủ nhanh để không có bất kỳ mẫu phân tích nào liên quan. Sự tiết lộ này thách thức tiền đề cơ bản rằng một số thuộc tính CSS tự động kích hoạt các thao tác trình duyệt tốn kém.
Tính toán ngân sách khung hình:
- Mục tiêu: 60 FPS (khung hình trên giây)
- Ngân sách mỗi khung hình: 1000ms ÷ 60 = 16.67 mili giây
- Màn hình cao cấp: 120 Hz = 8.33ms mỗi khung hình
Các Tối ưu hóa Trình duyệt Đã Thay đổi Cuộc chơi
Cuộc điều tra từ cộng đồng tiết lộ rằng các công cụ trình duyệt đã phát triển các chiến lược tối ưu hóa tinh vi thường vượt qua những gì nhà phát triển cho rằng sẽ là điểm nghẽn hiệu suất. Khi sử dụng position: absolute, trình duyệt thường có thể tối ưu hóa chuyển động một cách hiệu quả đến mức reflow đáng sợ hoặc là không xảy ra hoặc xảy ra quá nhanh nên không đáng kể. Như một người bình luận chỉ ra: Di chuyển một phần tử được định vị tuyệt đối không bao giờ gây ra reflow, theo thiết kế. Điều này giải thích tại sao nhiều nhà phát triển nhận thấy sự khác biệt hiệu suất tối thiểu giữa hai cách triển khai trong quá trình thử nghiệm của họ. Thực tế là các trình duyệt chứa đựng thứ mà một người bình luận mô tả là những đống lớn các tối ưu hóa heuristic bất chấp mọi lời giải thích đơn giản, khiến các quy tắc hiệu suất chung chung ngày càng trở nên không đáng tin cậy.
Các Bước Chính Trong Quy Trình Rendering Của Trình Duyệt:
- Scripting: Thực thi JavaScript trên luồng chính
- Style Calculation: Xác định các quy tắc CSS nào được áp dụng cho các phần tử
- Reflow/Layout: Tính toán hình học và vị trí của phần tử
- Repaint/Paint: Vẽ các pixel cho giao diện hiển thị
- Composite: Kết hợp các lớp để hiển thị cuối cùng lên màn hình
Thủ phạm Hiệu suất Thực sự Lộ diện
Khi các nhà phát triển đào sâu hơn vào mã demo thực tế, họ phát hiện ra rằng sự khác biệt hiệu suất đáng kể không chủ yếu do sự lựa chọn giữa transform so với top/left, mà bởi một yếu tố hoàn toàn khác: hiệu ứng box-shadow. Một nhà phát triển đã kiểm tra mã đang chạy thực tế lưu ý rằng việc loại bỏ bóng đổ (box shadow) làm cho hiệu suất của hai cách tiếp cận gần nhau hơn rất nhiều. Điều này nhấn mạnh rằng các hiệu ứng trực quan như bóng đổ, gradient và đường viền phức tạp thường có tác động lớn hơn đến hiệu suất so với các thuộc tính bố cục. Sự đồng thuận trong cộng đồng đã chuyển hướng sang việc hiểu rằng các thao tác vẽ (drawing visual effects) thay vì các thao tác bố cục (positioning elements) thường xuyên là điểm nghẽn hiệu suất thực sự trong các ứng dụng web hiện đại.
Đặc điểm hiệu suất của thuộc tính CSS:
- Kích hoạt layout:
top,left,width,height,margin - Chỉ paint:
background-color,box-shadow,border-color - Chỉ composite:
transform,opacity(thường được tăng tốc bởi GPU)
Tầm quan trọng của Phân tích Thực tế So với Quy tắc Kinh nghiệm
Cuộc thảo luận cuối cùng đã hội tụ vào một nhận thức quan trọng: bạn không thể dựa vào các quy tắc ngón tay cái về hiệu suất trong phát triển web hiện đại. Như một người bình luận đã nói ngắn gọn: Thực tế là các trình duyệt chứa những đống lớn các tối ưu hóa heuristic bất chấp mọi lời giải thích đơn giản. Bạn đơn giản là phải phân tích và thử nghiệm, mỗi lần, một cách riêng biệt. Tâm tư này được lặp lại bởi nhiều nhà phát triển nhận thấy kết quả phân tích của họ mâu thuẫn với các tuyên bố trong bài viết. Cộng đồng nhấn mạnh rằng tối ưu hóa hiệu suất phải dựa trên dữ liệu thay vì dựa trên giả định, với việc đo lường thực tế trong các trình duyệt mục tiêu là cách tiếp cận đáng tin cậy duy nhất.
Thực tế là các trình duyệt chứa những đống lớn các tối ưu hóa heuristic bất chấp mọi lời giải thích đơn giản. Bạn đơn giản là phải phân tích và thử nghiệm, mỗi lần, một cách riêng biệt.
Vượt ra ngoài Trình duyệt: Cân nhắc về Kiến trúc
Cuộc trò chuyện đã mở rộng ra ngoài việc tối ưu hóa CSS đến các câu hỏi kiến trúc rộng hơn về cách ứng dụng nên xử lý việc kết xuất. Một số nhà phát triển cho rằng vấn đề cơ bản nằm ở chính kiến trúc trình duyệt, gợi ý rằng tất cả mã 'người dùng' phải chạy trong một luồng chuyên dụng, hoàn toàn tách biệt khỏi vòng lặp kết xuất. Những người khác phản bác rằng việc tách rời hoàn toàn tạo ra các vấn đề riêng của nó, dẫn đến các nút bấm không làm gì khi nhấp, cuộn đến các khu vực chưa có nội dung, hoạt ảnh tải vô hạn và các hiện tượng tương tự khác. Cuộc tranh luận triết học này làm nổi bật sự căng thẳng đang diễn ra giữa hoạt ảnh mượt mà và tương tác người dùng đáp ứng nhanh mà các nhà phát triển phải cân bằng.
Sự phát triển của tối ưu hóa hiệu suất trình duyệt phản ánh một xu hướng lớn hơn trong công nghệ: khi các hệ thống trở nên phức tạp hơn, các quy tắc đơn giản bị phá vỡ. Những gì hoạt động như lời khuyên về hiệu suất năm năm trước có thể không còn áp dụng được ngày nay, và những gì hoạt động trong Chrome có thể hoạt động khác trong Firefox. Điểm mấu chốt từ cuộc thảo luận cộng đồng này là hiệu suất web không thể còn được đơn giản hóa thành các danh sách kiểm tra đơn giản về các thuộc tính CSS tốt và xấu. Thay vào đó, các nhà phát triển cần nắm lấy một cách tiếp cận tinh tế hơn, kết hợp giữa việc hiểu các quy trình cơ bản của trình duyệt với việc đo lường nghiêm ngặt, liên tục trong các trường hợp sử dụng cụ thể của họ. Kỹ năng có giá trị nhất trong phát triển web hiện đại có thể không phải là ghi nhớ các quy tắc hiệu suất, mà là biết cách phân tích và diễn giải kết quả một cách hiệu quả.
Tham khảo: Inside a 16.67 Millisecond Frame