2009-02-26 23 views
7

Tôi đã tìm thấy rằng việc sử dụng jQuery để tạo ra phía máy khách HTML có thể là một tăng cường hiệu suất rất lớn nếu được thực hiện đúng cách. Tôi sử dụng AJAX trả về JSON để lấy nội dung động và sau đó tôi xây dựng HTML có liên quan và chèn nó bằng cách sử dụng jQuery. Lần đầu tiên tôi rối tung với kỹ thuật này, tôi thấy rằng chuỗi nối trong JavaScript của IE thực hiện chậm để xây dựng một bảng động với hơn 50 hàng được thực hiện một cách khủng khiếp.jQuery và nối thêm một lượng lớn HTML

var shtml = '<table>'; 
for (var i = 0; i < 100; i++) { 
    shtml += '<tr><td>A bunch of content</td></tr>'; 
} 
shtml += '</table>'; 
$('#myTable').append(shtml); 

Sau đó, tôi tìm thấy một kỹ thuật ghép chuỗi đã thay đổi mọi thứ. Thay vì sử dụng sting += toán tử sử dụng mảng để làm nối;

var shtml = ['<table>']; 
for (var i = 0; i < 100; i++) { 
    shtml.push('<tr><td>A bunch of content</td></tr>'); 
} 
shtml.push('</table>'); 
$('#myTable').append(shtml.join('')); 

Tôi nhận thấy hiệu suất được cải thiện đáng kể. Bây giờ, tuy nhiên, có một trần khoảng 100 hàng trước khi tôi bắt đầu thấy bản thân trình duyệt đấu tranh với việc chèn động rất nhiều nội dung cùng một lúc. Có ai có bất kỳ con trỏ hoặc kỹ thuật có thể được sử dụng để giúp tôi đạt được hiệu suất tiếp theo tăng cho bộ lớn của HTML năng động?

+0

Một quan sát: Trong ví dụ của bạn, bạn đang thực sự thể hiện một hiệu suất tăng do chuỗi và mảng có nguồn gốc Javascript của xử lý, chứ không phải jQuery. –

Trả lời

-1

Có thể bạn sẽ có hiệu suất tốt hơn nếu bạn tạo thế hệ HTML ở phía máy chủ, sau đó sử dụng Ajax để truy xuất html và nối nó vào DOM của bạn. (Tôi giả định rằng bạn đang nhận được tất cả dữ liệu từ máy chủ bằng cách sử dụng Ajax anyway.)

+1

Thực ra, tôi thấy rằng hiệu suất là MUCH tốt hơn khi tạo phía máy khách html. Các nút cổ chai lớn nhất với các trang html là sử dụng băng thông, không phải CPU. Thử thêm một lượng lớn html vào DOM. Bạn sẽ thấy nó không phải là rất hiệu quả. – MonkeyBrother

+0

Tùy thuộc vào cách bạn nối thêm. innerHTML khá nhanh. –

3

Bạn đã cân nhắc sử dụng thư viện template? PURE có hiệu suất rất tốt, ví dụ (hãy thử ví dụ hàng 500).

0

tôi đã rối tung xung quanh với việc thêm một số lượng lớn html ngày hôm qua. tôi nghĩ rằng vẽ trên phía máy chủ và chèn là con đường để đi, tôi cũng có thể thêm, mà không sử dụng jquery là nhanh hơn bằng cách 50-100ms trong các thử nghiệm của tôi, mà đang ở đây:

http://programmingdrunk.com/playground

bạn sẽ cần phải bật bảng điều khiển firebug để xem kết quả tốc độ

1

Cố gắng nhân bản các bộ phận của DOM bản thân chứ không phải là tạo ra nó một cách nhanh chóng (ví dụ: thêm DOMElements thực tế để họ không phải được tạo ra).

0

Chase đúng, cho dù bạn có thể tạo HTML thông qua JavaScript nhanh đến mức nào, đó là cách chèn DOM sẽ giết bạn. Tie bất kỳ ngôn ngữ lập trình với DOM và nó sẽ được làm chậm.

Đề xuất duy nhất của tôi là đặt bảng được phân trang để bạn không tải quá nhiều cùng một lúc hoặc có thể không sử dụng AJAX.

7

Có vấn đề về hiệu suất với jQuery và chèn một chuỗi lớn html vào DOM, do hàm $ .trim của nó.

Đôi khi tôi tìm thấy tập lệnh dom cũ đồng bộ nhanh hơn nhiều so với sử dụng jquery. Hãy thử một cái gì đó giống như

document.getElementById('id').innerHTML = myarray.join('') 
+2

"Tôi đôi khi tìm thấy kịch bản dom cũ đồng bằng nhanh hơn nhiều so với sử dụng jquery." điều này xảy ra đối với hầu hết mọi khung công tác JS, tôi nghĩ - quá nhiều thứ đang diễn ra dưới sự che chở khi tất cả những gì bạn muốn là tạo/chèn DOM đơn giản –

0

Trong trường hợp của tôi, document.getElementById ('id'). InnerHTML = myarray.join ('') cũng là một kẻ giết người kể từ mảng có 10 chuỗi HTML.Các kết nối sẽ tạo một chuỗi dài lớn và hiệu suất nnerHTML thay đổi đáng kể từ 100ms đến 1200ms trên IE 7.

bất kỳ cluses nào?

1

Tôi nghĩ bạn có thể chia nhỏ html ở nhiều phần và nối từng phần một.

$("table tr:last").after('<tr>...</tr>');

Giống như dòng tài liệu GoogleDocs

Các vấn đề liên quan