Web Мастерская

Блог

Web Мастерская

Synchronous XMLHttpRequest on the main thread is deprecated

Если вы столкнулись с предупреждением «Synchronous XMLHttpRequest on the main thread is deprecated», это значит, что ваш код совершает синхронные запросы на главную нить браузера. Подобная практика признана устаревшей и не рекомендуется из-за серьёзного негативного влияния на пользовательский опыт.

В этой статье мы расскажем, почему появились такие запросы, каковы последствия их использования и как можно исправить ситуацию.

Что такое синхронные запросы?

Синхронный запрос — это когда выполнение программы блокируется до завершения сети. Другими словами, пока запрос не получит ответ от сервера, браузер не сможет продолжать обработку скриптов и реагировать на действия пользователя.

Например, возьмем такой JavaScript-код:

ВыделитьJavaScript

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false); // Параметр false делает запрос синхронным
xhr.send();
console.log(xhr.responseText);

Параметр false в третьей позиции заставляет запрос ждать завершения передачи данных от сервера,...

Жалоба

SVG: preserveAspectRatio

SVG

Атрибут preserveAspectRatio используется в SVG (Scalable Vector Graphics) для управления тем, как содержимое рисунка сохраняется относительно своего контейнерного блока при изменении размеров окна просмотра или самого контейнера. Этот атрибут позволяет разработчикам контролировать поведение содержимого SVG при изменениях масштаба, гарантируя сохранение пропорций или центрирование внутри доступной области.

Основные компоненты атрибута

Значение по умолчанию (xMidYMid meet)
По умолчанию значение preserveAspectRatio равно "xMidYMid meet". Это значит, что рисунок центрируется горизонтально и вертикально, а также сохраняет своё соотношение сторон путём уменьшения размера, чтобы поместиться целиком в окно просмотра.

Формат значений
Формат значения выглядит следующим образом:

ВыделитьSVG

<preserveAspectRatio-value> = [ <align> || <meetOrSlice> ]

Где:

<align>: управляет выравниванием SVG-контента внутри контейнера.
<meetOrSlice>: контролирует, должно ли содержание растягиваться ("slice") или

...

Жалоба

Cannot read properties of undefined (reading 'trim')

JavaScript

Ошибка TypeError: Cannot read properties of undefined (reading 'trim') возникает, когда вы пытаетесь вызвать метод или прочитать свойство у переменной, которой присвоено значение undefined или null.

Обычно такая ошибка встречается в JavaScript, когда программа ожидает объект или строку, но по факту переменная не была инициализирована или стала неопределённой.

Наиболее частые причины появления этой ошибки

Обращение к свойствам объекта, который не определен
Например, вы вызвали метод .trim() на строке, но строка оказалась равна undefined:

ВыделитьJavaScript

let myVar = undefined;
console.log(myVar.trim()); // Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

Несуществующие элементы DOM
Если вы пытаетесь манипулировать элементом, который не существует в документе:

ВыделитьJavaScript

const element = document.querySelector('.nonexistent-class');
console.log(element.textContent.trim()); // Uncaught TypeError: Cannot read properties of null (reading 'trim')

Поддержка устар...

Жалоба

jQuery: Оптимизация производительности

Библиотека JS Производительность

Зачем заботиться о производительности? Скорость загрузки и реакции страницы напрямую влияет на удобство пользования сайтом и конверсии. Именно поэтому оптимизация — важная составляющая качественного продукта.

Кеширование селекторов

Описание: Многократные поиски элементов в DOM снижают производительность и как избежать этого с помощью кеширования.
Решение: Показать, как сохранять выборки в переменную и повторно использовать их, снижая число обращений к DOM.

ВыделитьjQuery

// Плохой пример (медленно)
for(let i = 0; i < 100; i++) {
    $("#myDiv").addClass("active");
}

// Хороший пример (быстро)
let myDiv = $("#myDiv");
for(let i = 0; i < 100; i++) {
    myDiv.addClass("active");
}

Делегирование событий

Описание: Влияние множественного подключения обработчиков событий и как уменьшить накладные расходы с помощью делегирования.
Решение: Пояснить концепцию делегирования событий и привести примеры эффективного использования.

ВыделитьjQuery

// Плохой пример (каждый item слушает

...

Жалоба

jQuery: Продвинутые техники манипуляции DOM

Библиотека JS

jQuery — это библиотека JavaScript, облегчающая работу с Document Object Model (DOM). Она помогает изменять структуру страницы, стилизовать элементы и создавать динамичный пользовательский интерфейс. В этой статье мы рассмотрим полезные техники и примеры для продвинутой работы с DOM.

Управление DOM-структурой

Создание и добавление элементов
Иногда нужно динамически добавлять элементы на страницу. Сделать это легко с помощью jQuery:

ВыделитьjQuery

// Создать новый div и добавить его в конец body
$('<div>Новый элемент!</div>').appendTo('body');

// Добавить элемент в начало списка ul
$('<li>Новый пункт списка</li>').prependTo('ul');

// Вставить элемент после другого элемента
$('<button>Нажмите меня</button>').insertAfter('#targetButton');

Копирование и перемещение элементов
Часто требуется переместить или скопировать элементы на странице. Вот как это делается:

ВыделитьjQuery

// Копируем элемент и помещаем копию в конец страницы
$('#myDiv').clone().appendTo('body');

//

...

Жалоба