blokujacy renderowanie kod JS

pytanie zadane 6 września 2017 w JavaScript przez kamil29 Obywatel (1,230 p.)

Witam! Mam pytanie odnosnie tego blokowania renderowania.Czy w takim przypadku wystarczy dodac atrybut defer/async,a jesli tak to ktory z nich?I mam jeszcze pytanie do jakiego typu plikow JS mozna to stosowac?

Z gory dziekuje za pomoc

1 odpowiedź

odpowiedź 6 września 2017 przez Comandeer Guru (601,110 p.)

To wszystko zależy, co to za skrypt…

Jeśli to ważny skrypt, który musi być załadowany jak najszybciej, to wrzucenie go w head wraz z atrybutem [async] może podziałać.
Tak samo podziała, gdy będą to skrypty statystyk lub inne zewnętrzne.
Niemniej skrypty, w których ważna jest kolejność wykonywania, a które muszą mieć wczytaną zawartość strony, warto umieścić w head z atrybutem [defer]. Alternatywnie można je wstawić na końcu body.
Dodatkowo wszystkie skrypty można pchać przy pomocy HTTP/2 push.
No i jest jeszcze link[rel=preload][as=script], co też może pomóc.
Czy wspominałem już, że są jeszcze asynchroniczne moduły (script[type=module])?

komentarz 6 września 2017 przez kamil29 Obywatel (1,230 p.)

a czy umieszczenie atrybutow async/defer tam gdzie jest to zbedne moze cos pogorszyc?

komentarz 6 września 2017 przez kamil29 Obywatel (1,230 p.)

co do asynchronicznych modulow to nie mam pojecia o co chodzi

komentarz 7 września 2017 przez Comandeer Guru (601,110 p.)

a czy umieszczenie atrybutow async/defer tam gdzie jest to zbedne moze cos pogorszyc?

Oczywiście, choćby dlatego, że zmienia cały sposób, w jaki skrypty są wczytywane.

Normalny skrypt przeglądarka wczytuje od razu i wstrzymuje do czasu wczytania generowanie reszty strony. Skrypt z atrybutem [async] wczytuje w tle (czyli generuje stronę dalej) i w chwili, gdy go wczyta, od razu wykonuje. Z kolei skrypty z atrybutem [defer] przeglądarka również wczytuje w tle, ale wykonuje dopiero po wczytaniu strony i w kolejności, w jakiej umieszczone zostały w kodzie (przy [async] kolejność nie jest zachowana).

co do asynchronicznych modulow to nie mam pojecia o co chodzi

https://jakearchibald.com/2017/es-modules-in-browsers/

komentarz 7 września 2017 przez kamil29 Obywatel (1,230 p.)

czyli jak postepowac w przypadku skryptow typu: modernizr.js, jquery,a jak w przypadku skryptow odpowiadajacych za wyglad strony/aplikacji?

komentarz 7 września 2017 przez Comandeer Guru (601,110 p.)

Modernizr.js IMO nadaje się na [async], względnie [defer]. W przypadku jQuery i skryptów odpowiadających za wygląd aplikacji – zależy. Można zarówno [defer], jak i umieścić na końcu body. Co jest szybsze, to już trzeba by zrobić testy empiryczne.