jQuery i DOM Manipulacja Wydajność Problem w IE8

Question

Mam opracowany moduł w mojej pracy w jQuery, to jest po prostu tabela z następującą funkcjonalnością

• poziomie komórkowym Edycja
poziom
• Row edit
• drop drop n wierszy zmienić pozycję
• pokazać/ukryć kolumny
• Kolumna rozmiaru

Wszystko działa dobrze w najnowszych przeglądarkach, takich jak FF9.0, IE9 i Chrome, , ale w starszych przeglądarkach, takich jak IE8 i FF3.6, liczba wierszy w tabeli zwiększa wydajność strony znacznie zmniejsza się. Próbowałem wiele optymalizacji z manipulacji jQuery i DOM, ale nadal nie ma wpływu na wydajność. Każdy pomysł, jeśli coś mi brakuje lub jakaś wskazówka, aby poprawić wydajność, czyli do akceptowalnego poziomu.

Nie używam żadnej wtyczki, wszystko jest moją niestandardową implementacją. Plik javascript jest dość duży i szukam ogólnych dobrych praktyk i wskazówek.

Answer 1

Istnieją dwa główne sposoby zwiększenia wydajności na dużych stronach HTML - zmniejsz liczbę ponownych wczytywania stron i zmniejsz liczbę procedur obsługi.

1. Zmniejszyć liczbę stronie przepłynie

każdym razem podczas wprowadzania zmian do DOM, potrzebuje odświeżenia się. To jest reflow. Zachowaj te ograniczenia do minimum, tworząc ciąg lub fragment DOM z wszystkimi manipulacjami DOM, a następnie wstawiając je do swojej strony. Spowoduje to uruchomienie tylko jednego przepływu. Na przykład, jeśli dodajesz tabelę, utwórz całą tabelę z tekstem w niej, tak jak powinno być, a następnie wstaw to w pojedynczej operacji.

JQuery pozwala na tworzenie fragmentu DOM takiego:

var table = $('<table></table'); 

można manipulować swoją fragment w standardowych sposobów:

var line = $('<tr><td>Some Data</td></tr>'); 
line.css('color','red'); 
table.append(line); 

wtedy, gdy fragment jest kompletna, dodaj go do DOM w jednym kroku:

$('body').append(table); 

Wyzwolisz tylko jeden proces wymiany, a proces być szybsze o rząd wielkości.

2. Zmniejszenie liczby koparki

Jeśli masz dużo kontroli w każdym wierszu, to dużo koparki. Zamiast tego utwórz tylko jeden moduł obsługi i dołącz go do katalogu głównego dokumentu, a następnie po wywołaniu sprawdź atrybut docelowy, aby dowiedzieć się, co należy zrobić. W JQuery możesz użyć nowych procedur obsługi "na", aby to zrobić, lub użyj starych "żywych" procedur obsługi stylu.

na przykład:

$('table td').on('click', function() { 
    //do work here 
}); 

Tylko jeden obsługi zostanie utworzony, które będą obsługiwać wszystkie zdarzenia td klikania.

Wykonaj obie te czynności, a powinieneś zobaczyć znacznie lepszą wydajność.

Answer 2

Zła wiadomość jest taka, że ​​niewiele można zrobić, ponieważ zależy to głównie od mechanizmu javascript używanego w przeglądarce.

Jeśli możesz wypróbować Google Chromeframe dla IE8, ale na ogólnodostępnej stronie internetowej, która najprawdopodobniej nie jest zbyt dobrym rozwiązaniem. Ale może być w środowisku korporacyjnym, gdy użytkownicy mogą łatwo aktualizować oprogramowanie.

Można także spróbować uczynić stolik on-the-fly:

Ao ty masz swój stolik i masz tablicę z informacjami w javascript (lub pullable pośrednictwem AJAX), plus masz informacje o tym, gdzie są w tabeli (wierszu) i jak długo jest stół (maxrows).

Następnie stwórz stół, który jest tylko tak duży, jak okienko ekranu, może trochę większy. Wszystko nad i pod rzutnią jest obsługiwane przez duży obiekt <div> lub coś, co jest rozciągane do wysokości pozostałych wierszy lub wierszy przed najwyższym wierszem rzutni.

W ten sposób w dowolnym momencie obecna jest tylko bardzo ograniczona liczba węzłów dom. Może to poprawić wydajność.

Po przewinięciu użytkownika usuń komórki tabeli, które nie są już w rzutni (i dodaj ich wysokość do odpowiedniego bloku białych znaków po tej stronie) i dodaj komórki tabeli, które świeżo weszły do ​​widoku (usuwając wysokość z białych znaków po tej stronie).