Javascript Girl
  1. Javascript Girl
  3. Quel est l'ordre des MutationRecords reçu par MutationObservers?
Intereting Posts
Js géolocalisation mais sans invite – possible? Création du compilateur de fermeture extern Ajax chargé du contenu, le script ne s'exécute pas CSS ou JavaScript Div Blur magic Document.write vs appendChild Comment obtenir des informations sur la clé qui a été pressée pendant combien de temps? Reactjs – Obtenez un composant depuis n'importe où dans l'application Comment revenir d'une capture de Promise / puis d'un bloc Puis-je modifier ce Javascript pour imprimer des images de Div? Browserify: utilisez module.exports si nécessaire, sinon exposez global Création d'un lien "Lire plus" qui étend le contenu sur la page Classe de corps dynamique avec Angular UI-Router Les éléments de script écrit avec document.write dans une fenêtre ouverte avec window.open ne sont pas exécutés dans IE8 sous Windows 7 Comment appliquer 100% de hauteur à div? Comment cacher une propriété de texte en pop-up lorsqu'il n'est pas rempli dans la brochure?

Quel est l'ordre des MutationRecords reçu par MutationObservers?

Le code de la mesure de réaction profite aux nouveaux MutationObservers présents dans les navigateurs actuels. MSDN a ceci à dire à ce sujet:

En outre, les observateurs de mutation sont conçus pour enregistrer plusieurs modifications avant de notifier votre observateur. Ils génèrent des enregistrements de mutation pour éviter de spammer votre application avec des événements. En revanche, les événements de mutation sont synchrones et interrompent l'exécution normale du code pour notifier votre application de mutations. Malgré le modèle de notification retardé utilisé par les observateurs de la mutation, l'observateur de vos applications est toujours garanti pour recevoir (et avoir la possibilité de traiter) tous les enregistrements de mutation avant le prochain repeint.

MutationObserver d'une mesure de réaction obtient un ensemble de MutationRecords, mais le code d'exemple ne prend que le premier: 

<Measure whitelist={['height']} shouldMeasure={(mutations) => { // don't update unless we have mutations available if(mutations) { return mutations[0].target } else { return false } }} // notice how target gets passed into onMeasure now onMeasure={(dimensions, mutations, target) => { this.setState({dimensions}) }} > <div> I can do cool things with my dimensions now :D </div> </Measure>

Malheureusement, le readme n'a rien à dire sur la raison pour laquelle cela fonctionne, ni MDN ni MSDN. Comment savoir quel MutationRecord doit transmettre?

Dans la spécification, section 4.3.2 En attente d'un enregistrement de mutation , étape 4.8:

Ajouter un enregistrement à la file d'attente de l'observateur.

Ensuite, si vous recherchez la spécification pour "mettre en file d'attente un enregistrement de mutation", vous verrez toutes les actions qui peuvent déclencher l'algorithme "en file d'attente d'enregistrement d'une mutation".

À partir de cela, vous pouvez le dire, par exemple, si vous supprimez un nœud du DOM, un enregistrement de mutation sera mis en file d'attente (ajouté à la liste MutationRecords).

Par conséquent, je crois qu'il est sûr d'inférer que MutationRecords est dans l'ordre dans lequel ils se sont produits.

(Vous pouvez facilement effectuer un test pour vérifier ceci, ajouter et supprimer certains nœuds de manière synchrone, puis inspecter le MutationRecord)