Problema de rendimiento SVG en línea vs. incrustación o iframe

Tengo dos imágenes SVG, ambas juntas tienen alrededor de 8000 líneas y consisten en varias formas con degradados. Sin patrones, filtros, textos, solo elementos gráficos básicos con trazos, relleno simple o degradado.Problema de rendimiento SVG en línea vs. incrustación o iframe

En este momento se inyectan en línea en el HTML mientras se genera, por lo que el código fuente se vuelve grande. ¿Esto disminuye el rendimiento de la animación, por lo que sería mejor integrar el svg de manera diferente?

¿Hay una regla general a seguir al insertar svg?

Saludos Philipp

Fuente

2012-05-15 philipp

Todo lo que usa DOM mucho con la renderización lenta del sitio también lo hará un SVG grande. Incluso si usa iframes u otros métodos de incrustación, no sabe en qué momento el navegador carga y lo procesa ... , excepto que utiliza Javascript para asegurarse de que solo se carga después de que se procesó la página. Quizás hagas primero un marcador de posición. – codingjoe

@John es un buen punto, gracias – philipp

Si se utiliza la etiqueta HTML 5 SVG para incrustar la línea SVG que no sólo aumentar el tamaño del archivo HTML DOM sino también mantener ocupado y sus navegadores procesador.

Si utiliza iframes, no sabe realmente cuándo se carga o se procesa, al menos no para todos los navegadores.

HTML5 le ofrece JavaScript y esa podría ser la solución. Simplemente espere a que el cuerpo load y luego inyecte el SVG.

Puede utilizar body-onLoad o jQueries ready()-funktion

Aquí está cómo se hace en jQuery:

<!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>

yo incluso ir un paso más allá y más bien utilizar reemplazarlo con un iframe y gziped SVG as described here.

Fuente

2013-05-02 14:23:52 codingjoe

Problema de rendimiento SVG en línea vs. incrustación o iframe

Respuesta

Cuestiones relacionadas