Внедрение динамического тега стиля кэшируется

Question

Внедрение динамического тега стиля кэшируется

1

У меня есть два небольших вопроса относительно следующего кода:

export function loadCSS(path) {
  const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('link');
  style.href = path;
  style.rel = 'stylesheet';
  head.appendChild(style);
}

Будет ли браузер обслуживать файл из кеша?
Будет ли этот код блокировать остальную часть JS до тех пор, пока файл CSS не будет загружен?

undefined 08 май 2018, в 10:19

Источник

0

Чтобы избежать кеширования браузера, вы сканируете, добавляя всегда изменяющийся параметр в конец URL. Если путь изменен, файл будет загружен снова. Попробуйте что-то вроде style.href = path + '?random=' + Math.floor(Math.random() * 100000); , Я думаю, что CSS будет загружен в отдельном «потоке», поэтому выполнение JS не будет заблокировано.
Balázs Varga 08 май 2018, в 08:04
0

Спасибо, но мой вопрос, будет ли он кэшироваться как обычный тег?
undefined 08 май 2018, в 08:05
0

Да, если вы не измените URL-адрес, он будет кэширован, если вы явно не зададите заголовки No-Cache в своих метатегах html.
Balázs Varga 08 май 2018, в 08:06
0

«Но мой вопрос, будет ли он кэшироваться как обычный тег?» - неправильный вопрос; ресурсы кэширования браузерами, а не «теги». (Это может показаться придирчивым; но для общего понимания важно, чтобы вы также правильно поняли терминологию.)
CBroe 08 май 2018, в 08:39

Показать ещё 2 комментария

Теги:

javascript

css

1 ответ

Ещё вопросы

Чтобы избежать кеширования браузера, вы сканируете, добавляя всегда изменяющийся параметр в конец URL. Если путь изменен, файл будет загружен снова. Попробуйте что-то вроде style.href = path + '?random=' + Math.floor(Math.random() * 100000); , Я думаю, что CSS будет загружен в отдельном «потоке», поэтому выполнение JS не будет заблокировано.
Спасибо, но мой вопрос, будет ли он кэшироваться как обычный тег?
Да, если вы не измените URL-адрес, он будет кэширован, если вы явно не зададите заголовки No-Cache в своих метатегах html.
«Но мой вопрос, будет ли он кэшироваться как обычный тег?» - неправильный вопрос; ресурсы кэширования браузерами, а не «теги». (Это может показаться придирчивым; но для общего понимания важно, чтобы вы также правильно поняли терминологию.)

ibrahim tanyalcin · Answer 1 · 2018-05-08T05-50-00.000Z

Браузер может обслуживать его из кеша, чтобы быть в безопасности, использовать переполнение кеша, что означает добавление случайного запроса к вашему пути: (для контроля на стороне сервера проверять кеш-контроль (новый) и заканчивать (старые) заголовки)

style.href= path + "?" + Math.random();
Если href определено в ссылке перед добавлением, это будет блокировка вывода. Лучшей альтернативой является добавление недопустимого медиа-атрибута, добавление ссылки, а затем удаление его для запуска загрузки:

function generateLink(node){//node is some reference within head var link = document.createElement("link"); link.setAttribute("rel","stylesheet"); link.setAttribute("type","text/css"); link.setAttribute("media","invalid"); link.setAttribute("href",someHref); ((node && node.parentNode) || (document.head || document.getElementsByTagName("head")[0])).insertBefore(link,node || null); setTimeout(function(){link.removeAttribute("media")},17); };