2010-02-17 111 views
3

在影響性能之前,一個HTML文檔中需要多少個div標籤?在這種情況下,標籤不是嵌套的,每個標籤中的內容都是最小的(背景顏色/圖像)。多少個div標籤太多?

這個問題是對前一個問題的後續處理; Drawing lines with clickable points using JavaScript

在這裏,我決定使用HTML和CSS來做到這一點。

<div>標籤的寬度至少爲4像素,總寬度爲400-800像素,因此標籤爲100-200格。

最重要的是,這些圖表/時間表中會有五個或六個堆疊在一起。然後div標籤的數量在500-1200之間。

再一次,承擔每個內容都很少,這將如何影響性能?

_L

+15

42(..........) – 2010-02-17 16:53:36

回答

2

儘管標記計數在呈現html時肯定會產生影響,但您必須基準以查看時間是否可接受。

我會擔心的是你可能試圖遍歷DOM的javascript函數。縱觀所有這些因素,對客戶而言可能是一項代價高昂的操作。雖然再一次,適當的基準不能被替代。

10

測試並找出答案。通過渲染引擎來回答一般來說,這將變化太多。

2

div的實際顯示大小對性能沒有明顯影響。在將數據傳輸到瀏覽器和渲染所有元素時,大部分性能都會丟失。幸運的是,它的表現應該是一個相對線性的下降,而不是快速下降。

實際的限制並不是真的存在於具體的條款中,它更多的是一個人的電腦,瀏覽器和連接的權力問題。不用說,你可以變得相當大,而不會造成重大問題。

0

如果它的東西像<font>標籤,答案看似數以百萬計!退房:http://www.fujinonbinos.com/(!做一個查看源 - 嚴重)

嚴重的是,雖然,讓事情到最低限度始終是很好的做法既爲可讀性(代碼維護)和速度。但是,除非是荒謬的,否則這不太可能產生嚴重的影響。即使上面的例子並不慢!

+1

該網站上的惡意來源。我甚至沒有想到它爲什麼會這樣做 – ptrn 2010-02-17 17:31:03

+0

我發現這個問題,同時在div標籤內的左側和右側搜索跨度對齊。到目前爲止,我覺得最好的解決方案是使用兩個浮動右和左的div。我希望它沒有得到ridiciolus .. – mdikici 2012-05-18 20:09:48

1

答案取決於很多的東西。每個div標籤對性能都有一些微小的影響。性能開始快速下降的臨界點取決於瀏覽器和計算機查看頁面。

它也很重要你的CSS規則影響這些風格。相對而言,一些CSS選擇器執行速度快,有些執行速度慢。如果您定義了一些較慢的CSS選擇器,那麼如果您不使用CSS或只使用快速CSS選擇器,那麼您的臨界點會早得多。 Google的PageSpeed插件可以讓您瞭解您是否使用慢速CSS選擇器。另外,如果你正在把它們作爲一個粒子系統進行動畫處理,那麼你的臨界點會更快。