Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Metoda na JSONa
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
mwolodzko
Piszę aplikację na androida w jquery + phonegap. Jest to katalog offline, dane do katalogu eksportowane są z bazy presta shop do formatu JSON. Problem polega na tym, że plik JSON zawiera ok. 10tys. rekordów i zajmuje ponad 13MB. Przez co wyświetlenie wyników trwa stanowczo za długo. Moje pytanie: w jaki sposób zminimalizować czas na wyświetlenie wyników.

Próbka danych w formacie JSON:
  1. {
  2. "items": [
  3. {
  4. "id_category": "25",
  5. "id_product": "4283",
  6. "name": "Wahl Cutek Advanced, profesjonalna prostownica do włosów",
  7. "description": "<p> \t<strong>Prostownica Wahl Cutek Advanced</strong> uczyni prostowanie włosów prostym i przyjemnym. Wyposażona w ceramiczne płytki o szerokości 24mm, wykonane w technologii SENSATION-CERAMIC, która sprawia, że ciepło rozprowadzane jest po nich równomiernie. Lekko zaokrąglone brzegi płytek pozwalają na większą swobodę podczas stylizacji włosów, umożliwiając nawet kręcenie loków i fal.</p> <h3> \tWahl Cutek Advanced to profesjonalna prostownica na każdą kieszeń</h3> <p> \tRegulacja temperatury w zakresie 150şC - 230şC umożliwa dostosowanie jej do każdego rodzaju włosów - od bardzo cienkich do grubych. Jej ergonomiczny kszłałt i obrotowy kabel zasilający gwarantują wygodną pracę.</p> <h4> \t<span style=\"font-weight: bold; \">Najważniejsze cechy prostownicy Wahl Cutek Advanced</span></h4> <ul> \t<li> \t\tRegulowana temperatura w zakresie od 150şC aż do 230şC.</li> \t<li> \t\tSuper szybkie nagrzewanie w przeciągu 30 sekund.</li> \t<li> \t\tCeramiczna technologia zapewniająca łagodne prostowanie nadając włosom jedwabisty połysk.</li> \t<li> \t\tAntystatyczna.</li> \t<li> \t\tZaokrąglone ruchome płytki pozwalają tworzy piękne loki, łagodne fale i doskonale prostują włosy.</li> \t<li> \t\tProfesjonalny obrotowy 2,8 metrowy kabel z możliwością powieszenia za tzw. „uszko”.</li> </ul> <p> \tGwarancja obejmuje 12 miesięcy od daty zakupu.</p>",
  8. "id_image": "4309",
  9. "cena": "109.99"
  10. },
  11. {
  12. "id_category": "25",
  13. "id_product": "4284",
  14. "name": "BaByliss PRO Nano Titanium Sol-Gel, prostownica do włosów 25mm, BAB2654NTE",
  15. "description": "<p> \tNiezawodna <strong>prostownica do włosów BaByliss Pro Nanotitanium Sol-Gel</strong> o symbolu BAB2654NTE.<br /> \tTechnologia wykończenia prostownicy zapewnia idealne i bezpieczne dla włosów prostowanie. Płytki prostownicy o szerokości 25mm wykonane zostały w nanotechnologii Sol-Gel. Posiadają nową - unikalną - powłokę z mikrocząsteczek ceramiczno-tytanowych. Ponadto płytki są znacznie bardziej gładkie, dzięki czemu zapewniają niesamowite efekty prostowania przy ogromnej dbałości o Twoje włosy.</p> <h3> \tSpecyfikacja techniczna prostownicy BaByliss PRO BAB2654NTE:</h3> <ul> \t<li> \t\tpłytki o szerokości 25 mm wykonane w technologii <strong>Nantitanium Sol-Gel</strong></li> \t<li> \t\t5 poziomów temperatury: 130şC, 150şC, 160şC, 180şC, 210şC - regulator</li> \t<li> \t\tprzełącznik start/stop</li> \t<li> \t\tlampka kontrolna</li> \t<li> \t\tobrotowy przewód 2,7 m</li> \t<li> \t\tnapięcie 120/230V</li> \t<li> \t\tmoc: 33W</li> </ul> <h4> \tWskazówki dotyczące ustawienia temperatury:</h4> <ul> \t<li> \t\t130şC - włosy delikatne i wrażliwe</li> \t<li> \t\t150şC - włosy cienkie</li> \t<li> \t\t160şC - włosy normalne</li> \t<li> \t\t180şC - włosy gęste</li> \t<li> \t\t210şC - włosy kręcone</li> </ul> <p> \t<strong>Warunki gwarancji:</strong> Produkt jest oryginalny i fabrycznie zapakowany. Okres gwarancji wynosi 12 miesięcy.</p>",
  16. "id_image": "4310",
  17. "cena": "159.00"
  18. }
  19. ]
  20. }
Pyton_000
Porcjować po np. 500?
Dobierać ajaxem kawałki i renderować.

Na pewno masz stronicowanie tego, czy coś.
Crozin
Podstawowe pytanie: czy dane są kompresowane, np. gzipem?
PrinceOfPersia
na pewno to co napisał przedmówca.
poza tym można jeszcze zoptymalizować. Zauważyłem np. że używasz HTMLa w stringach:
  1. <span style=\"font-weight: bold; \">Najważniejsze cechy prostownicy Wahl Cutek Advanced</span></h4> <ul> \t<li> \t\tRegulowana temperatura w zakresie od 150şC aż do 230şC.</li>

a np. gdybyś zamiast HTMLa używał bardziej lekkiego zapisu Markdown a potem konwertował na HTMLa, miałbyś mniej znaków.
http://en.wikipedia.org/wiki/Markdown

Dalej, można jeszcze minimalizować JSONa (usuwać białe spacje).

Albo nie wiem, zapisywać w formie tablic zamiast obiektów, czyli zamiast:
[JAVASCRIPT] pobierz, plaintext
  1. {
  2. "id_category": "25",
  3. "id_product": "4283",
  4. "name": "Wahl Cutek Advanced, profesjonalna prostownica do włosów",
  5. "description": "<p> \t<strong>Prostownica..........",
  6. "id_image": "4309",
  7. "cena": "109.99"
  8. },
[JAVASCRIPT] pobierz, plaintext


[JAVASCRIPT] pobierz, plaintext
  1. [ "25", "4283", "Wahl Cutek Advanced, profesjonalna prostownica do włosów", "<p> \t<strong>Prostownica..........", "4309", "109.99"]
[JAVASCRIPT] pobierz, plaintext


a potem najwyżej przerabiać/deserializować te tablice na obiekty w funkcji która to wczytuje.

chociaż i tak wydaje mi się, że najwięcej by pomogła właśnie kompresja jakimś Gzipem jednak...

ew. zmienic w ogóle podejście i nie ładować tego do jsona, a trzymać to w jakiejś bazie danych czy czymś takim...

EDIT:
Cytat
Moje pytanie: w jaki sposób zminimalizować czas na wyświetlenie wyników.

wyświetlenie czy pobranie? Bo i tak chyba nie wyświetlasz biednemu człowiekowi 10 tysięcy rekordów naraz? Bo to by nie miało sensu. Dwa, że wtedy problemem nie byłby pewnie JSON, tylko raczej sposób renderowania (i zapewne zbyt duża liczba obiektów do wyświetlenia na raz)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.