Sobes.tech
Junior

რატომ არის სკრიპტები ჩვეულებრივ დაკავშირებული body ტეგის ბოლოს?

sobes.tech AI

პასუხი AI-სგან

გვერდის გაშლას შეფერხების თავიდან აცილებისა და DOM ელემენტებზე დაუყოვნებლივ წვდომის უზრუნველსაყოფად, როგორც კი ისინი იტვირთება.

სკრიპტების დაკავშირება <head>-ში ან <body>-ს დასაწყისში, გარეშე async ან defer ატრიბუტების, ბრაუზერი აჩერებს HTML-ის ანალიზს და გვერდის გაშლას, სანამ სკრიპტი არ იტვირთება და არ შესრულდება. ეს აჩერებს საიტის ხილულ შესრულებას.

დასასრული <body>-ს დაკავშირება უზრუნველყოფს, რომ DOM ხე უკვე სრულად არის შექმნილი სკრიპტის შესრულების დროს, რაც საშუალებას აძლევს პირდაპირი ურთიერთქმედება ელემენტებთან, მხოლოდ DOMContentLoaded ან load მოვლენის გამოყენების გარეშე.

async და defer ატრიბუტები თანამედროვე ალტერნატივებია, რომლებიც გთავაზობთ უფრო მოქნილ ვარიანტებს სკრიპტების ჩატვირთვისთვის, HTML ანალიზის დაბლოკვის გარეშე:

  • async: სკრიპტი იტვირთება ასინქრონულად და შესრულდება დაუყოვნებლივ მისი ჩატვირთვის შემდეგ, არ ელოდება DOM-ის სრულად ჩატვირთვას. ასინქრონული სკრიპტების შესრულების სია არ არის გარანტირებული.
  • defer: სკრიპტი იტვირთება ასინქრონულად და შესრულდება HTML-ის სრული ანალიზის შემდეგ, მაგრამ DOMContentLoaded მოვლენის წინ. defer-ით ჩატვირთული სკრიპტები შესრულდება მათი გამოჩენის წესით დოკუმენტში.