Является ли контейнер div дорогим?

Question

У меня есть страница, построенная из сотен div контейнеров (не спрашивайте почему :).Я знаю, что это не слишком элегантно, но дорого ли это делать?Стоит ли беспокоиться об оптимизации?

Answer 1

Дорогие стоят не сами div, а их содержимое. Что у вас в них?

Кроме того, вы на самом деле испытываете медлительность? Измерьте сначала, беспокойтесь после.

Answer 2

Проверьте сами. В Chrome вы можете видеть временную шкалу рендеринга в инструментах Dev. Попробуйте использовать вдвое меньше div и посмотрите, в чем разница.

Как уже упоминалось в другом ответе, это будет больше связано с тем, что внутри них. Текст это легко; изображений не так уж и много. Если у вас есть плавающие div, это становится более сложным для движка рендеринга. Но если вы посмотрите на html ветку комментариев на сайте, подобном Reddit, вы говорите о тысячах div, и все же он рендерится очень быстро. Просто загрузка контента, вероятно, займет в 10 раз больше времени.

Answer 3

В зависимости от устройства и содержимого divs. Создав 12 вложений глубины div, тени, закругленные углы, преобразования css3 и т. Д. Для тестирования на iPad 1, все было так же гладко, как и при навигации. Всего свыше 70 делений ничего не заставило замедляться. Наличие до 200 делений с не слишком сложными правилами, контентом и т. Д. Не должно вызывать реальных проблем в современных браузерах / устройствах. Также приходилось работать со страницей размером более 40 МБ с изображениями, сложной структурой и так далее, и, по крайней мере, пару поколений Mac Mini отлично справляется с этим.

В общем, я бы не слишком волновался об этом. Тем не менее, в зависимости от вашего точного решения, это может быть не так, но если вы не пытаетесь делать слишком много магии HTML / CSS / JS / Flash внутри div, у вас должно быть все в порядке. Некоторые мобильные браузеры тоже могут отличаться. Например, более медленные Android, вероятно, не смогут справиться с этим плавно.