Насколько я знаю, сокращение DOM является хорошей практикой из производительности POV.
В одном случае у меня может быть список элементов с SVG, являющимся дочерним по отношению к div:
<div class="listItem">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="80px" itemtype="background" no-padding="" preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 480" width="80px" xmlns="http://www.w3.org/2000/svg">
<path itemtype="shape" class="draggable" id="7c6ab8e7-fc77-449d-943c-f977282a0d58" d="M11.14,21.61 Q230.00,19.29 451.32,17.92 Q459.81,242.94 452.55,460.56 Q210.29,460.43 9.91,460.56 Q8.81,249.09 11.14,21.61Z" transform="matrix(1 0 0 1 0 0)" data-index="0" style="fill: rgb(255, 255, 255); stroke: black; opacity: 1; fill-opacity: 1; stroke-width: 2; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
<path itemtype="shape" class="draggable" id="ee1d5887-d2f0-4903-857a-7ef489d10896" d="M113.72,157.88 Q245.96,160.52 335.00,155.00 Q344.84,243.08 379.16,330.20 Q249.80,286.28 86.84,332.12 Q104.84,253.64 113.72,157.88Z" transform="matrix(1 0 0 1 0 0)" data-index="1" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); opacity: 1; fill-opacity: 1; stroke-width: 11; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
<path itemtype="shape" class="draggable" id="4821b89a-e601-4752-842f-02a1a1ee6475" d="M169.25,171.82 C153.48,100.60 264.27,76.08 280.03,147.30 C295.80,218.52 185.01,243.04 169.25,171.82Z" transform="matrix(1 0 0 1 0 0)" data-index="2" style="fill: rgb(248, 254, 141); stroke: rgb(0, 0, 0); opacity: 1; fill-opacity: 1; stroke-width: 8; pointer-events: auto; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
<path itemtype="shape" class="draggable" id="4a90b5c5-cbbf-4254-ac62-415fcfdc98bd" d="M282.86,245.68 Q305.23,282.77 335.36,341.75 Q272.53,336.63 201.75,337.86 Q231.77,304.97 282.86,245.68Z" transform="matrix(1 0 0 1 0 0)" data-index="3" style="fill: rgb(246, 198, 161); stroke: black; opacity: 1; fill-opacity: 1; stroke-width: 11; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
<path itemtype="shape" class="draggable" id="b5203325-11a7-4092-a994-45edee079d15" d="M172.59,252.90 Q151.69,287.11 123.51,341.52 Q181.67,337.10 247.16,338.61 Q219.55,308.03 172.59,252.90Z" transform="matrix(1 0 0 1 0 0)" data-index="4" style="fill: rgb(170, 226, 237); stroke: black; opacity: 1; fill-opacity: 1; stroke-width: 10; stroke-linecap: butt; stroke-opacity: 1; stroke-linejoin: miter; stroke-dasharray: none;"></path>
</svg>
</div>
В другом случае у меня может быть список элементов с SVG, являющимся URL-адресом данных внутри IMG:
<div class="listItem">
<img src="data:image/svg+xml, ...<< SVG here >>>"/>
</div>
Эффективно ли последнее уменьшает структуру DOM с точки зрения браузера и, таким образом, приводит к повышению производительности и практики?
Или URL-адрес данных все еще следует интерпретировать как структуру DOM, и, следовательно, в этом нет никакой реальной выгоды ??
Почему я хочу изучить это - в моем случае у меня может быть сетка из маленьких значков (50-60 на экране), и у каждого может быть 10-30 путей внутри, поэтому я пытаюсь понять, должен ли я следовать подходу с data-url.