Mało wydajny ajax

Na swojej stronie mam kilka elementów opartych na ajaxie (używam jQuery i $.ajax). Problem mam w tym, że gdy pobieram nim trochę większe dane niż sam tekst (tj. moja jedna "paczka" to kilka divów i zdjęcie) to użycie procesora po stronie użytkownika wynosi około 20%, i to nawet nie w samym momencie pobierania tylko ciągle, w bezruchu użycie procesora spada do 15% co i tak mnie nie satysfakcjonuje.
Próbowałem użyć frameworka prototype.js i metody new Ajax, lecz z podobnym rezultatem. Znacie alternatywne, mniej zasobożerne, dynamiczne sposoby pobierania danych z bazy mysql? Może jakaś dodatkowa biblioteka/framework?

Pokaż kod - sam Ajax czy jQuery nie powinien czegoś takiego powodować.

Sprawdź coś innego - czy jak dasz te dane (slidery itp.) "na sztywno" do pliku HTML, to czy obciążenie będzie takie samo. Wcale nie jest powiedziane, że winny jest AJAX - zwłaszcza, że piszesz o tym, że obciążenie jest cały czas, nawet po pobraniu danych.

użycie procesora po stronie użytkownika wynosi około 20%,

Jak to sprawdzałeś?

Nie próbowałem dawać tych elementów statycznie, dlatego że to czysty html i css (zdjęcie i trochę ładnie opakowanego tekstu), nie mam tam sliderów. Wnioskuję że to wina ajaxa ponieważ po zakomentowaniu funkcji z nim problem znika (dodam że funkcja aktywowana jest automatycznie po zjechaniu na dół strony), co ciekawe gdy skończą się elementy do wyświetlenia, obciążenie spada praktycznie do zera. Dodatkowo na innej podstronie ładuje tak wiadomości między użytkownikami (pojemnik teskt i awatar) i obciążenie tam jest rzędu 10-15% tylko wtedy gdy Ajax ma coś w zanadrzu do załadowania, jeśli są dwie, trzy wiadomości to wyświetlają się od razu i obciążenie wynosi 0, a korzystam z tej samej funkcji (poniższą funkcje, jakiej używam, pisałem teraz na telefonie z głowy więc przepraszam jeśli trafiła się literówka).

function display(limit, offset) {
$.ajax({
  type: 'get',
  url: 'loaddata.php',
  data: 'limit=' + limit + '&offset=' + offset + <?php //trochę danych z php ?>,
beforeSend: function () {
$("#loader_image").show();
},
  success: function (html) {
$('loader_image').hide();
   $( '#results' ).append(html);
if(html == "")
{
 $( '#message' ).html("to już wszystko");
}
  }
  });
}

Zwykły menadżer zadań w windowsie pokazuje obciążenie procesora dla przeglądarki a w liście poniżej dla każdej witryny otwartej w karcie osobno, nie kłamie bo na tych "ciężkich" podstronach załącza się wiatrak w laptopie (sprawdzałem dla pewności na dwóch) i właśnie to mnie zaintrygowało do sprawdzenia tego.

Czej, podpiąłeś tę funkcję pod onscroll?

Tak, mam warunek jeśli zjedzie się poniżej danego pułapu to wywoływana jest ta funkcja oraz zmienna globalna offset się zwiększa i wykorzystuję ją w zapytaniu do bazy.

No, czyli odpalasz tę swoją funkcję prawdopodobnie kilkadziesiąt~kilkaset razy na sekundę - wrzuć sobie tam console.log i przekonaj się sam.

Wrzucę, spróbuję ale niestety dopiero wieczorem. Wydaje mi się że moja funkcja włączana jest tylko raz po spełnieniu warunku (przewinięciu strony do danego pułapu), raz ponieważ dodałem zmienną zabezpieczającą, która jest w warunku obok on scroll i ustawiana jest na false w momencie wywołania funkcji i przy 'success' w ajaxie z powrotem na true. Po załadowaniu danych tą funkcją zmienia się wysokość witryny i żeby warunek on scroll w if'ie był spełniony trzeba zjechać niżej.

Poza tym za każdym wywołaniem zwiększa się offset i gdyby wywoływała się więcej niż raz to po jednej takiej serii wyświetliły by się wszystkie elementy z bazy a wyświetlam ich po 10 na raz

Patryk27 napisał(a):

No, czyli odpalasz tę swoją funkcję prawdopodobnie kilkadziesiąt~kilkaset razy na sekundę - wrzuć sobie tam console.log i przekonaj się sam.

Przy czym należy jeszcze pamiętać, że console.log obniża wydajność i po sprawdzeniu trzeba go zlikwidować. Taki głupiutki szczegół, ale już miałem sytuacje, że coś mi muliło, a okazało się, że gdzieś zapomniałem console.loga wywalić.

@loczek111: w takim razie wrzuć więcej kodu, bo w przytoczonym przez Ciebie fragmencie nie ma żadnej inkrementacji czy zabezpieczeń.

Znalazłem winowajcę, którym okazała się animacja ładowania w css. Dla ciekawskich wrzucam jej kod, jeśli przy stylu ".loader" zmienicie pozycję na relatywną (ja taką miałem) to animacja ta wymusza ciągłe przerysowanie obiektów ponieważ nieustannie zmienia swoją wysokość i obciąża tym samym procesor w 10%, w połączeniu z ajaxem obciążenie rośnie do 20%. Dziękuje za zainteresowanie tematem i przepraszam za kłopot ale kończyły mi się już pomysły. Przynajmniej dowiedziałem się o alternatywie ajaxa, czyli Fetch API.

użycie: <div class="loader"></div>


.loader,
.loader:before,
.loader:after {
  background: #0099ff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #0099ff;
  text-indent: -9999em;
  margin: 50px auto;
  position: absolute;
  font-size: 7px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
} 

Tak więc najpierw się sprawdza grafikę i bajery (i testowo je wyłącza), a dopiero potem wini ajaxa XD
Od korelacji (za każdym razem kiedy włączam ajaxa, muli) do przyczyny jeszcze daleka droga.

Z drugiej strony te parę animacji też nie powinno zamulać. Czy na pewno @Patryk27 nie miał racji?
czyli odpalasz tę swoją funkcję prawdopodobnie kilkadziesiąt~kilkaset razy na sekundę - wrzuć sobie tam console.log i przekonaj się sam.

Wydaje mi się

Debugowanie to nauka/empiria, a nie gdybanie. Wszystkie hipotezy trzeba sprawdzić, nawet te, na które myślisz, że znasz odpowiedź.

ponieważ dodałem zmienną zabezpieczającą,

Gdzie jest ta zmienna?

Poza tym jaki jest twój kod HTML? Bo tutaj piszesz:

 $("#loader_image")

czyli element o id loader_image, a tam dalej już

$('loader_image')

czyli element <loader_image> (a nie żaden <div> czy <img>)

a we wrzuconych CSS w ogóle nie masz do tego odniesienia, tylko do .loader.

Albo masz podobny kod w HTML:

<loader-image id="loader-image" class="loader">

albo czegoś nie rozumiem.

Możliwe więc, że coś chowasz, a naprawdę nie chowasz.

Podstawowy błąd to zwracanie HTML w odpowiedzi AJAX, nadmiarowość treści - pobierasz same dane w JSON i po odebraniu pakujesz to w HTML już po stronie przeglądarki.

@LukeJL: Funkcja wywołuje się raz, sprawdzałem console.logiem. Wrzucam resztę kodu który aktywuje tą funkcje, przepraszam że dopiero dziś ale wczoraj po napisaniu tego postu musiałem pilnie wyjść z domu i wróciłem dopiero późnym wieczorem. Natomiast co do loader_image, to jest to komórka w tabeli o tym id i dopiero w środku jest <div class="loader"></div> (faktycznie trochę bajzel, już to pozmieniałem). W funkcji wyżej jest literówka, w $('loader_image').hide(); brakuje oczywiście #. Dosyć istotna literówka ale jeszcze raz przepraszam, jak mówiłem funkcje pisałem na telefonie, ponieważ nagle i pilnie musiałem wyjechać.

var busy = false;
var limit = 10;
var offset = 0;

   $(document).ready(function() {
if (busy == false) {
  busy = true;
  display(limit, offset);
}
        
       $(window).scroll(function() {
          
          if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
            busy = true;
            offset = limit + offset;

            display(limit, offset);
        }
});
});