Identyfikowanie i usuwanie wąskich gardeł
Profilowanie i usuwanie wąskich gardeł wydajnościowych.
Identyfikowanie i usuwanie wąskich gardeł to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.
Mierz przed optymalizacją
Zgadywanie, gdzie aplikacja działa wolno, jest stratą czasu. Profesjonalne podejście polega na tym, aby najpierw zmierzyć wydajność, znaleźć rzeczywiste wąskie gardło, usunąć je, a następnie ponownie wykonać pomiary. Głównymi narzędziami są Vue DevTools i profiler przeglądarki.
Vue DevTools
Rozszerzenie przeglądarki Vue DevTools pozwala analizować drzewo komponentów, stan reaktywny i zdarzenia. Karta Performance rejestruje czas renderowania komponentów, dzięki czemu można znaleźć te działające wolno.
Korzystanie z karty Performance
Należy rozpocząć nagrywanie, wejść w interakcję z aplikacją, a następnie zatrzymać nagrywanie. DevTools wyświetli oś czasu renderowania komponentów. Komponenty z długimi lub często występującymi paskami renderowania są głównymi podejrzanymi.
Profiler przeglądarki
Panel Performance w narzędziach deweloperskich przeglądarki rejestruje całą stronę: wykonywanie skryptów, renderowanie i malowanie. Długie żółte bloki wykonywania skryptów często wskazują na intensywne operacje JavaScript podczas renderowania.
Wykrywanie nadmiernego ponownego renderowania
Częstym wąskim gardłem jest komponent renderowany ponownie znacznie częściej, niż oczekiwano. Jeśli niewielka zmiana powoduje ponowne renderowanie dużego poddrzewa, należy sprawdzić współdzielony stan reaktywny lub brak wyraźnych granic między komponentami.
Renderowanie dużych list
Jednoczesne renderowanie tysięcy węzłów DOM jest powolne i wymaga dużo pamięci. Jeśli lista zawiera setki lub tysiące wierszy, sam DOM staje się wąskim gardłem, a nie logika danych.
<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>Koncepcja wirtualnego przewijania
Wirtualne przewijanie renderuje tylko wiersze aktualnie widoczne w obszarze widoku oraz niewielki bufor, ponownie wykorzystując węzły DOM podczas przewijania. Lista zawierająca 10 000 elementów utrzymuje w DOM tylko kilkadziesiąt węzłów.
Korzystanie z biblioteki wirtualnej listy
Biblioteki takie jak vue-virtual-scroller implementują to rozwiązanie za Państwa. Wystarczy przekazać im pełne dane i wysokość wiersza, a zajmą się wyświetlaniem odpowiedniego zakresu.
import { RecycleScroller } from "vue-virtual-scroller"
// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
// <div>{{ item.name }}</div>
// </RecycleScroller>Błędy ponownego renderowania związane z kluczami
Użycie indeksu tablicy jako :key na dynamicznej liście może spowodować, że Vue nieprawidłowo ponownie wykorzysta węzły DOM po dodaniu, usunięciu lub zmianie kolejności elementów, prowadząc do wyświetlania nieprawidłowej treści i dodatkowych ponownych renderowań.
<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>Naprawianie błędów kluczy
Należy użyć stabilnego i unikalnego identyfikatora jako klucza, aby Vue mogło prawidłowo dopasowywać elementy do danych podczas kolejnych aktualizacji.
<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>Praktyczny przebieg pracy
Należy połączyć wszystkie kroki: nagrać działanie aplikacji za pomocą DevTools, znaleźć najwolniej działający komponent, sprawdzić nadmierne ponowne renderowanie lub bardzo duże listy, zastosować odpowiednią poprawkę (buforowanie computed, v-memo, wirtualne przewijanie, stabilne klucze), a następnie ponownie wykonać pomiary, aby potwierdzić poprawę.
Szybki sprawdzian
Proszę sprawdzić swoją wiedzę na temat znajdowania wąskich gardeł.
Podsumowanie
Należy najpierw mierzyć wydajność za pomocą Vue DevTools i profilera przeglądarki, a następnie usuwać rzeczywiste wąskie gardła: nadmierne ponowne renderowanie, bardzo duże listy (rozwiązaniem jest wirtualne przewijanie) oraz błędy związane z kluczami będącymi indeksami (rozwiązaniem są stabilne klucze). Zawsze należy ponownie wykonać pomiary, aby potwierdzić poprawę. W następnej części poznają Państwo testowanie aplikacji Vue.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Identyfikowanie i usuwanie wąskich gardeł” jest bezpłatna?
Tak — pełny tekst „Identyfikowanie i usuwanie wąskich gardeł” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Identyfikowanie i usuwanie wąskich gardeł”?
Profilowanie i usuwanie wąskich gardeł wydajnościowych. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Identyfikowanie i usuwanie wąskich gardeł”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Leniwe ładowanie i dzielenie kodu
- Techniki memoizacji
- Identyfikowanie i usuwanie wąskich gardeł