Теория - Как изменение размера запускается браузером?

Question

У меня есть поиск в течение 1 часа, чтобы узнать (и получить жизнеспособный источник), как изменение размера запускается в CSS (медиа), когда это происходит и каким компонентом. Что мне нужно, так это то, как он работает в браузере, что он делает при изменении размера окна. Не код.
Цель этого состоит в том, чтобы создать диаграмму последовательности для описания того, что происходит с изменением размера курса.

Все, что я нахожу, это как изменение размера и другой результат кода, но не теоретический пункт как это работает .

Спасибо за входящую помощь.

Answer 1

В вашем вопросе есть некоторая неопределенность: я не уверен, спрашиваете ли вы о HTML resize событии или как CSS @media запросы реагируют на изменение размера. Поэтому я буду обращаться к ним отдельно.

---

HTML * resize Событие

Это событие, инициируемое window, нацеленное на window и может в настоящее время быть услышанным только window, хотя "[t] здесь - предложение разрешить всем элементам уведомляться об изменениях размера" . Это обычное событие DOM, поэтому внешние Javascripts могут присоединять слушателей к window и в основном делать все, что хотят. Если вас интересует, как работают события DOM, вам, вероятно, стоит просто прочитать документацию от Mozilla , потому что они работают лучше, чем я когда-либо.

---

CSS @media «Реагирование» для изменения размера событий

Обратите внимание, что «Реакция» заключена в кавычки, потому что CSS действительно не волнует, сработало ли какое-либо событие, и оно на самом деле не реагирует. Вы должны прочитать эту отличную статью от Google о том, как работает рендерер страниц в браузерах. Слова не могут сделать эту статью справедливой о том, насколько хорошо она написана, но я постараюсь дать краткое изложение интересующей вас части.

TLDR;

Средство визуализации страниц является эмпирический характер oop, не обусловленный событиями. Он просто использует ту часть CSS, которая ему нужна, когда это необходимо. В случае @media запросов он просто проверяет, соответствуют ли запросы текущим состояниям во время рендеринга, и применяет их, если они это делают. Затем он делает это снова и снова на следующей итерации.

Чуть точнее:

При загрузке страницы главный поток сначала получает HTML, создает дерево DOM и запрашивает загрузку ресурсы, включая CSS (пропускает сканер с предзагрузкой, поскольку он не имеет отношения к вопросу). Затем он анализирует CSS и вычисляет вычисленный стиль для каждого элемента, прежде чем передать DOM с вычисленным стилем, присоединенным к потоку рендерера. Средство визуализации выполняет компоновку, рисование, составление и отправляет окончательный составной кадр в графический процессор. Вы можете прочитать больше об этих отдельных процедурах в связанной статье Google.

Теперь браузер работает с некоторой частотой кадров, обычно 60. Таким образом, средство визуализации должно выдавать sh 60 составных кадров в GPU каждую секунду. Очевидно, что глупо пересчитывать все это для каждого кадра, поэтому весь процесс кэшируется на каждом этапе. Если между двумя кадрами ничего не произошло, то средство визуализации просто выталкивает последний вычисленный кадр. Если какое-то событие произошло между двумя кадрами, то браузер пытается обновить кадр с минимально возможной работой. Например, если вы вводите что-то в текстовое поле, нет необходимости пересчитывать вычисленный стиль.

Если событие, подобное resize, сработало в течение интервала между двумя кадрами, однако, вычисленный пересчет стиля необходим , Таким образом, основной поток просто читает CSS и игнорирует запросы @media, которые не соответствуют состояниям для текущего кадра. Затем он вычисляет новый вычисленный стиль и передает его рендереру. Отрисовщик делает свою работу оттуда.

Очевидно, я упускаю из виду многие детали оптимизации производительности, которые существуют во всех современных браузерах, но вот суть всего процесса. Снова go прочитайте статью Google. Все объясняется очень четко (с иллюстрациями тоже!).

Answer 2

Надеюсь, вам известны следующие вычисленные понятия: высота видового экрана, ширина видового экрана, метатег видового экрана и медиазапросы.

Тэг видового экрана помогает установить, как вы хотите показывать свою страницу в браузере для мобильных устройств или настольных компьютеров.

Существует два типа событий, которые необходимо искать, чтобы медиа-запросы запускались браузером.

Загрузка страницы и Изменение размера страницы.

1. Загрузка страницы :
   1. HTML загружается первым.
   2. CSS анализируется и применяется к HTML.
   3. При синтаксическом анализе сначала применяется стиль CSS generi c CSS.
   4. На основе Медиа-запросы высоты и ширины области просмотра выполняются и применяются
2. Изменение размера страницы:
   1. CSS Медиа - это вычисляемый стиль. Таким образом, изменение высоты или ширины области просмотра заставляет медиа-запросы выполняться и применяться.

Answer 3

Медиа-запросы, работающие таким образом.

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

       <a data-viewport="375×667">iPhone 6</a>


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }