Hoạt hình css có ảnh hưởng đến hiệu suất không?

Trong vài năm qua, chúng ta đã thấy nền tảng web phát triển nhanh chóng. Nhiều API JavaScript, thuộc tính CSS và các phần tử gốc đã được thêm vào. Các kỹ sư frontend hiện có thể xây dựng các ứng dụng web cực kỳ giống với các ứng dụng gốc truyền thống

Sự thay đổi mô hình này, từ viết tài liệu sang xây dựng ứng dụng, có sự gia tăng rõ ràng về độ phức tạp. kết xuất nhiều nguồn dữ liệu, xử lý các thay đổi trạng thái, hiển thị các hành động khác nhau, v.v. Nếu chúng ta không cẩn thận, các giao diện có thể dễ dàng trở thành một mớ hỗn độn với trải nghiệm người dùng kém

Ảnh động là một công cụ tuyệt vời để khắc phục điều này. Sử dụng chúng đúng cách có thể cải thiện trải nghiệm và thêm niềm vui, hướng dẫn người dùng trong toàn bộ quy trình ứng dụng để họ có thể tập trung vào những gì thực sự quan trọng

May mắn thay, web cũng đã phát triển các API hoạt hình của nó. Từ việc thêm các thuộc tính CSS có thể hoạt ảnh mới, đến các API hoàn toàn mới có thể giúp xây dựng các tương tác phức tạp với ít mã, WAAPI, tương tác liên kết cuộn, chuyển tiếp phần tử được chia sẻ, mặt nạ, đường dẫn clip, đường dẫn bù đắp và lưới – có một loạt các công cụ mới

Mặc dù có những phương pháp tạo hoạt ảnh thuận tiện hơn nhưng chúng ta vẫn cần phải thực tế và hiểu rằng rất khó để xây dựng các hoạt ảnh phức tạp. Rất dễ dẫn đến tình trạng hoạt ảnh chậm hoặc giật cục, làm hỏng trải nghiệm nhiều hơn. Đối với các kỹ sư giao diện người dùng, điều rất quan trọng là phải hiểu cách trình duyệt hiển thị mã được chuyển đến nó

Kết xuất đường ống

Một hình ảnh động chỉ đơn giản là một danh sách nhiều hình ảnh được hiển thị rất nhanh. Trong trường hợp này, hình ảnh là trạng thái trực quan của trang web tại một thời điểm nhất định. "Rất nhanh" thường có nghĩa là 60 lần mỗi giây, nhưng có thể còn nhanh hơn nữa khi màn hình có tốc độ khung hình cao ngày càng trở nên phổ biến

Kết xuất trình duyệt là một quá trình phức tạp bao gồm bốn giai đoạn khác nhau. Trong quy trình này, trình duyệt lấy HTML và CSS và biến chúng thành một hình ảnh mà sau này được hiển thị trên màn hình. Mẹo để tạo hoạt ảnh mượt mà dựa vào việc hiểu quy trình này và điều gì xảy ra trong mỗi bước

Trong giai đoạn đầu tiên, các phần tử HTML được so khớp với CSS áp dụng cho chúng. Đây được gọi là giai đoạn phong cách. Trình duyệt phải khớp từng phần tử DOM với các quy tắc áp dụng cho nó. HTML và CSS càng phức tạp thì quá trình này càng chậm

Sau đó, trình duyệt diễn giải bố cục – hình học tổng thể. Ở đây, đối với mọi phần tử HTML, nó chỉ áp dụng các thuộc tính CSS ảnh hưởng đến vị trí và kích thước. Các thuộc tính như height, width, border-width, margin, padding và font ảnh hưởng đến bước này

Sau khi đã biết vị trí và kích thước của từng phần tử, trình duyệt có thể áp dụng phần còn lại của kiểu trực quan trong giai đoạn sơn bằng cách sử dụng các thuộc tính như color, box-hadow, background và border-color

Cuối cùng, nó xây dựng hình ảnh hoàn chỉnh, tổng hợp tất cả các lớp khác nhau trong pha tổng hợp. Chỉ một số tài sản như width0, width1 và width2 hoặc width3 ảnh hưởng đến giai đoạn này

Kết xuất là một quá trình phức tạp. Thông thường, một trang web có hàng trăm, thậm chí hàng nghìn nút DOM và cùng một lượng quy tắc CSS. Trang web càng lớn thì quá trình này sẽ càng chậm và đó là chưa tính đến JavaScript. Khi chúng tôi tạo hoạt ảnh cho một thứ gì đó, chúng tôi đặt mục tiêu thực hiện quy trình này ít nhất 60 lần mỗi giây. Điều đó khiến chúng tôi có ít hơn 16 mili giây để hiển thị từng khung hình

Bây giờ bạn đã hiểu cách trình duyệt hiển thị trang web, có một bí mật lớn liên quan đến hiệu suất trong mọi loại phần mềm. “không làm gì nhanh hơn là làm một cái gì đó. ” Những người viết mã trình duyệt biết bí mật này và tối ưu hóa quá trình kết xuất bằng cách sử dụng nó. Nếu hoạt ảnh chỉ phụ thuộc vào các thuộc tính được sử dụng trong giai đoạn tô màu, nó sẽ bỏ qua bố cục một. Nếu nó chỉ phụ thuộc vào các thuộc tính tổng hợp, nó sẽ bỏ qua cả giai đoạn bố cục và sơn, giúp tiết kiệm mili giây quý giá và sức mạnh tính toán

Đo đường ống kết xuất

Nhiều lần, chúng tôi, các nhà phát triển giao diện người dùng có thể cảm nhận được giai đoạn nào sẽ kích hoạt thuộc tính CSS, nhưng vẫn có một số điều không rõ ràng. Hơn nữa, một nỗ lực đang được thực hiện để làm cho các trình duyệt thông minh hơn và tối ưu hóa một số thuộc tính để chúng chỉ kích hoạt giai đoạn tổng hợp

Rất may, devtools của trình duyệt giúp dễ dàng kiểm tra giai đoạn nào ảnh hưởng đến thuộc tính nào. Bằng cách ghi lại mục nhập hiệu suất và phát hoạt ảnh, các giai đoạn có thể được nhìn thấy một lần trên mỗi khung hình

Trên trang web bên dưới, có ba hoạt ảnh trông giống hệt nhau, nhưng mỗi hoạt ảnh sử dụng các thuộc tính CSS khác nhau

Nếu chúng ta thay đổi một thuộc tính chẳng hạn như width hoặc height và kiểm tra biểu đồ ngọn lửa hiệu suất, chúng ta có thể thấy bốn giai đoạn xảy ra. phong cách, bố cục, sơn và tổng hợp

Nếu chúng tôi chuyển đổi một thuộc tính như width6, chúng tôi sẽ không thấy giai đoạn bố cục. Trình duyệt biết thuộc tính này không thể ảnh hưởng đến hình học, vì vậy nó bỏ qua giai đoạn bố cục và chỉ kích hoạt giai đoạn tô màu và tổng hợp

Cuối cùng, nếu chúng tôi chuyển đổi một thuộc tính như width1, chúng tôi sẽ không thấy bố cục hoặc giai đoạn sơn. Trình duyệt biết rằng phần tử hoạt hình sẽ chỉ thay đổi vị trí của nó, vì vậy nó tránh tính toán các kiểu hình học và kiểu vẽ của nó, sử dụng lại những phần tử đó từ khung cuối cùng và di chuyển chúng lên màn hình

Tuy nhiên, nếu bạn nhìn kỹ vào khung đầu tiên và khung cuối cùng, bạn sẽ thấy rằng có hai sự kiện sơn. Tại sao điều đó lại xảy ra? . Hoạt ảnh một thuộc tính width1 là một trong những lý do để tạo một lớp mới

lớp

Các trình duyệt có thể chia DOM thành các lớp khác nhau – các khu vực hoặc hình ảnh khác nhau sau đó được ghép lại với nhau trong giai đoạn tổng hợp. Chúng đủ thông minh để chỉ sơn lại một lớp khi cần thiết và thậm chí có thể sơn lại một vùng của một lớp nhất định, được gọi là sơn lại gia tăng. Chúng ta có thể xem đây là các mức bộ đệm khác nhau

Để xem chính xác những gì đang được sơn lại, tùy chọn nhấp nháy Paint có thể được bật trong trình duyệt Chromium. Tùy chọn này bị ẩn trong bảng Rendering devtools. (Bạn không nhìn thấy? Hãy kiểm tra để đảm bảo bảng điều khiển được bật trong menu Công cụ khác. )

Tuy nhiên, có quá nhiều lớp là không tốt, vì nó đồng nghĩa với việc tiêu tốn nhiều bộ nhớ hơn. Mặc dù đây thường không phải là sự cố ở máy tính hoặc điện thoại thông minh hàng đầu, nhưng nó có xu hướng gây ra sự cố cho các thiết bị cấp thấp hơn. Ngoài ra, thông tin pixel của các lớp này phải được gửi tới GPU. Các lớp rất tốt để tránh sơn lại một số khu vực nhất định, nhưng không nên lạm dụng chúng

Chỉ có một số lý do để tạo một lớp mới

• Thuộc tính CSS 3D, chẳng hạn như width9, border-width0, border-width1, border-width2
• Ảnh động của thuộc tính width1 và width0
• Các yếu tố tăng tốc như border-width5 hoặc border-width6
• Anh chị em có width2 thấp hơn, có lớp riêng
• Các phần tử có border-width8
• Các gợi ý như tài sản border-width9
• Các phần tử có thuộc tính margin0

Như bạn có thể thấy, một trong những lý do để tạo một lớp mới là để bắt đầu hoạt ảnh của các thuộc tính tổng hợp. Quá trình này được gọi là quảng bá lớp và có hai sự kiện sơn được liên kết, đó là lý do tại sao một sự kiện sơn xảy ra trong khung đầu tiên và khung cuối cùng của ví dụ đã nói ở trên

Trình duyệt Chromium giúp dễ dàng xem các lớp hiện tại từ devtools. Chỉ cần điều hướng đến bảng điều khiển Lớp và sử dụng trình kiểm tra 3D thời gian thực. Bảng điều khiển này có thể bị ẩn theo mặc định nhưng có thể được bật từ phần Công cụ khác. Bảng điều khiển dành cho nhà phát triển này có thông tin hữu ích, chẳng hạn như lý do mỗi lớp được tạo hoặc số lần lớp được sơn lại

Lớp càng phức tạp thì trình duyệt càng mất nhiều thời gian để vẽ nó. Số lượng nút DOM, bộ chọn CSS phức tạp và các thuộc tính đắt tiền như bộ lọc hoặc bóng ảnh hưởng đến tổng thời gian kết xuất. Đó là một lý do khác tại sao điều quan trọng là cố gắng giữ cho mã càng đơn giản càng tốt

Tham gia các lớp là một quá trình xảy ra trên GPU. Để làm như vậy, CPU chuẩn bị một hình ảnh của từng lớp và gửi chúng đến GPU để nó có thể tổng hợp chúng, vì nó đặc biệt tốt với loại tác vụ này. Hoạt ảnh xảy ra trong giai đoạn này được cho là có khả năng tăng tốc phần cứng, nghe giống như. thứ gì đó. Nhưng nó có nghĩa là gì, chính xác?

Tăng tốc phần cứng

Tăng tốc phần cứng chỉ là một thuật ngữ để nói rằng một quá trình chạy trên GPU. Hoạt ảnh width1 và width0, hoặc đôi khi thậm chí là width3, xảy ra trong giai đoạn tổng hợp. Do đó, trình duyệt có thể sử dụng lại thông tin bố cục và sơn. Nói cách khác, CPU không phải gửi hình ảnh mới đến GPU. Thay vào đó, GPU lưu và sử dụng lại các hình ảnh trước đó, sắp xếp chúng với độ mờ, vị trí và hiệu ứng khác nhau

Tại sao nó lại quan trọng? . Chúng tôi đã quen với các hình ảnh được nén cao như JPG khi đề cập đến hình ảnh, nhưng tính năng nén đó không tồn tại trong trường hợp này. Một hình ảnh có một byte thông tin cho mỗi kênh màu, đỏ, lục, lam và alpha; . Chỉ để hiển thị hình ảnh 100px x 100px, cần có 40KB bộ nhớ. Các lớp thường chồng lên nhau, vì vậy nếu có các lớp khác nhau trong cùng một khu vực, dung lượng sẽ lên tới 80KB

Đúng, chúng ta đang nói về một khu vực rất nhỏ. Đối với lớp có độ phân giải FullHD cũ tốt, nó sẽ là 1920px x 1080px * 4bytes/px = 7. 9 MB dữ liệu. Mặt khác, màn hình 4K sẽ cần 34MB bộ nhớ

Bây giờ, hãy tưởng tượng một kịch bản rất tồi tệ khi hai lớp 4K phải được tạo thành một hoạt ảnh mờ dần kéo dài một giây. CPU sẽ cần gửi gần 4GB thông tin tới GPU trong thời gian đó. Đó không phải là một lượng lớn thông tin sao?

Chắc chắn, một máy tính tốt có thể xử lý nó, nhưng theo số liệu thống kê mới nhất, khoảng 60% người dùng điều hướng bằng thiết bị Android hoặc iOS. Các thiết bị này đã trở nên mạnh mẽ hơn và không gặp sự cố như cách đây vài năm – nhưng chúng vẫn dễ bị sự cố hơn khi xử lý tất cả dữ liệu này. Ngoài ra, chúng thường có hệ thống làm mát thụ động, thường có thể làm cho bộ điều tiết CPU/GPU giảm nhiệt

kết luận

Hầu hết các hướng dẫn về hoạt ảnh trên web sẽ chỉ cho bạn biết chỉ sử dụng width1 và width0 trong hoạt ảnh, vì chúng là các thuộc tính chỉ ảnh hưởng đến pha tổng hợp và được tăng tốc phần cứng

Bằng cách chỉ sử dụng các thuộc tính này, bạn sẽ ở trong vùng an toàn và hoạt ảnh của bạn chắc chắn sẽ hoạt động tốt trên mọi loại thiết bị. Nhưng đôi khi, các thuộc tính khác không hoạt động tốt sẽ phải được sử dụng. không có sợ hãi. Nếu bạn hiểu cách kết xuất hoạt động, bạn có thể tối ưu hóa các loại hoạt ảnh này và giảm chi phí

Có rất nhiều thủ thuật ngoài kia. sử dụng một số thuộc tính CSS nhất định, chẳng hạn như thay thế margin6 bằng margin7 hoặc sử dụng width1 thay vì  margin9/ padding0/ padding1 /padding2, tận dụng hoạt ảnh CSS bằng các kỹ thuật như FLIP hoặc trình chiếu bố cục

Mỗi trang web là duy nhất và những gì hiệu quả với người khác không nhất thiết phải hiệu quả với bạn. Đó là lý do tại sao điều quan trọng nhất trước khi giải quyết bất kỳ vấn đề nào là tìm hiểu gốc rễ của nó. Bây giờ, khi nói đến kết xuất trang web và cách nó ảnh hưởng đến hoạt ảnh, bạn có thể làm điều đó

Tài nguyên hoạt hình CSS có nặng không?

Hoạt hình CSS có tốt không?

Hoạt ảnh CSS có thể được tăng tốc phần cứng không?