JavaScript często powoduje zmiany wizualne. Czasami są to bezpośrednie manipulacje stylem, a czasem obliczenia powodują zmiany wizualne, takie jak wyszukiwanie lub sortowanie danych. Częstą przyczyną problemów z wydajnością są błędy w czasie działania lub długo działający kod JavaScript. Postaraj się zminimalizować jego wpływ tam, gdzie to możliwe.
JavaScript często powoduje zmiany wizualne. Czasem bezpośrednio za pomocą manipulacji stylem, a czasami obliczenia mogą wywołać zmiany wizualne, takie jak wyszukiwanie lub sortowanie danych. Źle ustawiony czas lub długotrwały kod JavaScript to częsta przyczyna problemów z wydajnością. Postaraj się zminimalizować jego wpływ tam, gdzie to możliwe.
Profilowanie wydajności JavaScript może być sztuką, ponieważ tworzony przez Ciebie JavaScript jest nic takiego jak kod, który faktycznie wykonuje się. Nowoczesne przeglądarki wykorzystują kompilatory JIT i z optymalizacji i wskazówek, aby zapewnić jak najszybsze możliwe wykonanie. znacząco zmienia dynamikę kodu.
Jednak z pewnością istnieje kilka rzeczy, które możesz zrobić, aby przyspieszyć działanie aplikacji. JavaScript.
Podsumowanie
- Unikaj stosowania funkcji setTimeout i setInterval w przypadku aktualizacji wizualnych. zawsze używaj metody requestAnimationFrame.
- Przenieś długo działający JavaScript z wątku głównego do instancji Web Workers.
- Wykonywać mikrozadania, aby wprowadzać zmiany DOM w kilku klatkach.
- Oceń wpływ JavaScriptu za pomocą osi czasu i programu profilującego JavaScript w Narzędziach deweloperskich w Chrome.
Aby wprowadzać zmiany wizualne, użyj interfejsu requestAnimationFrame
Gdy na ekranie zachodzą zmiany wizualne, chcesz pewnie pracować w odpowiednim momencie.
który znajduje się na początku ramki. Jedynym sposobem na zagwarantowanie, że kod JavaScript
będzie uruchamiany na początku klatki, jest używany requestAnimationFrame.
/**
* If run as a requestAnimationFrame callback, this
* will be run at the start of the frame.
*/
function updateScreen(time) {
// Make visual updates here.
}
requestAnimationFrame(updateScreen);
Platformy i przykłady mogą używać setTimeout lub setInterval do wprowadzania zmian wizualnych, np. w animacjach,
Problem z tym polega na tym, że wywołanie zwrotne jest uruchamiane w jakimś miejscu w kadrze, prawdopodobnie w dobrym momencie
na końcu ekranu, co może często powodować przeoczenie klatki i zacinanie się.
Biblioteka jQuery w rzeczywistości używała języka setTimeout w celu zachowania animate. Zmieniono na
requestAnimationFrame w wersji 3.
Jeśli używasz starszej wersji biblioteki jQuery,
poprawić ją tak, aby używała wersji requestAnimationFrame,
co zdecydowanie zalecamy.
Mniejsza złożoność lub korzystanie ze stron Web Worker
JavaScript działa w głównym wątku przeglądarki, obok obliczeń stylu, układu, wielu przypadków, farbą. Jeśli kod JavaScript będzie działać przez dłuższy czas, zablokuje te inne zadania. potencjalnie powodując pomijanie klatek.
Zachowaj przy tym taktykę podczas uruchamiania JavaScriptu i przez jak długi czas. Na przykład, jeśli jesteś w takich jak przewijanie, najlepiej umieszczać kod JavaScript w kodzie w regionie 3–4 ms. Dłuższy termin spowoduje, że będzie to zajmować zbyt dużo czasu. Gdy jesteś w stanie bezczynności możesz sobie pozwolić na spokojniejsze czasy.
W wielu przypadkach można przenieść czystą pracę obliczeniową Usługi internetowe, jeśli na przykład nie wymaga dostępu DOM. manipulowanie danymi lub przemierzanie ich; np. sortowanie czy wyszukiwanie, często dobrze pasują do tego modelu, podobnie jak wczytywanie i generowanie modeli.
var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);
// The main thread is now free to continue working on other things...
dataSortWorker.addEventListener('message', function(evt) {
var sortedData = evt.data;
// Update data on screen...
});
Do tego modelu nie pasują wszystkie materiały: Web Workers nie mają dostępu DOM. Jeśli Twoja praca musi skupiać się w wątku głównym, rozważ stosowanie grupowania, w którym większe zadanie dzieli się na mikrozadania. Każde z nich trwa nie dłużej niż kilka milisekund, a każdy z nich jest uruchamiany wewnątrz modułów obsługi requestAnimationFrame w każdej ramce.
Takie podejście wiąże się z konsekwencjami dotyczącymi UX i interfejsu i musisz upewnić się, że użytkownik o tym wie informujące o przetwarzaniu zadania, używając wskaźnika postępu lub aktywności. W każdym przypadku to podejście spowoduje, że główny wątek aplikacji pozostanie wolny, dzięki czemu będzie reagowała na interakcji użytkowników.
Poznaj „podatek od ramek” w JavaScripcie
Przy ocenie platformy, biblioteki czy własnego kodu należy dokonać oceny ile kosztuje uruchomienie kodu JavaScript – dla poszczególnych klatek. To jest Jest to szczególnie ważne przy wykonywaniu animacji o istotnym znaczeniu dla wydajności, przejścia lub przewijania.
Panel wydajności w Narzędziach deweloperskich w Chrome to najlepszy sposób na zmierzenie kosztów JavaScriptu. Zwykle uzyskuje się rekordy niskiego poziomu podobne do tych:
Sekcja Main (Główne) zawiera schemat płomieniowy wywołań JavaScriptu, może analizować, które funkcje były wywoływane i ile czasu zajęło każda z nich.
Wiedza na ten temat pozwoli Ci ocenić wpływ reklam JavaScript w aplikacji oraz zacznij znajdować i naprawiać te hotspoty, Wykonywanie funkcji trwa zbyt długo. Jak już wspominaliśmy, usunąć długotrwały JavaScript lub, jeśli to niemożliwe, przenieść go w narzędziu Web Worker, aby zwolnić wątek główny i kontynuować inne zadania.
Przeczytaj artykuł Pierwsze kroki z analizą wydajności środowiska wykonawczego, aby dowiedzieć się, jak używać tej funkcji w panelu Skuteczność.
Unikaj mikrooptymalizacji JavaScriptu
Fajnie może być wiedzieć, że przeglądarka jest w stanie wykonać jedną wersję czegoś 100 razy szybciej niż
innej rzeczy – np. żądanie offsetTop elementu jest szybsze niż obliczenia
getBoundingClientRect(), ale niemal zawsze prawdą jest, że będziesz wywoływać tylko funkcje takie jak
To niewielka liczba razy na klatkę, więc zwykle
marnuje wysiłek, skupiając się na tym aspekcie
Wydajność JavaScriptu. Zaoszczędzisz zwykle tylko ułamki milisekund.
Wyjątkiem jest prawdopodobnie tworzenie gry lub aplikacji, która jest kosztowna pod względem obliczeń. zgodnie z tymi wskazówkami, ponieważ w jednej klatce zwykle mieści się mnóstwo obliczeń, wszystko jest w porządku.
Krótko mówiąc, należy uważać na mikrooptymalizacje, ponieważ zwykle nie są one mapowane rodzaj tworzonej aplikacji.