У меня есть два небольших вопроса относительно следующего кода:
export function loadCSS(path) {
const head = document.getElementsByTagName('head')[0];
const style = document.createElement('link');
style.href = path;
style.rel = 'stylesheet';
head.appendChild(style);
}
Браузер может обслуживать его из кеша, чтобы быть в безопасности, использовать переполнение кеша, что означает добавление случайного запроса к вашему пути: (для контроля на стороне сервера проверять кеш-контроль (новый) и заканчивать (старые) заголовки)
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); };
style.href = path + '?random=' + Math.floor(Math.random() * 100000);
, Я думаю, что CSS будет загружен в отдельном «потоке», поэтому выполнение JS не будет заблокировано.