J'épuisant une page, mais je ne peux pas dire la différence entre les résultats (le premier est évidemment plus rapide, mais je ne sais pas si cela ralentit le ralentissement de la page un peu ou quelque chose):
Celui-ci lancera la demande dès que possible et modifiera le DOM sur le document Prêt: P>
<script>
$(document).ready(function() {
$.ajax({
url: '/some-url',
success: function() {
// do something
}
});
});
</script>
</body>
3 Réponses :
Les meilleures pratiques ici sont de démarrer la demande EM> AJAX EM> dans les meilleurs délais, mais commencez à modifier le DOM uniquement lorsque le document est prêt ( domcontention chargé em>). Pour ce faire, vous pouvez utiliser des objets différés de jQuerys em> qui sont câblés avec des objets JQHERS étendus JXHR em>. DOM ready
XHR request
-> Do something useful as soon as the DOM and request are ready
Est-ce la même chose que mon premier exemple? Je ne savais pas quand (req) .done (), il semble "plus correct".
@Chocodéveloppeur: Eh bien, c'est un peu près de votre premier exemple, mais comme vous l'avez mentionné correctement, mon exemple est tout simplement correct en termes de commodité. C'est à peu près la demande et l'auditeur pour DomContentready simultanément, mais lorsque l'événement Evénement prêt et la demande n'est pas encore terminée, ça "attend" (attendre "( prudent, c'est juste un rappel) jusqu'à ce que la demande termine le succès.
Il y a deux différences entre Jandy et votre code. Le premier est que vous avez le vôtre juste avant , donc votre $. Ajax Appel commence beaucoup plus tard (ce qui signifie qu'il finira beaucoup plus tard). La deuxième différence est que le code de Jandy utilise plus de méthodes JQuery pour déterminer lorsque le DOM est prêt et que l'appel AJAX a réussi et peut entraîner davantage de retard pour que la méthode réussite (dans l'événement improbable. que la demande AJAX se termine avant que toute la contraignante soit effectuée). Je pense que mettre votre premier exemple sur votre page dès que possible est la meilleure solution
Je ne vois toujours pas la différence cependant. Dans mon premier exemple, je n'attends pas que le document soit prêt à démarrer la demande Ajax. La partie prête du document se produit dans le rappel que je passe à Ajax (). Et cela réussit parce que comme vous l'avez dit, si le document est déjà prêt lorsque je fais la liaison, le rappel est exécuté.
@Chocodéveloppeur: Comme je l'ai mentionné, dans cet exemple particulier, la différence n'est pas énorme. Vous devriez penser à ces deux choses de manière plus abstraite. Les deux sont des tâches asyncréat , vous ne devriez pas les forcer à courir dans l'ordre (pourquoi?). Ils peuvent courir et existe dans un pseudo-parallèle en mode parallèle en démarrant les deux tâches en même temps. Donc, en général, chaque fois que des tâches asynchronisées peuvent coexister, vous ne devez pas visser le spectacle et exécuter toutes les tâches de manière séquentielle. Je ne sais pas comment mieux l'expliquer.
Chocodeveloper La différence mineure est que vous testez d'abord pour réussir, puis attendez DOM Prêt. @Andy fait le contraire, le résultat étant le même (il aurait pu le faire l'inverse aussi). Si vous aviez plus d'une demande AJAX, vous trouverez l'approche d'Andy Nettoyant.
@Christophe Oui c'est comme ça que je le vois, mais il dit que je suis sérialisé les choses. Le seul ordre que j'ai est dans les liaisons, mais il a une commande aussi (un ordre plus correct peut-être, car le document sera prêt avant la fin de la demande): il attend que le document soit prêt, de faire la liaison de le rappel de la demande. Je ne pense pas que les liaisons prennent de toute façon mesurable.
@Chocodéveloppeur Vous avez raison, son commentaire ne doit s'appliquer qu'à votre deuxième extrait, pas à la fois.
Non, le commentaire est vrai pour les deux versions. Comme je l'ai dit, pensez plus abstrait, pas spécifique. Pensez à des tâches asynchronisées pouvant fonctionner en parallèle. Avec mes versions, il est possible que les deux tâches puissent se terminer simultanément, dans les deux versions de l'OP, il est probable que l'une des tâches ralentit l'autre, juste parce que cela n'est même pas autorisé à exécuter avant que l'autre ait fini.
@jandy vous utilisez $ (fonction () {}), qui est identique au document prêt. Donc, vous ne pouvez pas lier le rappel Ajax jusqu'à ce que le document soit prêt.
@CHOCODEVÉLOVEL: True, mon exemple de code a été défectueux de cette façon. Je voulais dire une histoire différente, j'ai changé d'exemple. Maintenant, nous pouvons avoir des rappels pour chaque tâche ASYNC si nous aimerions et un événement "fait" combiné.
@Chocodéveloppeur: Oui .. était une route difficile, mais nous sommes arrivés là-bas: p. Vous avez Ajoutez toujours des événements spécialisés pour chaque tâche / promesse en appelant PromessObject.done (Fonction) ou PromessObject.Fail (Fonction) , En savoir plus chez JQuerys Docs sur Objets différés .
@jandy Le nouveau code est soigné, mais encore une fois, cela ne fait pas beaucoup de différence avec la première version de l'OP. Dans ce premier extrait, seule la fonction de réussite (l'équivalent de FAIT ()) est liée à Dom Ready, pas la demande XHR elle-même, contrairement à ce que votre réponse dit.
@Christophe: Eh bien, je ne suis pas sûr que je peux vous suivre ici. Si cela prend moins de 10 secondes avant DomContentOached est tiré (pour une raison folle), nous pourrions partager cette chronologie avec mon extrait pour le moment où les demandes XHR doivent être terminées. Sinon, cela fonctionnerait toujours séquentiellement.
@jandy correct, je dis simplement que le premier extrait de l'OP fera également cela.
@Christophe: Mais vous êtes toujours faux. $ (document) .Ready (FNC) ne fera rien d'autre que d'ajouter un rappel à la file d'attente, ce qui déclenche lorsque DomContentOached est tiré. Donc, encore une fois, si cela prend une longue période à partir de ce moment-là, vous avez perdu tout le temps, la demande a déjà pris pour y arriver. J'ai répété que maintenant pour 5 fois je suppose: p
@jandy Droite, tu te répèiques et tu n'as pas de point. Votre réponse indique que dans les deux extraits, la demande XHR se produira une fois que le DOM est prêt (voir la flèche dans votre propre diagramme). Ceci est correct pour le deuxième extrait mais pas pour le premier. Il semble que vous confondez la demande XHR et le rappel.
@Christophe: Je ne sais pas si vous êtes à la traîne ou non maintenant. Ce petit diagramme des cascades montre que le principe. Comme je l'ai dit plusieurs fois ici, nous parlons de tâches asynchrones, pas de choses spécifiques. Oubliez Ready ou XHR demande . J'ai vraiment pensé que je me suis rendu clair là-bas.
@jandy je ne pense pas qu'ils traînent. Je ressens la même chose, mais je me suis retenu de commenter parce que cela me confondre toujours. Je pense que nous pouvons ignorer le deuxième exemple de l'OP fourni parce que nous sommes d'accord, il est inutile d'attendre que le document soit prêt à faire appel à Ajax. Je pense que votre solution est géniale et ferait certainement tout accomplir efficacement. Je pense que quelque chose d'important à signaler est que, avec votre solution, vous êtes TOUJOURS Création de 2 tâches asynchrones. Si vous utilisez le code de l'OP, il y a définitivement 1 (l'AJAX) et un autre que si DOM n'est pas prêt au succès
Avec le code de l'OP, ils accomplissent ce que vous faites, mais de manière "couplée" ... c'est la même chose que la vôtre, mais avec la possibilité d'une tâche seulement. Ce n'est pas comme si tu remardies jamais la différence, mais votre exemple utilise beaucoup plus de traitement car comme je l'ai dit, il lie toujours l'événement , puis toute la logique que JQuery doit utiliser pour le $. Quand et .done . Par "beaucoup", je veux dire que les deux extraits appellent $. Ajax et $ (document) .Ready , mais le vôtre fait plus ... pendant qu'ils accomplissent le même.
Depuis le $ (document) .Ready est à l'intérieur du succès , c'est le "même" que $. Quand (req) . Ensuite, comme la prochaine chose séquentielle, la reliure $ (document) .Ready accomplit $. Quand (docready) . Mais encore une fois, il n'utilise pas la logique supplémentaire pour créer en réalité un objet différé et la liaison du quand et effectué trucs. Et enfin, le code de l'OP ne soutient que la manipulation du DOM étant prêt si la demande AJAX est un Succès . Avec votre code, Tout (liaisons et logique) est TOUJOURS fait.
@Ian thx pour avoir sauté dans :-) J'ai réalisé plus tard que certaines de la confusion proviennent également de la balise (cf. Mon commentaire sous votre propre réponse).
@Ian: Oui, je suppose que j'avais besoin de quelques heures de sommeil pour réaliser ce que @christophe a essayé de me dire tout le temps. $. fn.Ready ne déclenche aucun processus, juste contraignant (thats où ma confusion est issue). L'exemple abstrait que je parlais n'est que vrai, si nous maudissons avec plusieurs processus async, qui commencent par appeler quelque chose.
Dans cet exemple simple, les deux versions doivent faire. Lequel est le mieux dépend de votre page et d'autres scripts. Si votre script est un peu plus complexe et que vous devez transmettre des données sur la demande AJAX qui doit être extraite de la page, et votre page n'est pas prête à ce moment-là - vous aurez une erreur.
Une autre chose est que tout script sur votre page bloquera le navigateur lorsqu'il est traité, de sorte qu'un code plus complexe sans Doc-prêt autour de celui-ci peut conduire à une courte escale du processus de rendu de page. Dans la plupart des cas, je préfère laisser le navigateur de charger tout HTML, CSS et le JS - et après cela, commencez mon amélioration progressive et mon chargement de contenu supplémentaire.
Mais encore une fois - dans ce cas simple - je ne vois pas une grande différence.
Depuis Vérification de la vérification de la DOM est prête à l'intérieur de Aussi, votre exemple où vous utilisez $. Ajax ne dépend de rien du DOM, il n'y a aucune raison pour que vous ne puissiez pas l'appeler dès que possible. Dans ce cas, je le mettrais dans la section Succès est nécessaire pour vous et c'est le moyen le plus rapide que votre code soit exécuté. Utilisation de $. Quand (req) .done (fonction (fonction () {}) crée 2 autres appels de méthode JQuery qui peuvent ou non retarder de manière significative l'exécution de votre code Cela le retardera, mais cela sera probablement insignifiant.
document.Ready dans votre succès crée la "forte> possibilité que le DOM est prêt et peut exécuter immédiatement (Dans le cas où la demande AJAX se termine avant que le DOM soit pleinement chargé, ce que je ne m'attendais pas). Dans l'exemple de Jandy où Document.Ready est exécuté immédiatement après $. Ajax , il garantit qu'il liera un gestionnaire d'événements pour le document prêt. ..qui signifie qu'il doit être stocké (à l'origine de la DOM plus tard), puis recherché plus tard lorsque l'événement survient et exécuté. Encore une fois, la différence est
Êtes-vous à 100% sûr qu'il est correct d'exécuter quelque chose avant la fin du corps? Je crois comprendre que je ne fais que faire des liaisons, mais je pensais que c'était une sorte de non-entouré, une règle d'or.
@Chocodéveloppeur Je ne suis pas sûr de comprendre. Demandez-vous si c'est bien de courir JavaScript n'importe où juste avant ? JavaScript peut être exécuté n'importe où dans la tête et le corps, je crois. Mais bien sûr, un élément DOM ne peut pas être manipulé tant qu'il n'est pas prêt (ce qui est immédiatement après l'analyse de la page). Mettre les choses à la fin du corps est une manière organisationnelle de s'assurer que tous les éléments du corps sont prêts et conservent tout le code JavaScript ensemble.
Oui, je lis toujours cela pour l'optimisation (pas seulement une organisation), vous devez mettre tout votre JS juste avant , jamais au milieu du corps, ni dans la tête. Je ne sais pas exactement pourquoi.
Je pense donc que la raison de cela est que JavaScript Blocks Dom analyse / rendu. Comme la page est analysée de haut en bas, tout est traité. Ainsi, lorsque vous allez du haut en bas, vous pouvez obtenir du HTML ici, certains JavaScript, et je ne suis pas sûr de CSS. Mais de toute façon, à cause de ces petits retards ici et là de l'exécution JavaScript (même s'il s'agit simplement d'une fonction pour un événement), il peut car la page ne rend pas aussi bien que si vous pouviez Mettez tout JavaScript après que vous connaissiez que tous les éléments sont prêts (à la fin du corps).
De manière organisationnelle, c'est bien. C'est à vous de décider de séparer votre JavaScript - certains dans la tête, certains au bout du corps, certains au milieu du corps si nécessaire. Quelque chose comme une demande HTTP asynchrone ne vous ralentira pas beaucoup, car le seul délai qu'il faut, c'est la configuration et l'envoi de l'envoi ... La réponse est asynchrone, de sorte que la page est autorisée à continuer de rendu au lieu d'attendre la réponse . Idemh avec la liaison d'événement pour document.Ready - Toutes JQuery fait stocke une référence à la fonction que vous souhaitez exécuter pour l'événement - la fonction s'exécute plus tard.
@Chocodéveloppeur "Vous devez mettre tout votre JS juste avant " => Je pense que c'est une règle "ancienne" pour éviter de bloquer le rendu de la page. Maintenant que le codage ASYNC est devenu la norme (AMD, AJAX, différé) Ce n'est plus si vrai.
@whirlwin je le fais déjà dans les deux cas. Ou vous voulez dire après la fermeture de la balise?
Non, vous faites déjà ce que j'essayais d'expliquer.
Si vous attendez que le document soit prêt dans le succès, cela n'atteignez-vous pas le rendu de la page jusqu'à ce que le succès soit effectué en raison de la nature du fil unique de JavaScript?
@ Françoiswahl Non, la page ne "attendra" pour qu'il soit prêt. Dans
Succès , ils lieraient un nouvel événement "prêt" au document. Si le document est déjà prêt d'ici l'heureSuccès exécute, la fonction pour$ (document) .Ready n'exécutera pas.@ Françoiswahl Je pense que vous ne pouvez pas "attendre" en JavaScript, même si vous le souhaitez.
@Ian: C'est juste faux.
jquery.fn.ready Toujours Le feu, même si le DOM était déjà prêt avant.@jandy Yep, je viens de comprendre ça. Je n'en avais aucune idée. Ce n'est tout simplement pas ce que je voudrais "attendre"