jQuery html() diễn xuất rất chậm

Question

Tôi đã thử nghiệm một cái gì đó tôi đọc trước đó về cách ngẫu nhiên Math.random() thực sự là, và muốn hiển thị 10000 con số mà đã được coi là một số ngẫu nhiên giữa 0 và 10000000.

Để xem thử nghiệm, tôi đã chọn để chỉ tham gia mảng các số ngẫu nhiên vào một chuỗi với <br> giữa mỗi số nguyên. Và sau đó tôi chỉ làm $("#"+elm).html(randomNumberString); mà đã thực sự chậm. Tôi chỉ nghĩ rằng đó là thế hệ và sắp xếp các số ngẫu nhiên thành một mảng. Nhưng khi tôi bắt đầu đặt hẹn giờ trong mã của tôi, nó đã nhận được appearant rằng đó là đầu ra đã làm chậm tất cả mọi thứ xuống.

Cũng giống như một thử nghiệm tôi đã làm document.getElementById(elm).innerHTML = randomNumberString;

jQuery.html(): 2500ms getElementById.innerHTML: 170ms

tôi đã cố gắng này trên tất cả 5 trình duyệt, và những con số đã tiến rất gần trong tất cả các trình duyệt. .. Tôi có sử dụng jQuery sai trong trường hợp này? Tôi cũng đã thử nối thêm và tìm nạp phần tử trước khi bộ hẹn giờ bắt đầu, vì vậy tôi có thể chỉ cần thực hiện $(elm).html(), nhưng điều đó không giúp ích gì. Có vẻ như chức năng html() thực sự đang làm chậm mọi thứ xuống ..?

EDIT tôi đã kết thúc làm điều này:

randomStringNumber = "<div>" + randomStringNumber + "</div>"; 

và bây giờ toàn bộ điều chạy nhanh hơn rất nhiều: jQuery.html(): 120ms getElementById.innerHTML: 80ms

Tuy nhiên nhanh hơn sử dụng html oldschool, mặc dù. Và nếu có ai có câu trả lời cho việc tại sao gói nó trong một phần tử nhanh hơn, tôi sẽ đánh giá cao điều đó ...

Answer 1

25 mẹo để cải thiện sử dụng jquery bạn

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

http://acsenthil.wordpress.com/2011/07/04/improve-your-jquery-25-excellent-tips/

1. tải khung từ Google Code
2. Sử dụng một cheat sheet
3. Kết hợp tất cả các kịch bản của bạn và rút gọn chúng
4. Sử dụng excel của Firebug mượn cơ sở khai thác gỗ console
5. hoạt động lựa chọn Keep để ở mức tối thiểu của bộ nhớ đệm
6. Giữ DOM thao tác ở mức tối thiểu
7. Quấn tất cả mọi thứ trong một yếu tố duy nhất khi thực hiện bất kỳ loại DOM chèn
8. Sử dụng ID thay vì các lớp học bất cứ nơi nào có thể
9. cho selectors bạn một bối cảnh
10. sử dụng chaining đúng
11. Tìm hiểu để sử dụng đúng cách animate
12. Tìm hiểu về Đoàn kiện
13. Sử dụng các lớp học để lưu trữ trạng thái
14. Thậm chí tốt hơn, sử dụng dữ liệu nội bộ của jQuery() phương pháp để lưu trữ trạng thái
15. Viết selectors của riêng bạn
16. Streamline HTML của bạn và thay đổi nó một lần trang đã được nạp
17. nội dung tải lười biếng cho tốc độ và SEO có lợi cho chức năng tiện ích
18. sử dụng jQuery
19. sử dụng noconflict để đổi tên đối tượng jquery khi sử dụng các khuôn khổ khác
20. Làm thế nào để biết khi nào hình ảnh đã tải
21. Luôn luôn sử dụng phiên bản mới nhất
22. Làm thế nào để kiểm tra xem một yếu tố tồn tại
23. Thêm một lớp JS để thuộc tính HTML của bạn
24. Return 'false' để ngăn chặn hành vi mặc định
25. Viết tắt cho sự kiện sẵn sàng

Answer 2

Điều này có vẻ như là limitation của hàm html. Trong cuộc thảo luận này hàm sau đã được đề xuất để thay thế:

$.fn.replaceHtml = function(val) { 
    var stack = []; 
    return this.each(function(i, el) { 
     var oldEl = el; 
     /*@cc_on // Pure innerHTML is slightly faster in IE 
     oldEl.innerHTML = html; 
     return oldEl; 
     @*/ 
     var newEl = oldEl.cloneNode(false); 
     newEl.innerHTML = html; 
     oldEl.parentNode.replaceChild(newEl, oldEl); 
     /* Since we just removed the old element from the DOM, return a reference 
     to the new element, which can be used to restore variable references. */ 
     stack.push(newEl); 
    }).pushStack(stack); 
}; 

Answer 3

Cách nhanh nhất là thế này:

$.getJSON("/Admin/GetFolderList/", function(result) { 
     var optionsValues = '<select>'; 
     $.each(result, function(item) { 
      optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>'; 
     }); 
     optionsValues += '</select>'; 
     var options = $('#options'); 
     options.replaceWith(optionsValues); 
    }); 

Theo this link là cách nhanh nhất bởi vì bạn quấn tất cả mọi thứ trong một yếu tố duy nhất khi thực hiện bất kỳ loại chèn DOM.