Benchmark: DOM injection test

HTML Preparation code:

<div id="parent"></div>

Script Preparation code:

window.testParentElement = document.getElementById("parent");
window.contentString = `<svg>
    <defs>
                <!-- File Icons -->
         <!-- General Files -->
        <symbol id="zui-fs-audio" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-audio-desc zui-fs-audio-title">
            <title id="zui-fs-audio-title">Audio</title>
            <desc id="zui-fs-audio-desc">A folded page with a note to indicate an audio file</desc>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
            <path d="M10.24 6.43L9.06 5.25a.44.44 0 00-.16-.1.45.45 0 00-.36 0 .51.51 0 00-.26.26.52.52 0 000 .18v3.55a1.72 1.72 0 00-.84-.22 1.79 1.79 0 101.76 1.79V6.74l.37.37a.48.48 0 00.67 0 .48.48 0 000-.68z"/>
        </symbol>
        <symbol id="zui-fs-code" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-code-desc zui-fs-code-title">
            <title id="zui-fs-code-title">Code</title>
            <desc id="zui-fs-code-desc">A folded page with </> to indicate a generic file</desc>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
            <path d="M6.43 10.49l-.61.48-1.77-2.16 1.77-2.16.61.48-1.38 1.68 1.38 1.68z"/>
            <path transform="rotate(-66.03 8 8.81)" d="M6.07 8.41h3.87v.79H6.07z"/>
            <path d="M10.19 10.97l-.62-.48 1.38-1.68-1.38-1.68.62-.48 1.76 2.16-1.76 2.16z"/>
        </symbol>
        <symbol id="zui-fs-doc" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-doc-desc zui-fs-doc-title">
            <title id="zui-fs-doc-title">Doc</title>
            <desc id="zui-fs-doc-desc">Document icon with lines on it</desc>
            <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.49.49 0 0 0-.15-.36l-6.7-6.7a.49.49 0 0 0-.36-.15H5.71A1.71 1.71 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/>
            <rect x="18.5" y="7.5" width="3" height="18" rx=".5" transform="rotate(90 20 16.5)"/>
            <rect x="18.5" y="13.5" width="3" height="18" rx=".5" transform="rotate(90 20 22.5)"/>
            <rect x="16" y="21.64" width="3" height="13" rx=".5" transform="rotate(90 17.5 28.14)"/>
        </symbol>
        <symbol id="zui-fs-folder" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-folder-desc zui-fs-folder-title">
            <title id="zui-fs-folder-title">Folder</title>
            <desc id="zui-fs-folder-desc">A folder icon</desc>
            <path d="M36.5 7H20.17a.51.51 0 0 1-.3-.1l-3.74-2.8a.51.51 0 0 0-.3-.1H3.5A1.5 1.5 0 0 0 2 5.5v31A1.5 1.5 0 0 0 3.5 38h33.05A1.51 1.51 0 0 0 38 36.46V8.5A1.5 1.5 0 0 0 36.5 7zM14.83 7a.51.51 0 0 1 .3.1l3.74 2.8a.51.51 0 0 0 .3.1H35v5H5V7zM5 35V18h30v17z"/>
        </symbol>
        <symbol id="zui-fs-image" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16.2 17.62" aria-labelledby="zui-fs-image-desc zui-fs-image-title">
            <title id="zui-fs-image-title">Image</title>
            <desc id="zui-fs-image-desc">Two overlapping triangles and a circle to look like a sun over mountains, indicating an image</desc>
            <circle cx="10.86" cy="5.04" r="1"/>
            <path d="M15.65 1.65H.35A.35.35 0 000 2v12a.35.35 0 00.35.35h15.3A.35.35 0 0016 14V2a.35.35 0 00-.35-.35zm-.84 9.49l-3.43-3.42a.51.51 0 00-.71 0L8.61 9.77 5.47 6.64a.5.5 0 00-.71 0l-3.57 3.55V2.84h13.62z"/>
        </symbol>
        <symbol id="zui-fs-multiple-files" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-multiple-files-desc zui-fs-multiple-files-title">
            <title id="zui-fs-multiple-files-title">Multiple Files</title>
            <desc id="zui-fs-multiple-files-desc">A document icon with lines and another document behind it to signify multiple documents</desc>
            <path d="M14.58 4.24l-2.38-2.3H4a.62.62 0 00-.62.62v13.26a.34.34 0 00.35.18h10.59a.36.36 0 00.35-.36V4.42zm-2.38-1l1.06 1.06H12.2zm1.41 11.67h-9.1v-12h6.63v2.48h2.47z"/>
            <rect x="5.83" y="7.16" width="6.28" height="1.06" rx=".18"/>
            <rect x="5.83" y="9.28" width="6.28" height="1.06" rx=".18"/>
            <rect x="5.83" y="11.31" width="4.51" height="1.06" rx=".18"/>
            <path d="M1.88 14.37a.55.55 0 01-.55-.55V.5a.5.5 0 01.5-.5h9.72a.55.55 0 01.55.55.55.55 0 01-.55.56H2.44v12.71a.56.56 0 01-.56.55z"/>
        </symbol>
        <symbol id="zui-fs-video" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-video-desc zui-fs-video-title">
            <title id="zui-fs-video-title">Video</title>
            <desc id="zui-fs-video-desc">A document shaped icon with a triangle on it, indicating a video file</desc>
            <path d="M14.67 3v10.1H1.33V3h13.34m1-1.33H.33A.33.33 0 000 2v12.1a.33.33 0 00.33.33h15.34a.33.33 0 00.33-.33V2a.33.33 0 00-.33-.33z"/>
            <path d="M6.47 4.63L11 7.43a.5.5 0 010 .86l-4.62 2.49a.5.5 0 01-.74-.45l.07-5.28a.5.5 0 01.76-.42z"/>
        </symbol>
        <!-- Archive Files -->
        <symbol id="zui-fs-7z" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-7z-desc zui-fs-7z-title">
            <title id="zui-fs-7z-title">7z</title>
            <desc id="zui-fs-7z-desc">A .7z file</desc>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
            <path d="M8 7.76c-.14.25-.27.49-.38.71s-.21.44-.3.66a6.37 6.37 0 00-.21.66 6.5 6.5 0 00-.15.72H6.2c0-.25.1-.48.17-.71a4.67 4.67 0 01.23-.66c.09-.21.19-.42.3-.62s.22-.4.34-.6H5.77v-.56H8zM10.23 10.51h-2v-.29l1.11-1.45h-1v-.51h1.9v.34L9.15 10h1.08z"/>
        </symbol>
        <symbol id="zui-fs-zip" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-zip-desc zui-fs-zip-title">
            <title id="zui-fs-zip-title">Zip</title>
            <desc id="zui-fs-zip-desc">A .zip file</desc>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
            <path d="M7.17 10.51H4.63v-.41l1.62-2.17h-1.5v-.57h2.42v.4L5.59 9.93h1.58zM8.35 10.51h-.71V7.36h.71zM9.77 9.42v1.09h-.71V7.36h1.11c.8 0 1.2.33 1.2 1a1 1 0 01-.35.77 1.36 1.36 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.49-.57-.49z"/>
        </symbol>  
        <!-- Audio Files -->
        <symbol id="zui-fs-mp3" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mp3-desc zui-fs-mp3-title">
            <title id="zui-fs-mp3-title">MP3</title>
            <desc id="zui-fs-mp3-desc">A document shaped paper with MP3 on it to indicate the file is a .MP3</desc>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
            <path d="M7 10.51h-.7V8.62v-.67c0 .19-.07.33-.1.42l-.74 2.14h-.62l-.75-2.12c0-.06 0-.21-.1-.44H4v2.56h-.64V7.36h1L5 9.22a2.39 2.39 0 01.12.46c0-.18.08-.33.12-.46l.65-1.86H7zM8.38 9.42v1.09h-.71V7.36h1.11c.79 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.38 1.38 0 01-.91.29zm0-1.52v1h.28c.37 0 .56-.16.56-.49S9 7.9 8.66 7.9zM10.33 10.4v-.6a1.25 1.25 0 00.74.23.71.71 0 00.41-.11.39.39 0 00.15-.32.38.38 0 00-.18-.33 1 1 0 00-.51-.11h-.29v-.53h.27c.41 0 .61-.14.61-.41s-.15-.39-.47-.39a1 1 0 00-.61.21v-.57a1.71 1.71 0 01.77-.17 1.2 1.2 0 01.75.22.71.71 0 01.27.57.73.73 0 01-.62.77.87.87 0 01.52.24.7.7 0 01.2.5.84.84 0 01-.33.7 1.39 1.39 0 01-.89.25 1.66 1.66 0 01-.79-.15z"/>
        </symbol>
        <symbol id="zui-fs-wav" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-wav-desc zui-fs-wav-title">
            <title id="zui-fs-wav-title">Wav</title>
            <desc id="zui-fs-wav-desc">A .wav file</desc>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
            <path d="M7.41 7.59l-.74 2.8H6l-.5-1.8a1.37 1.37 0 010-.31 1.82 1.82 0 010 .31l-.48 1.8h-.83l-.73-2.8h.69l.39 1.87a1.82 1.82 0 010 .32 1.05 1.05 0 01.06-.33l.5-1.86h.68l.46 1.88a1.68 1.68 0 010 .3v-.31l.39-1.87zM10.08 10.39H9.4l-.2-.62h-1l-.2.62h-.68l1-2.8h.75zm-1-1.11l-.3-.94a1.37 1.37 0 01-.05-.25 1 1 0 010 .24l-.3.95zM12.54 7.59l-1 2.8h-.72l-.95-2.8h.68l.58 1.95a.79.79 0 01.06.28 1.88 1.88 0 01.06-.29l.58-1.94z"/>
        </symbol>
        <!-- Image Files -->
        <symbol id="zui-fs-ai" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-ai-desc zui-fs-ai-title">
            <title id="zui-fs-ai-title">Ai</title>
            <desc id="zui-fs-ai-desc">An .ai file</desc>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
            <path d="M8.84 10.51h-.78l-.22-.7H6.72l-.22.7h-.77l1.14-3.15h.85zM7.68 9.26L7.34 8.2a.74.74 0 010-.28 1.57 1.57 0 01-.06.28l-.41 1.06zM9.94 10.51h-.71V7.36h.71z"/>
        </symbol>
        <symbol id="zui-fs-eps" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-eps-desc zui-fs-eps-title">
            <title id="zui-fs-eps-title">Eps</title>
            <desc id="zui-fs-eps-desc">An .eps file</desc>
            <path d="M6.31 10.51H4.42V7.36h1.82v.58H5.13v.7h1v.57h-1v.72h1.18zM7.52 9.42v1.09h-.71V7.36h1.12c.79 0 1.19.33 1.19 1a1 1 0 01-.35.77 1.31 1.31 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.51-.57-.51zM9.43 10.39v-.71a1.51 1.51 0 00.42.25 1.42 1.42 0 00.45.08.75.75 0 00.23 0 .56.56 0 00.17-.06.26.26 0 00.1-.11.27.27 0 000-.12.26.26 0 00-.05-.17.44.44 0 00-.14-.13l-.22-.12-.27-.12a1.3 1.3 0 01-.55-.37.84.84 0 01-.18-.54.82.82 0 01.1-.42.69.69 0 01.27-.29 1.15 1.15 0 01.39-.17 1.86 1.86 0 01.48-.05 2.72 2.72 0 01.43 0 1.2 1.2 0 01.35.09v.65a.91.91 0 00-.14-.08l-.19-.07h-.38a.73.73 0 00-.22 0 .38.38 0 00-.17.06.36.36 0 00-.11.1.28.28 0 000 .13.23.23 0 000 .14.34.34 0 00.12.12.78.78 0 00.18.11l.25.11a3.58 3.58 0 01.34.17 1.37 1.37 0 01.26.2.71.71 0 01.16.26.84.84 0 01.06.33.88.88 0 01-.1.45.83.83 0 01-.27.29 1.45 1.45 0 01-.4.16 2.45 2.45 0 01-.48 0 2.56 2.56 0 01-.49 0 1.52 1.52 0 01-.4-.17z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-gif" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-gif-desc zui-fs-gif-title">
            <title id="zui-fs-gif-title">Gif</title>
            <desc id="zui-fs-gif-desc">A .gif file</desc>
            <path d="M7.46 10.3a2.24 2.24 0 01-1.14.26 1.66 1.66 0 01-1.2-.42A1.49 1.49 0 014.68 9a1.62 1.62 0 01.48-1.21 1.74 1.74 0 011.27-.46 2.59 2.59 0 01.88.13v.67a1.75 1.75 0 00-.89-.21.94.94 0 00-.72.29 1.05 1.05 0 00-.27.79 1.09 1.09 0 00.24.75.9.9 0 00.68.27 1.06 1.06 0 00.4-.07v-.67h-.63v-.57h1.34zM8.78 10.51h-.71V7.36h.71zM11.32 7.94h-1.11v.77h1v.57h-1v1.23H9.5V7.36h1.82z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-jpg" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-jpg-desc zui-fs-jpg-title">
            <title id="zui-fs-jpg-title">Jpg</title>
            <desc id="zui-fs-jpg-desc">A .jpg file</desc>
            <path d="M5.77 9.26a1.48 1.48 0 01-.29 1 1.09 1.09 0 01-.85.33 1.34 1.34 0 01-.46-.08v-.7a.68.68 0 00.41.14q.48 0 .48-.72V7.36h.71zM7.17 9.42v1.09h-.71V7.36h1.11c.8 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.33 1.33 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.49-.57-.49zM11.83 10.3a2.34 2.34 0 01-1.14.26 1.66 1.66 0 01-1.2-.42A1.49 1.49 0 019.05 9a1.62 1.62 0 01.48-1.21 1.75 1.75 0 011.27-.49 2.68 2.68 0 01.89.14v.67a1.81 1.81 0 00-.9-.21 1 1 0 00-.72.28A1.1 1.1 0 009.8 9a1.09 1.09 0 00.2.7.9.9 0 00.68.27.89.89 0 00.4-.08v-.61h-.63v-.57h1.34z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-png" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-png-desc zui-fs-png-title">
            <title id="zui-fs-png-title">Png</title>
            <desc id="zui-fs-png-desc">A .png file</desc>
            <path d="M4.26 9.48v1.08h-.71V7.41h1.11c.79 0 1.19.34 1.19 1a.94.94 0 01-.34.76 1.33 1.33 0 01-.91.3zm0-1.48v1h.28c.37 0 .56-.17.56-.5S4.91 8 4.54 8zM9.15 10.56h-.72l-1.3-2A1.85 1.85 0 017 8.32a3.41 3.41 0 010 .51v1.73h-.69V7.41h.77l1.25 1.92c.05.09.11.17.15.26V7.41h.67zM12.45 10.35a2.21 2.21 0 01-1.14.27 1.66 1.66 0 01-1.2-.42A1.51 1.51 0 019.67 9a1.6 1.6 0 01.48-1.21 1.71 1.71 0 011.27-.47 2.45 2.45 0 01.89.14v.66a1.79 1.79 0 00-.9-.21 1 1 0 00-.72.29 1.05 1.05 0 00-.27.76 1.06 1.06 0 00.25.76 1.05 1.05 0 001.07.19v-.58h-.63v-.56h1.34z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-ps" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-ps-desc zui-fs-ps-title">
            <title id="zui-fs-ps-title">Ps</title>
            <desc id="zui-fs-ps-desc">A .ps file</desc>
            <path d="M6.33 9.49v1.08h-.71V7.42h1.11c.79 0 1.19.34 1.19 1a1 1 0 01-.34.76 1.36 1.36 0 01-.92.3zm0-1.49v1h.27c.38 0 .57-.17.57-.5S7 8 6.6 8zM8.24 10.45v-.7a1.14 1.14 0 00.41.24 1.42 1.42 0 00.45.08h.24A.59.59 0 009.5 10a.24.24 0 00.1-.1.2.2 0 000-.13.23.23 0 00-.06-.16.47.47 0 00-.14-.14l-.22-.12L9 9.22a1.48 1.48 0 01-.55-.38.84.84 0 01-.18-.54.81.81 0 01.37-.71A1.25 1.25 0 019 7.42a2.44 2.44 0 01.48 0 2.94 2.94 0 01.44 0 2 2 0 01.35.09v.66l-.18-.1L9.88 8H9.5a.78.78 0 00-.22 0h-.17a.35.35 0 00-.1.11.18.18 0 000 .13.23.23 0 000 .14.68.68 0 00.12.12l.19.11.24.11a3.68 3.68 0 01.34.16 1.09 1.09 0 01.26.21.85.85 0 01.17.25.9.9 0 01.05.34.87.87 0 01-.1.44.69.69 0 01-.27.29 1.12 1.12 0 01-.4.16 2.44 2.44 0 01-.48.05 2.63 2.63 0 01-.49-.05 1.34 1.34 0 01-.4-.12z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-psd" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-psd-desc zui-fs-psd-title">
            <title id="zui-fs-psd-title">Psd</title>
            <desc id="zui-fs-psd-desc">A .psd file</desc>
            <path d="M4.67 9.49v1.08H4V7.42h1.07c.8 0 1.19.34 1.19 1a.94.94 0 01-.34.76 1.33 1.33 0 01-.91.3zm0-1.49v1H5c.38 0 .56-.17.56-.5S5.33 8 5 8zM6.58 10.45v-.7A1.69 1.69 0 007 10a1.44 1.44 0 00.46.08.8.8 0 00.23 0 .43.43 0 00.16-.08.32.32 0 00.1-.1.29.29 0 000-.29.67.67 0 00-.15-.14l-.21-.12-.29-.13a1.4 1.4 0 01-.55-.38.84.84 0 01-.18-.54.78.78 0 01.36-.71 1.31 1.31 0 01.4-.17 2.42 2.42 0 01.47 0 2.85 2.85 0 01.44 0 1.79 1.79 0 01.35.09v.66a1 1 0 00-.17-.1L8.22 8 8 7.94h-.16a.78.78 0 00-.22 0L7.45 8l-.1.1a.22.22 0 000 .13.33.33 0 000 .15l.12.12.19.11.25.11.34.16a1.33 1.33 0 01.26.21.82.82 0 01.16.25.9.9 0 01.06.34 1 1 0 01-.1.44.84.84 0 01-.27.29 1.29 1.29 0 01-.4.16 2.44 2.44 0 01-.48.05 2.65 2.65 0 01-.5-.05 1.45 1.45 0 01-.4-.12zM9.25 10.57V7.42h1.11C11.48 7.42 12 7.93 12 9a1.52 1.52 0 01-.46 1.17 1.65 1.65 0 01-1.22.44zM10 8v2h.35a1 1 0 00.65-.28 1 1 0 00.29-.72.93.93 0 00-.29-.74 1 1 0 00-.7-.26z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-tif" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-tif-desc zui-fs-tif-title">
            <title id="zui-fs-tif-title">Tif</title>
            <desc id="zui-fs-tif-desc">A .tif file</desc>
            <path d="M7.42 8.05h-.9v2.58h-.71V8.05h-.9v-.57h2.51zM8.55 10.63h-.71V7.48h.71zM11.09 8.05H10v.78h1v.57h-1v1.23h-.73V7.48h1.82z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>        
        <!-- Office Files-->
        <symbol id="zui-fs-pdf" fill="var(--zui-icon-color, var(--zui-orange-400))" viewBox="0 0 40 40" aria-labelledby="zui-fs-pdf-desc zui-fs-pdf-title">
            <title id="zui-fs-pdf-title">PDF</title>
            <desc id="zui-fs-pdf-desc">A document shaped paper with the letters PDF on it to indicate the file is a .PDF</desc>
            <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/>
            <path d="M15.55 20.51a2.46 2.46 0 0 1-.81 2 3.46 3.46 0 0 1-2.31.69h-.73V26H10v-8h2.57a3.42 3.42 0 0 1 2.22.63 2.28 2.28 0 0 1 .76 1.88zm-3.85 1.27h.56a1.85 1.85 0 0 0 1.18-.31 1.09 1.09 0 0 0 .39-.9 1.12 1.12 0 0 0-.33-.89 1.53 1.53 0 0 0-1-.28h-.8zM23.73 21.94a4 4 0 0 1-1.13 3A4.61 4.61 0 0 1 19.34 26h-2.27v-8h2.52a4.24 4.24 0 0 1 3.05 1 3.8 3.8 0 0 1 1.09 2.94zM22 22q0-2.58-2.28-2.58h-.91v5.23h.73c1.6-.02 2.46-.9 2.46-2.65zM27.07 26H25.4v-8H30v1.4h-2.93v2.07h2.73v1.39h-2.73z"/>
        </symbol>
        <symbol id="zui-fs-ppt" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-ppt-desc zui-fs-ppt-title">
            <title id="zui-fs-ppt-title">Powerpoint</title>
            <desc id="zui-fs-ppt-desc">A document shaped paper with the letter P on it to indicate the file is Microsoft Powerpoint</desc>
            <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.49.49 0 0 0-.15-.36l-6.7-6.7a.49.49 0 0 0-.36-.15H5.71A1.71 1.71 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/>
            <path d="M21.16 14H15v16.94h3.53V25h2.63a5.48 5.48 0 1 0 0-10.95zm-.67 8.17h-1.94v-5.05h1.94a2.54 2.54 0 0 1 0 5.07z"/>
        </symbol>
        <symbol id="zui-fs-word" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-word-desc zui-fs-word-title">
            <title id="zui-fs-word-title">Word</title>
            <desc id="zui-fs-word-desc">A document shaped paper with the letter W on it to indicate the file is a Microsoft Word doc</desc>
            <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/>
            <path d="M25.86 29h-4.07l-1.21-5.55c-.06-.23-.15-.69-.28-1.39s-.22-1.26-.27-1.73c-.05.38-.13.85-.23 1.41s-.21 1.07-.31 1.54S19 25.66 18.22 29h-4.07L11 16.26h3.32l1.38 6.39c.32 1.41.53 2.53.65 3.37.07-.59.21-1.4.4-2.41s.38-1.86.55-2.53l1.12-4.82h3.19l1.09 4.82c.19.77.38 1.66.57 2.68s.32 1.76.38 2.26c.08-.64.28-1.76.62-3.35l1.41-6.41H29z"/>
        </symbol>
        <symbol id="zui-fs-excel" fill="var(--zui-icon-color, var(--zui-green-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-excel-desc zui-fs-excel-title">
            <title id="zui-fs-excel-title">Excel</title>
            <desc id="zui-fs-excel-desc">A document shaped paper with an X on it to indiciate it's an Microsoft Excel file</desc>
            <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/>
            <path d="M27 29.44h-4.35l-2.71-4.35-2.69 4.35H13l4.62-7.12-4.34-6.8h4.16l2.56 4.3 2.41-4.3h4.3l-4.41 7.09z"/>
        </symbol>
        <!-- Programming Files-->
        <symbol id="zui-fs-css" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-css-desc zui-fs-css-title">
            <title id="zui-fs-css-title">Css</title>
            <desc id="zui-fs-css-desc">A .css file</desc>
            <path d="M6.69 10.4a2.1 2.1 0 01-.9.16 1.54 1.54 0 01-1.14-.42A1.57 1.57 0 014.23 9a1.66 1.66 0 01.47-1.22 1.61 1.61 0 011.21-.47 2.22 2.22 0 01.78.11v.69A1.34 1.34 0 006 7.92a1 1 0 00-.72.28A1 1 0 005 9a1 1 0 00.26.73.9.9 0 00.69.27 1.51 1.51 0 00.76-.2zM7.09 10.39v-.71a1.51 1.51 0 00.42.25A1.42 1.42 0 008 10a.88.88 0 00.24 0 .59.59 0 00.16-.06.26.26 0 00.1-.11.19.19 0 000-.12.27.27 0 00-.06-.17.44.44 0 00-.14-.13l-.22-.12-.27-.12a1.36 1.36 0 01-.55-.37.84.84 0 01-.18-.54.82.82 0 01.1-.42.84.84 0 01.27-.29 1.15 1.15 0 01.39-.17 1.86 1.86 0 01.48-.05 2.72 2.72 0 01.43 0 1.36 1.36 0 01.36.09v.65A1 1 0 008.93 8l-.19-.07h-.38a.73.73 0 00-.22 0A.43.43 0 008 8a.32.32 0 00-.1.1.2.2 0 000 .13.23.23 0 000 .14.34.34 0 00.1.07.68.68 0 00.19.11 1.33 1.33 0 00.24.11 3.58 3.58 0 01.34.17A1.37 1.37 0 019 9a.9.9 0 01.17.26 1.09 1.09 0 01.05.33.88.88 0 01-.1.45.75.75 0 01-.27.29 1.34 1.34 0 01-.4.16 2.45 2.45 0 01-.48 0 2.63 2.63 0 01-.49 0 1.52 1.52 0 01-.39-.1zM9.62 10.39v-.71a1.33 1.33 0 00.41.25 1.42 1.42 0 00.45.08.88.88 0 00.24 0 .67.67 0 00.17-.06.52.52 0 00.1-.11.27.27 0 000-.12.34.34 0 000-.17.64.64 0 00-.15-.13l-.21-.12-.27-.12a1.3 1.3 0 01-.55-.37.79.79 0 01-.19-.54.93.93 0 01.1-.42.84.84 0 01.28-.32 1.31 1.31 0 01.4-.17 1.78 1.78 0 01.47-.05 2.94 2.94 0 01.44 0 1.39 1.39 0 01.35.09v.65a1.4 1.4 0 00-.2-.05l-.2-.07h-.38a.78.78 0 00-.22 0 .49.49 0 00-.17.06.32.32 0 00-.1.1.2.2 0 000 .13.23.23 0 000 .14.34.34 0 00.12.12.86.86 0 00.19.11 1.17 1.17 0 00.25.11c.12.06.24.11.34.17a1.29 1.29 0 01.25.2.73.73 0 01.17.26.84.84 0 01.06.33 1 1 0 01-.1.45.94.94 0 01-.27.29 1.59 1.59 0 01-.4.16 2.59 2.59 0 01-.48 0 2.67 2.67 0 01-.5 0 1.45 1.45 0 01-.4-.17z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-html" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-html-desc zui-fs-html-title">
            <title id="zui-fs-html-title">Html</title>
            <desc id="zui-fs-html-desc">An .html file</desc>
            <path d="M5.61 10.07h-.52v-.94h-1v.94h-.48V7.76h.52v.92h1v-.92h.52zM7.76 8.18H7.1v1.89h-.52V8.18h-.66v-.42h1.84zM10.71 10.07h-.52V8.69v-.5c0 .14 0 .25-.07.31l-.55 1.57h-.41l-.55-1.56a1.82 1.82 0 01-.07-.32v1.88h-.47V7.76h.76l.48 1.37c0 .11.06.22.08.33 0-.13.06-.24.09-.34L10 7.76h.75zM12.61 10.07h-1.38V7.76h.52v1.89h.86z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-java" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-java-desc zui-fs-java-title">
            <title id="zui-fs-java-title">Java</title>
            <desc id="zui-fs-java-desc">A .java file</desc>
            <path d="M4.87 9.16a1.18 1.18 0 01-.25.82.88.88 0 01-.71.28 1 1 0 01-.39-.07v-.56a.54.54 0 00.34.12c.28 0 .41-.21.41-.61V7.56h.6zM7.68 10.22H7l-.19-.59h-1l-.18.59h-.57L6 7.56h.71zm-1-1.05l-.28-.9a.85.85 0 010-.24 1.55 1.55 0 01-.05.23L6 9.17zM10 7.56l-.9 2.66h-.68l-.9-2.66h.64l.56 1.85a1 1 0 010 .26 1.68 1.68 0 01.06-.27l.55-1.84zM12.48 10.22h-.65l-.19-.59h-1l-.19.59h-.59l1-2.66h.71zm-1-1.05l-.28-.9a.85.85 0 01-.03-.27 1.55 1.55 0 01-.05.23l-.29.91z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-xml" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-xml-desc zui-fs-xml-title">
            <title id="zui-fs-xml-title">Xml</title>
            <desc id="zui-fs-xml-desc">An .xml file</desc>
            <path d="M6.18 10.56h-.84l-.54-1a.83.83 0 01-.07-.21 1.28 1.28 0 01-.07.22l-.54 1h-.86l1-1.57-.91-1.59h.86l.45.95a.88.88 0 01.09.26c0-.06 0-.15.1-.27l.5-.94h.79L5.21 9zM10.15 10.56h-.7V8.68 8a2.35 2.35 0 01-.09.42l-.74 2.14H8l-.71-2.12a2.71 2.71 0 01-.1-.44v2.56h-.63V7.41h1l.64 1.87a2.46 2.46 0 01.11.45 3.61 3.61 0 01.12-.45l.64-1.87h1zM12.74 10.56h-1.88V7.41h.71V10h1.17z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>   
        <!-- Text Files-->
        <symbol id="zui-fs-doc" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-doc-desc zui-fs-doc-title">
            <title id="zui-fs-doc-title">Doc</title>
            <desc id="zui-fs-doc-desc">A .doc file</desc>
            <path d="M3.59 10.56V7.41h1.12c1.12 0 1.68.51 1.68 1.54a1.56 1.56 0 01-.46 1.17 1.66 1.66 0 01-1.22.44zM4.3 8v2h.35a1 1 0 00.73-.28A1.07 1.07 0 005.64 9a1 1 0 00-.26-.71A1 1 0 004.65 8zM8.24 10.62a1.47 1.47 0 01-1.1-.44A1.58 1.58 0 016.71 9a1.74 1.74 0 01.43-1.21 1.51 1.51 0 011.15-.46 1.45 1.45 0 011.09.44A1.63 1.63 0 019.8 9a1.69 1.69 0 01-.43 1.19 1.48 1.48 0 01-1.13.43zM8.27 8a.69.69 0 00-.59.28 1.14 1.14 0 00-.22.72 1.13 1.13 0 00.22.74.71.71 0 00.57.28.72.72 0 00.59-.27A1.15 1.15 0 009.05 9a1.24 1.24 0 00-.21-.77.68.68 0 00-.57-.23zM12.58 10.45a2.09 2.09 0 01-.9.17 1.51 1.51 0 01-1.14-.43 1.53 1.53 0 01-.42-1.13 1.61 1.61 0 011.68-1.7 2.21 2.21 0 01.78.12v.68a1.34 1.34 0 00-.72-.16 1 1 0 00-.72.28 1.05 1.05 0 00-.27.76 1 1 0 00.26.72.91.91 0 00.69.28 1.43 1.43 0 00.76-.21z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-txt" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-txt-desc zui-fs-txt-title">
            <title id="zui-fs-txt-title">Txt</title>
            <desc id="zui-fs-txt-desc">A .txt file</desc>
            <path d="M6.42 8h-.9v2.57h-.71V8h-.9v-.59h2.51zM9.41 10.56h-.84L8 9.54a.93.93 0 010-.21 1.28 1.28 0 01-.07.22l-.55 1h-.89l1-1.55-.92-1.59h.87l.45.95a2.56 2.56 0 01.11.26c0-.06 0-.15.1-.27l.5-.94h.79L8.44 9zM12.09 8h-.9v2.57h-.71V8h-.9v-.59h2.51z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <!-- Video Files-->
        <symbol id="zui-fs-mov" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mov-desc zui-fs-mov-title">
            <title id="zui-fs-mov-title">Mov</title>
            <desc id="zui-fs-mov-desc">A .mov file</desc>
            <path d="M6.59 10.28H6V8.6 8a2 2 0 01-.09.37l-.65 1.91h-.54l-.67-1.89A3 3 0 014 8V10.28h-.6V7.47h.93l.57 1.66a3.06 3.06 0 01.1.41c0-.16.07-.29.11-.41l.57-1.66h.9zM8.42 10.32a1.33 1.33 0 01-1-.39 1.41 1.41 0 01-.37-1 1.48 1.48 0 01.38-1.07 1.32 1.32 0 011-.41 1.28 1.28 0 011 .39 1.44 1.44 0 01.37 1 1.5 1.5 0 01-.38 1.06 1.32 1.32 0 01-1 .42zM8.44 8a.61.61 0 00-.52.25 1 1 0 00-.2.66 1 1 0 00.2.66.63.63 0 00.51.24.61.61 0 00.51-.24 1 1 0 00.2-.65A1.14 1.14 0 009 8.21.6.6 0 008.44 8zM12.6 7.47l-1 2.81h-.71L10 7.47h.68l.59 2a1.11 1.11 0 010 .28 1.77 1.77 0 01.06-.28l.58-1.95z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-mpg" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mpg-desc zui-fs-mpg-title">
            <title id="zui-fs-mpg-title">Mpg</title>
            <desc id="zui-fs-mpg-desc">A .mpg file</desc>
            <path d="M6.88 10.42h-.65V8.66v-.63l-.09.39-.69 2h-.53l-.71-2A3.15 3.15 0 014.12 8V10.39h-.6V7.48h1l.6 1.74a2.17 2.17 0 01.11.42q.06-.24.12-.42l.6-1.74h.94zM8.21 9.41v1h-.66V7.48h1c.74 0 1.11.31 1.11.94a.87.87 0 01-.32.71 1.26 1.26 0 01-.85.28zm0-1.41v.9h.27c.35 0 .52-.15.52-.46S8.83 8 8.48 8zM12.57 10.22a2.09 2.09 0 01-1.07.25 1.54 1.54 0 01-1.12-.39A1.43 1.43 0 0110 9a1.49 1.49 0 01.45-1.13 1.62 1.62 0 011.19-.44 2.31 2.31 0 01.82.13v.62A1.64 1.64 0 0011.6 8a.87.87 0 00-.67.27 1 1 0 00-.26.72 1 1 0 00.23.7.83.83 0 00.63.25.9.9 0 00.37-.07v-.6h-.58v-.53h1.25z"/>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
        </symbol>
        <symbol id="zui-fs-mp4" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-MP4-desc zui-fs-MP4-title">
            <title id="zui-fs-MP4-title">MP4</title>
            <desc id="zui-fs-MP4-desc">A document shaped paper with MP4 on it to indicate the file is a .mp4</desc>
            <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/>
            <path d="M6.94 10.5h-.7V8.62v-.68c0 .19-.07.33-.1.42l-.73 2.14h-.58l-.75-2.12c0-.06 0-.2-.1-.44H4v2.56h-.65V7.35h1L5 9.22a2.5 2.5 0 01.12.45 3.27 3.27 0 01.13-.46l.64-1.86h1zM8.37 9.41v1.09h-.71V7.35h1.11c.79 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.33 1.33 0 01-.91.29zm0-1.51v1h.28c.37 0 .56-.17.56-.5s-.21-.5-.56-.5zM12.15 7.35v2h.38v.51h-.38v.65h-.63v-.66h-1.37v-.54c.12-.13.24-.28.38-.45s.25-.32.37-.5.24-.34.34-.51a4.18 4.18 0 00.27-.5zm-1.38 2h.75V8.23a2.75 2.75 0 01-.17.29l-.18.29-.2.28z"/>
        </symbol>
    </defs>
</svg>`;

Tests:

innerHTML test
const div = document.createElement("div"); div.innerHTML = window.contentString; window.testParentElement.appendChild(div);
document fragment test
const elementFragment = document.createRange().createContextualFragment(window.contentString); window.testParentElement.appendChild(elementFragment);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML test
document fragment test

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

The task is to modify the provided HTML string and its associated benchmark definition to accommodate changes in browser performance or feature updates.

After examining the given information:

*   The provided HTML string contains an SVG image with a `<symbol>` element.
*   There are two test cases: one using `innerHTML` and the other using a document fragment (`createRange().createContextualFragment()`).
*   The latest benchmark result shows different execution rates for each test case on Firefox 84 running on Windows.

Given these details, some potential modifications to consider:

1.  **Update SVG Image**:
    *   Ensure the SVG image is optimized for web performance by reducing file size and using efficient encoding schemes (e.g., PNG or WebP).
    *   Consider replacing the `<symbol>` element with a simpler icon or using a more modern alternative, like `svg` elements with `use` attributes.
2.  **Optimize HTML Structure**:
    *   Ensure the HTML structure is minimal and concise to reduce parsing time for browsers.
    *   Use semantic HTML elements and ARIA attributes to improve accessibility and make the content easier to parse.

Here's a sample updated code that incorporates some of these suggestions:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Updated Benchmark</title>
    <style>
        /* Add basic styling to improve performance */
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        svg {
            display: block;
        }
    </style>
</head>
<body>
    <div id="parent"></div>

// Update benchmark definitions to reflect changes in browser performance or feature updates
        const benchmarkDefinitions = [
            {
                "Benchmark Definition": "const div = document.createElement(\"div\");\r\ndiv.innerHTML = window.contentString;\r\nwindow.testParentElement.appendChild(div);",
                "Test Name": "innerHTML test"
            },
            {
                "Benchmark Definition": "const elementFragment = document.createRange().createContextualFragment(window.contentString);\r\nwindow.testParentElement.appendChild(elementFragment);",
                "Test Name": "document fragment test"
            }
        ];
    </script>
</body>
</html>
```

**Conclusion**

This updated code includes a basic optimization of the HTML structure, reduces the file size of the SVG image, and updates the benchmark definitions to reflect changes in browser performance or feature updates. These modifications can help improve the overall performance and accessibility of the benchmarking page.

Related benchmarks:

DOM injection test (version: 0)

DOM injection test

Comparing performance of: innerHTML test vs document fragment test

Created: 5 years ago by: Registered User

Jump to the latest result

innerHTML test

document fragment test

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):