Асинхронне завантаження CSS
Коли справа доходить до оптимізації веб-сторінок, продуктивність, розмір і вага кожного ресурсу на сторінці є важливим фактором. Великі JavaScript і CSS файли можуть суттєво уповільнити завантаження сторінок, що буде дратувати користувачів. Існує ряд методів для завантаження JavaScript асинхронно і багато різних методів для того, щоб завантажити зображення в асинхронному режимі. Але чому ми так рідко використовуємо цей прийом з CSS?
Проблема в тому, що браузери блокують рендеринг веб-сторінки, коли зовнішні таблиці стилів були завантажені.Це робиться для того, щоб уникнути “перемальовування” сторінки при зміні CSS. Деякі браузери навіть видають користувачу порожню білу сторінку, поки вони чекають завантаження файлу.
Однак, є вихід - loadCSS.
LoadCSS завантажить CSS асинхронно, що означає, що веб-сторінка не буде блокуватись під час очікування завантаження і рендерингу CSS.
Використання
Розміщаємо функцію loadCSS в <head> сторінки (також можна включити в зовнішній JavaScript-файл).
Потім викликаємо, передавши URL стилів:
<head>
...
<script src="loadCSS.min.js"></script>
...
<script>
// додаємо loadCSS сюди
function loadCSS( href, before, media ){ ... }
// завантажуємо файл
loadCSS( "path/to/mystylesheet.css" );
</script>
...
</head>
Необов'язкові Аргументи
- За замовчуванням, таблиця стилів буде додана до першого тегу <script> в DOM. Якщо ви хочете додати її в інше місце, використовуйте додатковий аргумент before, щоб вказати інший споріднений елемент. Стилі будуть додані перед вказаним елементом.
- При необхідності можна передавати рядок в аргумент media, щоб встановити media="" стилів (all за замовчуванням).
За допомогою вкладок в браузері, ви повинні були помітити, що стилі завантажуються в іншому порядку, ніж зазвичай. CSS повинен з'явитися набагато нижче у списку мережевих ресурсів.
Вуаля! Цей плагін є дуже корисним, тому що ви можете використовувати його для завантаження CSS без блокування сторінки. Тепер є можливість чекати завантаження CSS-файлів скільки потрібно.
437 7
GR: 4.458k
Коментарі: