Sử dụng CPU Jquery

Question

Tôi đang sử dụng Jquery để làm cho hình ảnh cuộn trên trang của tôi theo chiều ngang. Vấn đề duy nhất là nó sử dụng một số lượng nghiêm trọng của việc sử dụng CPU. Lên đến 100% trên một máy tính xách tay lõi đơn trong firefox. Điều gì có thể gây ra điều này ???

Jquery

<script> 
    jQuery(document).ready(function() { 

    $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null); 
    }); 

    </script> 

CSS

.speech { 
    /*position:fixed;*/ 
    top:0; 
    left:0px; 
    height:400px; 
    width:100%; 
    z-index:-1; 
    background:url(/images/speech.png) -300px -500px repeat-x; 
    margin-right: auto; 
    margin-left: auto; 
    position: fixed; 
} 

HTML

<div class="speech"></div> 

Answer 1

Nó đang sử dụng hết tài nguyên CPU vì bạn yêu cầu trình duyệt vẽ lại hình ảnh nhiều lần mỗi giây trong một khoảng thời gian dài. Đó không phải là miễn phí.

Answer 2

Nếu đây là một vấn đề liên quan đến bộ nhớ CPU thì bạn có thể vô hiệu hóa kết quả của lời gọi hàm jQuery. Nếu cuộc gọi của bạn trả về một đối tượng jQuery sau đó sau khi cuộc gọi, bạn có thể thiết lập nó để null:

var tmp = $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null); 
}); 
tmp = null; 

Lưu ý: Nếu đây IS trong BẤT CỨ CÁCH NÀO liên quan với rò rỉ bộ nhớ sau đó nó đã làm với tài liệu tham khảo tròn và bằng cách thiết lập để null bạn có thể phá vỡ nó.

Hãy thử, tôi muốn biết kết quả nếu bạn có thời gian để đăng bài.

Answer 3

Cách tốt nhất để đạt được điều này là bằng cách sử dụng một plugin như http://www.spritely.net/download/

Answer 4

Trong hợp cụ thể bất cứ ai đang tìm kiếm một giải pháp cho việc sử dụng CPU cao khi sử dụng hình ảnh động jQuery (như tôi đã được) sau đó nó đáng chú ý là jQuery.fx.interval đã được thêm vào jQuery 1.4.3 để bạn có thể kiểm soát tốc độ khoảng thời gian hoạt ảnh.

Ví dụ về sử dụng (thiết lập này lên khoảng 50-70 giữ hình ảnh động của tôi mịn và tôi nhận thấy việc sử dụng CPU giảm xuống còn khoảng 10-20%):

jQuery.fx.interval = 50;