Сегодняшняя статья расскажет о том, как браузеры относятся к загружаемым ресурсам, таким как JS, CSS, шрифты, изображения и другие файлы.
У файлов CSS, JS узкая дорога
HTML обнаружил синхронность в процессе синтаксического анализаscriptЯ считаю, что читатели должны знать о точке знаний парсинга DOM, которая застрянет.
<!DOCTYPE html>
<html lang="en">
<body>
<script>console.log(1)</script>
<div>1</div>
</body>
</html>
В приведенном выше коде HTML встречает<script>console.log(1)</script>Код останавливает синтаксический анализ DOM. Конечно, современные браузеры не говорят, что они просто останавливаются и ничего не делают, там будет сканер предварительной загрузки, который просканирует файлы ниже, а затем установит приоритет в соответствии с типом файла (подробнее об этом ниже).
Приведенный выше пример представляет собой встроенный код. Если это JS-файл, то код должен быть выполнен после загрузки JS-файла.
Но вообще наша файловая структура не так проста, и должны быть файлы CSS. Поскольку JS может не только перемещать DOM, но и изменять стиль, поэтому, если вы столкнетесь сscriptЕсли ранее были другие файлы CSS, браузер должен дождаться загрузки файла CSS перед выполнением JS.
Так что не только JS блокирует синтаксический анализ DOM, но и CSS.
Конечно, я думаю, что сейчас мало кто будет писать синхронизацию напрямую.scriptНу давай же.
Если файлы встречаются одновременно, начнут ли они загрузку одновременно?
Например, когда несколько файлов могут быть загружены одновременно, браузер анализирует ресурсы img, font и background-image в файлах HTML и CSS.Будут ли они загружаться одновременно?
Ответ - нет!
Здесь только img начнет загружаться первым, а два других фрагмента контента не начнут загружаться до тех пор, пока не будет выполнен макет. Если не верите, давайте посмотрим на картинку:
Вот пример шрифта
Поле в правом нижнем углу рисунка - это файл шрифта, а файл CSS над ним. Шрифт узнаётся из файла CSS, который необходимо загрузить.
На рисунке видно, что файл CSS начал загружаться и анализироваться рано, но файл шрифта не начал загружаться до тех пор, пока не появится индикатор FP, то есть после завершения макета.
На картинке в качестве примера показан Nuggets.Вы можете попробовать другие веб-сайты, и вы сможете обнаружить, что он соответствует ожиданиям.
Тогда у читателей может возникнуть вопрос.По такой логике, значит, все, кто может использовать img, используют img, потому что background-image не начинает загружаться сразу? Правда так, но с точки зрения озвучивания, если позиция появления изображения не первый экран, то с background-image проблем нет.Конечно использование img с ленивой загрузкой тоже может решить проблему.
Итак, каков приоритет файлов?
Если вы использовали «Производительность» для проверки производительности веб-сайта, вы можете навести указатель мыши на загруженные ресурсы в столбце «Сеть» и увидеть, что ресурсы отображаются с приоритетом.
С фигуры вы можете обнаружить, что ресурсы CSS и font имеют наивысший приоритет, файлы JS имеют высокий и низкий приоритет (это связано с типом), а изображения и SVG имеют низкий приоритет.
Под приоритетом этой части понимается приоритет в определенный момент времени, не подходящий для всего цикла. Нетрудно понять, что файлы CSS имеют наивысший приоритет, ведь файлы JS зависят от файлов CSS.Посмотрите, как браузер загружает ресурсы из исходного кода Chrome.«3. Приоритет ресурсов» в формате .
Сетевой протокол — главный виновник
Для загрузки ресурсов браузер должен использовать протокол TCP, но протокол TCP по своей природе медленный.
Вы должны сначала пожать друг другу руки, а затем медленно запускать алгоритм, точно так же, как мы используем Thunder для загрузки вещей, пропускная способность слишком велика и бесполезна, а скорость должна расти. Если вы добавите HTTPS, вам придется делать больше рукопожатий TLS.
Затем вернитесь к протоколу HTTP1.1. Chrome поддерживает только 6 одновременных запросов для одного и того же домена, поэтому в предыдущем протоколе кучу запросов приходилось блокировать и ждать завершения предыдущей загрузки.
Конечно, сейчас все по-другому.Все знают концепцию HTTP2.Я никогда не видел, как бегает свинья, но я ел свинину.Не проблема поболтать несколько слов об этих знаниях. Какое мультиплексирование, слияние заголовков, бинарные кадры или что-то в этом роде.
Благодаря мультиплексированию в протоколе HTTP2 мы больше не ограничены шестью параллельными браузерами, все запросы в одном домене могут выполняться по шести мультиплексированным сетевым каналам, а время загрузки мгновенно сокращается на несколько порядков, но Вы думали, как HTTP2 обрабатывает эти ресурсы?
Как назначить их приоритет? полагаться? Пропускная способность или что-то еще? Ведь куча ресурсов занимает один и тот же сетевой канал, поэтому нужно согласовывать, кто должен качать первым, а у кого пропускная способность больше. В противном случае, если куча изображений занимает большую часть полосы пропускания, а другие файлы CSS и JS работают очень медленно, это повлияет на производительность всей веб-страницы.
Например, мне сейчас нужно загрузить CSS, JS, изображения и шрифты. Например, среди этих файлов я надеюсь, что файлы CSS могут быть загружены первыми и им может быть выделена большая пропускная способность; файлы JS могут ждать загрузки файлов CSS перед загрузкой; другие файлы имеют более низкий приоритет, чем файлы CSS. пропускная способность для загрузки.
Мы можем выполнить это требование с помощью бинарных фреймов. В протоколе HTTP2 есть десять бинарных фреймов, которым вы можете назначить новый приоритет через фрейм HEADERS, а также изменить приоритет через фрейм PRIORITY.
Для приоритета потока мы можем добиться регулировки двумя способами:
- Когда мы настраиваем зависимости потока, мы можем заставить файл JS ждать загрузки файла CSS перед запуском.
- Когда мы корректируем вес потока, мы можем добиться распределения пропускной способности, чтобы определенные ресурсы могли загружаться быстрее.
Как показано на картинке (немного некрасиво). Файлы в первой строке начинают загружаться вместе, а веса в сумме составляют 20. Затем можно рассчитать, что файлы CSS пользуются половиной пропускной способности, а остальные занимают по 1/4. Файлы JS должны ждать пока CSS не будет завершен перед запуском.
Так как же настроить эти вещи? Конечно, это должно поддерживаться сервером, что обычно относится к поставщикам услуг CDN.
наконец
Выше все содержание. Если у вас есть что-то, что вы хотите обсудить, вы можете поделиться этим вместе.