В веб -приложениях сейчас много кода JavaScript, и мы всегда ищем различные решения, которые делают их быстрее.
1. Мы используем прокси -прокси, чтобы сделать мониторинг событий более эффективным.
2. Мы используем функцию Debuncing Technology, чтобы ограничить количество раз, когда заданный метод вызывается в течение периода времени. Пожалуйста, обратитесь к: как предотвратить высокочастотный запуск функций событий (китайский перевод)
3. Мы используем загрузчик JavaScript для загрузки той части необходимых нам ресурсов и т. Д.
Есть еще один способ сделать нашу страницу быстрее и эффективнее. Это для динамического добавления и удаления определенных стилей в листе стиля через JS, вместо того, чтобы постоянно запрашивать элементы DOM и применять различные стили. Вот как это работает.
Получите таблицу стиля
Вы можете выбрать любой лист стиля, чтобы добавить правила стиля. Если у вас есть определенный лист стилей, вы можете добавить атрибут идентификатора к тегу <NINCLICE> или <style> на странице HTML, а затем вы можете получить объект CSSStylesheet непосредственно через атрибут листа этого элемента DOM. Таблицы стилей также можно пройти к:
Кода -копия выглядит следующим образом:
// вернуть массив, похожий на массив (массивоподобный) стиль стиля, styleSheetList
var sheets = document.stylesheests;
/*
Возвратное значение аналогично следующему:
StyleSheetList
{
0: cssstylesheet,
1: CSSStylesheet,
2: CSSStylesheet,
3: CSSStylesheet,
4: CSSStylesheet,
Длина: 5,
Элемент: функция
}
*/
// Получить первый лист, игнорируя атрибут СМИ
var sheet = document.stylesheests [0];
На что вам нужно обратить особое внимание, так это атрибут мультимедиа листа стиля - когда вы хотите отобразить его на экране, вы не должны добавлять правила CSS в лист стиля печати. Вы можете поближе взглянуть на информацию об атрибуте объекта CSSstylesheet:
Кода -копия выглядит следующим образом:
// Консоль выводит информацию о листе первого стиля
console.log (document.stylesheests [0]);
/*
Возвращаемое значение:
CSSSTYLESHEEST
CSSRULES: CSSRULELIST [объект]
Отключен: ложь
href: "http://davidwalsh.name/somesheet.css"
СМИ: медиалистический [объект]
ownernode: ссылка [объект]
Собственность: NULL
ParentStylesheet: Null
Правила: cssrulelist [объект]
Название: NULL
Тип: "Текст/CSS"
*/
// Получить тип мультимедиа (тип медиа)
console.log (document.stylesheests [0] .media.mediatext)
/*
Возвращаемое значение может быть:
"All" или "print" или другой медиа, применяемый к этой таблице стиля
*/
Во всех случаях у вас определенно есть способ получить таблицу стилей, чтобы добавить правила.
Создайте новую таблицу стилей
Во многих случаях лучший способ сделать это может быть создать новый элемент <style> для хранения этих динамических правил. Это также очень просто:
Кода -копия выглядит следующим образом:
var sheet = (function () {
// Создать тег <style>
var style = document.createElement ("style");
// Вы можете добавить атрибут Media (/Media Query, Media Query)
// style.setattribute ("Media", "Screen")
// style.setattribute ("Media", "только экран и (максимум-ширина: 1024px)")
// для Webkit Hack :(
style.appendchild (document.createtextnode ("" "));
// Добавить <style> элемент на страницу
document.head.appendchild (стиль);
return style.sheet;
}) ();
Трагедия состоит в том, что Webkit нуждается в небольшом взломе, чтобы создать правильно, но нам нужно только заботиться об этом листе.
Вставить правило
В более ранних версиях IE метод таблиц вставки не был доступен, хотя теперь он является стандартом для инъекции правил. Метод вставки требует написания всего правила CSS, которое такое же, как в листе стиля:
Кода -копия выглядит следующим образом:
sheet.insertrule ("заголовок {float: left; непрозрачность: 0,8;}", 1);
Хотя этот метод API JavaScript выглядит немного деревенским, он работает так. Второй индекс параметра указывает местоположение (индекс), которое будет вставлено в правило. Это также очень полезно, чтобы вы могли вставить одно и то же правило/код, что позволяет вступить в силу правила обратного. Индекс по умолчанию равен -1, который представляет конец всего набора. Если вы хотите иметь дополнительные/ленивые правила управления, вы также можете добавить! Важные теги к определенному правилу, чтобы избежать индексации.
Добавить правила - нестандартный метод добавления
Объект CSSstylesheet имеет метод AddRule, который позволяет вам регистрировать правила CSS в таблицу стиля. Метод AddRule принимает три параметра: первым параметром является селектор, второй параметр - это код правила CSS, а третий - индекс целого числа, начиная с 0, что указывает на положение стиля (в том же селекторе):
Кода -копия выглядит следующим образом:
sheet.addrule ("#mylist li", "float: слева;
Возвращаемое значение метода AddRule всегда -1, поэтому это значение не имеет практического значения.
Помните, что преимущество этого подхода заключается в том, что элементы, добавленные со страницы, автоматически применяют стили, что означает, что вам не нужно добавлять их в определенные элементы, но вместо этого внедряют их непосредственно на страницу. Конечно, более эффективно!
Правила заявки на безопасность
Поскольку не все браузеры поддерживают метод вставки, лучше всего создать функцию обертки для обработки приложения правила. Вот быстрый способ сделать это:
Кода -копия выглядит следующим образом:
Функция addcssrule (лист, селектор, правила, индекс) {
if ("вставка" в лист) {
sheet.insertrule (selector + "{" + rules + "}", index);
}
else if ("addrule" в листе) {
Sheet.Addrule (селектор, правила, индекс);
}
}
// Как использовать
addcssrule (document.stylesheests [0], «заголовок», «float: left»);
Этот метод инструмента должен охватывать все случаи, когда добавляются правила нового стиля. Если вы беспокоитесь о ошибках в вашем приложении, вы должны обернуть код для метода с помощью блока Try {} Catch (e) {}.
Вставьте правила СМИ
Есть два способа добавить правила медиа -запросов. Первый - использовать стандартный метод вставки:
Кода -копия выглядит следующим образом:
sheet.inertrule (
"@Media только экран и (максимальная ширина: 1140px) {header {display: none;}}"
);
Конечно, поскольку старая версия IE не поддерживает вставку, другой способ создать элемент стиля, указать соответствующий атрибут медиа, а затем добавить стиль к новой таблице стилей. Это может потребовать использования нескольких элементов стиля, но это также легко. Я мог бы создать объект, указать как медиа -запрос, а также индекс, и создать/получить его так.
Динамическое добавление правил в таблицы стилей является эффективным методом, и может быть проще, чем вы думаете. Помните, что это решение, возможно, потребуется использовать в вашем следующем большом приложении, потому что оно может помешать вам попасть в яму как в обработке кода, так и в обработке кода и элемента.