0
402
Vistas¿Cómo puedo agrupar acciones de Javascript que fuerzan el reflujo?
Tengo un proyecto que es responsable de administrar la representación de elementos, pero me encuentro con un problema de rendimiento al reemplazar elementos y luego enfocarme en lo que tenía el foco antes.
A continuación se muestra un ejemplo mínimo que replica el problema de rendimiento:
const renderPage = () => { // get the old section element const oldSection = document.querySelector('section') // create a new section element (we'll replaceWith later) const newSection = document.createElement('section') // create the render button const newButton = document.createElement('button') newButton.innerHTML = 'Render Page' newButton.onclick = renderPage newSection.appendChild(newButton) // create a bunch of elements const dummyDivs = [...new Array(100000)].forEach(() => { const dummy = document.createElement('div') dummy.innerHTML = 'dummy' newSection.appendChild(dummy) }) // replace the old page with the new one (causes forced reflow) oldSection.replaceWith(newSection) // reattach focus on the button (causes forced reflow) newButton.focus() } window.renderPage = renderPage <section> <button onclick="renderPage()">Render</button> </section> Cuando ejecuto esto localmente, veo lo siguiente en el informe de rendimiento en Chrome/Edge 
Tanto replaceWith como focus activan el reflujo forzado. ¿Hay alguna forma de agrupar o procesar por lotes estas acciones para que solo se produzca un único reflujo? Me doy cuenta de que no hay forma de evitar que esto suceda, pero si puedo agruparlos, creo que podría mejorar mi rendimiento.
1 Respuestas
Responde la pregunta0
De hecho, el enfoque siempre provoca un reflujo: lo que fuerza el diseño/reflujo
Entonces, lo que puede hacer es reducir el tiempo de reflujo insertando el nuevo botón de forma independiente, iniciar el enfoque y luego puede agregar otros elementos secundarios:
Ejemplo de trabajo: Ejemplo
const renderPage = () => { // get the old section element const oldSection = document.querySelector('section') // create a new section element (we'll replaceWith later) const newSection = document.createElement('section') // create the render button const newButton = document.createElement('button') newButton.innerHTML = 'Render Page' newButton.onclick = renderPage newSection.appendChild(newButton) // create a bunch of elements const dummies = []; // store in seperate array const dummyDivs = [...new Array(100000)].forEach(() => { const dummy = document.createElement('div') dummy.innerHTML = 'dummy'; dummies.push(dummy) }) // insert new section only with new button oldSection.replaceWith(newSection) newButton.focus(); // always causes reflow; but fast because it's only one element // store all other nodes after focus newSection.append(...dummies) } window.renderPage = renderPage