Estoy escribiendo un script de usuario que necesita acceder a nodos DOM específicos en la página. Para reducir la latencia y el rediseño de la página, quiero configurarlo en // @run-at document-start en lugar del habitual // @run-at document-end , y ejecutar mi código tan pronto como el nodo DOM que necesito ha sido descargado del servidor.
Si solo espero un evento DOMContentLoaded , esperará a que se descargue toda la página; esto es efectivamente lo mismo que // @run-at document-end . Quiero ejecutar mi código en un momento anterior, justo cuando el analizador del navegador encuentre la etiqueta de cierre del elemento que quiero.
¿Hay alguna manera de lograr esto más elegante que sondear querySelectorAll desde una devolución de llamada de MutationObserver ?
Esto es lo que uso actualmente:
const element = (selector, pred = () => true, below = document) => new Promise((accept, reject) => { const mo = new MutationObserver((mutations, self) => { for (const node of below.querySelectorAll(selector)) { if (!pred(node)) continue; accept(node); self.disconnect(); return; } }).observe(below, { childList: true, attributes: true, characterData: true, subtree: true, }); document.addEventListener('DOMContentLoaded', ev => { reject(); if (mo) mo.disconnect(); }); });Lo anterior devuelve una promesa que se resuelve cuando un nodo que cumple mis criterios aparece por primera vez en el árbol DOM. Para esperar el momento en que se descargue por completo, también lo paso a:
const nodeComplete = (node) => new Promise((accept, reject) => { if (document.readyState === "complete" || document.readyState === "loaded") { accept(); return; } document.addEventListener('DOMContentLoaded', ev => { accept(); if (mo) mo.disconnect(); }); const mo = new MutationObserver((mutations, self) => { let anc = node; while (anc) { if (anc.nextSibling) { accept(); self.disconnect(); } anc = anc.parentNode; } }).observe(document, { childList: true, subtree: true, }); });No terriblemente grande, pero útil; Me imagino que se pueden aplicar algunas optimizaciones aquí.