"ignore" and "once" attributes, improved performance

This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich 2023-10-06 04:50:20 +07:00
parent f4d37ebf3a
commit 6074da9a52

View File

@ -56,9 +56,39 @@ if (typeof window.reinitializer !== "function") {
// Initialization of the <link> element // Initialization of the <link> element
const link = links[0]; const link = links[0];
if (link.getAttribute("data-reinitializer-ignore") === "true") {
// Marked as ignored
// Move element
this.css.appendChild(link);
continue;
}
// Initialization link of the <link> element // Initialization link of the <link> element
const href = link.getAttribute("href"); const href = link.getAttribute("href");
if (
link.getAttribute("data-reinitializer-once") === "true" &&
this.css.querySelector(`:scope > link[href="${href}"]`)
) {
// Marked as executing once and already executed
// Stop listening
this.stop();
// Delete outdated <link> element from the document
link.remove();
// Start listening
this.start();
continue;
}
// Initialization outerHTML of the <script> element
const html = script.outerHTML;
// Stop listening // Stop listening
this.stop(); this.stop();
@ -69,11 +99,9 @@ if (typeof window.reinitializer !== "function") {
this.start(); this.start();
// Deleting outdated elements // Deleting outdated elements
for ( for (const element of this.css.querySelectorAll(
const element of this.css.querySelectorAll( `:scope > link[href="${href}"]`
`script[href="${href}"]`, )) element.remove();
)
) element.remove();
// Initialization of new <link> element // Initialization of new <link> element
const element = document.createElement("link"); const element = document.createElement("link");
@ -93,12 +121,45 @@ if (typeof window.reinitializer !== "function") {
// Initialization of the <script> element // Initialization of the <script> element
const script = scripts[0]; const script = scripts[0];
if (script.getAttribute("data-reinitializer-ignore") === "true") {
// Marked as ignored
// Move element
this.js.appendChild(script);
continue;
}
// Initialization link of the <script> element // Initialization link of the <script> element
const src = script.getAttribute("src"); const src = script.getAttribute("src");
// Initialization text of the <script> element // Initialization text of the <script> element
const text = script.textContent; const text = script.textContent;
if (
script.getAttribute("data-reinitializer-once") === "true" &&
(this.js.querySelector(`:scope > script[src="${src}"]`) ||
Array.from(this.js.querySelectorAll(`:scope > script`)).filter(
(e) => e.textContent === text
).length > 0)
) {
// Marked as executing once and already executed
// Stop listening
this.stop();
// Delete outdated <script> element from the document
script.remove();
// Start listening
this.start();
continue;
}
// Initialization outerHTML of the <script> element
const html = script.outerHTML;
// Stop listening // Stop listening
this.stop(); this.stop();
@ -115,24 +176,23 @@ if (typeof window.reinitializer !== "function") {
// File // File
// Deleting outdated elements // Deleting outdated elements
for ( for (const element of this.js.querySelectorAll(
const element of this.js.querySelectorAll( `:scope > script[src="${src}"]`
`script[src="${src}"]`, ))
) element.remove();
) element.remove();
// Copy link from outdated <script> element // Copy link from outdated <script> element
element.setAttribute("src", src); element.setAttribute("src", src);
// Write a type of <script> element
element.setAttribute('type', 'text/javascript');
} else { } else {
// Script // Script
// Deleting outdated elements // Deleting outdated elements
for ( for (const element of Array.from(
const element of Array.from( this.js.querySelectorAll(`:scope > script`)
this.js.getElementsByTagName("script"), ).filter((e) => e.textContent === text)) {
)
.filter((e) => e.textContent === text)
) {
element.remove(); element.remove();
} }
@ -140,8 +200,11 @@ if (typeof window.reinitializer !== "function") {
element.textContent = text; element.textContent = text;
} }
// Write new <script> element to end of <body> element // Write the new <script> element to end of <body> element
this.js.appendChild(element); this.js.appendChild(element);
// Write content to the new <script> element
element.outerHTML = html;
} }
// Initialize of observation status // Initialize of observation status
@ -177,5 +240,5 @@ if (typeof window.reinitializer !== "function") {
document.dispatchEvent( document.dispatchEvent(
new CustomEvent("reinitializer.initialized", { new CustomEvent("reinitializer.initialized", {
detail: { reinitializer: window.reinitializer }, detail: { reinitializer: window.reinitializer },
}), })
); );