32 votes

Pourquoi jQuery.ready est-il recommandé quand il est si lent?

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...

8voto

ggozad Points 8910

Pour le premier point:

Non, il n'y a pas d'inconvénient à vous appelle init avant la clôture de l' <body>. Il sera comme vous l'avez remarqué mieux performer que s'appuyant sur $.ready() et travaillera également avec tous les navigateurs sans problème (même sur IE).

Maintenant, il y a toutefois des raisons de l'utilisation d' $.ready(), ce qui, dans votre cas, ils n'ont probablement pas s'appliquer:

  1. $.ready() , il est facile pour les développeurs de faire les choses dans le bon ordre. En particulier, la chose la plus critique est de pas référence à des éléments du DOM qui n'ont pas été chargé. Bien que ce soit assez simple, beaucoup de développeurs toujours trouver qu'il est source de confusion. $.ready() est un no-brainer, quoique lente.
  2. Vous avez le dire plusieurs scripts qui ont besoin d' init(), c'est pas forcément facile/pratique pour manuellement le faire à la fin de votre corps. Il exige de la discipline et de la connaissance de ce que ces scripts ne. En particulier, vous verrez souvent $.ready() dans les bibliothèques dépend de jQuery, car il fait fonctionner les choses, peu importe quelle manière les développeurs de charge de la libs.
  3. Avec Asynchrone de Définition de Module (par exemple require.jsplus populaire comme un moyen de charger votre javascript, la fin de l' <body/> méthode n'est pas garantie.

6voto

nfechner Points 9402

Un avantage serait, que vous êtes en mesure de placer le code n'importe où dans la page. Dans notre cas, nous utilisons un système de templating dans notre CMS qui coud la page ensemble à partir d'environ 10 - 30 modèles pour les différentes parties (selon la complexité).

Puisque vous voulez que les modèles fonctionnent sur n'importe quelle page qu'ils sont utilisés, vous devez inclure le Javascript nécessaire en elle. Pour ces cas, la `` fonction est un véritable sauveur de vie.

2voto

nnnnnn Points 70578

Si vous avez écrit un fichier JS que d'autres personnes s'y compris dans leurs pages, il est plus sûr d'utiliser document.prêt à l'intérieur du fichier (en supposant qu'il doit effectuer une transformation automatiquement après que le DOM est prêt) parce que vous ne pouvez pas être sûr que le fichier sera inclus dans la tête ou à la fin du corps.

Quand il s'agit de pages que vous avez le contrôle complet sur alors évidemment, vous n'avez pas ce soucis, donc je ne vois pas qu'il est plus "safe" à l'utilisation.prêt plutôt que d'appeler votre init() à partir de la fin du corps. À l'aide de document.prêt (ou onload) et de mettre le script à la fin du corps sont les deux façons les plus courantes de le faire, et ils sont communs parce qu'ils travaillent tous les deux bien.

Vous avez mentionné document.write() comme une exception possible, mais vous ne voulez pas faire appel qu'à partir d'un document.prêt ou à la fin du corps, car de toute façon l'ensemble de la page a déjà été analysée.

0voto

Kevin Points 1618

Parce qu'il rend domReady et window.load plus lent.

Il est facile d'optimiser la métrique, plutôt que l'expérience utilisateur réelle. Ainsi, les graphiques d'optimisation de l'utilisateur réel descendent, même si l'interactivité est retardée.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X