отключение таблиц стилей для увеличения скорости показа / скрытия div

javascript jquery html css

71 просмотра

1 ответ

Я прочитал отличную статью: http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

Я цитирую его автора:

«Ради интереса я подумал:« Что если вместо того, чтобы манипулировать каждым узлом DOM и что-то менять, мы просто возьмемся за таблицу стилей? »Может быть, там есть улучшения скорости? Я имею в виду, что описанные выше методы достаточно быстры для повседневного использования, но Что если бы у меня было 10000 узлов на странице, которую я хотел бы показать и скрыть? Было бы медленно выделять их все. Но, если бы я мог манипулировать таблицей стилей, я мог бы избежать всех накладных расходов. Позвольте мне просто сказать, что это чревато с опасностью.

Конечно, при манипулировании таблицами стилей возникают кросс-браузерные проблемы, поскольку jQuery не абстрагирует их для вас. Сначала я попытался определить, смогу ли я добавить тег стиля с классом css в виде строки, используя jQuery, но получил противоречивые результаты во всех браузерах. Затем я попытался создать узел и класс таблицы стилей с помощью JavaScript, но были разные API, и он оказался слишком медленным, чтобы его оправдать. Итак, наконец, отказавшись от попытки сделать это программным способом, я в итоге просто написал тег стиля с классом в заголовке документа. Это слишком медленно для создания таблицы стилей программно, но если она уже есть, то просто дать ей идентификатор и использовать ее отключенный атрибут.

HTML:

<style id="special_hide">.special_hide { display: none; }</style>
<!--  ...  -->
<div class="special_hide">Special hide DIV</div>

Тогда в JavaScript ...

JavaScript:

$('#special_hide').attr('disabled, 'true');

и BAM, вы только что отобразили все свои элементы с классом «special_hide». Чтобы спрятать их всех снова, просто ...

JavaScript:

$('#special_hide').attr('disabled', 'false');

и теперь они все спрятаны. Общее время обработки JavaScript составляло 0-1мс во всех браузерах. Единственный javascript, который вы делаете, это изменение атрибута. "

** Мой вопрос: как я могу создать класс special_show, в котором добавление моих div в этот класс и последующее включение этого класса показывает их?

Что-то вроде

<style id="special_show">.special_show { display: default; }</style>

**

Автор: Nathan S Источник Размещён: 08.11.2019 11:03

Ответы (1)


2 плюса

Решение

Я собираюсь сделать общий ответ, без ограничений символов :)

Итак, вы хотите манипулировать стилем CSS DOM-элементов (таких как div и т. Д.) Без зацикливания элементов (например $(".special_style").each()), чтобы применить стиль, поскольку он может потреблять больше ресурсов, чем больше элементов отслеживается правилом.

Вы не можете использовать removeClass/ addClasscombo, так как это манипулирование DOM, и вам нужно будет использовать предыдущий цикл.

Это уже был дан ответ и решение использовать insertRuleи addRuleметоды. Пожалуйста, прочитайте другой ответ, эта тема является дубликатом.

Обновить:

1 Эта скрипка показывает, как вам удалось добавить динамический CSS на вашу страницу! Ну, это не так здорово, потому что это не экстернализировано, но все же оно может делать то, чего ты хочешь достичь!

$("#special_hide").append(".special_hide { display: none; }");

2 Вы можете загрузить другой файл CSS$("head").append("<link rel='stylesheet' href='path/to/style.css' type='text/css' />");

Кроме того, я не могу сказать вам, какой из них лучший, некоторые утверждают, что изменение заголовка путем добавления таблицы стилей может быть неправильным , другие скажут вам, что встроенный CSS неправильный ... Просто решите об этом, прочитав документы, такие как w3c!

Автор: Grégoire Fruleux Размещён: 20.08.2016 09:23
Вопросы из категории :
32x32