JavaScript asynchroon laden, waneer gebruik je het?
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?
:-)
Gewijzigd op 16/11/2014 22:53:59 door - Ariën -
JavaScript asynchroon laden heeft het voordeel dat je er eerst JavaScript logic op kan toepassen. Bijv. yepnope.js (welke overigens tegenwoordig deprecated is):
Code (js)
1
2
3
4
5
2
3
4
5
yepnope({
test: // ... test if browser supports requestAnimationFrame
yep: ['the_js_with_requestanimation_frame.js'],
nope: ['the_js_with_an_older_fallback.js']
});
test: // ... test if browser supports requestAnimationFrame
yep: ['the_js_with_requestanimation_frame.js'],
nope: ['the_js_with_an_older_fallback.js']
});
Ook is het tegenwoordig helemaal in om Require.js te gebruiken. Ik gebruik dat ook en het bevalt me zeer goed :) Voorbeeldje:
Code (app/component/user_list.js) (js)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
require(['jquery'], function ($) {
return function (selector) {
var users = ...;
users.forEach(function(user) {
$(selector).append('<li>' + user.name + '</li>');
});
};
});
return function (selector) {
var users = ...;
users.forEach(function(user) {
$(selector).append('<li>' + user.name + '</li>');
});
};
});
Code (app/page/users.js) (js)
1
2
3
2
3
require(['component/user_list'], function (userList) {
userList('#js-user-list');
});
userList('#js-user-list');
});
Code (users.html) (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<!-- ... -->
<script src="vendor/requirejs/require.js"></script>
<script>
requirejs.config({
baseUrl: 'app/',
// ...
});
require(['page/users'], function (initialize) {
initialize();
});
</script>
<!-- ... -->
<script src="vendor/requirejs/require.js"></script>
<script>
requirejs.config({
baseUrl: 'app/',
// ...
});
require(['page/users'], function (initialize) {
initialize();
});
</script>
Gewijzigd op 16/11/2014 23:30:17 door Wouter J
- 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.