Оптимизация производительности современных браузеров — статьи по JS
Как мы все знаем, загрузка и выполнение JS будет блокировать рендеринг в браузере, поэтому в отрасли обычно рекомендуется помещать скрипт в конец тела, чтобы решить проблему отсутствия DOM при выполнении JS. Однако с популяризацией современных браузеров браузеры предоставляют нам более мощное оружие, которое можно разумно использовать для значительного повышения скорости загрузки страниц.
Понимание процесса рендеринга (парсер HTML)
Прежде всего, давайте объясним с точки зрения браузера, что произошло с момента ввода URL до отображения страницы.В качестве примера возьмем следующий HTML-документ.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
<script type="text/javascript" src="/header.js"></script>
</head>
<body>
<p>Text</p>
<script type="text/javascript" src="/main.js"></script>
</body>
</html>Браузер HTML для чтения документа сверху вниз (этот процесс называется парсером html), когда найден файл style.css, парсер браузера останавливается и занимается css и т. д. Загрузка и парсинг style.css завершены, браузер продолжает парсер. Затем найдите header.js, после чего парсер html остановился, загрузите браузер и завершите реализацию header.js, продолжите парсер. В этот момент на экране ничего нет. ... синтаксический анализатор, тег p найден, показано отображение p символов. Затем он находит main.js, браузер и останавливает синтаксический анализатор, загружая и выполняя main.js перед тем, как продолжить синтаксический анализатор, пока не завершится рендеринг страницы.
Предположим, что в header.js есть только одна строка кода.console.log('header'), но ответ сервера очень медленный, требуется 10 секунд, чтобы вернуть его в браузер, браузеру требуется 1 мс, чтобы выполнить этот код, и страница будет оставаться пустой в течение этих 10 с + 1 мс. Время, в течение которого браузер выполняет JS, зависит от качества кода и аппаратного обеспечения, и это не то, что фронтенд-инженеры могут случайно оптимизировать, поэтому основное внимание при оптимизации уделяется времени загрузки JS.
Оптимизируйте ядро: уменьшите время загрузки JS
Предварительное разрешение DNS
Очень просто, эффект немедленный, время загрузки страницы ускоряется, а DNS в основном используется для предварительного разрешения адреса CDN.
<!--在head标签中，越早越好-->
<link rel="dns-prefetch" href="//example.com">Preload
Браузер, когда он сталкивается с следующими тегами ссылок, немедленно загрузите Main.js (не блокируйте парсер), а в памяти, но не выполняет их оператор JS.
Браузер будет выполнять только предварительно загруженный JS напрямую.
<link rel="preload" href="/main.js" as="script">Prefetch
Браузер загрузит main.js и кэширует его на диск, когда он бездействует. Когда страница используется, она считывается непосредственно из кэша диска. На самом деле решение о том, загружать ли ресурс и когда, остается за браузером.
Если браузер обнаружит, что тег скрипта также ссылается на тот же ресурс до загрузки предварительной выборки, браузер снова инициирует запрос, что серьезно повлияет на производительность, и загрузит его дважды, поэтому не используйте его сразу на текущей странице. , Используйте предварительную выборку ресурсов и используйте предварительную загрузку.
<link href="main.js" rel="prefetch">Когда выполняется JS (отложенный и асинхронный)
В нашем примере выше теги script выполняются без дополнительных атрибутов, пока процесс загрузки не завершится, браузер будет выполнять JS.
defer и async — это два атрибута тега script, которые используются для управления загрузкой и выполнением скриптов, не блокируя синтаксический анализ документа страницы.
defer, асинхронность также связана со временем загрузки, подробности см. на этом рисунке.
Время выполнения defer — после того, как все элементы были проанализированы и до запуска события DOMContentLoaded.
Время выполнения асинхронного — после загрузки текущего JS-скрипта, поэтому порядок выполнения нескольких асинхронных скриптов не является фиксированным. Таким образом, асинхронность можно использовать только для загрузки некоторого независимого кода без зависимостей, например Google Analysis.
идеальная структура
Предыдущие два раздела помогли нам понять время загрузки и выполнения JS. Какая страница идеально подходит для современных браузеров? На самом деле ключ кроется в предварительной загрузке и предварительной выборке! Заранее сообщите браузеру, что наш веб-сайт будет использовать сразу и что он может использовать в будущем, чтобы браузер мог быстрее отображать страницу. Ниже приведен пример кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Faster</title>
<link rel="dns-prefetch" href="//cdn.com/">
<link rel="preload" href="//js.cdn.com/currentPage-part1.js" as="script">
<link rel="preload" href="//js.cdn.com/currentPage-part2.js" as="script">
<link rel="preload" href="//js.cdn.com/currentPage-part3.js" as="script">
<link rel="prefetch" href="//js.cdn.com/prefetch.js">
</head>
<body>
<script type="text/javascript" src="//js.cdn.com/currentPage-part1.js" defer></script>
<script type="text/javascript" src="//js.cdn.com/currentPage-part2.js" defer></script>
<script type="text/javascript" src="//js.cdn.com/currentPage-part3.js" defer></script>
</body>
</html>Первым делом Parser начинает скачивать JS, когда встречает в голове preload, а когда читает тег скрипта, если он скачался, то выполняет его прямо по порядку. Если загрузка не завершена, он будет ждать завершения загрузки, а затем выполнит ее, так что неблокирующая загрузка JS начнется сразу после входа на страницу.
Во-вторых, страница будет загружать предварительную загрузку JS, когда она простаивает.Если страница переходит позже, и целевая страница перехода вводит prefetch.js, браузер будет читать и выполнять ее напрямую из дискового кеша.
Тег script по-прежнему ставится перед концом тела, а тег defer добавлен для обеспечения совместимости со старыми браузерами, а код в нем выполняется после парсинга всех DOM-элементов.
На данный момент идеальная структура HTML отсутствует.
Загрузка CSS блокирует браузер, как и парсинг, в результате чего появляется белый экран. Файл шрифта в CSS является одним из ключевых факторов, влияющих на отрисовку первого экрана. В следующей статье я буду комбинировать предварительную загрузку и предварительную выборку для оптимизации CSS. и расскажу вам, что это наиболее подходящая стратегия загрузки CSS для современных браузеров. Если вы с нетерпением ждете этого, поставьте лайк!