Jak zmniejszyć rozmiar DOM ładując tylko pierwszą stronę tabeli ?, Jak ładować pierwszą stronę tabeli, a pozostałe po kolejnym kliknięciu Opcje

[Blasius]

Posiadam stronę z prawie 2000 elementami DOM (węzłów), na której znajduje się między innymi prosta tabela napisana za pomocą jQuery z ponad 300 linkami do innych podstron (wzorowana na:)
https://jqueryui.com/tabs/#default
Oto jej układ:

[HTML] pobierz, plaintext 
<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_X">
<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="hotel1.html">hotel 1</a></td>
<td class="td2">1</td></tr>
<tr> <td class="td1"><a href="hotel2.html">hotel 2</a></td>
<td class="td2">2</td></tr>
...
<tr> <td class="td1"><a href="hotel20.html">hotel 20</a></td>
<td class="td2">20</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel21.html">hotel 21</a></td>
<td class="td2">21</td></tr>
...
<tr> <td class="td1"><a href="hotel30.html">hotel 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...D</td></tr>
<tr> <td class="td1"><a href="hotel31.html">hotel 31</a></td>
<td class="td2">31</td></tr>
...
<tr> <td class="td1"><a href="hotel51.html">hotel 51</a></td>
<td class="td2">51</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel52.html">hotel 52</a></td>
<td class="td2">52</td></tr>
...
<tr> <td class="td1"><a href="hotel105.html">hotel 105</a></td>
<td class="td2">105</td></tr>
</tbody>
</table>
<div id="tabs-9">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Su-Z</td></tr>
<tr> <td class="td1"><a href="hotel231.html">hotel 231</a></td>
<td class="td2">231</td></tr>
...
<tr> <td class="td1"><a href="hotel301.html">hotel 301</a></td>
<td class="td2">301</td></tr>
</tbody>
</table>
</div>
...
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel302.html">hotel 302</a></td>
<td class="td2">302</td></tr>
...
<tr> <td class="td1"><a href="hotel355.html">hotel 355</a></td>
<td class="td2">355</td></tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>
[HTML] pobierz, plaintext 

Do tego skrypty:

[JAVASCRIPT] pobierz, plaintext 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script>
 $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
[JAVASCRIPT] pobierz, plaintext 

plus skrypt do otwierania poszczególnych stron z hotelami:

[JAVASCRIPT] pobierz, plaintext 
<script>
<!--
onload=function(){
  for(i=0;d=document.getElementsByTagName('a')[i++];){
   if (d.href.match(/.*hotel\d+\.html/)){
     d.onclick=function(){window.open(this.href,'a','width=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');return false}
   }
  }
}
//-->
</script>
[JAVASCRIPT] pobierz, plaintext 

Wszystko ładnie działa, ale podczas sprawdzania, np. w PageSpeed Insights pojawia się ostrzeżenie - "Unikaj zbyt dużego DOM - 1795 elementów".
Ponieważ na stronie startowej wyświetla się tylko tablica "#tabs-1", a pozostałe i tak trzeba później kliknąć żeby je zobaczyć, to tablice od "#tabs-2" do "#tabs-9" nie muszą się ładować od razu. I tu prośba o pomoc.
W jaki najprostszy sposób można zoptymalizować rozmiar DOM? Jak zmusić resztę kodu od #tabs-2" do nie ładowania się przy starcie?
I czy JavaScript rzeczywiście opłacalnie przyspieszy ładowanie i działanie strony? Czy sensowniej jest zostawić kod taki jak jest bez JS?

[Blasius]

W końcu pojąłem...
Ale nie spotkałem się nigdzie wcześniej z klasą dla <a>. Może to mnie w jakimś stopniu tłumaczy.
Zrobiłem tak:

[HTML] pobierz, plaintext 
<div id="tabs">
<ul class="site-tabs">
<li class="site-tabs-item"><a class="hotel" href="#tabs-1" >Al-Aq</a></li>
<li class="site-tabs-item"><a class="hotel" href="ajax/content1.php" >Aq-D</a></li>
<li class="site-tabs-item"><a class="hotel" href="ajax/content2.php" >E-Ha</a></li>
<li class="site-tabs-item"><a class="hotel" href="ajax/content3.php" >Hi-J</a></li>
<li class="site-tabs-item"><a class="hotel" href="ajax/content4.php" >K-Mi</a></li>
<li class="site-tabs-item"><a class="hotel" href="ajax/content5.php" >Mo-Ro</a></li>
<li class="site-tabs-item"><a class="hotel" href="ajax/content6.php" >Ro-Sp</a></li>
<li class="site-tabs-item"><a class="hotel" href="ajax/content7.php" >St-Su</a></li>
<li class="site-tabs-item"><a class="hotel" href="ajax/content8.php" >T-Z</a></li></ul>
[HTML] pobierz, plaintext 

do tego

[JAVASCRIPT] pobierz, plaintext 
<script>
function onClick(event) {
if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
 
return;
}
event.preventDefault();
const url = event.target.href;
console.log('Fetching results at ' + url);
}
const pagination = document.querySelector('#tabs');
pagination.addEventListener('click', onClick);
 
</script>
[JAVASCRIPT] pobierz, plaintext 

plus

[CSS] pobierz, plaintext 
a.hotel:link,
a.hotel:visited {
background-color: transparent;
color: navy;
text-decoration: underline;
}
a.hotel:hover,
a.hotel:focus,
a.hotel:active {
background-color: red;
}
.site-tabs {
  background-color: LightCyan;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid LightBlue;
}
.site-tabs .site-tabs-item {
  border-bottom: 1px solid LightBlue;
  padding: 5px;
}
.site-tabs .site-tabs-item:last-child {
  border-bottom: 0;
}
.site-tabs .site-tabs-item a {
  color: black;
  text-decoration: none;
}
.site-tabs .site-tabs-item a:hover {
  text-decoration: underline;
}
[CSS] pobierz, plaintext 

Ale nadal nie otwierają się okna, a pojawiają się:
komunikat: Fetching results at https://www.xxx/ajax/content8.php
oraz komunikat: Fetching results at https://www.xxx/hotel127.html
Wiem, że trzeba dodać polecenie otwarcia okna, ale nie umiem tego zrobić w przypadku tego kodu JS.