typescript - openlayers webbapplikation körs mycket långsamt på mobil (Android Chrome)

Jag vet att detta kanske låter som en typisk fråga som borde stängas, men jag har stött på ett hinder och vet inte var jag ska leta efter en lösning, så förhoppningsvis kommer jag att ge tillräckligt med detaljer för att göra denna fråga acceptabel för SO.

Jag utvecklar en OpenLayers-webbapplikation som kan nås här.

Dess källkod finns i detta GitHub-repo.

Om du testar appen från en dator borde användarupplevelsen vara bra (åtminstone är detta min personliga erfarenhet).

Men när jag försöker det från min mobila webbläsare (Chrome, min telefon är en Google Pixel 2), är det extremt långsamt.

Speciellt, varje gång jag försöker interagera med appen genom att röra vid skärmen för att (t.ex.) navigera på kartan, finns det en betydande fördröjning mellan det att jag rör vid skärmen och applikationens respons.

Jag försökte till och med använda ChromeDevTools-konsolen för att inspektera nätverkskonsolen med min telefon ansluten via en USB-kabel, men kunde inte förstå vad som kunde vara orsaken till denna långsamhet.

Vissa detaljer:

  1. Jag använder OpenLayers version 6.2.1
  2. Jag använder TypeScript för att utveckla den här appen
  3. Jag använder Parcel-bundlern för att paketera det i en dist-mapp
  4. Jag kopierar mina byggda filer till min server för att tillhandahålla appen

Det enda jag märker är att de byggda filerna har konstiga namn, som src.9f4704d2.css.

Jag antar att detta orsakas av bundlern (parcel), när jag kör kommandot npm run build.

Men jag har verkligen ingen aning om detta kan vara ett problem.

Men om någon kunde hjälpa mig att kasta ljus över detta, skulle jag vara mycket tacksam. Jag kan också ge mycket mer detaljer om det efterfrågas, men mitt huvudproblem är att jag inte vet exakt var jag ska leta för att lösa problemet.

REDIGERA 1

Jag använder @import-regler i min CSS, och jag läste här att

@import-regler kan vara nästlade, så webbläsaren måste ladda och tolka varje fil i serie.

Jag vet inte om det här är problemet, men jag kommer att försöka använda flera <link>-taggar istället och se om prestandan blir bättre...

REDIGERA 2

Ersättningen av @import med flera <link>-taggar löste inte problemet.

REDIGERA 3 (HAR SANNOLIKTVIS HITTA PROBLEMET)

Okej, jag har begränsat problemet till att finnas på de lager jag skapar.

Jag analyserar faktiskt tre WMS-URL:er, extraherar varje lager från dem och lägger till ett nytt ImageLayer med en ImageWMS-källa för varje av dem på kartan.

Det första jag gjorde som påskyndade applikationen var att använda TileImage och TileWMS istället för ImageLayer och ImageWMS.

Den relevanta koden är nedan:

import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

export class OperationalLayer{
    private operationalLayer: TileLayer;
    id: String;
    
    constructor(url: string, name: string, id: string) {
        const source = new TileWMS({
            params: {'LAYERS': name},
            url: url,
        });

        this.id = id;

        this.operationalLayer = new TileLayer({
            source: source,
        })
    }

    getLayer() {
        return this.operationalLayer;
    }
}

Ändå var applikationen väldigt seg.

Sedan försökte jag använda endast en URL och lade därmed till totalt bara 3 lager på min karta.

Nu fungerar det acceptabelt.

Jag tror att huvudpoängen är att jag behöver fokusera på den bästa strategin för att lägga till mina lager på kartan: om jag ska ha ett ImageWMS med alla WMS-lager på en gång, eller ett ImageWMS per lager.

Den senare (vilket är vad jag gör) skulle ge mig möjligheten att enkelt slå på/av varje lager; den förstnämnda kommer nog att vara snabbare.

Eller finns det ett alternativ jag inte har övervägt?

Svar #1

Du bör använda viewport-meta på din sida.
Något som:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Detta kommer att fixa sidstorleken och förhindra att hela sidan ändras i storlek. Detta kommer också att minska sidstorleken och de pixlar som hanteras i vyfönstret.

Du kan också titta på meta för mobil webapp för att förbättra din app, till exempel web-app-capable-taggen.

Försök att använda fast position för din karta och din menyrad (och alla sidor som kan täcka kartan) för att förbättra rendering.

Använd TileWMS: kakorna kommer att cachas och inte begäras vid varje förflyttning (endast de nya kakorna kommer att begäras). Det finns också ett hdpi-alternativ i lagerdefinitionen som gör bilden mer detaljerad men ökar storleken på duken (och ritoperationer), försök att sätta det till false och titta på resultatet för att göra ditt val.

Relaterade artiklar