Zajmuję się tworzeniem aplikacji internetowej za pomocą jQuery Mobile po stronie klienta i PHP & MySQL po stronie serwera. Aplikacja działa doskonale w przeglądarkach komputerowych, takich jak Safari, Chrome i Firefox. Jednak na iPadzie - gdzie aplikacja jest otwierana jako klip internetowy z ekranu głównego - aplikacja działa znacznie gorzej. Przewijanie działa dobrze, ale kliknięcie linku w celu załadowania strony z serwera przebiega bardzo wolno.jQuery Mobile bardzo wolno na iPadzie
Nagranie na ekranie iPada pokazuje, że (na przykład) po stuknięciu trwa 0,3 sekundy, zanim podświetlony element zostanie podświetlony i wyświetlony zostanie program ładujący. Po 1,0 s od początku dolna połowa otwartej strony jest wyświetlana/pokazywana (pod ładowarką). Następnie zajmuje to kolejne 0,6 sekundy, zanim wyświetlona zostanie górna część strony, co daje całkowity czas potrzebny do załadowania strony 1,6 sekundy. Film pokazujący ten proces (odtwarzany przy 25% oryginalnej prędkości) można znaleźć pod numerem here.
Rozumiem, że ładowanie strony (przez WiFi) zajmuje trochę czasu, ale nie rozumiem, dlaczego renderowania górną połowę strony bierze dodatkowy 0,6 sekundy. Zakładając, że strona jest w pełni załadowana po 1,0 sekundzie (ponieważ dolna połowa strony jest już wtedy wyświetlana), myślę, że zajmuje to również dużo czasu, ponieważ zajmuje tylko około 0,5 sekundy w Safari na moim Macu . Ale to może być przyczyną mojego wolniejszego procesora na iPadzie i opóźnienia połączenia Wi-Fi.
Mam nadzieję, że ktoś zna pewne optymalizacje (po stronie klienta), aby aplikacja działała (lub czuła) szybciej. Wyłączyłem już animacje w jQuery Mobile, a ja sam spróbuję zoptymalizować stronę serwera.
Może te rzeczy są ważne, aby wiedzieć:
- Wszystkie strony mogę powrócić z serwerem mieć pełny
<head>z wieloma odwołuje stylów i skryptów. Czy jQuery Mobile ignoruje<head>lub dietę, która wymaga mocy obliczeniowej? - Mam większość nagłówków i stopek na większości stron. Używam do tego celu
<div data-role="…" data-position="fixed" data-id="…" data-tap-toggle="false">. Nagłówek i stopka są również zawarte na wszystkich stronach. - Większość nagłówki mają przycisk po lewej stronie (
<a data-role="button">tag), tytuł w środkowym znacznikiem (<h1>) i controlgroup po prawej stronie (<div data-role="controlgroup">) zawierającej dwa przyciski (<a data-role="button">). - Jeden przycisk w nagłówku jest ustawiony na wstępne pobranie strony do miejsca, do którego łączy (
<a href="…" data-role="button" data-rel="dialog" data-prefetch>). Ten przycisk znajduje się na każdej stronie, ale linkhrefjest taki sam na każdej stronie. To może być coś ..? - Wszystkie stopki mają pasek nawigacji (
<div data-role="navbar">) z kilkoma pozycjami (<li><a>). - Niektóre strony są widokami listy z możliwościami filtrowania (
<ul data-role="listview" data-filter="true">). Obecnie zawiera tylko kilka pozycji (<li><a>, maks. 5) i dzielników list (<li data-role="list-divider">). - Pozostałe strony to formularze (
<form>) zawierające również listę wyświetleń (<ul data-role="listview" data-inset="true">) z kilkoma polami formularzy w środku (<li data-role="fieldcontain">).
Cóż, to są wszystkie "specjalne" rzeczy, które mogę wymyślić. Jeśli chcesz dowiedzieć się więcej lub zobaczyć kod źródłowy, proszę dać mi znać.
Użyłem jQuery Mobile do opracowania wewnętrznego środowiska programistycznego. Z przyjemnością stwierdzam, że wydajność była dość imponująca zarówno w ramach, jak i wynikowych aplikacjach internetowych. To prowadzi mnie do myślenia, może być coś na twoich stronach, które może pochłaniać dużo przetwarzania? Czy widzisz, zauważasz i publikujesz takie części, aby SO mógł mieć lepszy wygląd? – kishu27
@ kishu27 Dodałem kilka szczegółów technicznych opisujących moją aplikację. – Jonathan
Gdybym był w twojej sytuacji, zacząłem usuwać fragmenty renderowania strony (komentując to) i sprawdzać, co wpływa na wydajność. Rzeczy, o których wspomniałeś, są tym, co również zrobiłem, z wyjątkiem # 1. I nie wpływają na wydajność. – kishu27