Kur turėčiau įvesti <script> žymes HTML žymėjime?

Įterpdami „JavaScript“ į HTML dokumentą, kur turėčiau įdėti <script> žymes ir įgalinti „JavaScript“? Panašu, kad nepamirškite, kad juos įdėkite į <head> skyrių, bet <body> skyriaus pradžioje esanti vieta taip pat yra bloga, nes „JavaScript“ turi būti išnagrinėta prieš pilnai pateikiant puslapį (arba kažką panašaus) . Atrodo, kad <body> skyriaus pabaiga lieka logiška <script> žymių vieta.

Taigi, kur yra tinkama vieta įdėti <script> žymes?

(Šis klausimas susijęs su šiuo klausimu , kuriame buvo pasiūlyta, kad skambučiai į „JavaScript“ funkcijas būtų perkeliami iš <a> žymų į <script> žymes. Visų pirma, naudojant jQuery, bet ir bendresni atsakymai yra tinkami.)

1267
12 янв. nustatė mipadi 12 sausis 2009-01-12 21:15 '09 9:15 val. 2009-01-12 21:15
@ 23 atsakymai

Taip atsitinka, kai naršyklė įkelia svetainę, kurioje yra <script> :

  1. Gaukite HTML puslapį (pvz., Index.html)
  2. Pradėkite analizuoti HTML
  3. Parser susiduria su <script> nurodančiu išorinį scenarijų failą.
  4. Naršyklė prašo scenarijaus failo. Tuo tarpu analizatorius blokuoja ir sustabdo kitų HTML analizę jūsų puslapyje.
  5. Po tam tikro laiko scenarijus įkeliamas ir vykdomas.
  6. Analizatorius toliau analizuoja likusį HTML dokumentą.

4 žingsnis sukelia prastą vartotojo sąsają. Jūsų svetainė iš esmės sustabdo atsisiuntimą, kol atsisiųsite visus scenarijus. Jei yra vienas dalykas, kad vartotojai nekenčia, ji laukia, kol svetainė bus įkelta.

Kodėl taip vyksta?

Bet kuris scenarijus gali įterpti savo HTML per document.write() arba kitas DOM manipuliacijas. Tai reiškia, kad analizatorius turi palaukti, kol scenarijus bus įkeltas ir vykdomas, kol jis galės saugiai analizuoti likusią dokumento dalį. Galiausiai scenarijus į savo dokumentą gali įterpti savo HTML.

Vis dėlto dauguma „JavaScript“ kūrėjų nebenaudoja DOM, kai įkeliamas dokumentas. Vietoj to, jie laukia, kol dokumentas bus įkeltas prieš jį pakeičiant. Pavyzdžiui:

 <!-- index.html --> <html> <head> <title>My Page</title> <script type="text/javascript" src="my-script.js"></script> </head> <body> <div id="user-greeting">Welcome back, user</div> </body> </html> 

„Javascript“:

 // my-script.js document.addEventListener("DOMContentLoaded", function() { // this function runs when the DOM is ready, ie when the document has been parsed document.getElementById("user-greeting").textContent = "Welcome back, Bart"; }); 

Kadangi jūsų naršyklė nežino, kad my-script.js nekeis dokumento, kol jis nebus įkeltas ir veikia, analizatorius nustos analizuoti.

Pasenusi rekomendacija

Senas požiūris į šią problemą buvo skirtas <script> žymų įkėlimui į jūsų <body> apačią, nes tai užtikrina, kad analizatorius neužblokuotų iki pat pabaigos.

Šis metodas turi savo problemą: naršyklė negali pradėti atsisiųsti scenarijų, kol nebus išnagrinėtas visas dokumentas. Didelėms svetainėms, kuriose yra dideli scenarijai ir stiliaus lapai, gebėjimas įkelti scenarijų kuo greičiau yra labai svarbus. Jei jūsų svetainė neįkeliama per 2 sekundes, žmonės pateks į kitą svetainę.

Optimaliu sprendimu naršyklė pradės įkelti savo scenarijus kuo greičiau, tuo pačiu metu analizuodama likusį dokumentą.

Šiuolaikinis požiūris

Šiandien naršyklės palaiko async ir defer scenarijų atributus. Šie atributai nurodo, kad naršyklė saugiai apdoroja skriptus.

asinchroninis

 <script type="text/javascript" src="path/to/script1.js" async></script> <script type="text/javascript" src="path/to/script2.js" async></script> 

Skriptai su async atributu paleisti asinchroniškai. Tai reiškia, kad scenarijus veikia, kai tik jis įkeliamas, tuo tarpu nesustabdant naršyklės.
Tai reiškia, kad scenarijus 2 gali būti įkeltas ir įvykdytas prieš scenarijų 1.

Pasak http://caniuse.com/#feat=script-async , 94,57% visų naršyklių tai palaiko.

atidėti

 <script type="text/javascript" src="path/to/script1.js" defer></script> <script type="text/javascript" src="path/to/script2.js" defer></script> 

Skriptai su atidėti atributą vykdomi tvarkingai (t.y., pirmasis scenarijus 1, o tada scenarijus 2). Be to, jis neužblokuoja naršyklės.

Skirtingai nuo async scenarijų, atidėjimo scenarijai vykdomi tik įkėlus visą dokumentą.

Pasak http://caniuse.com/#feat=script-defer , 94,59% visų naršyklių tai palaiko. 94,92 proc.

Svarbi pastaba apie naršyklės suderinamumą: kai kuriais atvejais IE <= 9 negali atlikti atidėtų scenarijų. Jei reikia palaikyti šias naršykles, perskaitykite tai !

Išvada

Dabartinė padėtis yra skriptų įterpimas į <head> ir naudoti async arba defer . Tai leidžia jums atsisiųsti scenarijus kuo greičiau, neužblokuojant naršyklės.

Gerai, kad jūsų svetainė vis dar tinkamai įkelia 6% naršyklių, kurios nepalaiko šių atributų, tuo pačiu pagreitindamos kitas 94%.

1588
06 июня '14 в 0:20 2014-06-06 00:20 atsakymas pateikiamas Bart 06 birželio 14 d. 0:20 2014-06-06 00:20

Prieš uždarymo kūno žymą, kaip nurodyta

http://developer.yahoo.com/performance/rules.html#js_bottom

Įdėkite skriptus apačioje

Skriptų sukelta problema yra ta, kad jie blokuoja paralelinius atsisiuntimus. HTTP / 1.1 specifikacijoje daroma prielaida, kad naršyklės įkelia ne daugiau kaip du komponentus lygiagrečiai su pagrindinio kompiuterio pavadinimu. Jei pateikiate vaizdus iš kelių kompiuterių pavadinimų, galite gauti daugiau nei du parsisiųsti lygiagrečiai. Tačiau, įkeliant scenarijų, naršyklė nepaleidžia jokių kitų atsisiuntimų, netgi skirtingų kompiuterių pavadinimų.

224
12 янв. Atsakymą pateikė Cammel 12 d. 2009-01-12 21:18 '09 21:18 2009-01-12 21:18

Ne blokuojančius scenarijų žymas gali būti patalpintas bet kur:

 <script src="script.js" async></script> <script src="script.js" defer></script> <script src="script.js" async defer></script> 
  • async scenarijus bus įvykdytas asinchroniškai, kai tik jis bus pasiekiamas.
  • defer scenarijus vykdomas, kai dokumentas baigiamas analizuoti.
  • async defer scenarijus grįžta į atidėtą elgesį, jei nėra palaikomas asinchroninis

Tokie scenarijai bus vykdomi asinchroniškai / pasibaigus dokumentui, o tai reiškia, kad negalite to padaryti:

 <script src="jquery.js" async></script> <script>jQuery(something);</script> <!-- * might throw "jQuery is not defined" error * defer will not work either --> 

Arba tai:

 <script src="document.write(something).js" async></script> <!-- * might issue "cannot write into document from an asynchronous script" warning * defer will not work either --> 

Arba tai:

 <script src="jquery.js" async></script> <script src="jQuery(something).js" async></script> <!-- * might throw "jQuery is not defined" error (no guarantee which script runs first) * defer will work in sane browsers --> 

Arba tai:

 <script src="document.getElementById(header).js" async></script> <div id="header"></div> <!-- * might not locate #header (script could fire before parser looks at the next line) * defer will work in sane browsers --> 

Tai pasakius, asinchroniniai scenarijai turi tokius privalumus:

  • Lygiagretus išteklių pakrovimas :
    Naršyklė gali lygiagrečiai įkelti stiliaus lapus, vaizdus ir kitus scenarijus, nelaukdama, kol scenarijus bus įkeltas ir paleistas.
  • Nepriklausomybė nuo pradinio užsakymo :
    Skriptus galite įdėti į galvą ar kūną nesirūpindami blokavimu (naudinga, jei naudojate CMS). Vykdymo tvarka dar svarbi.

Naudodami išorinius scenarijus, kurie palaiko atgalines žinutes, galite išspręsti vykdymo užsakymo problemas. Dabar daugelis trečiųjų šalių „JavaScript“ API palaiko neleistiną vykdymą. Žemiau pateikiamas „Google“ žemėlapių API parsisiuntimo pavyzdys.

64
06 февр. Atsakymą pateikė Salman A 06 Feb. 2015-02-06 14:19 '15 at 14:19 2015-02-06 14:19

Standartinis patarimas, kurį reklamuoja „Yahoo! „Exceptional Performance“ komanda yra įdėti <script> žymes dokumento korpuso gale, kad jie nebūtų blokuojami puslapio rodinyje.

Tačiau yra keletas naujų metodų, kurie siūlo geresnį našumą, kaip aprašyta šiame atsakyme , apie „Google Analytics“ „JavaScript“ failo įkėlimo laiką:

Steve Souders (kliento vertintojas) yra puikių skaidrių apie:

  • Įvairūs išorinių „JavaScript“ failų lygiagrečiai įkelti būdai
  • jų poveikis apkrovos laikui ir puslapio atvaizdavimui
  • „naršyklėje“ rodomi „in progress“ indikatoriai (pvz., „įkėlimas“ būsenos juostoje, pelės žymeklis už smėlio laikrodžio).
36
13 янв. atsakymas pateikiamas sausio 13 d 2009-01-13 02:37 '09, 02:37 am. 2009-01-13 02:37

Jei naudojate „jQuery“, tuomet $(document).ready() JavaScript“ bet kur, kur tai geriau, ir naudokite $(document).ready() kad įsitikintumėte, jog prieš pradedant bet kokias funkcijas įkelkite tinkamai.

Pastabos pusėje: man patinka visi scenarijų žymos <head> skyriuje, nes tai atrodo švariausia vieta.

22
12 янв. atsakymas suteiktas Andrew Hare sausio 12 d 2009-01-12 21:18 '09 21:18 2009-01-12 21:18

„XHTML“ nepasitikrins, ar scenarijus yra kitur nei galvos elementas. , tai gali būti visur.

Galite atidėti vykdymą su kažkuo panašiu į jQuery, todėl nesvarbu, kur jis yra (išskyrus nedidelį našumo paspaudimą analizuojant).

9
12 янв. Atsakymas Allain Lalonde , sausio 12 d 2009-01-12 21:22 '09 9:22 val. 2009-01-12 21:22
 <script src="myjs.js"></script> </body> 
Žyma

Scenarijus visada turėtų būti naudojamas prieš kūno ar apačios HTML failą.

Prieš atsisiųsti js failą galite matyti puslapio turinį.

jei reikia, patikrinkite: http://stevesouders.com/hpws/rule-js-bottom.php

8
16 июля '16 в 14:16 2016-07-16 14:16 atsakymas pateikiamas AmanKumar liepos 16 d. 16:16 2016-07-16 14:16

Skriptų įterpimas į išorinius failus turi keletą privalumų: jis atskiria HTML ir kodą, leidžia lengviau skaityti ir palaikyti HTML ir JavaScript. „Cached JavaScript“ failai gali pagreitinti puslapio įkėlimą. Gaukite HTML puslapį (pvz., Index.html). Pradėkite HTML analizę. žyma, kuri nurodo išorinį scenarijų failą. Naršyklė prašo scenarijaus failo. Tuo tarpu analizatorius blokuoja ir sustabdo kito HTML kodo analizę jūsų puslapyje. Po tam tikro laiko scenarijus įkeliamas ir vėliau vykdomas. Parser tęsia likusio HTML dokumento analizę.

5
19 дек. Atsakymas pateikiamas Bindiya H 19 d. 2018-12-19 13:41 '18 - 01:41 pm 2018-12-19 13:41

Įprastas (ir visuotinai priimtas) atsakymas yra „žemyn“, nes tada visas DOM bus įkeltas prieš tai, kai nieko pradės vykdyti.

Dėl įvairių priežasčių egzistuoja disidentai, pradedant nuo įperkamos praktikos, norėdami sąmoningai pradėti vykdymą puslapyje „Onload“.

5
12 янв. Atsakymas dkretz 12 sausis 2009-01-12 21:18 '09 21:18 2009-01-12 21:18

Priklausomai nuo scenarijaus ir jo naudojimo, geriausias (kalbant apie puslapių įkėlimo ir atvaizdavimo laiką) gali būti ne įprastas <script> -tag per se, bet dinamiškai paleisti scenarijų asinchroniškai.

Yra keletas skirtingų metodų, tačiau paprasčiausias yra naudoti „document.createElement“ („scenarijus“), kai išjungiamas >

Tai, žinoma, reikalauja, kad pats scenarijus nebūtų reikalingas puslapio pateikimui.

Norėdami gauti daugiau informacijos, žr. Straipsnį „ Steve Souders“ straipsnis „Sukabinimo asinchroninis scenarijus“ (sukurtas „YSlow“, bet dabar „Google“).

1
13 янв. atsakymas pateikiamas 13 sausis. 2009-01-13 00:06 '09 - 0:06 2009-01-13 00:06

Tai priklauso nuo to, ar įkeliate scenarijų, reikalingo jūsų puslapio / naudojimo veiksmų stiliui (pvz., Vienu mygtuko paspaudimu), tada geriau jį įdėti į viršų. Jei jūsų stilius yra 100% CSS ir turite visas mygtukų veiksmų grąžinimo parinktis, galite jį įdėti žemiau.

Arba geriausia (jei tai ne problema), galite padaryti modulinį pakrovimo laukelį, įdėti savo javascript puslapio apačioje ir padaryti jį išnykus, kai įkeliate paskutinę scenarijaus eilutę. Tokiu būdu, prieš atsisiųsdami scenarijus, galite išvengti naudotojų veiksmų jūsų puslapyje. Taip pat venkite netinkamo stiliaus.

0
18 нояб. atsakymas pateikiamas ahmedmzl lapkričio 18 d 2013-11-18 07:41 '13, 7:41 am 2013-11-18 07:41

Scenarijus blokuoja DOM įkėlimą, kol jis įkeliamas ir vykdomas.

Jei <body> pabaigoje įdėsite scenarijus, visi DOM gali įkelti ir rodyti (puslapis bus rodomas greičiau). <script> turės prieigą prie visų šių DOM elementų.

Kita vertus, scenarijus bus užpildytas po <body> pradžios arba aukštesnės, kai dar nėra DOM elementų.

Įtraukite jQuery, o tai reiškia, kad galite jį patalpinti ten, kur norite . pasiruošęs ()

0
29 июня '15 в 15:38 2015-06-29 15:38 atsakymą įteikė Szymon Toda birželio 15 d. 15:38 2015-06-29 15:38

Visų pirma, norint pristatyti savo schemą ir suprasti paaiškinimą, turite žinoti šią spalvą, kas kelia susirūpinimą

2019

01 нояб. Atsakymas, kurį pateikė Mohamed Elshahawy lapkričio 01 2018-11-01 14:55 '18 at 14:55 pm 2018-11-01 14:55

Šiuolaikinis požiūris 2019 m. Yra scenarijų, pvz., ES6 modulio, naudojimas .

 <script type="module" src="..."></script> 

Pagal numatytuosius nustatymus moduliai įkeliami asinchroniškai ir ignoruojami. tai yra, jūs galite įdėti juos bet kur, ir jie bus įkelti lygiagrečiai ir vykdomi po to, kai puslapis bus įkeltas.

Skripto ir modulio skirtumai aprašyti čia:

ngn-wiki.ru.site/questions/419321 / ...

Modulio vykdymas, palyginti su scenarijumi, aprašytas čia:

https://developers.google.com/web/fundamentals/primers/modules#defer

Čia rodoma parama:

https://caniuse.com/#feat=es6-module

0
01 февр. atsakymas pateikiamas cquezel 01 Feb. 2019-02-01 18:17 '19, 18:17 pm 2019-02-01 18:17

Daugumą <script> nuorodų galite patalpinti <body> pabaigoje,
Bet jei jūsų puslapyje yra aktyvių komponentų, naudojančių išorinius scenarijus,
tada jų priklausomybė (js failai) turėtų būti rodoma prieš tai (idealiai - galvutės žyma).

0
27 янв. „ Tech AG “ atsakymą pateikė sausio 27 d. 2017-01-27 18:51 '17, 18:51 pm 2017-01-27 18:51

Scenarijus pabaigoje daugiausia naudojamas ten, kur pirmiausia turėtų būti rodomas svetainės turinys / stilius.

įskaitant skriptus mano galvoje, įkelia scenarijus anksčiau ir gali būti naudojama prieš atsisiųsti visą svetainę.

Jei įvedėte scenarijus, patikrinimas bus atliktas tik įkėlus visus stilius ir dizainus, kurie nėra vertinami reaguojančioms svetainėms.

0
27 нояб. Atsakymas pateikiamas Sanjeev S 27 lapkričio. 2017-11-27 09:12 '17 at 9:12 2017-11-27 09:12
  • Jei vis dar rūpinatės IE ir 10 palaikymu ir našumu, geriausia, kad visada padarytumėte savo scenarijų žymes naujausias HTML struktūros žymes. Tokiu būdu esate tikri, kad likusi DOM dalis buvo įkelta, ir jūs negalėsite blokuoti atvaizdavimo.

  • Jei nebenorite domėtis „IE“ ir „10“, galite įdėti savo scenarijus dokumento pradžioje ir naudoti defer , kad įsitikintumėte, jog jie pradėti tik po to, kai įkeliama „DOM“ ( <script type="text/javascript" src="path/to/script1.js" defer></script> ). Jei vis tiek norite, kad jūsų kodas veiktų IE <10, nepamirškite įvesti kodo window.onload .

0
20 янв. atsakymą pateikė user5803163 20 jan. 2016-01-20 22:50 '16 at 10:50 pm 2016-01-20 22:50

Manau, kad tai priklauso nuo tinklalapio našumo. Jei puslapis, kurį norite rodyti, nerodomas tinkamai, prieš tai neįkeliant „JavaScript“, pirmiausia turite įjungti „JavaScript“ failą. Но если вы можете отображать/отображать веб-страницу без первоначальной загрузки файла JavaScript, тогда вы должны поместить код JavaScript внизу страницы. Поскольку он будет эмулировать быструю загрузку страницы, и с точки зрения пользователя кажется, что эта страница загружается быстрее.

0
ответ дан Amit Mhaske 01 дек. '16 в 10:09 2016-12-01 10:09