Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


Производительность JavaScript


Как ускорить код JavaScript.


Уменьшите активность в циклах

Циклы часто используются в программировании.

Каждый оператор в цикле, включая оператор for, выполняется для каждой итерации цикла.

Операторы или присваивания, которые могут быть помещены вне цикла, ускорят выполнение цикла.

Плохой:

for (let i = 0; i < arr.length; i++) {

Лучший код:

let l = arr.length;
for (let i = 0; i < l; i++) {

Плохой код обращается к свойству длины массива при каждом повторении цикла.

Лучший код обращается к свойству длины вне цикла и ускоряет выполнение цикла.


Уменьшить доступ к DOM

Доступ к HTML DOM выполняется очень медленно по сравнению с другими операторами JavaScript.

Если вы ожидаете получить доступ к элементу DOM несколько раз, обратитесь к нему один раз и используйте его как локальную переменную:

Пример

const obj = document.getElementById("demo");
obj.innerHTML = "Hello";


Уменьшить размер DOM

Держите количество элементов в HTML DOM небольшим.

Это всегда улучшит загрузку страницы и ускорит рендеринг (отображение страницы), особенно на небольших устройствах.

Каждая попытка поиска в DOM (например, getElementsByTagName) будет выигрывать от меньшего DOM.


Избегайте ненужных переменных

Не создавайте новые переменные, если вы не планируете сохранять значения.

Часто вы можете заменить код следующим образом:

let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

С этим:

document.getElementById("demo").innerHTML = firstName + " " + lastName;

Задержка загрузки JavaScript

Размещение скриптов в нижней части тела страницы позволяет браузеру сначала загрузить страницу.

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

Спецификация HTTP определяет, что браузеры не должны загружать более двух компонентов параллельно.

Альтернативой является использование defer="true"тега script. Атрибут defer указывает, что скрипт должен выполняться после завершения синтаксического анализа страницы, но он работает только для внешних скриптов.

Если возможно, вы можете добавить свой скрипт на страницу по коду, после загрузки страницы:

Пример

<script>
window.onload = function() {
  const element = document.createElement("script");
  element.src = "myScript.js";
  document.body.appendChild(element);
};
</script>

Избегайте использования с

Избегайте использования withключевого слова. Это отрицательно сказывается на скорости. Это также загромождает области видимости JavaScript.

Ключевое withслово не разрешено в строгом режиме.