Асинхронне завантаження CSS

2 хв. читання

Коли справа доходить до оптимізації веб-сторінок, продуктивність, розмір і вага кожного ресурсу на сторінці є важливим фактором. Великі JavaScript і CSS файли можуть суттєво уповільнити завантаження сторінок, що буде дратувати користувачів. Існує ряд методів для завантаження JavaScript асинхронно і багато різних методів для того, щоб завантажити зображення в асинхронному режимі. Але чому ми так рідко використовуємо цей прийом з CSS?

Проблема в тому, що браузери блокують рендеринг веб-сторінки, коли зовнішні таблиці стилів були завантажені.Це робиться для того, щоб уникнути "перемальовування" сторінки при зміні CSS. Деякі браузери навіть видають користувачу порожню білу сторінку, поки вони чекають завантаження файлу.

Однак, є вихід - loadCSS.

LoadCSS завантажить CSS асинхронно, що означає, що веб-сторінка не буде блокуватись під час очікування завантаження і рендерингу CSS.

Використання

Розміщаємо функцію loadCSS в сторінки (також можна включити в зовнішній JavaScript-файл).

Потім викликаємо, передавши URL стилів:

    ...
    <script src="loadCSS.min.js"></script>
    ...
    <script>
      // додаємо loadCSS сюди
      function loadCSS( href, before, media ){ ... }
      // завантажуємо файл
      loadCSS( "path/to/mystylesheet.css" );
    </script>
    ...

Необов'язкові Аргументи

  • За замовчуванням, таблиця стилів буде додана до першого тегу <script> в DOM. Якщо ви хочете додати її в інше місце, використовуйте додатковий аргумент before, щоб вказати інший споріднений елемент. Стилі будуть додані перед вказаним елементом.
  • При необхідності можна передавати рядок в аргумент media, щоб встановити media="" стилів (all за замовчуванням).

За допомогою вкладок в браузері, ви повинні були помітити, що стилі завантажуються в іншому порядку, ніж зазвичай. CSS повинен з'явитися набагато нижче у списку мережевих ресурсів.

Вуаля! Цей плагін є дуже корисним, тому що ви можете використовувати його для завантаження CSS без блокування сторінки. Тепер є можливість чекати завантаження CSS-файлів скільки потрібно.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 3.9K
Приєднався: 11 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація