Ładowanie zawartości strony [js]

pytanie zadane 13 października 2019 w Sieci komputerowe, internet przez devloop Nowicjusz (190 p.)

Witam

potrzebuję załadować bardzo dużą ilość danych na stronę html, przykładowo ponad mln wierszy, więc podzieliłem stronę na małe części aby były wczytywane przez js. Użyłem do tego funkcji

$(document).ready(function() { 
   $('#id_bloku').load('part.html');
   $('#id_bloku2').load('part2.html');
...
});

chciałbym abym mógł jakoś kontrolować to wczytywanie lepiej niż teraz, bo wygląda to tak, że po wczytaniu strony startowej i tego js czeka się około minuty aż nagle wyskoczy cała strona, więc dodałem linijkę przy każdym wczytaniu

document.title=ile_wczytano;

ale skrypt wykonuje się od razu w całości, oznacza to ze problem leży w wolnym przetwarzaniu html i css po stronie przeglądarki, a przynajmniej na to mi wygląda. Jestem dopiero początkującym w javascript i nie wiem jak mógłbym samodzielnie sobie z tym poradzić, czy używam złych funkcji czy może źle je zastosowałem, bo wiem że język ten oferuje wiele sposobów pisania dla tego samego efektu. dodatkowo wyświetlając kod (Ctrl+U) nie pokazuje zmian które wprowadził kod js, i nie wiem dlaczego. Najbardziej chciałbym aby kod był wczytywany na żywo, czyli pobiera się strona startowa, która na bieżąco pobiera kolejne elementy strony które są wyświetlane od razu po pobraniu oraz gdyby była możliwość też pisało ile już pobrało elementów np 33/10000

dziękuję z góry za wszystkie odpowiedzi

komentarz 13 października 2019 przez JakSky Stary wyjadacz (14,770 p.)

Przy jakiej ilość danych mogą pojawić się spore problemy z wydajnością strony. Przy takich długich listach warto zastosować Infinite Scrolling. Gdy będziesz scrollować to pewne dane będą usuwane a inne ładowane.

komentarz 13 października 2019 przez devloop Nowicjusz (190 p.)

Ciekawy pomysł ale w tym przypadku cała treść musi być załadowana, nie może być usuwana. dodatkowo 'Infinite Scrolling' źle działa na SEO

komentarz 13 października 2019 przez JakSky Stary wyjadacz (14,770 p.)

Na pewno lepiej niż pobieranie całego pliku. Przecież treść nie musi być usuwana, wszystko zależy od autora....

2 odpowiedzi

odpowiedź 13 października 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Masz wg mnie źle zaprojektowaną aplikację, dlaczego chcesz ładować userowi tak dużo danych? Na 99% jestem przekonany, że to nie ma sensu. Jeśli robisz np. jakieś duże obliczenia client-side na tych danych to dlaczego nie zrobić ich na serwerze z jakimś cache? A jeśli to jakieś dane do których user musi się doscrollować to czemu nie ładować ich wraz ze scrollowaniem?

Napisz co to za dane i dlaczego chcesz je wszystkie od razu ładować to pomożemy przeanalizować jeszcze raz architekturę aplikacji bo prawdopodobnie tu tkwi problem. Nie brnij na siłe w lazy loading itp. bo może wcale nie to jest rozwiązaniem.

komentarz 13 października 2019 przez devloop Nowicjusz (190 p.)

Taki projekt, wszystkie dane muszą zostać wczytane, nie podczas akcji kliknięcia scrollowania ani innych eventów, automatycznie muszą się załadować, jedynie co to mam czas, skrypt może wczytywać nawet parę minut dane

Nie ma możliwości modernizacji danych, dane to w 99% tekst, html, css

Moim zdaniem problem pojawia się przy renderowaniu html i css, jeżeli wszystko wrzucę naraz to po prostu urywa się po części, natomiast przy ciągłym wczytywaniu przez js małych elementów to pojawia się po paru minutach

Mój problem to przerobienie kodu tak aby nie wyskakiwał po paru minutach ze wszystkim, tylko aby na bieżąco ładował kawałek po kawałku, tak aby user się nie nudził przy czekaniu

duża część prawdopodobnie nie będzie się zmieniała i będzie dostępna u klienta, więc ostatecznie nawet transfer tak bardzo nie ucierpi

Proszę o pomoc w przerobieniu kodu

komentarz 13 października 2019 przez JakSky Stary wyjadacz (14,770 p.)

Hmm może pobieraj po kawałku? Np po 1000 wierszy? Gdy się załadują pobieraj kolejne. Nie wiem do czego Ci to potrzebne ale normalny użytkownik raczej nie potrzebuje tylu danych jednocześnie. Domyślam się, że to na własny użytek jedynie :p

komentarz 13 października 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Taki projekt, wszystkie dane muszą zostać wczytane

ok, w takim razie ja nie mam więcej pytań... ja pytam z chęcią pomocy, a Ty odpowiadasz "taki projekt"... równi dobrze mógłbyś powiedzieć w innych słowach "co ci do tego, odp. się i powiedz jak to zrobić"... Szczerze to nie lubię pracować z osobami, które uważają, że tylko i wylacznie ich pomysł na dany problem jest jedyny, słuszny i idealny... współczuję osobom, które muszę z Tobą współpraować w zespole... u mnie w zespole jest atmosfera dyskusji i wspólnego analizowania rozwiązań z ich za i przeciw i to jest bardzo dobre podejście...

Skoro upierasz się przy swojej wersji to po prostu rób serię requestów albo użyj np. SSE i serwuj kolejne partie danych z sewera. Na froncie można pod to podpiąć rxjs i ładnie się wszystko komponuje w całość.

komentarz 13 października 2019 przez devloop Nowicjusz (190 p.)

Właśnie tak robię ale ten kod który napisałem wykonuje się następująco

strona startowa

kod js

|
|
|

długo długo nic bo chyba się renderuje

nagle po paru minutach pojawia się wszystko

teraz trzeba zmienić tą całość aby dynamicznie się ładowało

$(document).ready(function() { 
   $('#id_bloku').load('part.html');
   $('#id_bloku2').load('part2.html');
...
});

tam gdzie '...' to dalsze części. part.html to właśnie ok. 1000 wierszy, tylko że ten skrypt pokazuje całość po paru minutach a chciałbym aby przy każdym part.html po załadowaniu od razu go wyświetlał, nie czekając na kolejne części

komentarz 13 października 2019 przez devloop Nowicjusz (190 p.)

Skoro upierasz się przy swojej wersji to po prostu rób serię requestów albo użyj np. SSE i serwuj kolejne partie danych z sewera. Na froncie można pod to podpiąć rxjs i ładnie się wszystko komponuje w całość.

Mógłbyś rozwinąć zamysł

seria requestów?

SSE?

RxJS - rozumiem ze to asynchroniczne ładowanie? tak na szybko przeczytane, myślę ze nie o to chodzi bo problem pojawia się po stronie usera który chce otworzyć stronę, cały transfer idzie w mik bo to tylko trochę tekstu ale to przeglądarka ma z nim problemy aby zrenderować/wyświetlić, więc nie chodzi tu o pobieranie czy ściąganie tylko o dynamiczne wyświetlanie pobranego kawałka kodu (który raz ściągnięty pewnie będzie już przetrzymywany u usera)

komentarz 13 października 2019 przez JakSky Stary wyjadacz (14,770 p.)

Może te dane wrzuć do jsona. Jak przeglądarka pobierze cały plik to za pomocą JS pobieraj po kawałku te dane z pliku i renderuj.

komentarz 13 października 2019 przez devloop Nowicjusz (190 p.)

Może te dane wrzuć do jsona. Jak przeglądarka pobierze cały plik to za pomocą JS pobieraj po kawałku te dane z pliku i renderuj.

Mógłbyś rozwinąć temat albo wrzucić kod?

komentarz 13 października 2019 przez JakSky Stary wyjadacz (14,770 p.)

W linku masz trochę informacji na temat czytania pliku

h ttps://developer.mozilla.org/en-US/docs/Web/API/FileReader

Popierasz dane jakie Ciebie interesują i renderujesz. Warto zapisywać w zmiennej np na której linii skończyłeś pobierać dane. Według mnie jak masz możliwość zrobienia tego po stronie serwera tj odczytywanie pliku i wysyłanie danych na stronę byłoby lepszym i szybszym rozwiązaniem. Możesz użyć AJAX i pobierać po kawałku.

odpowiedź 13 października 2019 przez sysadmin Obywatel (1,000 p.)

Cześć,

Podpowiem: https://github.com/verlok/lazyload

Co do tego, co chcesz zrobić, dokładnie. Sa takie testowe serwisy jak Google PageSpeed Insight, czy też pingdom tools. Mierzą one prędkość ładowania się strony. Warto sobie podejrzeć. Możesz wykorzystać asynchroniczne ładowanie skryptów: https://www.nafrontendzie.pl/asynchroniczne-ladowanie-skryptow-javascript

komentarz 13 października 2019 przez devloop Nowicjusz (190 p.)

Nie o to mi chodziło, zawartość strony jest zbyt duża i zawiesza większość przeglądarek, muszę samodzielnie napisać skrypt który może działać wolno ale będzie stabilnie cały czas wczytywał zawartość, asynchroniczne wczytywanie nie pomaga (potem przy optymalizacji oczywiście użyje, ale nie w tym problem), jest zbyt duża ilość, po prostu ciągle wysypuje się, dlatego muszę użyć js który może działać nawet kilka minut

komentarz 13 października 2019 przez devloop Nowicjusz (190 p.)

co do lazyload to dużo tego i nie wiem o którą ci funkcję chodzi, problem leży w tym ze przy czystym html i css zwiesza mi się przeglądarka bo nie daję rady przetworzyć kodu (za dużo), natomiast jeżeli uruchomię to co napisałem wyżej powoli w kilka minut się wczyta. Prosiłbym także jakbyś mógł powiedzieć o jaką konkretnie funkcję ci chodzi, bo i tak prawdopodobnie będę musiał przepisać i dostosować do swojej strony

komentarz 13 października 2019 przez sysadmin Obywatel (1,000 p.)

Dopiero teraz zrozumiałem o co Ci w ogóle chodzi. Problem w tym, że na szybko nie odpowiem na pytanie. Natopmiast wiem jedno, najpierw musi się załadowac skrypt nr 1, potem nr 2. https://www.upwork.com/hiring/web-development/11-tips-to-optimize-javascript-and-improve-website-loading-speeds/

Możesz ładować z opóźnieniem, lub asynchronicznie pliki js, ale tylko te zewnętrzne.

<script src="1.js" defer></script>
<script src="2.js" defer></script>

I każdy z tych skryptów odpowiedzialny byłby za ładowanie kawałka strony. Jednak, nie mam pojęcia, czy to rozwiąże problem. Wszędzie jest o optymalizacji, a ty zażynasz dosłownie przeglądarkę taką ilością danych.

komentarz 13 października 2019 przez devloop Nowicjusz (190 p.)

Na szybko odpiszę, wydaje mi się że to przy renderowaniu html i css się wysypuje, dlatego chcę użyć js aby powoli ładowało tak aby user widział że coś się dzieje, skąd ten wniosek? ponieważ testuje to na localhoscie więc nawet nie musi pobierać plików a i tak się wysypuje, dokładnie wczytuje do pewnego momentu stronę i traktuje już jako wczytaną, po zastosowaniu js tego którego wstawiłem powyżej wczytuje stronę startową i po paru minutach całość, chcę jedynie zamienić te kilka minut na dynamiczne małe kawałki i nie wiem jak to zrobić bo nie jestem zbyt biegły w js (ponieważ jestem początkujący)

zapoznam się z tym co wrzuciłeś i 'skomentuję' to później

dane to html i css i to przy ich renderowaniu chyba się wywala więc asynchroniczne i inne techniki optymalizacji raczej nie pomogą

proszę głównie o przerobienie tego js aby w czasie rzeczywistym dostawiał kod html i css a nie tak jak teraz po paru minutach całość, bo user pomyśli ze to koniec wczytywania strony