J'ai posé une question similaire avant, mais je n'ai jamais fait mon point de vue tout à fait clair, ou, au moins, je pense que c'est une question pertinente qu'il vaut la peine de le mettre et de voir si quelqu'un peut donner un peu perspicace pensées.
Lors de l'utilisation de jQuery, nous sommes nombreux à utiliser l' jQuery.ready
la fonction à exécuter un init
lorsque le DOM est chargé. Il est devenu le standard de facto pour l'ajout d'programmes de manipulation du DOM d'une page web à l'aide de jQuery. Un événement connexe existe nativement certains navigateurs, mais jQuery qui émule dans d'autres navigateurs, tels que certaines versions IE. Exemple:
<head>
<script>
var init = function() { alert('hello world'); };
$.ready(init);
</script>
Maintenant, tous nos tests montrent que cet événement peut être assez lente. Il n'est pas aussi lent qu' window.onload
, mais il est encore souvent autour de 100 ms de retard avant l'exécution. Si FF il peut être jusqu'à 200 à 300 ms, en particulier à l'actualisation.
Ce sont quelques millisecondes, parce que c'est la quantité de temps que la mise en page initiale est affichée avant toutes manipulations DOM (comme le masquage d'une liste déroulante). De nombreuses fois, une mise en page "flicker" est principalement causé par l'utilisation d'une lente DOM prêt événement, forçant les programmeurs pour masquer les éléments à l'aide de CSS à la place, et qui pourrait le rendre moins accessible.
Maintenant, si nous nous y mettre à la place d'une fonction init dans une balise de script avant la fermeture de la balise body, il sera exécuté beaucoup plus rapidement, généralement environ la moitié du temps, mais parfois même plus vite:
<head>
<script>
var init = function() { alert('hello world'); };
</script>
</head>
<body>
<!-- some HTML -->
<script>init();</script>
</body>
Une simple page de test qui prouve que les différences: http://jsbin.com/aqifon/10
Je veux dire, nous ne parlons pas de peine perceptible différences comme une partie de la "optimisation de la police" favorise quand il s'agit de l'utilisation efficace des sélecteurs. Nous parlons de certains retards les plus importants lorsque vous faites les manipulations DOM onload. Essayez cet exemple dans FF, domready peut parfois être plus de 100 fois plus lent (300 ms vs 2ms).
Maintenant à ma question: Pourquoi est - jQuery.ready
recommandé d'utiliser, lorsque c'est évidemment beaucoup plus lent que d'autres alternatives? Et quels sont les inconvénients de l'appel de la init
avant de fermer le CORPS vs l'aide d' jQuery.ready
? C'est sans doute plus "safe" pour utiliser domReady
, mais dans quel contexte est-il plus sûr que l'autre option? (Je pense à des trucs comme document.write
différés et les scripts), Nous avons utilisé l' BODY
moyen de près de 5 ans sur de nombreux sites clients, et nous n'avons jamais rencontré de problèmes. C'est juste beaucoup plus rapide.
Je me demande aussi, car il y a tellement de fuzz sur jsPerf et l'optimisation des sélecteurs pour un couple de ms par 10 000 exécutions, comment se fait-il n'y a pas beaucoup de parler de ce sujet? En gros, c'est le premier retard, l'utilisateur fait face, et il semble être assez simple pour la tranche de 50 à 100 ms sur chaque chargement de la page...