12
Jakie są szybkie porady dotyczące zwiększania wydajności jQuery?Jakie są szybkie porady dotyczące zwiększania wydajności jQuery?
A
Odpowiedz
19
- Wolę prosty wybór pierwszego jedynie tylko przez ID, a drugi przez nazwę znacznika. Wybór według nazwy klasy lub selektora CSS wymaga jQuery do chodzenia po DOM, podczas gdy ID i tag mapują do "natywnych" funkcji DOM przeglądarki (getElementById i getElementByTagName).
- Pamięć podręczna Twoje obiekty jQuery w jak największym stopniu.
- Zakres operacji do głównego obiektu jQuery. Zamiast wybierać elementy pojedynczo, wybierz wspólny element przodka i użyj funkcji
find, aby znaleźć elementy z zakresu elementów potomnych. Jest to naprawdę optymalne tylko wtedy, gdy wykonujesz niektóre operacje na wspólnym przodku; w przeciwnym razie narzut znalezienia przodka i jego buforowania może przeważyć korzyść z przejścia przez zakres. - Zamiast tego należy użyć
$.each(), użyćfor(;;). Jest ponad dziesięć razy szybszy.
+0
To powinna być zaakceptowana odpowiedź. +1 – roosteronacid
+1
Czy możesz podać przykład dla (;;)? – Vnuk
+2
Oto przykładowa wersja jednego z przykładów dla $ .each() z dokumentacji jQuery [http://docs.jquery.com/Utilities/jQuery.each]: for (var i = 0) ; i
8
Pliki referencyjne na temat google's CDN, dzięki czemu ładują się szybciej.
+0
To naprawdę nie jest wydajność jQuery, prawda? –
+0
Nie dotyczy, jeśli rozwijasz się w intranecie (użytkownicy są w tym samym budynku). Przechowywanie go na własnym serwerze może zaoszczędzić im podróży do Internetu. –
+0
@Nathan w intranecie, to jest coś, co należy przechowywać na serwerze proxy, więc też zapisz im podróż, ale weź swój punkt i niektóre miejsca nie będą miały proxy – dove
10
Paul Irish niedawno przedstawił prezentację na temat wydajności podczas konferencji jQuery 2009. Prezentacje są jednymi z najbardziej wszechstronnych, jakie widziałem.
http://paulirish.com/perf/
http://www.slideshare.net/paul.irish/perfcompression
+0
+1 - kilka fajnych wskazówek w tam –
7
Zamiast robić:
$("#foo").addClass('test');
$("#foo").removeClass("bar");
$("#foo").slideUp('slow');
można zrobić:
$("#foo").addClass('test').removeClass('bar').slideUp('slow');
+0
Czy to naprawdę zwiększa wydajność? To jest takie kewl. –
+3
Jeśli nie możesz zrobić wszystkiego naraz, umieść $ ("# foo") w zmiennej i użyj tego zamiast odtwarzać $ ("# foo") za każdym razem. –
+2
@jpartogi: jQuery tworzy nowy obiekt za każdym razem, gdy przekazujesz selektor do $(), ale ponieważ jego metody zwracają 'this', możesz je tak ułożyć. Sztuczka polega na tym, aby nie tworzyć trzech różnych obiektów dla tego samego selektora. –
2
To naprawdę nie jest możliwe, aby zwiększyć szybkość jQuery, to naprawdę zależy od tego, jak sprawny jest twój kod, jak efektywny jest interpreter JS przeglądarki i jak szybki jest komputer ng kod jest. Być może warto spróbować przerobić jQuery, aby była bardziej wydajna, ale to zajmie trochę czasu i najprawdopodobniej jest już zoptymalizowana.
+1
Prawda, jeśli patrzysz na drastyczną poprawę prędkości. Istnieją jednak proste sztuczki, które powodują lepsze wykonanie, nawet jeśli jest to tylko około 100 milisekund. –
2
Jednym z najlepszych sposobów na zapewnienie efektywności jest upewnienie się, że * selektor jest kierowany na element/klasę itp., Tak konkretny, jak to tylko możliwe.
* $ (WYBÓR)
3
to doeas stosować zawsze do wspólnego javascript: Zawsze cache, cache, cache np .:
var $this = $(this);
$this.css('width', parseInt($this.css('width')) + 20 + 'px');
2
wiedzieć, kiedy należy używać zwykłego JavaScript zamiast metod jQuery.
jQuery jest dodatkiem do JS + DOM, nie zastępuje go kompletnie. Nie musisz używać jQuery dla każdej linii kodu, którą piszesz. Niektóre rzeczy są bez niego wyrażane bardziej zwięźle; wiele rzeczy jest szybciej bez niego. Dowiedz się, co udostępnia DOM, aby nie zakończyć pisania niektórych z gorszych przykładów, które widziałem tutaj.
np .:
var ix= $('#'+selectname).children().index($('#'+selectname+' option:selected'));
szybsze, łatwiejsze do odczytania, nie zrywa z nieoczekiwanymi znaków ID:
var ix= document.getElementById(selectname).selectedIndex;
+1
Można to skondensować do: $ ('# someElement'). Find ('option: selected'); –
2
myślę, że z prośbą o optymalizacji kodu, ale od wykonywania wysoce zależy od używanego silnika JavaScript, chciałbym wspomnieć o Google Chrome Frame.
Kupno nowego komputera byłoby oczywistym sposobem :-) – Joey
Myślę, że znalazłbyś kilka duplikatów tego pytania za pomocą wyszukiwarki. –
nowy komputer !! : D, zasugeruj mu także system operacyjny: D –