減少DOM元素數量的最佳方法

Question

大家都同意減少DOM元素意味着更好的頁面性能。這意味着更好的JavaScript性能，特別是在舊版瀏覽器中。

但這裏是最好的地方看看，以減少DOM元素？你們遇到的常見罪魁禍首是哪些簡單的修復方法可以減少這個數字？

Answer 1

使用：

<ul id="navigation-main"> 
    etc.. 
</ul> 

在代替：

<div id="navigation-main"> 
    <ul> 
     etc.. 
    </ul> 
</div> 

...如果可能的話，那是。有時您需要額外的div進行佈局。但是，如果沒有必要，請勿使用它。

Answer 2

您使用元素來影響佈局的任何地方通常都是您可以考慮的事情。通常情況下，您可以使用較少的元素與CSS結合來獲得相同的結果。硬規則很難，因爲它很大程度上取決於具體情況。

Answer 3

如果您使用ASP.NET服務器控件，那麼這可能是一個很好的開始。一些服務器端控件雖然對於快速開發非常有用，但會以過多的標記渲染自己。我不是主張你不使用服務器端控件，但是你可能會發現你的站點的一些模塊可以很好地減少DOM的數量

1）自己重寫標記或者 2）用System.Web.UI.HtmlControls命名空間。

這種方法較好的選擇是在自己的網站經常（頁眉，頁腳，導航菜單）組件。候選人也不經常改變或修改，除非你很喜歡這種風格。

另一個ASP.NET的特定技術是使用System.Web.UI.WebControls.PlaceHolder來動態使用，而不是使用runat="server"屬性的div或面板。佔位符控件將不會呈現任何其他元素，只會添加您添加的元素。