正在加載SVG代碼到HTML未優化或比IMG標籤慢？

最近我採用了一個簡單的網絡規則：保持DOM最小。我試圖在DOM中插入儘可能少的元素，但現在我不得不插入一些SVG圖像（約30）。正在加載SVG代碼到HTML未優化或比IMG標籤慢？

目前他們正在加載到一個img標籤，但我想插入他們的代碼本身，所以我可以自定義一些顏色的類。

看看SVG代碼，雖然我看過很多標籤。如果我錯了，糾正我會成爲DOM元素。

我的問題是，將加載代碼直接在我的HTML使得我的頁面比加載作爲外部圖像要重得多嗎？我如何測試我的「代碼/ DOM權重」以比較和基準測試？

2016-11-12 raphadko

即使你做負載SVG圖像到IMG，瀏覽器必須分析它的標記，就像如果不是於一體。（實際上在解析中有更多的約束）。所以，是的，直接附加它會使你當前的DOM更重，通過img標籤加載它只會爲這個img創建另一個DOM。但無論如何，除非您的svg擁有超過十萬個元素，否則大多數現代設備和瀏覽器都可以正確處理它。 – Kaiido

您無法訪問圖像的DOM。 DOM的「重量」雖然相同。除了詢問瀏覽器實現者之外，沒有辦法告訴我，幸好我只是告訴過你知道你知道的。 –

在很多情況下，是的。 SVG可以是冗長的，因此可以權衡一個頁面。但是，將SVG與實際圖像進行比較是圖像大小與您想如何處理圖像的平衡操作。

一如既往，唯一知道的方法就是測量和測試。

但你如何操縱圖像的顏色？ SVG很可能會更容易做到，並且可能對於png或jpg來說很難或不可能。所以這個決定可能已經爲你做了。

來源

2016-11-12 00:39:07 Rob

關於如何測試dom重量的任何想法？ – raphadko

OP在內聯HTMLSVG與加載的SVG文檔之間進行了切換。這裏與柵格圖像的比較不相關。 – Kaiido

正在加載SVG代碼到HTML未優化或比IMG標籤慢？

回答

相關問題