Cześć, mam problem z wyświetleniem tekstu na stronie. Mam plik txt zawierający około 2 tys linii, obrabiam go i wrzucam do tabeli i drugi raz obrabiam javascriptem, jednak po kilku set liniach strona zaczyna lagować a komputer mam wrażenie że zaraz wybuchnie. Lagi powoduje javascript, bo gdy uruchomiłem bez JS strona wczytała się w około 3-4 sekundy.
To mój plik txt: https://pastebin.com/RpJKy1BA
To część kodu odpowiedzialna za obróbkę tekstu i wyświetlanie.
<table style="table-layout: fixed;" border=1>
<?php
$licznik = 0;
$file = fopen("data.txt","r");
while(! feof($file))
{
$licznik2 = 0;
$linia = fgets($file);
$linia_pierwszy = substr($linia, 0, 8);
$linia_ostatni = substr($linia, -17);
?>
<tr>
<td style="width: 65px;" bgcolor="#C0C0C0"><?php echo htmlentities($linia_pierwszy); ?></td>
<?php
for($i=1; $i <= 16; $i++)
{
$licznik++;
$linia_out = substr($linia, 9+$licznik2*3, 2);
$licznik2++;
?>
<td style="width: 28px;" class="wart" id="<?php echo $licznik; ?>"
<?php if ($linia_out!=" ") {?>
onclick="zmien(this);" ondblclick="podwojne(this)"
<?php } ?>
><?php echo $linia_out; ?></td>
<?php
}
?>
<td style="width: 90px;" bgcolor="#C0C0C0"><?php echo htmlentities($linia_ostatni); ?></td>
</tr>
<?php
}
fclose($file);
?>
</table>
uzupelnij = document.getElementById('wybranyZakres').value;
uzupelnij2 = uzupelnij.split(',');
var wartosciZmienione = "";
idZmienionych = [];
sprawdz = 0;
sprawdz2 = 0;
var pierwszy = document.getElementById('1');
var ostatni = document.getElementById('2');;
var przycisk2;
var pierwszySprawdz;
var target = document.getElementsByClassName('wart');
for(i = 0; i < target.length; i++){
var observer = new MutationObserver(function(mutations) {
for(y = 0; y < idZmienionych.length; y++){
wartosciZmienione = wartosciZmienione + ","
+ document.getElementById(idZmienionych[y]).innerHTML;
}
document.getElementById("wybranyZakres").value = idZmienionych;
wartosciZmienione = "";
});
observer.observe(target[i], {
attributes: true,
attributeFilter: ['style']});
}
for(i=0;i<=uzupelnij2.length;i++){
element = document.getElementById(uzupelnij2[i]);
element.style.backgroundColor = "#800000";
idZmienionych.push(element.id);
document.getElementById("wybranyZakres").value = idZmienionych;
}
function zmien(element){
if(sprawdz == 1){
if(sprawdz2 == 0){
pierwszy = element;
pierwszySprawdz = pierwszy.style.backgroundColor;
element.style.backgroundColor = "yellow";
sprawdz2 = 1;
document.getElementById("wybranyZakres").value = idZmienionych;
}
else{
ostatni = element;
sprawdz2 = 2;
dzialaj();
document.getElementById("wybranyZakres").value = idZmienionych;
}
}
else{
if(element.style.backgroundColor != ""){
element.style.backgroundColor = "";
const index = idZmienionych.indexOf(element.id);
idZmienionych.splice(index, 1);
document.getElementById("wybranyZakres").value = idZmienionych;
}
else{
element.style.backgroundColor = "#800000";
idZmienionych.push(element.id);
document.getElementById("wybranyZakres").value = idZmienionych;
}
}
}
function wybierz(przycisk){
if(sprawdz == 1){
przycisk.style.backgroundColor = "";
if(pierwszy.style.backgroundColor == "yellow"){
pierwszy.style.backgroundColor = "";
sprawdz2 = 0;
document.getElementById("wybranyZakres").value = idZmienionych;
}
sprawdz = 0;
}
else{
przycisk.style.backgroundColor = "green";
sprawdz = 1;
document.getElementById("wybranyZakres").value = idZmienionych;
return;
}
}
function dzialaj(){
liczPierwszy = parseInt(pierwszy.id);
liczOstatni = parseInt(ostatni.id);
if(pierwszySprawdz == ""){
pierwszy.style.backgroundColor = "";
document.getElementById("wybranyZakres").value = idZmienionych;
}
else{
pierwszy.style.backgroundColor = "#800000";
document.getElementById("wybranyZakres").value = idZmienionych;
}
if(liczPierwszy>liczOstatni){
pomocnicz = pierwszy;
pomocniczOst = ostatni;
ostatni = pomocnicz;
pierwszy = pomocniczOst;
liczPierwszy = parseInt(pierwszy.id);
liczOstatni = parseInt(ostatni.id);
document.getElementById("wybranyZakres").value = idZmienionych;
}
if(sprawdz2 == 2){
sprawdz2 = 0;
for(i=liczPierwszy;i<=liczOstatni;i++){
element = document.getElementById(String(i));
if(element.style.backgroundColor != ""){
element.style.backgroundColor = "";
const index = idZmienionych.indexOf(element.id);
idZmienionych.splice(index, 1);
document.getElementById("wybranyZakres").value = idZmienionych;
}
else{
element.style.backgroundColor = "#800000";
idZmienionych.push(element.id);
document.getElementById("wybranyZakres").value = idZmienionych;
}
}
pierwszySprawdz = "";
pierwszy = document.getElementById('1');
ostatni = document.getElementById('2');
document.getElementById("wybranyZakres").value = idZmienionych;
}
}