Używam NUXT JS i widzę, że niektóre z kodu są pobierane po tej fioletowej linii: Wprowadź opis obrazu tutaj

Teraz moje pytanie brzmi, co ta linia pokazuje i dlaczego pobrany kod po tym nie ma wpływu na mój wynik na latarnię morską?

0
r.Die 7 październik 2020, 19:33

1 odpowiedź

Najlepsza odpowiedź

Linia nie jest w rzeczywistości fioletowa Jest to czerwona linia i niebieska linia obok siebie.

Niebieska linia jest "zawartość Domu załadowana" Czas, a czerwony jest czasem "obciążenie".

Zdarzenie "DomcontentLoaded" pożary, gdy dokument jest załadowany, a drzewo Dom jest w pełni skonstruowane.

Wydarzenie "obciążenie" pożary, gdy wszystkie podramki, obrazy, arkusze stylów, skrypty itp. (To ignoruje rzeczy, takie jak skrypty odroczone, skrypty asynchronizujące itp., ponieważ są to technicznie nie częścią początkowego dokumentu)

Jeśli chodzi o zawartość załadowanej po nim, nadal wpływa na wydajność, ponieważ wpłynie na rzeczy, takie jak skumulowana zmiana układu, całkowity czas blokowania itp. Linie są tam tylko dla wskazówek.

Jeśli próbujesz wypracować wydajność na stronie, lepiej korzystasz z karty "Performance" w narzędziach deweloperskich.

Pozwala to prowadzić pełny ślad i podkreśla więcej znaczących metryk, takich jak pierwsza farba, pierwsza sporta farba, największa zawartość farba (w sekcji "czasami") i wszelkie skumulowane zmiany układu w sekcji "Doświadczenie" itp.

0
Graham Ritchie 7 październik 2020, 16:50