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/#defaultOto jej układ:
<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"> <tr> <td class="td10" colspan="4">Al..Ar
</td></tr> <tr> <td class="td1"><a href="hotel1.html">hotel 1
</a></td> <tr> <td class="td1"><a href="hotel2.html">hotel 2
</a></td> ...
<tr> <td class="td1"><a href="hotel20.html">hotel 20
</a></td> <tr> <td class="td1"><a href="hotel21.html">hotel 21
</a></td> ...
<tr> <td class="td1"><a href="hotel30.html">hotel 30
</a></td> <tr> <td class="td10" colspan="4">Ar...D
</td></tr> <tr> <td class="td1"><a href="hotel31.html">hotel 31
</a></td> ...
<tr> <td class="td1"><a href="hotel51.html">hotel 51
</a></td> <tr> <td class="td1"><a href="hotel52.html">hotel 52
</a></td> ...
<tr> <td class="td1"><a href="hotel105.html">hotel 105
</a></td> <tr> <td class="td10" colspan="4">Su-Z
</td></tr> <tr> <td class="td1"><a href="hotel231.html">hotel 231
</a></td> ...
<tr> <td class="td1"><a href="hotel301.html">hotel 301
</a></td> ...
<tr> <td class="td1"><a href="hotel302.html">hotel 302
</a></td> ...
<tr> <td class="td1"><a href="hotel355.html">hotel 355
</a></td>
Do tego skrypty:
<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>
plus skrypt do otwierania poszczególnych stron z hotelami:
<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>
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?