If you're seeing this message, it means we're having trouble loading external resources on our website.

Nếu bạn đang sử dụng bộ lọc web, vui lòng kiểm tra lại xem bộ lọc có chặn hai tên miền *.kastatic.org*.kasandbox.org hay không.

Nội dung chính

Lựa chọn kỹ thuật tạo hiệu ứng động DOM phù hợp

Trước đó, ta đã học 3 kỹ thuật tạo hiệu ứng động cho các phần tử trên trang web: window.setInterval/setTimeout, window.requestAnimationFrame và các hiệu ứng chuyển động/chuyển đổi trong CSS.
Khi chọn lựa kỹ thuật phù hợp để sử dụng, ta nên cân nhắc những câu hỏi sau:
  • Kỹ thuật đó có thể tạo ra kết quả ta muốn hay không?
  • Kỹ thuật này ảnh hưởng đến hiệu suất hay không? (Có làm chậm trình duyệt/máy tính không?)
  • Với kỹ thuật này, việc điều chỉnh thời gian chạy hiệu ứng cần chính xác đến mức nào?
  • Kỹ thuật này có hoạt động trên tất cả các trình duyệt mà ta muốn chạy trang web hay không?
Khi tạo trang web, ta rất cần chú ý đến hiệu suất và có thể coi đây là tiêu chí quan trọng nhất. Tuy nhiên, hiệu suất của trình duyệt sẽ thay đổi tùy thuộc vào phiên bản và thiết bị sử dụng. Do đó, có thể kỹ thuật ta đang thấy phù hợp nhất ở thời điểm hiện tại sẽ không còn ứng dụng được trong tương lai. Lúc này, các hiệu ứng chuyển động/chuyển đổi trong CSS đang được coi là ít gây ảnh hưởng đến hiệu suất nhất, tiếp đó là requestAnimationFrame và cuối cùng là setInterval.
Tuy nhiên, CSS không thể làm được mọi thứ. Ví dụ, để vẽ điểm ảnh và các hình trong thẻ <canvas>, ta không thể sử dụng CSS mà phải gọi các hàm như fillRect(). Khi đó, ta sẽ phải sử dụng đến các phương thức như requestAnimationFrame hoặc setInterval để gọi các hàm như trên theo chu kỳ. Trên thực tế, đây cũng là cách ta đang thực hiện trong môi trường ProcessingJS trên Khan Academy. ProcessingJS là một thư viện JavaScript được xây dựng phù hợp để dùng với thẻ <canvas>. Khi bạn định nghĩa hàm draw() trong phần lập trình của mình, ProcessingJS sẽ sử dụng phương thức setInterval để gọi hàm draw() đó nhiều lần dựa trên thuộc tính frameRate.
Đôi khi, có những trường hợp ta không cần tạo hiệu ứng động cho các phần tử trên trang nhưng vẫn muốn gọi các hàm JavaScript theo chu kỳ, ví dụ như để gửi yêu cầu định kỳ đến máy chủ để tìm các bản cập nhật, như khi Twitter cập nhật nguồn cấp dữ liệu thời gian thực của mình. Trong trường hợp đó, ta có thể sử dụng phương thức setInterval. Lúc này, việc mô tả chính xác chu kỳ chạy phương thức đến đơn vị thời gian như giây hay mi-li-giây không quá quan trọng, vì ta chỉ gọi phương thức này mỗi phút hoặc lâu hơn. Đây cũng là cách Khan Academy đang áp dụng với trang yêu cầu trợ giúp để liên tục kiểm tra các yêu cầu trợ giúp mới sau mỗi 2 phút.
Ngoài những yếu tố đã đề cập ở trên, ta cũng cần lưu ý về khả năng tương thích của trình duyệt. Nếu phần lập trình ta đang viết cần hoạt động được cho trình duyệt Internet Explorer 9 thì ta sẽ không thể sử dụng phương thức requestAnimationFrame hoặc các hiệu ứng chuyển động trong CSS. Khi đó, ta cần sử dụng kết hợp các kỹ thuật có khả năng tương thích tốt trên các trình duyệt khác nhau hoặc tìm một thư viện có sẵn để giúp ta kết hợp các kỹ thuật đó như Velocity.js.
Bạn có thể truy cập vào các liên kết dưới đây để tìm hiểu thêm về các kỹ thuật tạo hiệu ứng động cho các phần tử trên trang web:
Ngoài ra, nếu bạn là một người yêu thích bộ phim Doctor Who, bạn có thể tìm hiểu thêm về công đoạn hậu kỳ của bộ phim để thấy được sức mạnh của các hiệu ứng chuyển động trong CSS3 tại liên kết sau animated TARDIS.

Tham gia cuộc thảo luận?

Chưa có bài đăng nào.
Bạn có hiểu Tiếng Anh không? Bấm vào đây để thấy thêm các thảo luận trên trang Khan Academy Tiếng Anh.