Keskustelu: Ohjelmointikysymykset: JavaScript: Lautapelien lataaminen hidastuu, kun lataa monta peliä

Hei,

Minulla on lautapeliohjelma, jossa voi pelata lautapelejä, minulla on kevyt ongelma jota en osaa itse ratkoa.

Tämä ongelma on kun minä lataan pelejä, eli, ensimmäinen ja toinen ja kolmaskin lautapelin lataus samalla lautapeliohjelman käynnistys kerralla sujuu yleensä ihan hyvin, mutta, sitten neljännen ja kymmenennen lautapelin lataamisen aikana, kaikki lataus toiminta hidastuu johonkin viidennekseen, kenties jopa hitaammaksi.

Mistä tämä hidastuminen voi johtua, minulla on perus javascriptiä, joka rakentaa lautapelin svg grafiikasta, ja bitmap grafiikasta, eli, path ja drawimage on käytössä.

Onko kyseessä javascript heap, kuvamuistin korruptoituminen, vaiko garbage collection liian voimakasta, kun kuvia rakennetaan pixeli tasolla ?

Vai voiko olla kyseessä linux ongelma, taikka selain ?

En itse osaa ratkoa ongelmaa, olisi mukava jos joku osaisi neuvoa suuntaa mistä etsiä vikaa. :).

Minulla on ubuntu 18.04 ja chrome ja chromium selaimet.

--

Tässä on vielä linkki lautapeliohjelmaan, jos siintä lataa useita pelejä, niin, yhteäkkiä sitten seuraavien lautapelien lataaminen hidastuu, viidennekseen kenties jopa kymmenenteen osaan nopeudessa.

Tästä linkki -> https://www.lautapelisivusto.com/LautapeliOhjelma/jumpto_lps.html

:) :) :)

--

No miten poistat ladatut tiedot yms. muun datan muistista, kun käyttäjä vaihtaa peliä?

Hei,

Minulla ei ole sen tarkempaa tuntemusta javascript garbage collectioon, mutta, minä laitan sen null tilan käyttöön.

Minä laitan pelin kuvien kohdalle null, ja isommat muuttujat myös null.

Ja sitten taas käytän samoja muistipaikkoja uudestaan.

:) :) :)

Minulla on kuvien kohdalla muuttuja array jossa kuvat ja canvakset ovat, ja sitten vain null aina kun en enää käytä kuvaa ja suora muuttuja = new image (); kun taas käytän kuvaa.

Lisäys.
Minä optimoin koodia hieman, minä laitoin runsaat * ja / ja runsaat + ja - laskut, niin, taulukoihin, ja ryhdyin laittamaan null tilaan, myös pienempiä arrayita.
Minulla väheni kerto ja plus laskujen ja if ehto lausekkeitten määrä kymmenillä miljoonilla laskusuorituksilla, kun tein taulukot, joista ottaa rgb arvot.
Kenties nyt toimii kauemmin, täytyy testailla.
Tuo kerto laskujen laittaminen taulukoihin auttoi, mutta, lataus muuttuu silti niin hitaaksi että kukaan ei jaksa odottaa.
Javascript alkaa hidastaa * ja / ja + ja - laskuja, kun noin 10 lautapeliä on pelattuna ja yrittää ladata uutta.

--

Korjattuna,

Hei, minä taisin ainakin osin jotakin toiminnassa korjata, nyt voi ladata ainakin 20 lautapeliä ja pelata, ilman että seuraavan lataus hidastuu.

Minä laitoin delete object(); käskyn, ja sitten laitoin tavallisia muuttujia null tilaan.

Lisänä laitoin * ja / ja + ja - laskut taulukoihin, minulla oli paljon kerto ja plus laskuja, joissa oli jopa if ehto lauseita mukana, minä laitoin taulukkoon, ne mitkä pystyin niin toimimaan.

Minulla oli nuo arrayt laitettu aiemmin null tilaan, mutta, javascript taitaa säilyttää nämä muuttuja[1] ja muuttuja[2] ja muuttuja[jne..] muistipaikat silti, en tiedä, mutta, nyt ei ole enää jämähtänyt hitauteen vähään aikaan.

Toivotaan, että, korjaantui.

:) :) :)

--

Ensinnäkin toivottavasti akuutti ongelma ratkesi, mutta näin jatkoa ajatellen... Eli en ole erityisemmin tehnyt mitään isoja projekteja nimenomaan Javascriptillä joten en osaa ottaa kantaa näin muuten perehtymättä lähdekoodiin. Tulee kuitenkin heti ensimmäisenä mieleen kun sivustollasi pikaisesti kävin, että onko käytössäsi mitään debuggeria tai vastaavaa? Ihan Chromen DevToolsissakin on paljon hyviä työkaluja.

Yleisesti yhtään isommassa projekteissa voi olla aika vaikea selvittää tarkasti mikä on suorituskykyongelman lähde ilman mitään debuggeria, etenkin jos käyttää kolmannen osapuolen kirjastoja. Kun oppii debuggamaan edes alkeellisesti, niin yleisesti ottaen pitäisi olla mahdollista saada selville aika nopeasti mikä osa koodia suorituskykyongelman aiheuttaa, jos ongelma on noin tuntuva.

Debugger,

Minä onnistuin korjaamaan tuon edellisen ongelman, minä aloin käyttämään delete käskyä, tuon muuttujan null asetuksen sijaan, ja sitten minulla väheni * ja + laskut kymmenillä miljoonilla kuvan latauksessa, kun tein taulukot * ja + laskuilleni.

Mitä debuggereita on open source puolella ? Minä alan opettelemaan hieman lisää näitä google chromen työkalu sivuja myös, olen niitä toki hieman käyttänä, mutta, on siellä varmaan jotakin uutta vielä.

:) :) :)

--

Delete-operaattorin käyttö ei eroa mitenkään nulliksi asettamisesta, joten sillä ei voi olla vaikutusta tässä asiassa. Sillä voi sitä paitsi vain poistaa olion propertyjä mutta ei tavallisia muuttujia. (Paitsi jos olet aivan pihalla etkä käytä strict modea.)

HannuTapio kirjoitti:

Mitä debuggereita on open source puolella ? Minä alan opettelemaan hieman lisää näitä google chromen työkalu sivuja myös, olen niitä toki hieman käyttänä, mutta, on siellä varmaan jotakin uutta vielä.

Pikaisella perehtymisellä vaikuttaa siltä, että erilaisia debuggaukseen suunnattuja työkaluja on jonkin verran erityyppisiä ja laatuisia. Minulle tulee mieleen, että kannattaisi ehkä ensin opetella nuo selaimen varsin kattavat työkalut kunnolla ja katsoa mihin se riittää, ennen kuin lähtee mitään muuta opiskelemaan. Erityisen olennaista siellä on Console- ja Performance välilehdet (oletettavasti konsoli ja suorituskyky suomeksi). Ylipäätänsä veikkaisin, että Performance-välilehdeltä paljastuu aika äkkiä suorituskykyongelman lähde jos sitä osaa tulkita ja erityisesti jos on itse koodannut toteutuksen.

Ihan sellainenkin tulee mieleen, että jos ongelma palaa ja ei esiinny säännönmukaisesti joka kerta, niin onko vika jossain ihan muualla kuin koodissa. Käyttöjärjestelmän uudelleenkäynnistys, selaimen uudelleenkäynnistäminen ja tietyissä tapauksissa selaimen välimuistin tyhjennys ovat sellaisia toimenpiteitä, jotka saattavat yllättävän usein ratkaista pulman. Erityisesti vielä se, ettei selaimessa ole 40 välilehteä auki samaan aikaan. Toki saatat tietää jo nämä kaikki, mutta mainittakoon kuitenkin.

Nythän ei ollut kysymys varsinaisesti siitä, mikä kohta on hidas, vaan ongelma oli koodin jatkuva hidastuminen.

Ei ole mahdollista, että itse laskut maagisesti hidastuisivat. Jos koodi hidastuu vähitellen ja korjautuu uudelleenlatauksella, yleensä vika on muistin täyttymisessä. Kyseessä on siis muistivuoto (memory leak). Näitäkin voi etsiä eri työkaluilla.

Selaimen tapauksessa tärkeää on varmistaa, että vanhentuneet tiedot (elementit, tapahtumankäsittelijät, setInterval-silmukat ym.) todella poistetaan eikä vain piiloteta.

Hidastuminen,

Kiitos neuvoista, minulla toimii tällä hetkellä ihan ok lautapeliohjelmani.

--

Minä hieman tuosta "use strict";

Minun ohjelmani on rakentuna, perus javascriptin mukaan tällä hetkellä, ja käytän globaalia ympäristöä, jossa kaikki .js fileet voi käyttää mitä tahansa functiota ja globaalia muuttujaa, missä tahansa .js fileessä, ja mistä tahansa .js fileestä vaan.

Minä mietin, että, jos en laita tuota "use strict"; käskyä, koko .js fileen yläosaan, vaan ainoastaan function ensimmäiselle riville, tämä silloin varmaankin aiheuttaa sen että tämä function sisältö on strict.

Ja voin silti jatkossa, pitää kaikki functiot globaalina, ja käytettävissä mistä tahansa .js fileestä käsin.

Minä uskon, että, tämä on paree tällä hetkellä, että, laitan tuon "use strict"; käskyn functioitten ekalle riville, niissä functioissa, missä ei tarvitse kutsua toisia functioita ja missä ei ole globaaleja muuttujia.

:) :) :)

--

Metabolix kirjoitti:

Ei ole mahdollista, että itse laskut maagisesti hidastuisivat. Jos koodi hidastuu vähitellen ja korjautuu uudelleenlatauksella, yleensä vika on muistin täyttymisessä. Kyseessä on siis muistivuoto (memory leak). Näitäkin voi etsiä eri työkaluilla.

Jep, juurikin näin. En näköjään ajattelut kovin pitkälle omissa neuvoissani :)