Лучшие способы уменьшить количество элементов DOM

Question

Все согласны с тем, что меньшее количество элементов DOM означает лучшую производительность страницы. Это означает лучшую производительность JavaScript, особенно в старых браузерах.

Но где лучше всего искать элементы DOM? Каковы общие причины, с которыми вы, ребята, сталкивались, которые легко исправить, чтобы снизить это число?

Answer 1

использование:

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

вместо:

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

... когда возможно, то есть. Иногда вам нужны дополнительные div для макета. Но когда это не нужно, не используйте его.

Answer 2

Вместо использования тегов <ul> используйте обычные теги <a> и примените стили к пользовательскому классу.

Также удалите все теги <br>, они считаются узлами, опять же, вместо них используйте стили для пробелов.

Особенно в навигационных меню, размещенных в нижних колонтитулах:

<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>

Может быть заменено на:

<a href="/" class="well-spaced">Home</a>
<a href="/blog.html" class="well-spaced">Health Blog</a>

Что уменьшит количество узлов с 5 до 2.

И, наконец, мы используем тяжелый код в нашем заголовке для входа в учетную запись, UPI, корзины и т. Д. Некоторые из них могут быть заменены одним тегом <div> или <a>, который при нажатии тянет необходимые 150 узлов через XMLHTTPRequest.

Answer 3

Если вы используете серверные элементы управления ASP.NET, тогда это может быть хорошим началом. Некоторые из серверных элементов управления, хотя и хороши для быстрой разработки, будут отображаться с чрезмерной разметкой. Я не призываю вас не использовать серверные элементы управления, но вы можете найти некоторые модули вашего сайта, которые являются хорошими кандидатами для сокращения DOM на

1) переписать разметку самостоятельно или 2) создание разметки с пространством имен System.Web.UI.HtmlControls.

Хорошими кандидатами для этого подхода являются компоненты, часто появляющиеся на вашем сайте (верхний и нижний колонтитулы, навигационные меню). Кандидаты также не часто меняются или модифицируются, если вам не удобно поддерживать этот стиль.

Другой метод ASP.NET - использовать System.Web.UI.WebControls.PlaceHolder для динамической работы вместо div или панели с атрибутом runat="server". Элемент управления заполнителем не будет отображать никаких дополнительных элементов, только то, что вы добавили в него.

Answer 4

Везде, где вы используете элемент, влияющий на макет, вы обычно можете подумать. Часто вы можете использовать меньше элементов в сочетании с CSS для достижения того же результата. Жесткие правила сложны, так как многое зависит от конкретного случая.