javascript - Hukommelsesstyring ved håndtering af svg < image > s

Indlæg af Hanne Mølgaard Plasc

Problem



Jeg bruger SVG-Edit til at skabe en ret stor SVG-billedfil. Problemet er, at hukommelsesbrugen virker sindssyg, og jeg undrer mig over, om dette er normalt, eller der er ting, jeg mangler i optimeringsafdelingen. [1]


Her er en tabel, der viser hukommelses delta i hvert trin, ved hjælp af Firefox 10 om: hukommelsesside:
om: hukommelse


Niveauer:



  • Før: Før SVG-Redigering er indlæst

  • Klar: SVG-Rediger er indlæst

  • Indlæs 35 billeder med en samlet størrelse på 16,6 MB *

  • Forhåndsvisning af genereret fil *

  • Closed Preview *

  • Lukket faneblad, udløs FF-hukommelsesoprydning via ca.: hukommelsesside



* Min brugerdefinerede funktion, ikke SVG-Rediger 's


Som du kan se i deltaet Klar < -> Indlæse billeder, er hukommelsesforbruget stort set steget med 300 MB! At indlæse 16 MB billeder! Måden jeg indlæser billederne på er ved at oprette ObjectURL, så det kan ikke være årsagen til det. Under forhåndsvisning er jeg, når jeg omdanner ObjectURL-arrayet til data: uri, så jeg forstår den enorme stigning der (stadig lidt for meget tror jeg). Kravet er at have en enkelt resulterende SVG med alle billeder indlejret, så det er typisk for hver SVG at være 50 MB eller mere i størrelse. [2]


Det er værd at være opmærksom på, at SVG-Edit ikke bruger Canvas. Det er DOM-baseret editor.


Jeg vil sætte pris på enhver hjælp, især om hvordan jeg virkelig kan nedskære, hvad der præcist tager hukommelse.


Her er den forenklede flow ved indlæsning af billeder (input change () event):



  • Indstil Image.src til objektURL

  • Indstil Image.onload hændelse for at oprette SVGImage element med src, bredde, højde, kopieret fra Image. revokeObjectURL () udføres også

  • gem SVGImage i globale array af objekt {imageID, < image > element, filhåndtering}

  • tilføj SVGImages til SVG


Bedste reference


16MB er størrelsen af ​​SVG. 300MB jump er der for billedoverflader, som er pixeldata. Dette vil være 4 bytes pr pixel af gengivet billede.


Så du kunne have et lille SVG billede med kun et 1000px ved 1000px rektangel i det; dette kunne sandsynligvis ske i under 500 bytes SVG. Men den gengivne version ville være 4MB pixel data ....