JavaScript asynchroon laden, waneer gebruik je het?

Door Ariën op 12-11-2014 17:40

7.764 views

Ik vroeg me eigenlijk af: Waneer moet je een JS-file die je in je site inlaadt nou asynchroon inladen?
Ik zie vaak dat deze aan het einde van de body-sectie worden ingeladen, waarbij ze op het laatst dus worden ingeladen. Maar soms zie ik ook wel eens dat ze Asynchroon (dus via AJAX worden ingeladen).

Nu vroeg ik me af, wanneer laad je JS-files nou asynchroon in? Kan je dat altijd doen, of heeft dat nadelen? Of gebruik je het alleen als de data in je JS-file ook weer dynamisch is en direct ergens opgehaald wordt?

Iemand die wat meer uitleg hierover kan bieden?

Perry Saarloos

12-11-2014 21:31

Een .js of ook wel Javascript wordt Asynchroon (Uitgesteld) Om te voorkomen dat JavaScript het laden van een pagina blokkeert, het laden via ajax kan maar is uiteraard zwaarder dan simpel HTML-kenmerk te gebruiken om JavaScript te laden. Bijvoorbeeld: <script async src="javascriptbestand.js"> en of dit snelheid behaald heb het gisteren uitgetest en bevalt prima AJAX laad opmerkelijk trager dan HTML :)

:-)

Ariën

16-11-2014 22:53 gewijzigd op 16-11-2014 22:53

Dus het beste is om de JS's onderaan de pagina in te laden, en Asynchroon alleen te gebruiken als de JS ook echt steeds met de buitenwereld (zoals Google Analytics) communiceert?

Wouter J

16-11-2014 23:28 gewijzigd op 16-11-2014 23:30

Wanneer je iets onderaan plaatst zal het niet het laden van de pagina blokkeren. De bezoeker zal alles iets langer (en waar praten we nou over :P) het laad icoontje in de favicon zien, maar wel door de site navigeren.

JavaScript asynchroon laden heeft het voordeel dat je er eerst JavaScript logic op kan toepassen. Bijv. yepnope.js (welke overigens tegenwoordig deprecated is):
[code lang=js]yepnope({
test: // ... test if browser supports requestAnimationFrame
yep: ['the_js_with_requestanimation_frame.js'],
nope: ['the_js_with_an_older_fallback.js']
});[/code]

Ook is het tegenwoordig helemaal in om Require.js te gebruiken. Ik gebruik dat ook en het bevalt me zeer goed :) Voorbeeldje:
[code file="app/component/user_list.js" lang=js]require(['jquery'], function ($) {
return function (selector) {
var users = ...;

users.forEach(function(user) {
$(selector).append('<li>' + user.name + '</li>');
});
};
});[/code]
[code file="app/page/users.js" lang=js]require(['component/user_list'], function (userList) {
userList('#js-user-list');
});[/code]
[code file="users.html"]<!doctype html>

<script src="vendor/requirejs/require.js"></script>
<script>
requirejs.config({
baseUrl: 'app/',
// ...
});

require(['page/users'], function (initialize) {
initialize();
});
</script>[/code]

Eddy E

17-11-2014 08:07

- Aar - op 16/11/2014 22:53:44

Dus het beste is om de JS's onderaan de pagina in te laden, en Asynchroon alleen te gebruiken als de JS ook echt steeds met de buitenwereld (zoals Google Analytics) communiceert?

Dat is momenteel wel de huidige tendens.
Javascript is niet per se nodig voor de werking van de website (bekijken, interactie is wat anders) en moet dus na de HTML, CSS en <img>'s komen.
Er is niets vervelender dan moeten wachten op iets wat niet nodig is, terwijl ik alleen maar wat tekst/plaatjes wil kijken.

En met goede caching is CSS/Javascript ook zo binnen.
Dynamische Javascript kan je daarom wellicht ook beter gewoon in de HTML (in een <script>) zetten en niet als los bestand.
De data binnenhalen gaat meestal snel genoeg (breedband internet overal), alleen het aantal HTTP-requests maakt het trager.

Reageren

Inloggen om te reageren