1

Самописный сайт без фреймворков. Есть простейший скрипт для работы со стилями, который добавляет/удаляет/меняет стили элементов (в нём ошибок нет, он просто сокращается длинные обращения к свойствам элемента или добавление классов в таблицу стилей до коротких команд). После первой загрузки, и в 99% случаев всё работает корректно. Но если активно кликать во всё на сайте, и пока происходит анимация/перерисовка кликнуть в "обновить страницу", а так же иногда в случае длительного простоя(?!), происходит странное.

Ломаются все скрипты добавления/удаления стилей из элементов (Uncaught TypeError: Cannot read property 'cssRules' of undefined), потому что таблица стилей document.styleSheets[0] вдруг становится undefined. Вывожу в консоль

console.log('Проверка существования таблицы стилей');
console.log(document);
console.log(document.styleSheets);
console.log(document.styleSheets.length);
console.log(document.styleSheets[0]);

На выходе: массив document.styleSheets имеет длину length: 0 и length: 1 одновременно!!!

StyleSheetList {length: 0}
0: CSSStyleSheet {cssRules: CSSRuleList, …}
length: 1
__proto__: StyleSheetList

(см. картинку)

Как это вообще?!

Когда всё работает, length: 1 всюду, как и ожидается.

Данный баг ловится только в Chrome (89.0.4389.90). В Firefox, как бы я бешено, неистово не накликивал и не обновлял, проблемы нет.

Отправлять баг в Chrome? Ждать пока его починят? Можно ли написать годную защиту от этой ерундовой ситуации, так чтобы она не подвешивала сайт? setTimeOut не решает проблему. Если при обновлении length определилась с ошибкой, через секунду-две-пять ничего не меняется.

Плагины выключал.

1 ответ 1

1

Сначала теория:

Ошибка возникает из-за того, что браузер при обновлении страницы берёт скрипты из кеша, а вот стайлшит к моменту исполнения скрипта ещё не готов.

В консоль девтулза отдаётся ссылка на стайлшит, поэтому при развороте информации о нём через несколько секунд после работы скрипта, консоль отдаёт длину массива == 1, потому что стайлшит к тому времени уже готов. Отсюда такое противоречие.

Теперь решения.

Решение 1. для единственной функции, обращающейся к стилям. Нужно проверить внутри функции наличие стайлшита и если его нет вызвать её рекурсивно с теми же аргументами по таймауту.

Решение 2. Для фреймворка, когда функций много на асинк-эвейтах.


    const cooldown = 30;
    let correct = false;
    let skip = false; // флаг пропуска проверок

    export const pause = async (ms = cooldown) =>
      await new Promise(resolve => setTimeout(resolve, ms));

    const simpleGetCSS = styleSheetNum => document.styleSheets[styleSheetNum];

    const checkCSS = styleSheet => {
      // проверяет указанный стайлшит, но делает это не чаще, чем раз в cooldown
      if (!skip && styleSheet && styleSheet.cssRules) {
        correct = true;
      } else {
        correct = false;
        skip ?
          setTimeout(() => {skip = false}, cooldown):
          skip = true;
      }
    };

    export const getStyleSheet = async (styleSheetNum = 0, ms = 0) => {
      let styleSheet = simpleGetCSS(styleSheetNum);
      checkCSS(styleSheet);
      if (correct) {
        return styleSheet;
      } else {
        console.log('Ошибка поиска таблицы стилей #' + styleSheetNum);
        ms == 0 ? ms = cooldown/1.25 : await pause(ms);
        return await getStyleSheet(styleSheetNum, ms*1.25);
      }
    };

    // Использование
    // Функция добавляет правило в таблицу стилей
    const addRuleToCSS = async (
      ruletxt = '.class-name {ruleName: rule; }', styleSheetNum = 0) => {
      const styleSheet = await getStyleSheet(styleSheetNum);
    styleSheet.insertRule(ruletxt, styleSheet.cssRules.length);
    };

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

Если какая-то другая функция во время кулдауна попробует достать стайлшит, так же будет совершена одна попытка, но следующая проверка затормозится переменной skip, то есть это своего рода троттлинг, общий для всех.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.