При наличии 2 <div> элементов одновременно с изображением достаточного количества графического содержимого и только одного показано, лучше ли скрыть то, что не показано, или удалить его и повторно вставить теги html еще раз?Веб-страница div empty vs hide
Когда вы скрываете, все остается в памяти?
Ответ, скорее всего, зависит от этого.
Как люди, у нас есть определенная ориентация вокруг того, что требуется с точки зрения производительности для разных операций, но в этом случае, когда вы не уверены, лучшая практика - это оценка и бенчмарк. Идея состоит в том, чтобы понять, каков компромисс в каждом методе:
Во-первых, и проще, сравнивает влияние памяти вашего скрытого div. Обратите внимание, что скрытый <div> хранится в памяти, но не отображается на странице, поэтому имеет меньший размер памяти, чем визуализированный элемент. Измерение этого можно легко сделать, даже просто используя диспетчер задач chrome. Проверьте несколько изменений между ними и измерьте объем памяти при использовании каждого метода. Действительно ли это так важно, как вы ожидали?
Во-вторых, немного сложнее: измерить влияние на перезагрузку и повторное рендеринг в системе вашего клиента и на пользовательский интерфейс вашего приложения. Лучше всего использовать WEAK-машину и, возможно, даже медленное соединение. Измерьте задержку, созданную, если она есть, если не используете код и отчетность, по крайней мере, по вашему ощущению, и попытайтесь измерить скорость процессора и замедлить процесс, если таковой имеется. Переключайтесь между divs несколько раз, медленными и быстрыми манерами. Он все еще чувствует себя пятно?
В этом случае я склонен угадывать, что площадь памяти намного меньше, чем вы предполагаете, но это только мой опыт. Я считаю, что скрытие и показ потребуют меньше усилий, чем опорожнение и перезагрузка.
Это, я уверен, после того, как они оба. Это, вероятно, станет для вас очень понятным, какой правильный метод для вас. Скрытие, если объем памяти мал, перезагрузите, если он настолько велик, чтобы стоить медленной перезагрузки. Только вы можете измерить и определить, где находится линия.
Side Примечание: Когда скрывается, лучшая практика заключается в использовании display:none;. Это гарантирует, что элементы удалены из дерева рендеринга, что обеспечивает лучшую производительность, чем opacity: 0;/visibility: hidden;, хотя, если вам нужен один из них для конкретной функциональности, используйте их. Если вам не нужны функции, используйте display: none;. Также обратите внимание, что .hide() jQuery использует display: none;, так что это лучшая практика. От jQuery .hide() документация:
Это примерно эквивалентно вызову.CSS ("дисплей", "нет")
Источники:
, когда вы скрываете элемент, это относится только к рендерингу экрана. код все еще существует, поэтому он также загружается в память. чтобы ускорить работу, вы можете загрузить unshown div как пустой, а затем заполнить его позже через ajax. –