Est événement DOMContentLoaded EXACTEMENT le même que jQuery .prêt() la fonction?

J'ai remplacé window.addEventListener('DOMContentLoaded', function() {}); avec jQuery $(document).bind('ready', function() {});, parce que la première ne fonctionne pas sur IE < 9 et je n'ai pas envie de jouer avec .attachEvent() pour que mannequin navigateur, si je pouvais avoir ce bien couverts par jQuery lui-même.

Peu de temps après le remplacement, j'ai remarqué que DOMContentLoaded événement était toujours tiré autour de 0 à 2 millisecondes après le chargement de la page /actualiser (du moins c'est ce qui a été enregistré par mon journalisation script), tandis que .ready() il faut toujours au moins 15 à 20 millisecondes, après actualisation de la page, pour être déclenché (encore une fois - comme enregistré par le script).

Je demande purement pour nourrir ma curiosité, pourquoi il ya un tel "significative" de retard? Bien sûr, il n'y a pas de problème pour moi, que jQuery est tir que plus tard. C'est juste, c'est parce que je veux connaître TOUTES les réponses (et régner sur le monde! :]), Je ne peux pas dormir avec! :]

MODIFIER: dans .prêt() la fonction doc certains d'utilisateur (Pseudo (de Nexxar)) souligne que: "jQuery simule la non-existence de "DOMContentLoaded" événement sur IE, mais le mécanisme utilisé des feux beaucoup plus tard que l'événement utilisé sur d'autres navigateurs". C'est peut-être le même, je vous demande?

InformationsquelleAutor trejder | 2012-07-17

21

En supposant navigateur qui prend en charge l'événement:
1. L'événement réel peut soutenir n'importe quel document. jQuery n'utilisera que les document il a été chargé, peu importe ce que vous lui transmettez.
2. jQuery déclenche l'événement de manière asynchrone, même si l'événement a déjà eu lieu. Fixation 'DOMContentLoaded' événement ne fait rien si l'événement a déjà eu lieu.
Il n'y a pas de retard dans ces navigateurs, voir http://jsfiddle.net/rqTAX/3/ (les décalages enregistrés sont en millisecondes).

Pour les navigateurs qui ne supportent pas le cas, jQuery sera bien évidemment le travail pour eux. Il va utiliser un hacky mécanisme qui n'est pas le même que le vrai DOMContentLoaded et ne sera pas nécessairement le feu dès que le réel DOMContentLoaded serait:
```
//The DOM ready check for Internet Explorer
function doScrollCheck() {
    if ( jQuery.isReady ) {
        return;
    }

    try {
        //If IE is used, use the trick by Diego Perini
        //http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch(e) {
        setTimeout( doScrollCheck, 1 );
        return;
    }

    //and execute any waiting functions
    jQuery.ready();
}
```
- Si je ne suis pas vous faire de mal, votre réponse n'explique pourquoi il pourrait y avoir un retard (changement de temps, lorsque l'événement est déclenché) dans les navigateurs qui NE supportent PAS DOMContentLoaded (comme IE < 9). Mais j'ai testé la chose dans un navigateur qui a sûrement le supporte (Chrome 20 et Firefox 13) et a obtenu des délais de l'ordre de 15 à 20 secondes dans les deux navigateurs.
- désolé, je ne suis pas le voir quoi que ce soit que ce soit. Voir jsfiddle.net/rqTAX/3. Les différences sont comme de 5 à 20 millisecondes. Dans chrome et firefox
- Pas besoin de le regretter! :] C'était purement de ma curiosité. Peut-être que j'ai raté quelque chose. Je pense que nous pouvons clore ce sujet, comme pour moi. Merci!
- eh bien, vous pourriez au moins accepter ma réponse pour fournir les 2 différences au haut que la plupart des gens ne le savent pas 😉 Btw, vous devez utiliser $(document).ready au lieu de .bind, ils sont très différents.
- Merci de me le rappeler, comme je l'ai été sure je n'ai accepté votre réponse! :] Désolé! BTW: Pourquoi $(document).bind('ready', function() {}); et $(document).ready(function() {}); sont-ils si différents?
- le .bind version ne sera pas obtenir de jQuery comme premier argument de la fonction et aussi de ne pas travailler après la DOMContentLoaded qui s'est passé. Si vous perdez ces avantages. Il est également très rare, c'est la première fois que je vois ça.
- Eh bien... Dans, par exemple, .load() description de la méthode il y a une information: "Cette méthode est un raccourci pour .bind('load', handler).". Donc, je suppose que la même relation se passe ici. Que .ready(handler) est juste un raccourci pour .bind('ready', handler).
InformationsquelleAutor Esailija
4

jQuery simule cet événement en le liant à la document's readystatechange événement, qui est la façon standard de simulation DOMContentLoaded en ancien.

Selon la source de jQuery, que l'événement se déclenche "en retard" mais avant window.onload. Cependant, je ne peux pas trouver quand que l'événement se déclenche exactement. DOMContentLoaded déclenche lorsque le DOM est construit et prêt pour l'écriture de scripts, de sorte readystatechange feux après que, peut-être qu'il attend pour le rendu de disposition ou de style, quelque chose comme ça, ou l'événement est déclenché plus tard dans le rendu/processus de mise en?

Peu importe, il est probable que le feu après DOMContentLoaded, probablement due à quand IE décide de mettre à jour le document's readyState à "complet".

(Si quelqu'un a une réponse définitive, poster un commentaire et je vais mettre à jour cette réponse; j'aimerais savoir quand exactement il tire moi-même, et je ne peux pas trouver la réponse dans la documentation ou sur tout les sites que j'attendrais comme Quirksmode.)
- OK, mais comme ci-dessus. Vous êtes plutôt parler d'IE. Et même les retards qui se passe dans les deux plus récentes de Chrome et la plus récente de Firefox.
- DOMContentLoaded qui se passe APRÈS scripts (régulier et defered) sont exécutés (à l'exception de async proches)
InformationsquelleAutor ajm
1

Une autre raison pour le "prêt" figurant à feu plus tard (dans la pratique), il peut y avoir de nombreux événements accroché à elle. Si l'un de ces longs en cours d'exécution des opérations synchrones alors l'événement ready viendra beaucoup plus tard. Par exemple j'utilise knockout.js et cela peut prendre 500ms pour initialiser la page.

Cependant, l'utilisation de votre minimes page de test qui n'est pas le cas bien sûr. J'ai essayé de lancer le suivant :
```
 console.log(window.performance.timing.domContentLoadedEventEnd -
             window.performance.timing.domContentLoadedEventStart);
```
Ce qui donne à 6ms encore pour votre super simple page

Aussi j'ai pris ton code et il a couru à travers google Chrome, outils de performance et découvert quelques petites choses intéressantes:
- BTW: La barre bleue verticale est DOMCONTENTLOADED et le vert est la "première peinture'
- Vous pouvez le voir, même juste super simple appel de fonction de l'événement DOMCONTENTLOADED peut prendre 5ms (et c'est sur un core i7). Rappelez-vous, il doit être analysée et les choses ont besoin de l'initialisation.
- Les rappels sont affichées dans la couleur cyan (anonyme), la première de l'événement DOMCONTENTLOADED et le second est le "prêt" de rappel.
- Vous remarquerez 'Minuterie Flamme" (c'est à dire setTimeout). Donc, il n'est pas instantanée par tous les moyens.
À la recherche à la jQuery code source vous voyez qu'ils ont réellement régler une minuterie pour les rappels:
```
//Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );
```
Je ne suis pas exactement sûr de ce qu'ils signifient ici (aucune idée) - mais il explique le comportement. Je pouvais voir qu'il est utile d'éviter des conditions de course, et le blocage de l'INTERFACE utilisateur, mais retardant prêt " n'est pas clair pour moi.
- Le setTimeout() est une solution de contournement pour IE9-10 pas de tir au large de la DOMContentLoaded les cas, avant que l'auditeur est ajouté pour elle. Le code vérifie si document.readyState a déjà terminé, puis ajoute un setTimeout() pour pousser le jQuery.ready rappel à la file d'attente des événements, donnant le temps pour les autres en file d'attente async rappels une chance de s'exécuter avant jQuery.ready est exécutée.
- mais je suis en utilisant google Chrome! le moment est probablement négligeable, mais je suis en train de mettre le feu à un SignalR de la connexion et de la nécessité qui fait dès que possible
- Chrome gère correctement, ce n'est pas le feu au large de la DOMContentLoaded de l'événement jusqu'à ce qu'il atteigne la fin de la </body> tag. IE9-10 n'est pas, donc il a besoin d'une solution de contournement. Le jQuery, le code vérifie cette dans une instruction if. Il retombe sur le bon comportement si le document.readyState n'est pas prêt.
- oui c' travaux mais il y a un retard inutile, en raison de la minuterie. peut-être il y a une sorte de condition de course en cours, mais je l'ai trouvé plus rapide à mettre mon SignalR code d'initialisation dans mon propre DOMContentLoaded que j'ai seulement besoin de l'appui des navigateurs modernes
- C'est probablement dû à l'analyse de jQuery lui-même, qui est 84KB.
- Aussi, n'est-il pas probable que l'utilisation de la devtools de surveiller cette ralentit il ainsi?
- les outils de Dev ici c'était plus pour montrer qu'il se passe quelque chose entre les deux. La fenêtre de la performance de valeurs de temps ne serait pas affectée par le fait d'avoir des outils allumé.
InformationsquelleAutor Simon_Weaver

Vous devez vous connecter pour publier un commentaire.