Tối ưu hóa hoạt ảnh css

Question

Trong CSS, thuộc tính

<body>
  <div class="box">div>
body>

0 được sử dụng để thêm bóng cho các phần tử web và những bóng này có thể được làm động. Tuy nhiên, hiệu ứng đổ bóng có thể ảnh hưởng đến hiệu suất của trình duyệt, gây giật lag khi kết xuất trang

Nội dung chính Show

Tại sao điều này quan trọng
Ba sự kiện hoạt hình bóng hộp CSS chính
Kiểm tra hiệu suất
Cách duy trì hiệu suất tối ưu
Độ mờ hoạt ảnh
bóng nhiều lớp
Hoạt hình một phần tử giả
Sử dụng thuộc tính
6
Một số mẹo hữu ích
Phần kết luận
Chia sẻ bài viết này
Hoạt hình CSS có ảnh hưởng đến hiệu suất không?
Tài nguyên hoạt hình CSS có nặng không?
Làm cách nào để đặt thời lượng hoạt ảnh trong CSS?

Hướng dẫn này dành cho các nhà phát triển giao diện người dùng có kiến thức làm việc về HTML và hoạt hình CSS

Tại sao điều này quan trọng

Một trang web phải có thời gian tải rất ngắn, lý tưởng là dưới năm giây. Nghiên cứu chỉ ra rằng tải trang nhanh giúp tăng tỷ lệ chuyển đổi rất nhiều. Nghiên cứu sâu hơn chỉ ra rằng 70% người dùng cho biết tốc độ của trang web ảnh hưởng đến mức độ sẵn sàng mua hàng của họ từ một cửa hàng trực tuyến. Về cơ bản, các trang web nhanh đồng nghĩa với việc người dùng hài lòng

Trước khi chúng ta đi xa hơn, đây là bản trình diễn về cách hoạt ảnh của

<body>
  <div class="box">div>
body>

0 có thể hoạt động trên một trang web. Bạn có thể cuộn qua và tương tác với các phần tử web

Xem Bút
Các phần tử web có hoạt ảnh đổ bóng của SitePoint (@SitePoint)
trên CodePen.

Ba sự kiện hoạt hình bóng hộp CSS chính

Do những gì xảy ra đằng sau hậu trường, hoạt hình bóng hộp CSS có thể tốn nhiều tài nguyên. Có ba quy trình hoặc sự kiện chính được kích hoạt trong hoạt ảnh bóng hộp (hoặc bất kỳ hình thức hoạt ảnh nào đối với vấn đề đó). Những sự kiện này là vẽ tranh, bố cục và tổng hợp

Bức vẽ. Trong hội họa, trình duyệt sẽ tô màu cho các pixel và
```
<body>
  <div class="box">div>
body>
```
0 là một trong những thuộc tính CSS kích hoạt sự kiện này. Về cơ bản, nó tạo ra một bóng mới ở mọi khung hình của hoạt ảnh. Theo Mozilla, hoạt ảnh CSS lý tưởng nên chạy ở tốc độ 60 khung hình/giây
Cách trình bày. Một số hoạt ảnh thay đổi cấu trúc của trang, điều này có thể dẫn đến nhiều tính toán lại về kiểu dáng. Một ví dụ điển hình sẽ là một thanh bên đẩy các phần tử khác ra khỏi đường đi khi mở rộng. Các thuộc tính CSS gây ra điều này bao gồm
```
<body>
  <div class="box">div>
body>
```
2,
```
<body>
  <div class="box">div>
body>
```
3,
```
<body>
  <div class="box">div>
body>
```
4
Nói một cách đơn giản, nếu thuộc tính hoạt ảnh ảnh hưởng đến các thành phần khác, nó sẽ thay đổi bố cục của trang, gây ra sự tính toán lại — sử dụng nhiều tài nguyên hệ thống
tổng hợp. Khi tổng hợp, chỉ các phần của trang thay đổi. Các thuộc tính CSS như
```
<body>
  <div class="box">div>
body>
```
5 và
```
<body>
  <div class="box">div>
body>
```
6 chỉ ảnh hưởng đến phần tử mà chúng được áp dụng. Điều này có nghĩa là tính toán lại kiểu dáng ít hơn và hình ảnh động mượt mà hơn. Tổng hợp là quá trình nhiệm vụ ít nhất trong cả ba

Với công cụ kiểm tra của trình duyệt, bạn có thể quan sát quá trình này trong thời gian thực. Đầu tiên, hãy mở công cụ kiểm tra (Chrome được minh họa bên dưới) và nhấp vào ba dấu chấm ở góc trên cùng bên phải của tab. Kiểm tra Công cụ khác và chọn Kết xuất

Đối với ví dụ này, Paint nhấp nháy được chọn. Mỗi khi có sự kiện vẽ màn hình sẽ nháy xanh

thanh điều hướng
Các thẻ văn bản
Các liên kết điều hướng

Bạn sẽ thấy rằng mọi phần tử có bóng sẽ nhấp nháy màu xanh lục khi bạn di chuột qua phần tử đó hoặc khi bạn làm mới trang. Bạn cũng có thể làm thí nghiệm tương tự với bố cục. chỉ cần bỏ chọn Paint flashing và chọn Layout Shift Regions

Xin lưu ý rằng nhấp nháy sơn có thể không hoạt động trong các bản trình diễn CodePen, vì vậy bạn sẽ muốn thử tính năng này với bản xem trước trực tiếp từ trình soạn thảo văn bản. Video dưới đây cho thấy những gì bạn nên xem

Mục tiêu là giảm thiểu các thay đổi về cách vẽ và bố cục vì chúng sử dụng nhiều tài nguyên hệ thống hơn

Kiểm tra hiệu suất

Là nhà phát triển, bạn có thể không gặp bất kỳ sự cố nào khi chạy hoạt ảnh đổ bóng vì bạn có máy tính nhanh. Nhưng bạn phải xem xét người dùng có PC chậm hơn và kết nối internet không đáng tin cậy. Chỉ vì nó trông đẹp trên máy tính của bạn không có nghĩa là nó giống nhau ở mọi nơi khác

Một

<body>
  <div class="box">div>
body>

0 có bốn giá trị và một màu. Bốn giá trị này lần lượt là vị trí nằm ngang của bóng (x-offset), vị trí thẳng đứng (y-offset), trải rộng và bán kính mờ. Hoạt hình đổ bóng điển hình sẽ liên quan đến sự thay đổi trong một hoặc nhiều giá trị này

box-shadow:     ;

Hãy tạo một hoạt ảnh

<body>
  <div class="box">div>
body>

0 đơn giản, bắt đầu với một số HTML

<body>
  <div class="box">div>
body>

Và đây là một số CSS cho bóng ban đầu và bóng cuối cùng

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

Đây là kết quả

Xem Bút
Bóng hộp hoạt hình của SitePoint (@SitePoint)
trên CodePen.

Đối với hoạt ảnh, chúng tôi đang thay đổi các giá trị của độ lệch y, làm mờ và trải rộng. Chúng tôi cũng sẽ tạo ra một bóng đổ cuối cùng trong suốt hơn

Bây giờ, hãy xem điều gì đang diễn ra đằng sau hậu trường khi chúng tôi chạy hoạt hình

<body>
  <div class="box">div>
body>

9 này. Trên trình duyệt của bạn, hãy mở các công cụ dành cho nhà phát triển bằng cách nhấp chuột phải và chọn Kiểm tra. Khi các công cụ được mở, hãy chuyển đến tab Hiệu suất. Bạn có thể ghi lại hoạt hình bóng tối;

Ảnh chụp màn hình bên dưới hiển thị những gì bạn sẽ tìm thấy từ devtools của Chrome

Khoảng thời gian hoạt hình của bóng, di chuột lên và xuống, được đánh dấu ở trên cùng và bảng phân tích các quy trình diễn ra được hiển thị ở dưới cùng. Sự cố cho thấy rằng viết mã mất 7 mili giây, hiển thị mất 55 mili giây và vẽ kéo dài 30 mili giây

Bây giờ, những con số đó có vẻ ổn, nhưng điều gì xảy ra khi CPU chậm hơn bốn lần?

Hình ảnh sau đây cho thấy điều gì sẽ xảy ra khi bạn chạy cùng một hoạt ảnh với CPU chậm hơn

Trong quy trình mới này, quá trình tải mất 6 mili giây. Viết kịch bản lên tới 52 mili giây, kết xuất đã tăng hơn gấp đôi lên 117 mili giây và vẽ hiện là 72 mili giây

Bạn cũng có thể tăng tốc độ mạng và làm cho CPU chậm hơn nữa. Hoạt ảnh đổ bóng sử dụng nhiều tài nguyên hệ thống và chúng tôi sẽ tìm cách loại bỏ một số tải

Điều quan trọng cần lưu ý là thuộc tính

<body>
  <div class="box">div>
body>

6 đóng một phần trong cách thức hoạt động của CPU. Thêm về điều này sau

Cách duy trì hiệu suất tối ưu

Nếu bạn phải tạo hiệu ứng bóng tối trên một trang web, bạn nên làm cho chúng hoạt động hiệu quả hơn. Trong phần này, bạn sẽ tìm hiểu nhiều cách khác nhau để điều chỉnh hoạt ảnh đổ bóng để giảm hiệu suất đạt được

Chúng tôi sẽ đề cập đến những điều sau đây

độ mờ hoạt ảnh
có nhiều lớp
```
<body>
  <div class="box">div>
body>
```
0
hoạt hình một yếu tố giả
sử dụng thuộc tính
```
<body>
  <div class="box">div>
body>
```
6

Độ mờ hoạt ảnh

Khi sử dụng màu

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

3, kênh alpha sẽ kiểm soát độ mờ. Chỉ thay đổi kênh alpha khi tạo hiệu ứng đổ bóng sẽ không gây khó khăn cho CPU bằng việc thay đổi giá trị chênh lệch và trải rộng của bóng đổ

<body>
  <div class="box">div>
body>

2

Trong hoạt ảnh đầu tiên, chỉ có độ mờ của bóng thay đổi, trong khi ở hoạt ảnh thứ hai, độ lệch y thay đổi từ

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

4 thành

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

5 và mức chênh lệch thay đổi từ

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

5 thành

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

7

Và đây là cách chúng hoạt động, với tốc độ chậm gấp 6 lần (để bạn có thể thấy rõ biểu đồ hiệu suất), bắt đầu với hoạt ảnh chỉ có độ mờ thay đổi

Mất khoảng hai giây để di chuột vào và tắt hộp. Bây giờ hãy so sánh điều này với hoạt hình bóng thứ hai

Một lần nữa, bật và tắt hai giây và có một sự gia tăng đáng kể về thời gian cho tất cả các sự kiện. Thời gian vẽ trước đây là 96 mili giây và hiện đã tăng gấp đôi lên 187 mili giây. Kết xuất, một phần của tổng hợp, cũng tăng từ 97 mili giây lên 178 mili giây

Vì vậy, chỉ thay đổi độ mờ của bóng sẽ tạo ra hoạt ảnh hiệu quả hơn

Đây là bản demo trực tiếp của hai hoạt ảnh này

Xem Bút
Độ mờ hoạt ảnh so với độ lệch hoạt ảnh theo SitePoint (@SitePoint)
trên CodePen.

bóng nhiều lớp

Nếu bạn quan sát bóng xung quanh một cái bàn hoặc nhấc một vật thể lên trên nó, bạn sẽ nhận thấy rằng vùng bóng tối nhất của nó gần vật thể nhất và nó ngày càng trở nên sáng hơn khi nó lan rộng ra bên ngoài

Tái tạo hiệu ứng này không dễ dàng với một

<body>
  <div class="box">div>
body>

0. Bóng nhiều lớp trông đẹp hơn nhiều. Chúng cũng tạo ra nhiều hoạt ảnh hiệu quả hơn, ngay cả khi có thêm lớp bóng

Hãy so sánh hiệu suất của một

<body>
  <div class="box">div>
body>

0 đơn và một bóng nhiều lớp

<body>
  <div class="box">div>
body>

7

Hoạt hình này có 148 mili giây hiển thị và 133 mili giây vẽ

Bây giờ chúng ta hãy tạo hiệu ứng đổ bóng với hai lớp

<body>
  <div class="box">div>
body>

0

<body>
  <div class="box">div>
body>

8

Sự khác biệt là rõ ràng. Bóng nhiều lớp không chỉ tạo ra hiệu ứng bóng đẹp hơn mà còn hoạt động tốt hơn một cách đáng ngạc nhiên khi hoạt hình. Kết xuất đã giảm từ 148 mili giây xuống 74 mili giây và vẽ cũng giảm từ 133 mili giây xuống 74 mili giây

Đây là bản demo trực tiếp của cả hai được so sánh

Xem Bút
Hoạt hình bóng đơn so với bóng nhiều lớp của SitePoint (@SitePoint)
trên CodePen.

Bây giờ, hãy thử một cái gì đó khác biệt, thêm bóng đổ thứ hai trong hoạt ảnh

<body>
  <div class="box">div>
body>

9

Việc thêm lớp bóng thứ hai trong hoạt ảnh không hiệu quả bằng việc có hai lớp ngay từ đầu, nhưng nó vẫn có 100 mili giây vẽ so với 133 mili giây với hoạt ảnh

<body>
  <div class="box">div>
body>

0 duy nhất, đây là một cải tiến

Cuối cùng, bạn quyết định bóng của mình trông như thế nào và bạn sẽ sử dụng phương pháp nào để tạo bóng

Hoạt hình một phần tử giả

Lần này, chúng ta sẽ sao chép hoạt hình đổ bóng mà không thay đổi thuộc tính

<body>
  <div class="box">div>
body>

0. Từ các bản demo trước, chúng ta có thể thấy rằng vẫn còn rất nhiều thao tác sơn lại diễn ra trong hoạt ảnh đổ bóng. Nếu bạn đang thay đổi các giá trị của

<body>
  <div class="box">div>
body>

0, bạn không thể tránh được quy trình này

Bạn sẽ thấy ở phần cuối của phần này, bức tranh sẽ gần như bị loại bỏ hoàn toàn. Nó sẽ liên quan đến nhiều dòng mã hơn, nhưng chúng tôi sẽ đạt được nhiều hoạt ảnh bóng tối hiệu quả hơn

Vì vậy, sau khi tạo kiểu dáng cơ bản cho hộp, hãy tạo một phần tử giả

<body>
  <div class="box">div>
body>

24 và đặt cho nó một phần tử

<body>
  <div class="box">div>
body>

0, đây sẽ là trạng thái cuối cùng của bóng đổ sau hoạt ảnh

<body>
  <div class="box">div>
body>

1

Bây giờ, tất cả những gì bạn phải làm là thay đổi

<body>
  <div class="box">div>
body>

5 của phần tử giả trên

<body>
  <div class="box">div>
body>

27

<body>
  <div class="box">div>
body>

4

Hãy xem xét nó cùng với hoạt hình đổ bóng thông thường

Xem Bút
Psuedo Shadow của SitePoint (@SitePoint)
trên CodePen.

Không có nhiều thứ để tiếp tục trực quan ở đây. Sự khác biệt thực sự là trong hiệu suất của họ. Kết quả cho hoạt hình

<body>
  <div class="box">div>
body>

0 thông thường được hiển thị bên dưới

Nó có 230ms thời gian kết xuất và 211ms để vẽ. Bây giờ hoạt hình bóng giả

Lần này, chúng tôi có 148 mili giây hiển thị và chỉ 51 mili giây vẽ. Có nhiều mã hơn, nhưng kết quả là rắc rối

Sử dụng thuộc tính
6

Điều này chủ yếu áp dụng cho phần tử chính, hộp, sẽ có bóng. Sử dụng thuộc tính

<body>
  <div class="box">div>
body>

6, thay vì thuộc tính thay đổi bố cục như

<body>
  <div class="box">div>
body>

3, sẽ giảm số lượng tính toán lại kiểu dáng

Thuộc tính này có thể được sử dụng với thuộc tính

<body>
  <div class="box">div>
body>

72 hoặc

<body>
  <div class="box">div>
body>

73 để mô phỏng việc nhấc một phần tử ra khỏi trang, tạo ảo giác về chiều sâu

Một số mẹo hữu ích

Người ta đã xác định rằng mọi hoạt ảnh liên quan đến thuộc tính

<body>
  <div class="box">div>
body>

0 sẽ ảnh hưởng đến hiệu suất. Vì vậy, nếu bạn phải có hoạt ảnh đổ bóng hộp CSS, đây là một số mẹo hữu ích cần ghi nhớ

Đầu tiên, giữ chúng ở mức tối thiểu. Đừng ném bóng lên mọi yếu tố vì lợi ích của nó. Thứ hai, chỉ làm động các yếu tố tương tác. Không cần phải làm động bất cứ thứ gì không có chức năng. Điều này sẽ làm giảm khối lượng công việc của CPU và cải thiện đáng kể hiệu suất

Phần kết luận

Bóng đổ có thể cải thiện trực quan trang web của bạn, nhưng chúng cũng ảnh hưởng đến hiệu suất — đặc biệt khi nói đến hoạt ảnh. Trong bài viết này, chúng tôi đã thử nghiệm nhiều phương pháp khác nhau để tạo hiệu ứng đổ bóng và so sánh hiệu suất của chúng. Tạo bóng động kích hoạt ba sự kiện — vẽ, thay đổi bố cục và tổng hợp — với sự kiện đầu tiên là nhiệm vụ nặng nề nhất

Giải pháp lý tưởng là hoàn toàn không tạo hiệu ứng cho bóng (vì chúng trông vẫn ổn. ). Nếu bạn thực sự muốn tạo hiệu ứng động cho thuộc tính

<body>
  <div class="box">div>
body>

0, chỉ thay đổi độ mờ thay vì thay đổi các giá trị offset sẽ làm giảm việc vẽ lại. Điều thú vị là bạn sẽ mất đi ảo giác về chiều sâu mà bóng tối mang lại. Một cách tiếp cận khác là tạo hiệu ứng động cho hai lớp

<body>
  <div class="box">div>
body>

0. Giải pháp này đẹp mắt và hiệu quả, ngay cả khi có thêm bóng

Tùy chọn cuối cùng là tạo hiệu ứng không phải cho

<body>
  <div class="box">div>
body>

0 mà là một phần tử giả cung cấp bóng đổ. Điều này làm giảm đáng kể số lần vẽ lại và toàn bộ công việc mà CPU thực hiện khi chạy hoạt ảnh. Bạn sẽ viết nhiều mã hơn, nhưng đó là cách tốt nhất để đảm bảo hiệu suất tốt

Nội dung liên quan

CSS như thế nào. Là,. ở đâu và. có Bộ chọn lớp giả hoạt động
10 cách ẩn phần tử trong CSS
Sách. Bậc thầy CSS
Rem trong CSS. Hiểu và Sử dụng Đơn vị rem

Chia sẻ bài viết này

Oscar Jite-Orimiono

Oscar là một nhà phát triển lối vào và nhà văn kỹ thuật tự học. Trọng tâm của anh ấy là tạo ra các trang web thân thiện với người dùng, phản hồi nhanh và có tính thẩm mỹ đẹp mắt, với HTML, CSS và JavaScript. Bạn có thể tìm hiểu thêm về anh ấy tại đây

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

Thực tế là, trong hầu hết các trường hợp, hiệu suất của hoạt ảnh dựa trên CSS gần giống như hoạt ảnh được tạo bằng JavaScript — ít nhất là trong Firefox. Một số thư viện hoạt hình dựa trên JavaScript, như GSAP và Velocity. JS, thậm chí còn tuyên bố rằng chúng có thể đạt được hiệu suất tốt hơn so với chuyển đổi/hoạt ảnh CSS gốc

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

Hoạt ảnh liên tục có thể tiêu tốn một lượng tài nguyên đáng kể , nhưng một số thuộc tính CSS tốn kém hơn để tạo hoạt ảnh so với các thuộc tính khác. Trình duyệt càng phải làm việc chăm chỉ để tạo hoạt ảnh cho một thuộc tính thì tốc độ khung hình sẽ càng chậm.

Làm cách nào để đặt thời lượng hoạt ảnh trong CSS?

Thuộc tính animation-duration xác định khoảng thời gian một hoạt ảnh sẽ hoàn thành một chu kỳ. . Định nghĩa và cách sử dụng

programming css

Tối ưu hóa hoạt ảnh css

Tại sao điều này quan trọng

Ba sự kiện hoạt hình bóng hộp CSS chính

Kiểm tra hiệu suất

Cách duy trì hiệu suất tối ưu

Độ mờ hoạt ảnh

bóng nhiều lớp

Hoạt hình một phần tử giả

Sử dụng thuộc tính 6

Một số mẹo hữu ích

Phần kết luận

Chia sẻ bài viết này

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

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

Làm cách nào để đặt thời lượng hoạt ảnh trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Sử dụng thuộc tính
6