如何減小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 個節點。 我想減少這個值，這意味着應該只加載第一頁