Разное

Загрузка страницы html: Событие onload | htmlbook.ru

04.07.2023

Содержание

Простой CSS-трюк для сокращения времени загрузки страницы

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(17 голосов)

Все хотят, чтобы их страница загружалась быстрее. Это также полезно и в рамках поисковой оптимизации. Давайте посмотрим, как можно сократить время загрузки страницы, внеся несколько изменений в CSS.

Влияние CSS на время загрузки страницы

Загрузка CSS — один из основных факторов, влияющих на время загрузки страницы. Когда приложение встречает файл CSS, оно загружает его в приоритетном порядке. На основе CSS создаются объектные модели CSS (CSSOM). После создания CSSOM он объединяется с деревом DOM для создания «дерева рендеринга». Дерево рендеринга создается, когда дерево DOM объединяется с CSSOM и обеспечивает правильный стиль для всех компонентов на странице.

Чем больше CSS-кода в приложении, тем больше времени уходит на создание CSSOM и его слияние с DOM для создания дерева рендеринга. Как только HTML встречает файл CSS, он ожидает загрузки файла и создания CSSOM. Парсер ожидает завершения этой операции. Поэтому говорят, что CSS блокирует рендеринг.

Используем неблокирующий CSS

Чтобы решить эту проблему, мы можем просто использовать трюк и улучшить производительность приложения. Мы хотим, чтобы браузер не ждал загрузки CSS и создания CSSOM во время начальной загрузки страницы. Мы можем отложить создание CSSOM для некритических файлов CSS. Представим, что у нас есть некоторый CSS, применяемый к определенному элементу, который будет отображаться только после начальной загрузки страницы. Таким образом, нам не нужно заставлять загрузку страницы ждать загрузку и анализ CSS.

HTML


	<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

В приведенном выше коде указано, что значением “media” для CSS является “print”, что означает, что CSS не будет применяться изначально и будет применен, когда пользователь попытается распечатать страницу. Наряду со ссылкой мы добавили функцию на событие “onload”, которая после загрузки страницы изменяет значение “media” на “all”, сделав его доступным для всех медиа-типов.

Это происходит, когда страница загружается, и, таким образом, страница не ждет загрузки упомянутого CSS и создания CSSOM. Это ускоряет загрузку страницы.

* — Атрибут media=»print» следует применять только к тем элементам CSS, которые не влияют на первоначальную загрузку страницы. Стили, которые требуются при загрузке страницы, не могут иметь media=»print».

Оригинал статьи: Simple CSS Hack to Reduce Page Load Time

Автор статьи: Mayank Gupta

Перевод: Земсков Матвей

Другие материалы в этой категории: « SVG-спрайты и их использование

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

  • Шаблон документа HTML5 (zip, 35.
    41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)

Полезное