如何减小DOM的大小？

Question

我有一个包含近 2,000 个 DOM 元素（节点）的页面，其中包括一个包含 200 多个指向其他子页面的链接的简单表格：

<div id="tabs">
<ul><li><a href="#tabs-1" >Al-Ar</a></li>
<li><a href="#tabs-2" >Ar-D</a></li>
<li><a href="#tabs-3" >E-Ha</a></li>
<li><a href="#tabs-4" >Ha-J</a></li>
<li><a href="#tabs-5" >K-Mo</a></li>
<li><a href="#tabs-6" >Mo-Ro</a></li>
<li><a href="#tabs-7" >Ro-So</a></li>
<li><a href="#tabs-8" >So-Su</a></li>
<li><a href="#tabs-9" >Su-Z</a></li></ul>
<table class="tablica_hoteli">
<tbody>
<tr class="tr1"><td></td></tr>
<tr class="tr"><td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Al..Ar</td></tr>
<tr> <td class="td1"><a href="1.html">1</a></td>
<td class="td2">1</td></tr>
<tr> <td class="td1"><a href="2.html">2</a></td>
<td class="td2">2</td></tr>
...
<tr> <td class="td1"><a href="20.html">20</a></td>
<td class="td2">20</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="21.html">21</a></td>
<td class="td2">21</td></tr>
<tr> <td class="td1"><a href="21.html">21</a></td>
<td class="td2">21</td></tr>
...
<tr> <td class="td1"><a href="30.html">30</a></td>
<td class="td2">30</td></tr>
</tbody>
</table>
</div>
<div id="tabs-2">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Ar...</td></tr>
<tr> <td class="td1"><a href="31.html">31</a></td>
<td class="td2">31</td></tr>
<tr> <td class="td1"><a href="32.html">32</a></td>
<td class="td2">32</td></tr>
...
<tr> <td class="td1"><a href="51.html">51</a></td>
<td class="td2">51</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="52.html">52</a></td>
<td class="td2">52</td></tr>
...
<tr> <td class="td1"><a href="205.html">205</a></td>
<td class="td2">205</td></tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>

起始页只显示“#tabs-1”，其余页面需要稍后点击查看。 所以从“#tabs-2”到“#tabs-9”的其余内容不需要加载。 优化 DOM 大小的最简单方法是什么？ 如何让其余的 #tabs-2" 代码在启动时不加载？我不知道该怎么做，这就是我寻求帮助的原因。

哦，知道该表是用 jQuery 编写的也许会有所帮助

Answer 1

我使用的代码来自：

https://jqueryui.com/tabs/#ajax

加上指向 jQuery 站点的链接：

jquery.min.js,
jquery-ui.min.js,
jquery.lazyload.min.js

我的意思是在 Lighthouse 中的位置，我可以在诊断中看到“避免过多的 DOM 大小”= 1956 个节点。 我想减少这个值，这意味着应该只加载第一页