Блог

Главная - Вопросы по программированию - Избегание вспышки неустановленного содержимого для css, введенного с помощью javascript, в

Избегание вспышки неустановленного содержимого для css, введенного с помощью javascript, в

#javascript #css #dom #fouc #render-blocking

Вопрос:

У меня есть следующий JavaScript на <head> простой статической странице, который указывает либо a.css или b.css в качестве таблицы стилей для использования в зависимости от результата какого-либо дополнительного JavaScript ( useA() здесь не показано).

 <head>
   <script>
        var ss = document.createElement("link");
        ss.rel = "stylesheet";
        ss.href = (useA() ? "a.css" : "b.css");
        document.head.appendChild(ss);
   </script>
</head>

Это приводит к появлению нестилированного контента (FOUC) при загрузке или обновлении страницы как в Firefox, так и в Chrome.

Использование простого <link rel="stylesheet" ...> не имеет этой проблемы: CSS, загруженный при <head> использовании <link> , по-видимому, блокирует рендеринг. Есть ли какой-то способ получить такое же поведение и для таблиц стилей, введенных в CSS?

Ограничения:

Я не могу изменить a.css или b.css поэтому я не ищу решение, которое включает загрузку обеих таблиц стилей или комбинированного набора стилей и установку класса индикатора на корневом элементе для выбора между листами. Я также не ищу visibility:hidden никаких display:none трюков, которые задерживают отображение до тех пор, пока страница не будет полностью загружена.

Комментарии:

1. >>> Я также не ищу видимость:скрытая или отображение:нет трюков, которые задерживают отображение до полной загрузки страницы. < Если вы пытаетесь имитировать поведение блокировки рендеринга, разве это не нормально для display:none тела, пока вы не убедитесь, что css загружен. Вы можете прикрепить обработчик для этого, например ss.onload = ()=> document.getElementsByTagName("body")[0].style.display = 'block';

2. @Ларс — да, я думаю, мне бы хотелось, чтобы это было похоже на поведение блокировки рендеринга. Ничего не должно отображаться до тех пор, пока CSS не будет проанализирован, и после этого HTML-код тела может отображаться постепенно, как обычно, с правильными стилями. Большинство трюков, которые я видел, display:none откладывают раскрытие до полной загрузки документа, что отличается. Ваше предложение использовать onload элемент самого стиля является хорошим.

Метки: , ,