Problem z wydajnością Inline SVG a osadzanie lub iframe

Mam dwa obrazy SVG, oba razem mają około 8000 linii i składają się z kilku kształtów z gradientami. Bez wzorów, filtrów, tekstów, tylko podstawowe elementy graficzne z obrysami, wypełnienie proste lub gradientowe.Problem z wydajnością Inline SVG a osadzanie lub iframe

W tej chwili są one wprowadzane inline do kodu HTML podczas jego generowania, dzięki czemu kod źródłowy staje się cichy. Czy zmniejsza to wydajność animacji, aby lepiej było osadzić svg w inny sposób?

Czy istnieje ogólna zasada, którą należy przestrzegać podczas umieszczania svg?

Pozdrowienia Philipp

Źródło

2012-05-15 philipp

Wszystko, co w dużym stopniu korzysta z DOM-a i spowalnia renderowanie strony, spowoduje duży rozmiar SVG. Nawet jeśli korzystasz z ramek iframe lub innych metod osadzania, nie wiesz, kiedy przeglądarka załaduje się i wyrenderuje ... poza tym, że używasz Javascript, aby upewnić się, że jest on ładowany dopiero po wyrenderowaniu strony. Może najpierw renderujesz symbol zastępczy. – codingjoe

@John to dobry punkt, dzięki – philipp

Jeśli użyć tagu HTML5 SVG osadzić inline SVG, że nie będzie po prostu zwiększyć rozmiar pliku html ale również zachować DOM zajęty i adresu przeglądarki renderujący.

Jeśli korzystasz z elementów iframe, których nie wiesz, kiedy zostaną załadowane lub renderowane, przynajmniej nie we wszystkich przeglądarkach.

HTML5 oferuje JavaScript i może być rozwiązaniem. Po prostu poczekaj na ciało do load, a następnie wstrzyknij SVG.

Można użyć body-onLoad lub jQueries ready()-funktion

Oto jak to zrobić w 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>

bym nawet pójść o krok dalej i raczej używać zastąpić go iframe i gziped SVG as described here.

Źródło

2013-05-02 14:23:52 codingjoe

Problem z wydajnością Inline SVG a osadzanie lub iframe

Odpowiedz

Powiązane problemy