Hei,
Sellainen aloittelijan kysymys. Haluaisin käyttää omaa JavaScriptiä vain index.php -tiedostossa. Ongelma on se että index.php tiedoston lopussa lataan footer.php -tiedoston jossa suljetaan tiedosto tuttuun tapaan
</body>
</html>
Eikö yleensä footer tiedosto lisätä kaikkiin tiedostoihin lopussa ja footer tiedostossa usein sijaitsee javascript. Nyt näin:
<!-- Alaosa -->
<footer>
...
</footer><!-- /alaosa -->
<!-- Toiminnallisuus -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
<script>
$(document).foundation(
// Muuta tekstiä etusivulla
$('.home-link').attr('href', '#'),
$('.work-link').attr('href', '#work'),
$('.cv-link').attr('href', '#cv')
);
</script>Eli teen versiota 5.0.2 omista kotisivuistani.
Mod. vaihtoi oikeat kooditagit!
Ei, skriptit eivät yleensä sijaitse footerissa vaan headerissa, ja yleensä ei käytetä mitään footer.php:tä ja includea vaan koodataan ne sivut kunnolla funktioilla tai luokilla, kuten sinullekin on varmasti kerrottu jo monta kertaa. Jos sinulla on vaikeuksia saada script-tagit head-tagien väliin, olet toteuttanut sivut huonolla tavalla.
Okei, kiitän. Mielestäni Foundationissa nuo JavaScript tiedostot ovat lopussa. Vain Modernizer <head> osassa.
Tästä tulee ihan mielen vanha juttu:
– Doctor, it hurts when I do this.
– Then don’t do that!
Jos haluat käyttää JavaScriptiä index.php-tiedoston lopussa ja siellä toisaalta includoidaan footer.php, jossa on jostain oudosta syystä body- ja html-elementin lopetustägi, niin kirjoitat tietysti JavaScript-koodisi ennen sellaista includea.
P.S. Jos käpistelet JavaScriptillä sivun olennaisia linkkejä, kuten näyt tekevän, niin kilpailijasi olisivat hyvin tyytyväisiä, jos sivujesi kanssa kannattaisi kilpailla. Sillä tavallahan pelaat itseäsi ulos hakukoneista aika tehokkaasti, ainakin, jos linkit eivät toimi (ei osoitetta lainkaan tai väärä osoite) ilman JavaScriptiä.
Yucca kirjoitti:
Jos haluat käyttää JavaScriptiä index.php-tiedoston lopussa ja siellä toisaalta includoidaan footer.php, jossa on jostain oudosta syystä body- ja html-elementin lopetustägi, niin kirjoitat tietysti JavaScript-koodisi ennen sellaista includea.
Olen ollut siinä luulossa että footer.php -tiedostossa aina lopetus.
</body>
</html>
Yucca kirjoitti:
P.S. Jos käpistelet JavaScriptillä sivun olennaisia linkkejä, kuten näyt tekevän, niin kilpailijasi olisivat hyvin tyytyväisiä, jos sivujesi kanssa kannattaisi kilpailla. Sillä tavallahan pelaat itseäsi ulos hakukoneista aika tehokkaasti, ainakin, jos linkit eivät toimi (ei osoitetta lainkaan tai väärä osoite) ilman JavaScriptiä.
Juu.. yritän tehdä niin että index.php tiedostossa ei ladattaisi koko sivua uudestaan kun klikataan etusivua, työt, cv -linkkejä. Onkohan tämä sitten lainkaan järkevää. Sen vain sanon loppuun että ihmettelen jälleen putkassa vallitsevaa hyökkäävää asennetta. Eli minulle on taas kerrottu ties kuinka monta kertaa miten sivustoja tehdään jne.
Ainakin tuossa Foundationissa olen saanut sen käsityksen että on hyvä asia että JS-tiedostot juuri ennen </body> lopetusta. Myös Tuts+ Premium -videotutoriaaleissa opetetaan näin. No mutta parempi että aloittaisin jonkun JavaScript kurssin joka tapauksessa. Kiitos avusta Yucca, Metabolix.
late kirjoitti:
Olen ollut siinä luulossa että footer.php -tiedostossa aina lopetus.
On huono idea liittää includella HTML-koodia, ja vaikka tekisitkin sen, mikset voi laittaa skriptejä jo ennen include-riviä?
late kirjoitti:
Juu.. yritän tehdä niin että index.php tiedostossa ei ladattaisi koko sivua uudestaan kun klikataan etusivua, työt, cv -linkkejä.
Ei se ole mikään syy asettaa href-attribuutteja JavaScriptilla. Laita kaikki sisältö samalle sivulle ja tee tavallisia linkkejä, ja jos haluat jonkin hienon efektin osion vaihtoon, koodaa se vasta siinä vaiheessa, kun sivu on ilman JavaScriptia täysin toimiva. (Jos sisältöä pitää ladata AJAXilla, tee ensin sivut toimiviksi erikseen ja lisää sitten se JS-koodi, jolla sivu vaihtuu hienommin.)
late kirjoitti:
Ainakin tuossa Foundationissa olen saanut sen käsityksen että on hyvä asia että JS-tiedostot juuri ennen </body> lopetusta.
Oletko saanut käsityksen, että se on hyvä, vai oletko vain saanut käsityksen, että Foundationissa tehdään niin? Tiedätkö mitään perusteluja asian puolesta tai sitä vastaan?
Skriptien laittaminen sivun loppuun on kikkailua, jolla paikataan joskus koodareiden tyhmyyttä tai laiskuutta (DOM-puu on käytettävissä) ja usein verkon tai selainten hitautta (skriptit ladataan vasta sivun sisällön jälkeen). Yleensä voi aivan hyvin laittaa skriptit sivun alkuun, ja jos haluaa viivyttää niiden latautumista, voi käyttää defer- ja async-attribuutteja.
Skriptien lataaminen on aika hankala aihe kun siihen pääsee tarpeeksi syvälle. Yhtä oikeaa vastausta ei ole.
Ilman async tai defer -attribuuttia skripti on ns. blokkaava: sivua ei renderöidä ennen kuin skripti on ladattu, koska skripti saattaa tulostaa jotakin ja se tulee sijoittaa oikeaan kohtaan HTML:ssä. Opera taisi olla kehittelemässä jotakin tekniikkaa, joka muistaisi mihin kohtaan skriptin tulosteen tulisi tulla, jolloin selain pystyisi lataamaan skriptiä keskeyttämättä sivun renderöintiä. Tällä hetkellä ainutkaan selain ei kuitenkaan käytä kuvatunlaista tekniikkaa, joten skriptit ovat oletuksena aina blokkaavia.
Defer aiheuttaa sen, että selain alkaa ladata skriptiä, mutta ei suorita sitä ennen kuin DOM on käsitelty. Skriptit suoritetaan siinä järjestyksessä kuin ne on määritetty HTML:ssä. Huonona puolena tässä on se, että kun skripti ladataan headissä, niin se on yksi putki vähemmän sivun sisällön resurssien lataamiseen. Eli skriptin lataaminen alkaa ennen kuin vaikkapa jonkin kuvan lataaminen ja useimmiten sisältö olisi ensisijaisempi ladattava kuin skripti. Varsinkin vanhoilla selaimilla (kuten IE8) on hyvin rajallinen määrä yhteyksiä per palvelin, mikä on saanut monet sijoittamaan skriptit ennemmin sivun loppuun kuin deferillä sivun alkuun. Toinen paha juttu vanhoissa selaimissa sekä monissa mobiiliselaimissa on se, että ne eivät oikein tykkää isoista JS-mälleistä, joten aina edes kaikkien skriptien mifiointi yhdeksi tai kahdeksi isoksi palloksi ei ole vaihtoehto kun halutaan kiertää skriptien blokkaavuus.
Async taas lataa skriptiä aivan kuten defer, mutta skripti suoritetaan välittömästi kun se on ladattu. Lopputuloksena latausjärjestys on täysin sattumanvarainen. Näistä vaihtoehdoista async on paras, mutta myös hankalin: useimmiten skripteillä on riippuvuuksia toisistaan kun ensin ladataan kirjasto (esimerkiksi erillisestä CDN:stä) ja sitten mahdollisesti jokin plugini ja lopuksi oma koodi. Asynkronisen lataamisen hallitseminen on hankalaa touhua ja vaatii aika paljon paneutumista, minkä vuoksi sitä ei aivan joka paikassa näe tosielämän käytössä. Googlen Analytics ja vastaavat ovat helpoimpia tapauksia. Ne on jo valmiiksi suunniteltu asynkroniseksi, eikä niihin usein edes tarvitse viitata montaakaan kertaa.
Järkevällä asynkronisella lataamisella on mahdollista toteuttaa sivusto, joka jo ensimmäisellä latauskerralla tulee käyttäjän naaman eteen mahdollisimman nopeasti: ensin ladataan olennaisimmat kirjastot ja sitten aletaan lisätä uusia asynkronisia skriptejä sivuille. Koko touhun boottaavakin skripti voi olla asynkroninen, eli tavallaan se boottaa itse itsensä.
Esimerkiksi Putka feilaa blokkaamisen osalta aika vahvasti, koska skriptit tarvitsee ladata ja niitä on hirmuisan paljon headissä (samoin kuin erillisiä CSS-tiedostoja). Yhteydet yksinkertaisesti loppuu kesken. Toki ne tiedostot jäävät sitten kakkuun ja ensimmäisen sivunlatauksen jälkeiset kerrat ovat nopeita, mutta ensimmäistä visiittiä tekevä saattaa jättää esimerkiksi kännykällä touhun kesken kun käyttäjä näkee valkoista sivua pahimmillaan kymmeniä sekunteja: jos yhdenkin skriptin latauksessa on häikkää, niin sivua ei näy ennen kuin timeoutit iskee. Ja tämä siis voi käydä deferistä huolimatta.
Tässä kiinnostuneille Ohjelmointiputka.net vs Verkkokauppa.com - Putka häviää ensilatauksessa reippaasti vaikka Verkkokaupalla on kaikkea paljon enemmän. Perspektiiviin laitettuna tilanne on kuitenkin ookoo: Putka on harrastesivusto, joten sen ei tarvitse olla jokaiselle ensimmäistä kertaa latautuessaan nopea. Käyttäjä tulee paikalle, koska sisältö kiinnostaa ja on valmis myös odottelemaan ensilatauksen vaivan. Verkkokauppa.com taas on kaupallinen sivusto, joten ensimmäistä kertaa paikalle tuleva käyttäjä on asiakas, joka on todennäköisesti hyvin kärsimätön ja haluaa vain löytää etsimänsä.
Summa summarum: skriptien lataus bodyn lopussa ei ole täysin järjetöntä, eikä defer-attribuutti ole toisaalta sellainen kaikki ongelmat ratkaiseva faarao. Asynkroninen lataus olisi paras vaihtoehto, mutta sen rakentaminen on työlästä, koska se pitää ottaa lähes jokaisen skriptin toteutuksessa huomioon, jotta koodit saa suoritettua oikeassa järjestyksessä.
Merri kirjoitti:
Tässä kiinnostuneille Ohjelmointiputka.net vs Verkkokauppa.com
Aika epäreilu vertailu, koska näiden sivustojen palvelinresurssit ovat taatusti aivan eri luokkaa. Putkan webhotellissa tavallisetkin sivunlataukset jumittavat usein ihan ihmeellisesti, ja joskus tuurilla tuo ensilataus tapahtuu alle sekunnissa. Putkaa hidastanee massiivisesti mm. se, että webhotelli sulkee yhteyhden joka pyynnön jälkeen, kun taas Verkkokaupassa toimii Keep-Alive. Laitetaanpa Verkkokauppa.com samanlaiseen webhotelliin ilman CDN:tä ja katsotaan, latautuuko alle minuutissa.
Mutta kun nyt noin kamalasti haukuit, optimoin vähän, joten aja kaikin mokomin testisi uudestaan.
Merri kirjoitti:
eikä defer-attribuutti ole toisaalta sellainen kaikki ongelmat ratkaiseva faarao
Jokin sellainen faarao pitäisi selvästi saada selaimiin. On ihan typerää tehdä purkkaviritelmiä joka sivulle, kun kuitenkin JS:n käyttö on nykyään hyvin usein sellaista, että sivun voi näyttää ensin ja skriptit ladata myöhemmin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.