[JS] Filtrowanie listy, czemu tak wolno dziala

Heja, to znowu ja, upierdliwy jak zawsze :]

Robie sobie liste kont w HTMLu, ma ona np 20 pozycji.
Dla ulatwienia zrobilem sobie szukanie.
Wszystko dziala pieknie, ale... jak jest 200 pozycji to strasznie zamula :|

Bajer polega na tym ze lista kont to tabelka, nad nia mam inputa

<input type="text" value="" onpropertychange="Filtruj(this.value);">

Funkcja Filtruj() "przelatuje" przez wszystkie TRki w tabelce i sprawdza czy w pierwszej TDce (gdzie wpisany jest login) znajduje sie dana fraza.
Sprawdzanie robilem na wyrazeniach regularnych na indexOf, zawsze tak samo wolno dziala.
Jesli fraza jest w TDce, to ustawia display = '', jesli nie display = 'none'.

Co jest bardzo funkcjonalne, to to, ze lista aktualizuje sie wraz z wpisywaniem kolejnych liter do wyrazenia.

Jesli na liscie jest duzo pozycji (np 200 lub 300) to jak wpisze wyrazenie "ala" to musze kilka sekund odczekac az mi odswierzy liste :/

Problem w tym ze przegladarka stara sie "odwierzac" zawartosc strony za kazdym razem jak cos sie zmieni.
Czy wie ktos moze jak zrobic aby tego nie robila, aby na chwile "zablokowac" odswiezanie obiektow, tak jak np w Delphi idzie zrobic "beginUpdate" przy modyfikowaniu kontrolek

nie wiem, nigdy czegoś takiego jeszcze nie robiłem ale myślę że może ci pomóc ukrycie całej tabelki na czas ukrywania tr'ów a potem pokazania jej z już ukrytymi

ew. coś zawsze można spróbować zoptymalizować, np najpierw pobierasz wszystkie tr, potem szukasz w nich td i sprawdzasz zawartość, a jeśli jest tyle samo kolumn to mógłbyś poszukać wszystkich td w tabelce o danym id, zliczyć ilość kolumn jednorazowo i potem co ten odstęp skakać po liście td, powinno minimalnie być szybciej, do tak prostej czynności oczywiście stosuj indexOf a nie wyrażenia regularne - to kolejny minimaluńki przyrost szybkości

możesz cloneNode tabelke do zmiennej, update'ować tam i na końcu podmienić z tą widoczną

Zastanawiałeś się kiedyś, co przeglądarka robi, gdy operujesz na *.innerHTML? Za KAŻDYM RAZEM przetwarza to sobie na swoje potrzeby. Właśnie niedawno się o tym w brutalny sposób przekonałem nie wiedząc, co jest :). Ogólnie rzecz ujmując - skopiuj sobie do pamięci (jakiejś zmiennej) te dane, na których chcesz operować, tam wykonaj wszystkie potrzebne operacje i potem wklej z powrotem do .innerHTML. Powinno być o wiele szybciej.

Adam.Pilorz napisał(a)

Zastanawiałeś się kiedyś, co przeglądarka robi, gdy operujesz na *.innerHTML? Za KAŻDYM RAZEM przetwarza to sobie na swoje potrzeby

przecież nikt tu nie operuje na innerHTML :|

E... Faktycznie, ślepy jestem :).
Swoją drogą - jeśli leci po TD i sprawdza wystąpienie frazy, to jednak użyć innerHTML musi,
//nic nie musi, a zwlaszcza ze nie wypada takich kosmicznych wlasciwosci stosowac - m.p :P
choć jasno tego nie napisał. Inna kwestia, że faktycznie jest to tylko bierne sprawdzanie.

No dobra, meczylem sie z tym pare dni, napisalem tu i od razu wpadlo rozwiazanie :D

Problem nie byl w pokazywaniu, tylko w sposobie jaki pobieralem obiekt ktory mialem ukryc/pokazac ;)

bo stosowalem getElementById() czyli czym wiecej elementow tym wieksza ilosc musial sprawdzic i wieksza ilosc razy, czyli ogolnie 2^n czyli teraz mu sie nie dziwie ze tak wolno dzialal [green]

Pobralem uchwyty do elementow do tablicy i dziala teraz blyskawicznie :]
(nie moglem zastosowac table.rows, bo nie wszystkie byly po kolei - czasem mialem "przerywniki", powtorzenie naglowka)

Ale swoja droga ciekawe czy jest mozliwosc wymuszenia takiego "beginUpdate'a" :>