я делаю сайт с использованием большого количества библиотек и он работает довольно быстро, но мне интересно, правильно
ли применять такой подход, и есть ли способы легко его улучшить??
если коротко, то при мопощи JS я отслеживаю загрузку файлов из CDN, и подключаю их по мере необходимости
<script>
let bootstrapCssLoaded = false;
let swiperCssLoaded = false;
let swiperJsLoaded = false;
let aosCssLoaded = false;
let aosJsLoaded = false;
let rellaxJsLoaded = false;
let lenisJsLoaded = false;
function checkLoaded(resourсe) {
switch (resourсe) {
case "BootstrapAOS":
if (bootstrapCssLoaded && aosCssLoaded && aosJsLoaded) {
document.querySelector('#spinner').style.display = 'none';
document.querySelector('#content').style.display = 'block';
};
break;
case "Typed":
// Инициализация Typed.js
break;
case "Swiper":
if (swiperCssLoaded && swiperJsLoaded) {
// Инициализация Swiper
};
break;
case "RellaxLenis":
if (rellaxJsLoaded && lenisJsLoaded) {
// Инициализация Rellax
// Инициализация Lenis
// Обновление AOS после полной загрузки страницы и инициализации Lenis и Rellax
};
break;
}
}
</script>
<link id="bootstrap-css" rel="preload" href="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer"
as="style" onload="this.onload=null;this.rel='stylesheet';bootstrapCssLoaded = true;checkLoaded('BootstrapAOS');">
<noscript>
<link rel="stylesheet" href="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer">
</noscript>
<link id="aos-css" rel="preload" href="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer" as="style"
onload="this.onload=null;this.rel='stylesheet';aosCssLoaded = true;checkLoaded('BootstrapAOS');">
<noscript>
<style>
#content {
display: block;
}
#spinner {
display: none;
}
</style>
</noscript>
<link id="swiper-css" rel="preload" href="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer" as="style"
onload="this.onload=null;this.rel='stylesheet';swiperCssLoaded=true;checkLoaded('Swiper');">
<noscript>
<link rel="stylesheet" href="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer">
</noscript>
<link rel="preload" href="" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="">
</noscript>
<body> .... </body>
<script src="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
<script src="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
<script src="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer" onload="checkLoaded('Typed')"
defer></script>
<script src="" onload="lenisJsLoaded=true;checkLoaded('RellaxLenis')" defer></script>
<script src="" integrity="" onload="rellaxJsLoaded=true;checkLoaded('RellaxLenis')" defer></script>
<script id="aos-js" src="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer"
onload="aosJsLoaded = true;checkLoaded('BootstrapAOS');" defer></script>
<script src="" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer"
onload="swiperJsLoaded=true;checkLoaded('Swiper');" defer></script>
<script>
window.onload = () => {
var videoBackground = document.getElementById('videoBackground');
var videoElement = document.createElement('video');
videoElement.autoplay = true;
videoElement.muted = true;
videoElement.loop = true;
var sourceElement = document.createElement('source');
sourceElement.src = 'video/back.mp4';
sourceElement.type = 'video/mp4';
videoElement.appendChild(sourceElement);
videoBackground.appendChild(videoElement);
document.querySelector('#spinner').style.display = 'none';
document.querySelector('#content').style.display = 'block';
document.querySelector('#yandex-karta').src = 'https://yandex.ru/map-widget/v1/?um=constructor';
};
</script>
я думаю, должны быть более чистые способы оптимизации, насколько правильно использовать JS в самом начале DOM?