Hiệu suất của jQuery Parallax/Scroll Hiệu suất

Question

Câu hỏi này liên quan đến thị sai ít hơn so với di chuyển sự kiện. Mối quan tâm trọng tâm của tôi với dự án của tôi là hiệu ứng cuộn thị sai là trơn tru và không hốt hoảng.

Câu hỏi của tôi là, làm một số thuộc tính animate/cuộn tốt hơn các thuộc tính khác? Ví dụ: vị trí nền hoạt động tốt hơn nói điều chỉnh lề trên đầu trang khi cuộn.

Answer 1

Tôi không chắc chắn nếu một số thuộc tính tạo ra ít chi phí hơn trong khi hoạt hình hơn những người khác nhưng Tôi sẽ rất quan tâm nếu ai đó đăng một số thông tin tốt về chủ đề đó. Điều đó đang được nói rằng tôi biết một vài điều có thể giúp thực hiện.

Đặt position : absolute xóa phần tử khỏi luồng thông thường của trang và do đó không yêu cầu toàn bộ trang được vẽ lại khi được làm động. position : relative sẽ buộc vẽ lại toàn bộ trang vì tổ tiên và phần tử con cháu có thể bị ảnh hưởng.

Ngoài ra, bạn có thể điều tiết sự kiện scroll và vẫn đạt được tốc độ 30fps:

var scroll_ok = true; 
setInterval(function() { 
    scroll_ok = true; 
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance 
$(window).bind('scroll', function() { 
    if (scroll_ok === true) { 
     scroll_ok = false; 
     //now run your code to animate with respect to scroll 
    } 
}); 

CẬP NHẬT :: 2014-08-26

Mọi thứ đã thay đổi kể từ này ban đầu được viết. Một vài lưu ý nhanh chóng:

• Trình duyệt hiện tại cố gắng GPU tăng tốc bức tranh của các yếu tố được đưa ra một tập hợp cụ thể của tài sản (opacity và transform ra khỏi đỉnh đầu của tôi). Việc sử dụng các thuộc tính này có thể cải thiện hiệu suất cho những người khác như top/left (cũng yêu cầu vẽ lại trang trong nhiều trường hợp hơn là sử dụng transform).

• will-change là thuộc tính mới vừa được trình duyệt chọn. Về cơ bản, bạn có thể thiết lập một danh sách các thuộc tính có khả năng thay đổi để trình duyệt có thể tối ưu hóa thay đổi thuộc tính trước thời hạn.

• requestAnimationFrame có khả năng hỗ trợ trình duyệt hiện đại và tốt. Đây là một cách tốt hơn để làm mượt mà các yếu tố không tạo ra hàng tấn "chunk" khi trình duyệt sẽ hiển thị khi có thể.