Leistungsproblem inline SVG vs Embed oder iframe

Ich habe zwei SVG-Bilder, beide zusammen haben etwa 8000 Zeilen und bestehen aus mehreren Formen mit Farbverläufen. Keine Muster, Filter, Texte, nur einfache grafische Elemente mit Strichen, einfache oder Verlaufsfüllung.Leistungsproblem inline SVG vs Embed oder iframe

Im Moment werden sie inline in den HTML-Code injiziert, während er generiert wird, so dass der Quellcode ruhig groß wird. Verringert dies die Leistung für Animationen, so dass es besser wäre, die SVG anders einzubetten?

Gibt es eine allgemeine Faustregel bei der Einbettung von Svg?

Grüße philipp

Quelle

2012-05-15 philipp

Alles, was DOM verwendet, verlangsamt das Rendern der Site, so dass ein großes SVG entsteht. Auch wenn Sie iframes oder andere Einbettungsmethoden verwenden, wissen Sie nicht wann der Browser geladen und gerendert werden soll ... mit Ausnahme von Javascript, um sicherzustellen, dass es nur geladen wird, nachdem die Seite gerendert wurde. Vielleicht rendern Sie zuerst einen Platzhalter. – codingjoe

@John das ist ein guter Punkt, danke – philipp

Wenn Sie den HTML5 SVG-Tag verwenden, um die SVG inline einbetten, das nicht nur die HTML-Dateigröße erhöhen, sondern auch DOM beschäftigt und Ihr Browser-Renderer halten.

Wenn Sie iframes verwenden, wissen Sie nicht wirklich, wann es geladen oder gerendert wird, zumindest nicht für alle Browser.

HTML5 bietet Ihnen JavaScript und das könnte die Lösung sein. Warten Sie einfach auf den Körper load und injizieren Sie dann das SVG.

Sie body-onLoad oder jQueries verwenden können ready()-funktion

Hier ist, wie es ist in jQuery getan:

<!DOCTYPE html> 
<html> 
<body> 
<div id="svg-01" class="placeholder"></div> 
<script src="path/to/jQuery.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#svg-01").replaceWith('<svg><!--// some svg //--></svg>'); 
    }); 
</script> 
</body> 
</html>

ich sogar noch einen Schritt weiter gehen und lieber ersetzen verwenden Sie es mit einem Iframe und gziped SVG as described here.

Quelle

2013-05-02 14:23:52 codingjoe

Leistungsproblem inline SVG vs Embed oder iframe

Antwort

Verwandte Themen