jQuery i dołączanie dużych ilości HTML

Question

Doszedłem do wniosku, że używanie jQuery do tworzenia strony klienta HTML może być ogromnym zwiększeniem wydajności, jeśli zostanie wykonane prawidłowo. Używam JSON zwracającego AJAX do pobierania dynamicznej zawartości, a następnie buduję odpowiedni HTML i wstawiam go za pomocą jQuery. Za pierwszym razem, gdy użyłem tej techniki, odkryłem, że konkatenator łańcuchów w JavaScript IE działał bardzo wolno, tak że tworzenie dynamicznego stołu z ponad 50 wierszy wykonywało strasznie.

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

Potem znalazłem technikę łączenia strun, która zmieniła wszystko. Zamiast używać operatora żądło += używać tablice do konkatenacji;

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('')); 

Zauważyłem, że wydajność znacznie się poprawiła. Teraz jednak istnieje pułap około 100 rzędów, zanim zacznę widzieć samą walkę przeglądarki z dynamicznym wstawianiem tak dużej ilości treści naraz. Czy ktoś ma jakieś wskazówki lub techniki, które można wykorzystać, aby pomóc mi osiągnąć kolejny wzrost wydajności dla dużych zestawów dynamicznego HTML?

Answer 1

Prawdopodobnie uzyskasz lepszą wydajność, jeśli generujesz kod HTML po stronie serwera, a następnie użyjesz Ajax do pobrania html i dołączenia go do DOM. (Zakładam, że i tak dostajesz wszystkie dane z serwera używając Ajax.)

Answer 2

Czy rozważałeś użycie biblioteki szablonów? PURE ma bardzo dobrą wydajność, na przykład (wypróbuj przykład z 500 wierszami).

Answer 3

Pogrążyłem się przy dodawaniu wczoraj dużej ilości html. Myślę renderowania po stronie serwera i wstawianie jest droga, także mogę dodać, że nie stosując jQuery jest szybciej 50-100ms w moich testów, które są tutaj:

http://programmingdrunk.com/playground

trzeba będzie Włącz konsolę firebug, aby zobaczyć wyniki prędkości.

Answer 4

Należy pamiętać, że często wąskie gardło prędkości nie tworzy DOM, ale wstawiając DOM. Jest to szczególnie istotne w przypadku IE ze skomplikowanymi arkuszami stylów i gdy nowa zawartość zawiera wiele poziomów zagnieżdżonych znaczników.

Patrz: http://bitkickers.blogspot.com/2008/12/ajax-grid-performance-in-ie.html

Answer 5

Spróbuj klonowania fragmentów samego DOM zamiast generowania go w locie (tzn dołączyć rzeczywiste DOMElements więc nie muszą być tworzone).

Answer 6

Chase ma rację, nie ma znaczenia, jak szybko można wygenerować kod HTML za pomocą JavaScript, to wstawienie DOM zabije. Zawiąż dowolny język programowania z DOM i będzie wolny.

Moja jedyna sugestia to taki, w którym tabela ma być paginowana, więc nie ładujesz tak wielu naraz, a może w ogóle nie używasz AJAX.

Answer 7

Wystąpił problem z wydajnością z jQuery i wstawienie dużego ciągu znaków html do DOM, ze względu na jego funkcję $ .trim.

Czasami znajduję zwykłe stare skrypty domowe znacznie szybciej niż przy użyciu jquery. Spróbuj czegoś podobnego

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

Answer 8

w moim przypadku, document.getElementById ('id'). InnerHTML = myarray.join ('') jest również zabójca ponieważ tablica ma 10 strun HTML.Złącza tworzyłyby duży długi łańcuch, a wydajność nnerHTML zmienia się znacznie między 100ms a 1200ms na IE 7.

Jakieś wskazówki?

Answer 9

Myślę, że możesz dzielić html na wiele części i dołączać je jeden po drugim.

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

jak linie dokumentów w GoogleDocs