В Chrome порядок сетевых запросов изменился, когда пустой div был добавлен чуть ниже тега html. - PullRequest
Новая
       25

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

0 голосов
/ 08 мая 2020

В моем проекте мы заметили, что время первой отрисовки в браузере Chrome увеличилось почти на 1 se c. И после отладки мы разобрались, в прошлой версии мы удалили ненужный div, который находился чуть ниже тега html. Этот пустой div меняет порядок запроса. Когда был добавлен пустой div (это была ошибка), файлы изображений в указанном выше порте просмотра сгиба запрашивались до запроса JavaScript и улучшали первую отрисовку, поскольку это не было заблокировано JavaScript. Но без этого ошибочного div запрос изображения выполнялся после запроса JavaScript как отложенная первая отрисовка. Если у кого-то есть идея, почему пустой div создает этот порядок запросов в сетевом вызове? образец html с пустым div. 

<html>
    <div></div>
    <head>
        <link rel="stylesheet" href="./assets/a.css" type="text/css">
        <link rel="stylesheet" href="./assets/b.css" type="text/css">
    </head>
    <body>
        <img src="./assets/image1.png"/>
        <img src="./assets/image2.png"/>

        <script src="./assets/script1.js"></script>
        <script src="./assets/script2.js"></script>
        <script src="./assets/script3.js"></script>
    </body>
</html>

1 Ответ

0 голосов
/ 09 мая 2020

Причина, по которой это имеет такое различие, заключается в том, что указан способ HTML синтаксического анализа, невозможно иметь <div> в этом месте: первый дочерний элемент <html> равен всегда <head>, неявно, если не явно; увидеть что-то, что не <head>, означает, что у вас есть неявный, возможно, пустой. Тогда, с другой стороны, тег <head> в недопустимом месте является ошибкой и игнорируется. Итак, последовательность шагов , выполняемых анализатором , выглядит (несколько сокращенно):

  1. Мое состояние - initial, и я вижу <html>. Go для состояния before html и повторите попытку.
  2. У меня состояние before html, и я вижу <html>. Создайте элемент <html> и go для состояния before head.
  3. Мое состояние - before head, и я вижу <div>. Это не <head>, поэтому создайте элемент <head>, go для состояния in head и повторите попытку.
  4. У меня состояние in head, и я вижу <div>. Это не разрешено в <head>, поэтому мы должны быть неявно после головы; go в состояние after head.
  5. Мое состояние after head, и я вижу <div>. Это не <body>, поэтому создайте элемент <body>, go для состояния in body и повторите попытку.
  6. [Шаги для обычной обработки содержимого тела <div></div> опущены.]
  7. Мое состояние in body, и я вижу <head>. Объявите ошибку синтаксического анализа, потому что у нас не может быть <head> внутри <body>, затем проигнорируйте тег и посмотрите на следующий токен.
  8. Мое состояние - in body, и я вижу <link>. Вставьте элемент <link> в открытый элемент (это <body>).
  9. [Продолжает обработку остальной части документа.]

Если вы используете инструменты разработчика в вашем браузере, чтобы изучить дерево DOM, вы увидите что-то вроде 

<html><head></head><body>
    <div></div>
    <link rel="stylesheet" href="./assets/a.css" type="text/css">
    <link rel="stylesheet" href="./assets/b.css" type="text/css">
    <img src="./assets/image1.png">
    <img src="./assets/image2.png">
    <script src="./assets/script1.js"></script>
    <script src="./assets/script2.js"></script>
    <script src="./assets/script3.js"></script>
</body></html>

Я не знаю точно, каковы правила для загрузки скриптов и стилей, когда link s отсутствуют в <head> как вы и предполагали, но они, вероятно, отличаются от того, как вы наблюдали.

Здесь важно помнить, что a HTML документ всегда имеет <html> элемент, содержащий ровно элемент <head> и элемент <body>. Если вы напишете что-то еще, оно будет принудительно придано этой форме, возможно, не так, как вы планировали.

...