Блокировка парсера против блокировки рендера

Я читал документацию разработчиков Google по оптимизации веб-производительности. Я немного запутался с используемой здесь терминологией. Файлы CSS и JavaScript блокируют построение DOM. Но CSS называется блокировкой рендера, а JavaScript - блокировкой парсера. В чем разница в терминах «блокировка парсера» и «блокировка рендера»? Или они одинаковые и терминология просто взаимозаменяемо используется?

 Rayon11 июн. 2016 г., 04:43
Из документов,«JavaScript также может блокироватьDOM строительство и задержка, когда страница отображается. (parser-blocking)» против«CSS рассматривается как ресурс блокировки рендеринга, что означает, что браузер будет удерживать рендеринг любого обработанного контента доCSSOM построен. (render-blocking

Ответы на вопрос(1)

Решение Вопроса

Представьте, что HTML-страница имеет два<script src="..."> элементы. Парсер видит первый. Он должен остановить * синтаксический анализ, пока он выбирает и затем выполняет JavaScript, потому что он может содержатьdocument.write() вызовы методов, которые принципиально изменяют способ анализа последующей разметки. Извлечение ресурсов через Интернет сравнительно намного медленнее, чем другие действия, выполняемые браузером, поэтому он просто ждет, ничего не делая. В конце концов JS прибывает, запускается и анализатор может двигаться дальше. Затем он видит второй<script src="..."> тег и должен пройти через весь процесс ожидания загрузки ресурса снова. Это последовательный процесс, и это блокировка парсера.

Ресурсы CSS разные. Когда анализатор видит таблицу стилей для загрузки, он отправляет запрос на сервер и продолжает работу. Если есть другие ресурсы для загрузки, все они могут быть выбраны параллельно (с некоторыми ограничениями HTTP). Но только когда ресурсы CSS загружены и готовы, страница может быть нарисована на экране. Это блокировка рендеринга, и поскольку выборки выполняются параллельно, это менее серьезное замедление.

* Блокировка парсера не так проста, как в некоторых современных браузерах. У них есть некоторая возможность предварительно проанализировать следующий HTML-код в надежде, что скрипт, когда он загружается и выполняется, ничего не делает для того, чтобы испортить последующий синтаксический анализ, или, если это так, что те же ресурсы все еще требуются для загрузки , Но им все равно придется отказаться от работы, если сценарий делает что-то неловкое.

 M0011 июн. 2016 г., 05:03
Спасибо за отличное объяснение. Это наверняка очистило мое понимание!
 ankit_m22 апр. 2017 г., 15:50
Существует также что-то известное какпредварительное сканированиегде браузер смотрит в будущее и выдает запрос, чтобы получить больше, чем для файлов JS / CSS. Тем не менее, существует ограничение на количество параллельных вызовов, которые может сделать браузер.
 Novice22 июн. 2018 г., 06:45
из-за вышеупомянутой причины, упомянутой @ankit_m, иногда имеет смысл добавить асинхронное выполнение даже к последнему сценарию на странице HTML, если сценарий не зависит от DOM. Так что браузер может предварительно загрузить и даже выполнить скрипт, оптимизирующий критический путь рендеринга.

Ваш ответ на вопрос