Để đạt được tốc độ khung hình mượt mà, không cần sơn, bạn nên tránh các loại sơn, đặc biệt là trên thiết bị di động. Tuy nhiên, đôi khi màu vẽ lại bị cắt ra ở những địa điểm bất thường nhất. Bài viết này tìm hiểu lý do ảnh GIF động có thể gây ra hiện tượng tô màu không cần thiết, cũng như cách khắc phục cực kỳ đơn giản mà bạn có thể áp dụng.
Sắc thái đáng yêu
Như bạn có thể biết, các trình duyệt hiện đại có thể vẽ các nhóm phần tử DOM thành các "hình ảnh" riêng biệt, được gọi là các lớp. Đôi khi có một lớp cho toàn bộ trang, đôi khi có hàng trăm lớp hoặc trong những trường hợp hiếm gặp – hàng nghìn!
Khi các phần tử DOM được nhóm lại với nhau thành một lớp và một trong các phần tử thay đổi trực quan, chúng ta sẽ phải vẽ không chỉ phần tử được thay đổi, mà còn tất cả các phần tử khác trong lớp chồng lên phần tử được thay đổi. Vẽ một thứ lên nhau sẽ khiến các pixel bị ghi đè sẽ bị "bị mất" vĩnh viễn. Nếu muốn lấy lại các pixel ban đầu, bạn cần phải vẽ lại chúng.
Do đó, đôi khi, chúng ta muốn tách biệt một phần tử với các phần tử khác để khi được vẽ, chúng ta sẽ không cần vẽ lại những phần tử khác không thay đổi. Ví dụ: khi kết hợp một tiêu đề trang cố định với nội dung có thể cuộn, bạn sẽ phải vẽ lại tiêu đề đó mỗi khi nội dung cuộn, cũng như nội dung mới hiển thị. Bằng cách đặt tiêu đề trong một lớp riêng biệt, trình duyệt có thể tối ưu hoá tính năng cuộn. Khi bạn cuộn, trình duyệt có thể di chuyển các lớp xung quanh (có thể với sự trợ giúp của GPU) và tránh vẽ lại một trong hai lớp.
Mỗi lớp bổ sung sẽ làm tăng mức tiêu thụ bộ nhớ và tăng thêm chi phí hiệu suất, vì vậy, mục tiêu là nhóm trang thành ít lớp nhất có thể mà vẫn duy trì hiệu suất tốt.
Tất cả những điều này có liên quan gì đến GIF động?
Chà, hãy xem ảnh này:
Đây là cách thiết lập lớp tiềm năng cho một ứng dụng đơn giản. Có 4 lớp ở đây: 3 trong số đó (lớp từ 2 đến 4) là các thành phần giao diện; lớp sau là một trình tải, có thể là một ảnh GIF động. Trong quy trình thông thường, bạn hiển thị trình tải (lớp 1) trong khi tải ứng dụng, sau đó khi mọi thứ kết thúc, bạn sẽ hiển thị các lớp khác. Tuy nhiên, đây là chìa khoá: bạn cần ẩn ảnh GIF động.
Nhưng tại sao tôi cần phải ẩn thông tin đó?!
Đây là một câu hỏi hay. Trong một trường hợp hoàn hảo, trình duyệt sẽ chỉ kiểm tra khả năng hiển thị của ảnh GIF cho bạn và tránh tự động vẽ. Thật không may, việc kiểm tra xem GIF động có bị che khuất hoặc xuất hiện trên màn hình hay không thường sẽ tốn kém hơn so với việc chỉ vẽ để ảnh GIF động được vẽ.
Trong trường hợp tốt nhất, ảnh GIF nằm trong lớp riêng và trình duyệt chỉ phải vẽ và tải ảnh đó lên GPU. Nhưng trong trường hợp xấu nhất, tất cả các phần tử của bạn có thể được nhóm thành một lớp duy nhất và trình duyệt phải vẽ lại mọi phần tử. Sau khi hoàn tất, thiết bị vẫn cần phải tải mọi thứ lên GPU. Toàn bộ quá trình này đều diễn ra trên mọi khung ảnh GIF, mặc dù trên thực tế, người dùng thậm chí không thể nhìn thấy ảnh GIF đó!
Trên máy tính để bàn, bạn có thể không cần quan tâm đến loại hành vi vẽ tranh này nữa vì CPU và GPU mạnh hơn và có nhiều băng thông để truyền dữ liệu giữa hai chip. Tuy nhiên, trên thiết bị di động, việc vẽ tranh cực kỳ tốn kém nên bạn phải hết sức cẩn trọng.
Điều này ảnh hưởng đến những trình duyệt nào?
Như thường lệ, hành vi khác nhau giữa các trình duyệt. Hiện nay, Chrome, Safari và Opera đều tô màu lại, ngay cả khi ảnh GIF bị che khuất. Trong khi đó, Firefox sẽ phát hiện ra rằng ảnh GIF bị che khuất và không cần phải vẽ lại. Internet Explorer vẫn là một cái gì đó của một chiếc hộp đen, và ngay cả trong IE11 - vì các công cụ F12 vẫn đang được phát triển - không có dấu hiệu nào cho biết liệu có quá trình sơn lại nào đang diễn ra hay không.
Làm cách nào để thông báo nếu tôi gặp vấn đề này?
Cách dễ nhất là sử dụng "Hiển thị hình chữ nhật vẽ" trong Công cụ của Chrome cho nhà phát triển. Tải Công cụ cho nhà phát triển rồi nhấn vào bánh răng ở góc dưới bên phải (
) rồi chọn Hiển thị hình chữ nhật vẽ trong mục Hiển thị.
Bây giờ, bạn chỉ cần tìm một hình chữ nhật màu đỏ như sau:
Hộp nhỏ màu đỏ trên màn hình cho thấy Chrome đang vẽ lại nội dung nào đó. Bạn biết rằng có một ảnh GIF trình tải bị ẩn sau các phần tử khác, vì vậy khi nhìn thấy một hộp màu đỏ như thế này, bạn cần ẩn các phần tử hiển thị và kiểm tra xem bạn có để ảnh GIF động chuyển động hay không. Nếu có thì bạn cần phải đặt một số CSS hoặc JavaScript vào đúng vị trí để áp dụng display: none hoặc visibility: hidden cho CSS hoặc phần tử mẹ đó. Tất nhiên nếu đó chỉ là hình nền thì bạn nhớ xoá nó đi.
Nếu bạn muốn xem ví dụ về hành vi này trên một trang web đang hoạt động, hãy truy cập Allegro, nơi hình ảnh của mỗi sản phẩm đều có ảnh GIF trình tải được che khuất thay vì ẩn rõ ràng.
Kết luận
Đạt được 60 khung hình/giây có nghĩa là chỉ thực hiện những gì cần thiết để hiển thị trang và không thực hiện thao tác nào khác. Việc loại bỏ những lớp sơn thừa là một bước quan trọng để đạt được mục tiêu này. Ảnh GIF động đang chạy có thể kích hoạt số lần hiển thị không cần thiết. Bạn có thể dễ dàng tìm thấy và gỡ lỗi bằng công cụ Hiển thị hình chữ nhật vẽ của Công cụ cho nhà phát triển.
Giờ bạn đã không để GIF trình tải mèo con hoạt hình đó chạy mãi mãi, đúng không?