Web Мастерская
Контакт
  • Ghost
    Ghost
    Администратор

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

Content unavailable: Resource was not cached

Ошибка
Такая ошибка обычно возникает, когда вы пытаетесь получить доступ к контенту, который не был закэширован или недоступен в локальном кэше браузера. Эта ситуация характерна для случаев, когда запрашиваемые ресурсы (например, изображения, файлы CSS или JS) находятся на сервере, но не были ранее сохранены в кэше клиента.

Есть несколько возможных причин этой ошибки


  1. Политика кэширования: Ресурс может быть помечен как не подлежащий кэшированию (например, заголовок Cache-Control: no-cache). Браузер не сможет сохранить такой ресурс в локальном кэше.
  2. Режим очистки кэша: Если вы недавно очистили кэш браузера, ресурс, который был в нём ранее, перестанет быть доступным из кэша.
  3. Ошибки сетевого соединения: Иногда ошибки сети или сервера могут помешать успешной передаче ресурса клиенту, что приводит к отказу в доступе к кэшированным материалам.
  4. Истечение срока действия кэша: Даже если ресурс ранее был закэширован, срок его годности может истечь, и браузер прекратит предоставление его из кэша.

Что можно

...

Synchronous XMLHttpRequest on the main thread is deprecated

JavaScript
Если вы столкнулись с предупреждением «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 слушает
...
Реклама