Я читал документацию Google Developers по оптимизации производительности веб-сайта. Я немного смущен терминологией, используемой там. Файлы CSS и JavaScript блокируют построение DOM. Но CSS называется рендерингом, тогда как JavaScript называется блокировкой парсера. В чем разница в терминах "блокировка парсера" и "рендеринг-блокировка"? Или они одинаковы, и терминология используется просто взаимозаменяемо?
Блокировка Parser против блокировки визуализации
Ответ 1
Представьте, что на странице HTML есть два элемента <script src="...">. Парсер видит первый. Он должен останавливать * синтаксический анализ во время его извлечения, а затем выполняет javascript, потому что он может содержать вызовы методов document.write(), которые в корне меняют порядок обработки следующей разметки. Получение ресурсов через Интернет сравнительно медленнее, чем другие, что делает браузер, поэтому он сидит в ожидании, не имея ничего общего. В конце концов, JS прибывает, исполняется и парсер может двигаться дальше. Затем он видит второй тег <script src="..."> и должен пройти весь процесс ожидания повторного загрузки ресурса. Это последовательный процесс и блокировка парсера.
Ресурсы CSS разные. Когда синтаксический анализатор видит загружаемую таблицу стилей, он выдает запрос серверу и переходит к нему. Если есть другие ресурсы для загрузки, все они могут быть выбраны параллельно (с учетом некоторых ограничений HTTP). Но только когда ресурсы CSS загружены и готовы, страница может быть нарисована на экране. Это делает блокировку, и поскольку выборки параллельны, это менее серьезно замедляет работу.
* Блокировка Parser не так проста, как в некоторых современных браузерах. У них есть возможность предварительно проанализировать следующий HTML-код в надежде, что script, когда он загружается и выполняет, не делает ничего, чтобы испортить последующий синтаксический разбор или если это произойдет, что все же необходимы все те же ресурсы для загружаться. Но им все равно придется отменить работу, если script делает что-то неловкое.
Ответ 2
CSS render-blocking не будет блокировать конструкцию DOM, он только блокирует отображение/рендеринг контента, пока CSSOM не будет готов. Но есть особый случай:
Если есть какой-либо встроенный <script> под внешним тегом CSS <link>, , даже если это
это просто пустой тег <script>, который вообще не содержит JavaScript, конструкция DOM для HTML ниже, чем тег <script>, будет по-прежнему блокироваться при извлечении внешнего CSS. Если у вас медленное сетевое соединение, это пустое <script> все еще вызывает длительную задержку построения DOM. Потому что тег <script> ожидает внешнего CSS, а конструкция DOM ожидает сценария. В этом случае внешний ресурс CSS неявно вызывает блокировку парсера.