Bất kể hình ảnh động nào của bạn hiển thị ở tốc độ dưới 60 khung hình mỗi giây, thì khách truy cập của bạn sẽ nhận thấy và trải nghiệm người dùng sẽ bị ảnh hưởng
Chính vì lý do đó, bài viết này sẽ hướng dẫn bạn Animation tối ưu để vừa có hiệu ứng animation mượt mà hiệu quả tổng thể trang web lại tốt
Animation dark
1. Hoạt ảnh CSS so với Hoạt ảnh Javascript?
Hoạt ảnh được tạo bằng JavaScript đôi khi được gọi là hoạt ảnh bắt buộc và hoạt ảnh được tạo bằng CSS được gọi là hoạt ảnh khai báo
Hoạt hình CSS được xử lý chuỗi tổng hợp [luồng hỗn hợp] của trình duyệt chứ không phải là chuỗi chính
Do đó, CSS Animation sẽ không bị ảnh hưởng bởi các nhiệm vụ quan trọng hơn trong luồng chính
Tuy nhiên, hiệu ứng CSS Animation kích hoạt các điều kiện vẽ hoặc bố cục cũng sẽ yêu cầu công việc của luồng chính, điều này phủ nhận lợi ích của việc sử dụng CSS Animation
Mặt khác, Hoạt hình JavaScript luôn được thực thi bởi chủ đề chính
Tuy nhiên, JavaScript cung cấp cho bạn quyền kiểm soát lớn hơn đối với hoạt ảnh, do đó, bạn nên sử dụng nó trong một số trường hợp
- CSS là lựa chọn lý tưởng cho hiệu ứng hoạt hình đơn giản
- JavaScript thì được khuyến khích khi muốn tạo hiệu ứng hoạt hình nâng cao
- Hiệu ứng cho phép người dùng tạm dừng hoặc tua lại cũng phải được thực hiện bằng JavaScript
- Các hiệu ứng định dạng tốt nhất như thị sai cuộn cũng nên được thực hiện bằng Javascript
Với sự trợ giúp của Web Animation API, bạn có thể tạo các hình động phức tạp cho các đối tượng ứng dụng hướng tới.
Ngoài ra, bạn cũng có thể sử dụng JavaScript để kiểm tra CSS Animation
2. mẹo sử dụng Javascript Animation
Để có hiệu ứng Animation mượt mà lại có hiệu suất tốt với Javascript, đây là 4 mẹo bạn nên áp dụng
mẹo #1. Use requestAnimationFrame[]
Thay vì sử dụng setTimeOut[]
và setInterval[]
, hãy sử dụng phương thức JavaScript requestAnimationFrame[]
để thực thi mã Animation của bạn vào thời điểm tốt nhất cho trình duyệt
Phương thức này chọn tốc độ khung hình phù hợp với thiết bị của người dùng, vì vậy khách truy cập trên thiết bị di động sẽ thấy tốc độ khung hình khác với trên máy tính để bàn
mẹo #2. Tách hoạt hình từ các sự kiện
Code chịu trách nhiệm xử lý các sự kiện như scroll phải được tách biệt khỏi code animation của bạn
HTML5Rocks có một bài viết hướng dẫn rất đầy đủ, nó có thể giúp bạn tìm hiểu sâu hơn về cách phân tách các sự kiện từ mã xử lý requestAnimationFrame[]
mẹo #3. Mã Javascript phải được chấp nhận
Cần phải lưu ý khi thêm nhiều mã Javascript vào trang web của bạn
Nếu mã của bạn bắt đầu khó sử dụng, bạn có thể thử sử dụng các Web Worker để thực thi JavaScript Animations trên một luồng khác
mẹo #4. KHÔNG sử dụng jQuery
Bỏ qua thư viện hoạt hình cũ như jQuery
Nếu bạn đang tìm kiếm một thư viện tương tự, hãy thử Velocity. js
Về cơ bản, Vận tốc. js hoạt động tương tự như jQuery, nhưng nó nhanh hơn nhiều và hỗ trợ nhiều tính năng hơn
Bạn chỉ cần thay thế $.animate[]
bằng $.velocity[]
là đã tạo ra sự khác biệt lớn cho người dùng di động
3. Chọn thuộc tính CSS nào để tạo Hoạt hình?
Hiệu ứng hoạt hình liên tục có thể tiêu tốn một lượng tài nguyên đáng kể
And a number of property CSS Animation but a default more than a other property number
Trình duyệt càng khó hoạt động để tạo hiệu ứng động, tốc độ khung hình sẽ càng chậm
Do đó, việc chọn các thuộc tính CSS phù hợp để tạo hiệu ứng có thể tác động rất lớn đến hiệu suất trang web
Có 3 loại thuộc tính CSS chính
Thứ nhất, các thuộc tính cục bộ
Chúng tôi xác định kích thước và vị trí của các phần tử trên trang
Hoạt hình thay đổi chiều rộng và chiều cao của phần tử có thể ảnh hưởng đến vị trí của các phần tử khác, điều này có thể gây phản ứng dây điện phản hồi được gọi là "Layout thrash"
Thế nên, các hoạt hình thay đổi bố cục trang này đặc biệt nặng, tốt nhất là NÊN TRÁNH
Thứ hai, thuộc tính vẽ
Thuộc tính này xác định sự xuất hiện của các phần tử
Thực hiện thay đổi đối với các thuộc tính như màu sắc yêu cầu phải vẽ lại, nó cũng có thể gây tốn kém tài nguyên
Do đó, các hình ảnh động đơn giản yêu cầu một phần nhỏ của khung nhìn được vẽ lại có thể có tác động không đáng kể đến hiệu suất tổng thể
Ngược lại, hoạt hình lớn hơn yêu cầu phải vẽ lại không thể đánh bại để bạn đánh đổi hiệu quả
Thứ ba, thuộc tính hỗn hợp
Bao gồm transform
và opacity
, là những thuộc tính tốt nhất để bạn có thể tạo CSS Animation với tài nguyên tối thiểu
Với biến đổi, bạn có thể chia tỷ lệ và xoay hình động mà không ảnh hưởng đến bố cục trang
Vì thế, hãy cố gắng sử dụng các thuộc tính hỗ trợ cho hoạt ảnh bất cứ khi nào có thể
Mặc dù nó có giới hạn, nhưng lúc này đây rất cần bạn sáng tạo, và việc phải sáng tạo thường xuyên thì trình độ của bạn tăng tiến vù vù ngay thôi
Nếu bạn muốn tìm hiểu thêm về cách làm thế nào để biến loại chuyển động bố trí cục bộ thành loại chuyển động được hỗ trợ thì có thể xem thêm tại đây
CSS Triggers có một biểu tượng giải thích các quá trình được kích hoạt bởi các thuộc tính CSS riêng lẻ trong các trình duyệt khác nhau
Trình kích hoạt CSS
Nó có thể giúp bạn xác định xem hoạt động của bạn sẽ gây ra sự thay đổi bản vẽ hay thay đổi định dạng cục bộ
Để có kết quả tốt nhất, hãy cố gắng tự giới hạn bản thân bằng cách sử dụng bốn thuộc tính tổng hợp sau
Bạn có thể thực hiện hầu hết mọi thứ bằng các thuộc tính này để thực hiện các nhiệm vụ tương tự của các thuộc tính cục bộ mà không ảnh hưởng đến các phần tử trên trang
Ví dụ. Để thay đổi kích thước của hình ảnh, hãy sử dụng scale[]
thay vì setTimeOut[]
0
4. mẹo sử dụng CSS Animation
Tất nhiên là bạn vẫn có những trường hợp có thể sử dụng CSS Animation mà vẫn có hiệu quả tốt
Đây là 5 mẹo sử dụng CSS Animation
mẹo #1. Việc sử dụng các đồng thời hoạt hình
Hiệu ứng hoạt hình chạy trơn tru khi đơn độc. Nó không thể hoạt động tốt nhất trên một trang có hàng loạt hiệu ứng hoạt hình khác
Nhiều hơn hai hình ảnh động cùng một lúc có khả năng gây ra định mức
Do đó, việc xác định thời gian cho các hoạt ảnh của bạn để chúng không thực hiện tất cả cùng một lúc là rất quan trọng để duy trì hiệu suất ổn định
Điều khoản này có thể được thực hiện bằng cách bổ sung thuộc tính setTimeOut[]
1
Mặc dù công việc tối ưu hóa hoạt hình khá khó khăn và mất thời gian, nhưng như mình luôn khuyến khích các học viên của mình
"Khó thì mới có chỗ dành cho bạn, dễ nó làm hết rồi"
Hãy nhớ rằng, hiệu suất tốt hơn không phải là giá trị duy nhất mà bạn nhận được
mẹo #2. Kiểm tra hoạt ảnh trong chuyển động chậm
Nếu một hiệu ứng hoạt ảnh vẫn tốt trong quá trình chuyển động chậm, nó sẽ tốt ở tốc độ bình thường
Làm chậm hiệu ứng hoạt hình có thể giúp bạn xác định chính xác hơn các vấn đề kết xuất của trình duyệt
mẹo #3. Trì hoãn tất cả các hoạt ảnh vài phần trăm
Bạn cần biết là, trình duyệt rất bận rộn khi trang bắt đầu tải
Type like. Đang bận mà phải nhờ vả thêm 10 nhiệm vụ phụ,. chắc nghỉ việc quá
Thế nên,
Hãy trì hoãn tất cả các hoạt ảnh khoảng vài trăm setTimeOut[]
2 sau sự kiện tải ban đầu có thể tạo ra sự khác biệt đáng kể đến hiệu suất tổng thể của trang
mẹo #4. Không liên kết Hoạt ảnh với sự kiện cuộn trang
Hiệu ứng hoạt hình hình theo chế độ xem khi người dùng cuộn không chỉ gây khó chịu mà còn kéo giảm hiệu ứng của mọi thứ khác trên đường di chuyển
mẹo #5. Kết hợp CSS với SVG
Đồ họa vector hoặc SVG, là lựa chọn tuyệt vời dành cho hiệu ứng hoạt hình vì chúng có thể được thu nhỏ mà không làm giảm tốc độ phân giải
Để đơn giản, bạn có thể tạo SVG nhanh Adobe Illustrator, xuất ra CSS và chỉnh sửa nó
And try to view. Icon font hay SVG sẽ tốt hơn?
5. Khi nào thì sử dụng setTimeOut[]
3?
Nếu bạn đã thử mọi thứ khác và vẫn gặp sự cố về hiệu suất, thì bạn có thể thử thêm thuộc tính setTimeOut[]
3 vào hoạt ảnh của mình
Đúng như tên gọi của nó, thuộc tính setTimeOut[]
3 sẽ báo cáo rằng các thuộc tính của phần tử sẽ thay đổi để trình duyệt có thể chuẩn bị thích hợp
Liệt kê các thuộc tính cụ thể có thể setTimeOut[]
3 như thế này
.element {
will-change: transform, opacity;
}
Vì việc sử dụng setTimeOut[]
3 cũng sẽ tiêu tốn tài nguyên, do đó không nên sử dụng quá mức mà mang lại tác dụng ngược
Lưu ý. Không khuyến nghị đặt setTimeOut[]
3 trước mỗi hoạt ảnh
Chỉ sử dụng sẽ setTimeOut[]
3 như là đối sách cuối cùng để tối ưu hóa hiệu quả trang web
Your setting testing your animation
Bạn cần phải liên tục kiểm tra hiệu suất trong khi xây dựng hiệu ứng hoạt ảnh cho trang web của bạn
Bạn càng để lâu thì càng khó xác định vấn đề
Các công cụ dành cho lập trình viên trên Chrome, Firefox và Safari cung cấp bảng phân tích theo từng khung hình và vẽ các sự kiện trong tab Mạng
Thông báo này có thể giúp bạn tối ưu hóa hình ảnh động khi bạn thiết kế
Nếu bạn sử dụng Chrome, hãy xem tab bên dưới Rendering trong bảng điều khiển DevTools để thêm các tính năng bổ sung như máy đo FPS
Hướng dẫn bật FPS Meter trong Chrome Devtools
Kích thước màn hình của người dùng có ảnh hưởng lớn đến cách hiển thị hoạt ảnh, hãy đảm bảo kiểm tra dự án của bạn trên nhiều loại thiết bị khác nhau
Hiệu ứng tối ưu là phải khôi phục lại giá trị thực
Tối ưu hóa hoạt ảnh cho trang web không phải nhiệm vụ bất khả thi
Nhưng,
Lựa chọn hoạt ảnh để thu hút khách hàng truy cập mới ở lại trên trang web của bạn sẽ khó khăn hơn vì bạn phải xem xét các đối tượng của mình
Tham khảo ngay các khóa học Lập trình web với chuyên gia để hiểu bản chất và trang web tối ưu
Ngoài ra, bạn cũng cần phải theo dõi việc thay đổi hiệu suất tác động như thế nào đến chuyển đổi trên trang web
Nếu hoạt ảnh tối thiểu của bạn không giúp ích cho việc chuyển đổi. Tốt hơn hết là đầu tư tài nguyên và định vị tại chỗ khác. . D
Chúc bạn thành công
---
HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI
Tạo học Lập trình chất lượng cao [Từ năm 2002]. Học lập trình viên. Action ngay
Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT. 02435574074 - 0914939543 - 0353655150
E-mail. xin chào@niithanoi. giáo dục. vn
trang chủ. https. //Facebook. com/NIIT. CNTT-TT/
#niit #niithanoi niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python