Jaki jest najskuteczniejszy sposób zarządzania dużymi zestawami danych za pomocą Javascript/jQuery w IE?

Question

Mam wyszukiwanie, które zwraca JSON, który następnie przekształcam w tabelę HTML w JavaScript. To wielokrotnie wywołuje metodę jQuery.append(), raz dla każdego wiersza. Mam nowoczesną maszynę, a czas reakcji Firefoksa jest akceptowalny. Ale w IE 8 jest nieznośnie powolny.

Postanowiłem przenieść transformację danych z HTML do PHP po stronie serwera, zmieniając typ zwracania z JSON na HTML. Teraz, zamiast wielokrotnie wywoływać czas jQuery.append(), raz wywołuję metodę jQuery.html() z całą tabelą. Zauważyłem, że Firefox jest szybszy, ale IE wolniej.

Te wyniki są anegdotyczne i nie przeprowadziłem żadnego testu porównawczego, ale wydajność IE jest bardzo rozczarowująca. Czy jest coś, co mogę zrobić, aby przyspieszyć manipulację dużymi ilościami danych w IE, czy też po prostu zły pomysł na przetwarzanie bardzo dużej ilości danych jednocześnie za pomocą AJAX/Javascript?

Answer 1

Jak wspominają inni, nadmierne manipulowanie DOM zabija wydajność. Utworzenie ciągu znaków HTML za pomocą wspomnianego Array.join ('') i ustawienie innerHTML kontenera za pomocą metody jQuery.html() jest szybsze o rząd wielkości. Uważaj, aby użyć jQuery.append (html) - jest to równoznaczne z utworzeniem wszystkich węzłów DOM, a następnie wstawieniem ich!

Rzecz polega na tym, że nawet jeśli zoptymalizujesz tworzenie drzewa węzłów stron, nadal osiągniesz wysoki pułap dzięki bardzo dużym zbiorom danych. Przeglądarki po prostu nie radzą sobie z tak dużymi i złożonymi drzewami DOM. Pierwszą rzeczą, którą zobaczysz spowolnienie będą interakcje (animacje, programy obsługi itp.), Nawet jeśli korzystasz z delegowania zdarzeń. Jeśli twój zestaw danych jest naprawdę duży, będziesz musiał przeprowadzić wirtualizację, aby pokazać tylko to, co jest widoczne w oknie roboczym (tak robi SlickGrid - http://github.com/mleibman/slickgrid).

Możesz również poprawić czas reakcji i "czas na interakcję" swojej strony, dzieląc dodatki DOM i uruchamiając je po upływie limitu czasu, z pewnym opóźnieniem, aby umożliwić przeglądarce obsługę zdarzeń użytkownika.

Inne techniki obejmują renderowanie wartości pierwszej strony, przydzielanie miejsca na więcej, ale renderowanie tylko wtedy, gdy użytkownik zacznie przewijać w jego kierunku. Tak robi Facebook.

Answer 2

Zrobiłem to już wcześniej. To cała manipulacja DOM, która spowalnia działanie ze względu na proces ponownego malowania/ponownego przepływu po każdym dodaniu.

Utwórz go jako ciąg na kliencie, wstaw ciąg do DOM za pomocą .html().

To zadziałało dla mnie z powodzeniem, nawet w IE6.

Answer 3

Wiele operacji dołączania DOM zabije wydajność. Możesz także napotkać problem z niezmiennością łańcucha.

Utrzymuj dane tak małe, jak to możliwe (tablice JSON są dobre) i kompiluj kod HTML w skrypcie, unikając problemu z łączeniem ciągów w javascript. Dołącz wartości html do tablicy, a następnie dołącz do tablicy. Zrób jeden dodatek DOM po utworzeniu html. np

var builder = []; 

//Inside a loop 
builder.push('<tr><td>'); 
builder.push(json.value); 
builder.push('</tr>'); 

//Outside the loop 
$('div').append(builder.join('')); 

Answer 4

Bardzo polecam jQuery templating plugin,

I zostały z wykorzystaniem funkcji mikro szablonów Johna Resig za kilka miesięcy. Wtyczka szablonowa to ewolucja tego. Pisałem i prezentuje na niej przez cały rok :)

My Blog