Các trình duyệt hiện đại có thể tạo ảnh động cho 2 thuộc tính CSS với chi phí rẻ: transform và opacity.
Nếu bạn tạo ảnh động cho nội dung khác, có khả năng bạn sẽ không đạt được tốc độ 60 khung hình/giây (FPS) mượt mà.
Bài đăng này sẽ giải thích lý do trong trường hợp này.
Hiệu suất ảnh động và tốc độ khung hình
Mọi người đều chấp nhận tốc độ khung hình 60 khung hình/giây là mục tiêu khi tạo ảnh động cho bất kỳ nội dung nào trên web. Tốc độ khung hình này sẽ đảm bảo rằng ảnh động của bạn trông mượt mà. Trên web, khung là thời gian cần thiết để thực hiện tất cả công việc cần thiết để cập nhật và vẽ lại màn hình. Nếu mỗi khung hình không hoàn tất trong vòng 16,7 mili giây (1000 mili giây / 60 ≈ 16,7), thì người dùng sẽ cảm nhận được độ trễ.
Quy trình kết xuất
Để hiển thị nội dung nào đó trên một trang web, trình duyệt phải trải qua các bước tuần tự sau:
- Kiểu: Tính toán kiểu áp dụng cho các phần tử.
- Bố cục: Tạo hình học và vị trí cho từng phần tử.
- Paint: Điền các điểm ảnh cho mỗi phần tử vào các lớp.
- Tổng hợp: Vẽ các lớp lên màn hình.
Bốn bước này được gọi là quy trình kết xuất của trình duyệt.
Khi bạn tạo ảnh động cho nội dung nào đó trên một trang đã tải, các bước này phải diễn ra lại. Quá trình này bắt đầu từ bước phải thay đổi để cho phép ảnh động diễn ra.
Như đã đề cập trước đó, các bước này tuần tự. Ví dụ: nếu bạn tạo ảnh động cho nội dung nào đó thay đổi bố cục, thì các bước sơn và kết hợp cũng phải chạy lại. Do đó, việc tạo ảnh động cho một thứ gì đó thay đổi bố cục sẽ tốn kém hơn so với việc tạo ảnh động cho thứ gì đó chỉ thay đổi việc kết hợp.
Tạo ảnh động thuộc tính bố cục
Thay đổi bố cục bao gồm việc tính toán hình dạng (vị trí và kích thước) của tất cả các phần tử bị ảnh hưởng bởi thay đổi này.
Nếu thay đổi một phần tử, có thể bạn cần phải tính toán lại hình dạng của các phần tử khác.
Ví dụ: nếu bạn thay đổi chiều rộng của phần tử <html> thì bất kỳ phần tử con nào của phần tử đó cũng có thể bị ảnh hưởng.
Do cách các phần tử tràn màn hình và ảnh hưởng lẫn nhau, những thay đổi ở phần dưới cây đôi khi có thể dẫn đến việc tính toán bố cục ngược lên trên cùng.
Cây phần tử hiển thị càng lớn thì càng mất nhiều thời gian để tính toán bố cục.
Tạo ảnh động cho đặc tính của sơn
Sơn là quá trình xác định thứ tự vẽ các phần tử lên màn hình. Đây thường là tác vụ chạy lâu nhất trong quy trình.
Phần lớn việc vẽ tranh trong các trình duyệt hiện đại được thực hiện bằng trình tạo điểm ảnh phần mềm. Tuỳ thuộc vào cách các thành phần trong ứng dụng được nhóm thành các lớp, các thành phần khác ngoài thành phần đã thay đổi cũng có thể cần được vẽ.
Tạo ảnh động cho thuộc tính tổng hợp
Kết hợp là quá trình chia trang thành nhiều lớp, chuyển đổi thông tin về cách trang hiển thị thành pixel (tạo điểm ảnh) và tập hợp các lớp lại với nhau để tạo ra một trang (kết hợp).
Đây là lý do tại sao thuộc tính opacity được đưa vào danh sách nội dung rẻ để tạo ảnh động.
Miễn là thuộc tính này nằm trong lớp riêng, GPU có thể xử lý các thay đổi đối với thuộc tính trong bước kết hợp.
Trình duyệt dựa trên Chromium và WebKit tạo lớp mới cho bất kỳ phần tử nào có chuyển đổi CSS hoặc hoạt ảnh trên opacity.
Lớp là gì?
Bằng cách đặt những mục sẽ được tạo ảnh động hoặc chuyển đổi lên một lớp mới, trình duyệt chỉ cần vẽ lại các mục đó chứ không phải mọi thứ khác. Bạn có thể đã quen thuộc với khái niệm của Photoshop về lớp chứa nhiều phần tử có thể di chuyển cùng nhau. Các lớp kết xuất của trình duyệt tương tự như ý tưởng đó.
Mặc dù trình duyệt hoạt động rất tốt trong việc đưa ra quyết định về những phần tử cần có trên một lớp mới, nhưng nếu trình duyệt bỏ lỡ thì vẫn có nhiều cách để buộc tạo lớp. Bạn có thể tìm hiểu về điều đó trong Cách tạo ảnh động hiệu suất cao. Tuy nhiên, việc tạo lớp mới nên được thực hiện cẩn thận vì mỗi lớp đều sử dụng bộ nhớ. Trên các thiết bị có bộ nhớ hạn chế, việc tạo các lớp mới có thể gây ra nhiều vấn đề về hiệu suất hơn so với vấn đề mà bạn đang cố gắng giải quyết. Ngoài ra, bạn cần tải hoạ tiết của từng lớp lên GPU. Do đó, bạn có thể đạt đến giới hạn băng thông giữa CPU và GPU.
Hiệu suất của CSS so với JavaScript
Bạn có thể thắc mắc: sử dụng CSS hoặc JavaScript cho ảnh động có tốt hơn từ góc độ hiệu suất không?
Ảnh động dựa trên CSS và Ảnh động trên web (trong các trình duyệt hỗ trợ API) thường được xử lý trên một luồng được gọi là chuỗi trình tổng hợp. Luồng này khác với luồng chính của trình duyệt, nơi thực thi kiểu, bố cục, vẽ và JavaScript. Điều này có nghĩa là nếu trình duyệt đang chạy một số tác vụ tốn kém trên luồng chính, thì các ảnh động này có thể tiếp tục mà không bị gián đoạn.
Như đã giải thích trong bài viết này, các thay đổi khác đối với phép biến đổi và độ mờ cũng có thể được luồng trình tổng hợp xử lý trong nhiều trường hợp.
Nếu có bất kỳ ảnh động nào kích hoạt thao tác vẽ, bố cục hoặc cả hai, thì luồng chính sẽ cần phải hoạt động. Điều này đúng đối với cả ảnh động CSS và JavaScript và chi phí bố cục hoặc tô màu có thể sẽ làm giảm đáng kể bất kỳ công việc nào liên quan đến việc thực thi CSS hoặc JavaScript, dẫn đến việc hiển thị câu hỏi.