Wanneer moet ek Inline vs.Eksterne Javascript?

StackOverflow https://stackoverflow.com/questions/138884

Vra

Ek wil graag weet wanneer ek eksterne skrifte moet insluit of dit in lyn met die html-kode moet skryf, in terme van werkverrigting en gemak van instandhouding.

Wat is die algemene praktyk hiervoor?

Real-world-scenario - Ek het verskeie HTML-bladsye wat kliënt-kant vorm validering benodig.Hiervoor gebruik ek 'n jQuery-inprop wat ek op al hierdie bladsye insluit.Maar die vraag is, moet ek:

  • skryf die stukkies kode wat hierdie skrip inlyn konfigureer?
  • alle stukkies in een lêer insluit wat onder al hierdie HTML-bladsye gedeel word?
  • elke stukkie in 'n aparte eksterne lêer insluit, een vir elke HTML-bladsy?

Dankie.

Was dit nuttig?

Oplossing

Ten tyde van hierdie antwoord is oorspronklik gepos (2008), die reël is eenvoudig: All script ekstern moet wees. Beide vir onderhoud en prestasie.

(Hoekom prestasie? Want as die kode is apart, dit kan makliker word die kas deur blaaiers.)

JavaScript hoort nie in die HTML-kode en as dit bevat spesiale karakters (soos <, >) dit selfs skep probleme.

Vandag, web scalability verander. Die vermindering van die aantal versoeke het 'n geldige oorweging te danke aan die latency van die maak van verskeie HTTP-versoek. Dit maak die antwoord meer kompleks: in die meeste gevalle, met JavaScript eksterne is nog aanbeveel. Maar vir sekere gevalle, veral baie klein stukkies kode, lining hulle in HTML die werf se sin.

Ander wenke

Houdbaarheid is beslis 'n rede om hulle eksterne hou, maar as die opset is 'n one-liner (of in die algemeen korter as die HTTP oorhoofse jy sou kry vir die maak van die lêers eksterne) dis prestasie-wyse beter om hulle inline hou. Onthou altyd dat elke HTTP-versoek genereer sommige oorhoofse in terme van die uitvoering tyd en verkeer.

Natuurlik dit alles raak irrelevant die oomblik jou kode is langer as 'n paar lyne en is nie regtig wat spesifiek op 'n enkele bladsy. Die oomblik wat jy wil in staat wees om dit code hergebruik, maak dit eksterne. As jy dit nie doen nie, kyk na die grootte en besluit dan.

Externaliserend JavaScript is een van die yahoo prestasie reëls: http://developer.yahoo.com/performance/rules.html#external

Hoewel die harde-en-vinnig reël dat jy altyd skrifte moet eksternaliseer sal oor die algemeen 'n goeie verbintenis wees, in sommige gevalle wil jy dalk 'n paar van die skrifte en style inline. Jy moet egter net inline dinge wat jy ken, sal prestasie te verbeter (omdat jy dit het gemeet).

As jy net omgee vir prestasie, die meeste van advies in hierdie draad is plat uit verkeerde, en is besig om meer en meer verkeerd in die SPA era, waar ons kan aanneem dat die bladsy is nutteloos sonder die JS kode. Ek het ontelbare ure optimalisering SPA bladsy laai keer, en te keur hierdie resultate met verskillende blaaiers spandeer. Deur die bank die prestasie verhoog deur weer orkestreer jou html, kan nogal dramaties wees.

Om die beste prestasie te kry, jy het om te dink van bladsye as twee-stadium vuurpyle. Hierdie twee fases rofweg ooreen met <head> en <body> fases, maar dink aan hulle plaas as <static> en <dynamic>. Die statiese gedeelte is basies 'n string konstante wat jy stoot down die reaksie pyp so vinnig as wat jy moontlik kan. Dit kan 'n bietjie lastig wees as jy 'n baie middleware wat stel koekies (hierdie moet ingestel word voordat http inhoud), maar in beginsel is dit net spoel die reaksie buffer, hopelik voor te spring in 'n paar template-kode (skeermes, php gebruik, ens) op die bediener. Dit klink dalk moeilik, maar dan is ek net verduidelik dit verkeerd, want dit is naby triviale. As jy kan raai, moet hierdie statiese gedeelte alle javascript inlined en minified bevat. Dit sou so iets sien 

<!DOCTYPE html>
     <html>
         <head>
             <script>/*...inlined jquery, angular, your code*/</script>
             <style>/* ditto css */</style>
         </head>
         <body>
             <!-- inline all your templates, if applicable -->
             <script type='template-mime' id='1'></script>
             <script type='template-mime' id='2'></script>
             <script type='template-mime' id='3'></script>

Aangesien dit kos jou 'n ei aan hierdie gedeelte af die draad stuur, kan jy verwag dat die kliënt sal begin met die ontvangs van hierdie êrens rondom 5ms + latency na verbinding met jou bediener. Die aanvaarding van die bediener is redelik naby die latency kan wees tussen 20 ms aan 60ms. Browsers begin die verwerking van hierdie artikel so gou as wat hulle kry dit, en die verwerking van die tyd sal gewoonlik oorheers oordrag tyd deur faktor 20 of meer, wat is nou jou geamortiseerde venster vir bediener-kant verwerking van die <dynamic> gedeelte.

Dit neem ongeveer 50ms vir die leser (chroom, rus miskien 20% stadiger) om inline jQuery + signalr + hoekige + ng animate + ng touch + ng roetes + lodash verwerk. Dit is nogal verstommend in en van die self. Die meeste web programme minder kode as al die gewilde biblioteke saam te stel, maar kom ons sê jy het net soveel, so ons sal latency + 100ms van verwerking wen op die kliënt (die latency oorwinning kom uit die tweede oordrag stuk). Teen die tyd dat die tweede deel kom, het ons almal JS kode en templates verwerk en ons kan begin uitvoer dom verander.

Jy kan beswaar maak dat hierdie metode is ortogonaal op die lining konsep, maar dit is nie. As jy, in plaas van lining, verwys na cdns of jou eie servers die leser sal 'n ander verband (e) en vertraging uitvoering oop te maak. Aangesien hierdie uitvoering is basies gratis (as die bediener kant is 'n gesprek met die databasis) moet dit duidelik dat al hierdie spronge meer sou kos wees as om nie spring nie. As daar 'n leser flater wat gesê eksterne JS vinniger ons kan meet wat faktor oorheers voer. My metings dui daarop dat ekstra versoeke doodmaak prestasie op hierdie stadium.

Ek werk 'n baie met die optimalisering van SPA programme. Dit gebeur dikwels dat mense om te dink dat data volume is 'n groot deal, terwyl in waarheid latency, en uitvoering dikwels oorheers. Die minified biblioteke ek gelys voeg tot 300 KB van data, en dit is net 68 kb gzip-formaat, of 200 ms aflaai op 'n 2mbit 3G / 4G selfoon, en dit is presies die latency dit op dieselfde telefoon sou neem om te kyk of dit dieselfde data het in sy kas reeds, selfs al was dit 'n gevolmagtigde cached, omdat die mobiele latency belasting (telefoon-tot-toring-latency) steeds van toepassing. Intussen het die lessenaar verbindings wat laer eerste-hop latency het tipies 'n hoër bandwydte in elk geval.

In kort, nou (2014), is dit die beste om alle skrifte, style en templates Geïntegreerde.

verander (MAY 2016)

As JS aansoeke voortgaan om te groei, en 'n paar van my lading nou stapel te 3+ megagrepe minified kode, is dit besig om voor die hand liggend dat ten minste algemene Weegskaalries moet nie meer inlined.

ek dink die spesifiek vir een bladsy, kort skrif geval is (slegs) verdedigbare saak vir inlynskrif

Eintlik is daar 'n redelik vaste saak te inline JavaScript gebruik. As die JS is klein genoeg (one-liner), ek is geneig om die javascript inline as gevolg van twee faktore verkies:

  • Ligging . Daar is geen behoefte om 'n eksterne lêer gaan na die gedrag van sommige javascript
    • bekragtig
  • AJAX . As jy 'n paar afdeling van die bladsy via AJAX is verfrissend, jy kan al jou DOM hanteerders (onclick, ens) verloor vir daardie artikel, afhangende van hoe jy hulle ingebind. Byvoorbeeld, met behulp van jQuery jy kan óf gebruik die live of delegate metodes om hierdie te omseil nie, maar ek vind dat as die JS is klein genoeg is dit is 'n pre om net sit dit inline.

Nog 'n rede waarom jy moet altyd gebruik eksterne skrifte is vir makliker oorgang na href="http://developer.chrome.com/extensions/contentSecurityPolicy.html" rel="noreferrer"> inhoud veiligheidsbeleid . CSP standaard verbied alle inline script, maak jou site meer bestand teen XSS aanvalle.

Ek wil 'n blik op die vereiste kode neem en verdeel dit in soveel afsonderlike lêers as wat nodig is. Elke JS lêer sal net hou een "logiese stel" van funksies ens bv. een lêer vir alle login verwante funksies.

Toe gedurende webwerf ontwikkeling op elke html bladsy vind jy net sluit in dié wat nodig is. Wanneer jy saam met jou site gaan jy kan optimaliseer deur die kombinasie van elke OTOPE lêer 'n bladsy moet in 'n lêer.

Die enigste verweer wat ek kan bied vir inline JavaScript is dat by die gebruik van sterk getik uitsig met NET MVC jy kan verwys na c # veranderlikes middel javascript wat ek nuttig gevind het.

Drie oorwegings:

  • Hoeveel kode het jy nodig (soms biblioteke is 'n eerste-klas verbruiker)?
  • Spesifisiteit: net hierdie kode funksionele in die konteks van hierdie spesifieke dokument of element
    • ?
  • Elke kode binne-in die dokument is geneig om dit meer en dus stadiger maak. Behalwe dat SEO oorwegings maak dit duidelik dat jy interne script te verminder ...

Eksterne skrifte is ook makliker om te ontfout met behulp van Firebug. Ek wil Eenheid Toets my JavaScript en wat dit alles eksterne help. Ek haat sien JavaScript in PHP-kode en HTML dit lyk soos 'n groot gemors om my.

Nog 'n versteekte voordeel van eksterne skrifte is dat jy dit maklik kan hardloop deur 'n sintaksis checker soos jslint . Wat kan red jy uit 'n baie hartseer, hard-to-vind, IE6 foute.

In jou scenario dit klink soos die skryf van die eksterne dinge in een lêer gedeel tussen die bladsye sal goed wees vir jou. Ek stem saam met alles wat hierbo gesê.

Tydens vroeë prototipe hou jou kode inline vir die voordeel van 'n vinnige iterasie, maar seker wees om dit alles eksterne maak teen die tyd dat jy produksie bereik.

Ek wil nog die moed hê om te sê dat as jy nie kan plaas al jou JavaScript ekstern, dan moet jy 'n slegte ontwerp onder jou hande, en moet jy jou data en skrifte refactor

Google het vrag keer ingesluit in dit se bladsy posisie metings, as jy inline baie, dit sal langer vir die spinnekoppe te neem om te kruip deur jou bladsy, kan dit wees invloed op jou bladsy posisie as jy het om veel ingesluit. in elk geval verskillende strategieë invloed mag hê op jou posisie.

Wel, ek dink dat jy inline moet gebruik wanneer enkele bladsy webtuistes soos skrifte nie nodig het om te deel in verskeie bladsye

Probeer altyd om eksterne Js gebruik as inline JS is altyd moeilik om te onderhou.

Verder, is dit professioneel vereis dat jy 'n eksterne JS gebruik sedert meerderheid van die ontwikkelaars beveel ekstern met behulp van JS.

Ek myself gebruik eksterne JS.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top