Estoy tratando de cargar varias versiones del mismo video en una página. El script se ejecuta después de cargar la página, pero tengo que recorrer las fuentes para verificar si ya se agregaron al DOM (de lo contrario, descargan el mismo archivo varias veces). Si esa fuente ya existe, los otros duplicados del video deben esperar hasta que se descargue la primera versión, a través de un eventListener, antes de cargar la fuente duplicada y usar esa versión almacenada en caché del primer video para completar los duplicados (para que no descargar varias veces).

Parece funcionar bien cuando lo pruebo en la pestaña de red de Chrome, las fuentes solo se descargan una vez, pero cuando miro el diagnóstico de Lighthouse me dice que el tiempo de ejecución de js debe reducirse. ¿Es esto debido al bucle?

También sigo encontrando el problema de que PageSpeed Insights me da el mensaje: "¡Vaya! Algo salió mal. PageSpeed Insights encontró un problema al recopilar los datos de laboratorio".

¿Qué estoy haciendo mal aquí?

 var i = 1, sourceID, arraySRC = []; document.querySelectorAll("video source").forEach(function(source, sourceIndex) { if (source.hasAttribute("data-small-src") && source.getAttribute("data-small-src") != "") { source.id = "vidsource-" + i; sourceID = "vidsource-" + i; var src = source.getAttribute("data-small-src"), sourceLoading = false, firstMatchID; // loop through array to see if source value already exists arraySRC.forEach(function(itemSRC, arrayIndex) { // if source value already exists in array if (itemSRC.split(",")[1] == src) { sourceLoading = true; firstMatchID = itemSRC.split(",")[0] return } }); if (sourceLoading == false) { const node = document.createElement("source"); source.parentElement.appendChild(node); node.setAttribute("src", src); } else { document.querySelector("#" + firstMatchID).addEventListener('loadeddata', function() { const node = document.createElement("source"); source.parentElement.appendChild(node); node.setAttribute("src", src); }, false); } // add source to array arraySRC.push(sourceID + "," + src); i = i + 1; } });

(Omití el evento de carga para el script ya que estoy usando un gancho Barba.js)