Face à cette incontournable question quand apparait le besoin d’optimisé le chargement de ses pages, une très bonne réponse est donnée dans ce post StackOverflow.
En résumé, l’état de l’art actuel est de mettre dans l’entête de son code HTML, , le chargement des bibliothèques JS en async ou defer (si l’ordre d’exécution de scripts est important), et d’intialiser / modifier le contenu de vos pages dans vos une fois la page chargée à l’aide d’un callback ready :
HTML :
<script src="path/to/librairie1.js" async></script>
<script src="path/to/my-script.js" async></script>
Javascript :
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// Cette fonction est executée quand le DOM est prêt
// c'est-à-dire quand le document a été parsé
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
Si votre souhait est d’adapter le contenu de votre site à la taille de l’écran, ce sont les média queries CSS qui vous seront utiles. Il existe de plus une fonctionnalité Javascript window.matchMedia pour tester dans quel cas de media query on se trouve, par exemple :
let mql = window.matchMedia('(max-width: 600px)');
Si votre souhait est de détecter des fonctionnalités particulière du navigateur, vous pouvez utiliser la librairie modernizr
Remarque : une méthode simple et longtemps utilisée était de détecter une chaîne dans le nom du navigator.userAgent. Cette méthode n’est plus recommandée dans les bonnes pratiques.