re-use computed styles when available

lib/single-file/single-file-helper.js

@@ -105,9 +105,9 @@ this.singlefile.lib.helper = this.singlefile.lib.helper || (() => {
 	function getElementsInfo(win, doc, element, options, data = { usedFonts: new Set(), canvasData: [], imagesData: [], postersData: [], shadowRootsData: [] }, ascendantHidden) {
 		const elements = Array.from(element.childNodes).filter(node => node instanceof win.HTMLElement);
 		elements.forEach(element => {
-			let elementHidden;
+			let elementHidden, computedStyle;
 			if (options.removeHiddenElements || options.removeUnusedFonts || options.compressHTML) {
-				const computedStyle = win.getComputedStyle(element);
+				computedStyle = win.getComputedStyle(element);
 				if (options.removeHiddenElements) {
 					if (ascendantHidden) {
 						Array.from(element.childNodes).filter(node => node instanceof win.HTMLElement).forEach(element => {
@@ -133,7 +133,7 @@ this.singlefile.lib.helper = this.singlefile.lib.helper || (() => {
 					}
 				}
 			}
-			getResourcesInfo(win, doc, element, options, data, elementHidden);
+			getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle);
 			if (element.shadowRoot && !elementHidden) {
 				const shadowRootInfo = {};
 				element.setAttribute(SHADOW_ROOT_ATTRIBUTE_NAME, data.shadowRootsData.length);
@@ -146,7 +146,7 @@ this.singlefile.lib.helper = this.singlefile.lib.helper || (() => {
 		return data;
 	}
 
-	function getResourcesInfo(win, doc, element, options, data, elementHidden) {
+	function getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle) {
 		if (element.tagName == "CANVAS") {
 			try {
 				const size = getSize(win, element);
@@ -164,11 +164,13 @@ this.singlefile.lib.helper = this.singlefile.lib.helper || (() => {
 					(options.loadDeferredImages && element.getAttribute(LAZY_SRC_ATTRIBUTE_NAME)) || element.currentSrc
 			};
 			element.removeAttribute(LAZY_SRC_ATTRIBUTE_NAME);
-			const computedStyle = win.getComputedStyle(element);
+			computedStyle = computedStyle || win.getComputedStyle(element);
 			if (computedStyle) {
 				imageData.size = getSize(win, element);
-				if ((!computedStyle.getPropertyValue("box-shadow") || computedStyle.getPropertyValue("box-shadow") == "none") &&
-					(!computedStyle.getPropertyValue("background-image") || computedStyle.getPropertyValue("background-image") == "none") &&
+				const boxShadow = computedStyle.getPropertyValue("box-shadow");
+				const backgroundImage = computedStyle.getPropertyValue("background-image");
+				if ((!boxShadow || boxShadow == "none") &&
+					(!backgroundImage || backgroundImage == "none") &&
 					(imageData.size.pxWidth > 1 || imageData.size.pxHeight > 1)) {
 					imageData.replaceable = true;
 					imageData.backgroundColor = computedStyle.getPropertyValue("background-color");