Интерфейсная система знаний (3) — Браузер

браузер

1. Что происходит от ввода URL до отображения страницы

image.png

  1. Разрешение DNS: преобразование доменных имен в IP-адреса
  2. TCP-соединение: трехстороннее рукопожатие TCP
  3. отправить HTTP-запрос
  4. Сервер обрабатывает запрос и возвращает HTTP-сообщение.
  5. Браузер анализирует и отображает страницу, строит дерево dom, дерево стилей, дерево рендеринга, макет макета, рисунок рисования
  6. Отключено: TCP махнул четыре раза

Детальное объяснение:

какой URL-адрес

URL-адрес (унифицированный указатель ресурсов),统一资源定位符, обычно известный как URL. Используется для поиска ресурсов в Интернете. URL-адрес предоставляет абстрактный метод идентификации местоположения ресурса и использует этот метод для определения местоположения ресурса, чтобы выполнять различные операции над ресурсом, добавлять, удалять, изменять и проверять.

Напримерhttp://www.w3school.com.cn/html/index.asp, соблюдайте следующие правила грамматики:

scheme://host.domain:port/path/filename

Части объясняются следующим образом:

  • схема - определениепротоколтип. Общие протоколыhttp,https,ftp(Протокол передачи файлов),file(протокол для локальных файлов), наиболее распространенным типом которого является http, и https для зашифрованных сетевых передач.
  • host - домен определенияхозяин(Хостом по умолчанию для http является www), и, конечно же, естьhttps://zhidao.baidu.comилиhttps://map.baidu.comдругие имена хостов внутри
  • домен - определяет интернетдоменное имя,Напримерw3school.com.cn，baidu.com
  • порт - определяет порт на хостеНомер порта(Номер порта по умолчанию для http80, https по умолчанию443)
  • path - определяет путь на сервередорожка(Если опущено, документ должен находиться в корневом каталоге веб-сайта).
  • имя файла - определяет документ/ресурсимя

2. Разрешение доменных имен (DNS)

После ввода URL-адреса в браузере он должен сначала пройти разрешение доменного имени, потому что браузер не может напрямую найти соответствующий сервер через доменное имя, а через IP-адрес. Здесь у вас может возникнуть вопрос - компьютеру может быть присвоен IP-адрес, а также имя хоста и доменное имя. Напримерwww.hackr.jp. Так почему бы не дать ему IP-адрес с самого начала? Это избавит вас от необходимости синтаксического анализа. Давайте сначала разберемся, что такое IP-адрес

2-1. IP-адрес

IP-адрес означает互联网协议地址. это для всех в интернете网络и каждый主机Назначить один逻辑地址, чтобы блокировать物理地址разница. IP-адрес является32 位из二进制数,Например127.0.0.1это локальный IP. доменное имя эквивалентно语义化IP-адрес для удобной памяти и связи. По сравнению с набором чистых чисел IP-адреса указание имени компьютера в буквенно-цифровом представлении больше соответствует привычкам человеческой памяти. Но заставить компьютеры понимать имена относительно сложно. Потому что компьютеры лучше обрабатывают длинные цепочки чисел. Для решения вышеуказанных проблем и возникла служба DNS.

2-2. Что такое разрешение доменного имени

Протокол DNS предоставляет услуги для поиска IP-адресов по доменным именам или обратного поиска доменных имен по IP-адресам. DNS — это网络服务器, разрешение нашего доменного имени просто на DNS记录一条信息记录. Например, baidu.com 220.114.23.56 (IP-адрес внешней сети сервера) 80 (номер порта сервера)

2-3. Как браузер запрашивает IP-адрес, соответствующий URL-адресу, через доменное имя?

  1. Первый запрос браузераhostsСоответствует ли файл этому доменному имениip地址,еслиимеютЗатем напрямую инициируйте http-запрос на этот IP-адрес. Если запрос недоступен, перейдите ко второму шагу. (расположение файла hosts:C:\Windows\System32\drivers\etc\hosts)

  2. браузер в本地DNS服务器Отправьте сообщение о разрешении DNS для разрешения доменных имен. После того, как локальный DNS-сервер получит запрос, он сначала запрашивает缓存, чтобы определить, существует ли соответствующая запись, и если да, вернуть это记录, перейдите к третьему шагу, если запрос недоступен.

  3. Локальный DNS-сервер не запрашивал соответствующую запись в кеше, поэтому локальный DNS-серверDNS根服务器Инициировать запрос запроса. Корневой сервер DNS получает запрос через查询Получите соответствующее доменное имя верхнего уровня顶级域服器изip地址, затем отправьте сообщение на локальный DNS-сервер应答报文.

  4. После того, как локальный DNS-сервер получит ответное сообщение,得到Адрес сервера домена верхнего уровня, а затем отправьте сообщение запроса DNS с просьбой преобразовать доменное имя в этот адрес.

  5. После получения запроса сервер доменных имен верхнего уровня сначала проверяет, есть ли соответствующая запись в кеше, если есть, возвращает соответствующую запись, а если не находит, запрашивает соответствующую запись доменного имени.二级域服务器адрес, а затем вернуть адрес сервера вторичного домена, соответствующий доменному имени, на локальный DNS-сервер.

  6. После получения ответного сообщения локальный DNS-сервер получает адрес вторичного доменного сервера, а затем отправляет сообщение DNS-запроса с просьбой преобразовать доменное имя в адрес.

  7. После получения запроса доменный сервер второго уровня сначала проверяет, есть ли соответствующая запись в кеше, если есть, возвращает соответствующую запись, если не находит, запрашивает адрес домена третьего уровня. сервер, соответствующий доменному имени. Вернитесь к локальному DNS-серверу.

  8. После получения ответного сообщения локальный DNS-сервер получает адрес доменного сервера третьего уровня, а затем отправляет сообщение DNS-запроса с просьбой преобразовать доменное имя в адрес.

  9. После получения запроса доменный сервер третьего уровня запрашивает соответствующую запись в базе данных зоны DNS и возвращает соответствующую запись

  10. После получения сервера домена третьего уровня локальный сервер имен возвращает пользователю ответное сообщение DNS и сохраняет запись в кэше.

  11. Браузер получает IP-адрес, соответствующий доменному имени, а затем может инициировать http-запрос.

Описание каждого сервера доменных имен

  • корневой серверВ основном используется для управления основным каталогом Интернета, доменами верхнего уровня, такими как:https://www.baidu.comсередина.com
  • домен второго уровня,Такие как:https://www.baidu.comсерединаbaidu.com
  • Домены третьего уровня, такие как:https://a.www.baidu.comсерединаa.baidu.com

2-4. Резюме

Браузер отправляет доменное имя на DNS-сервер, DNS-сервер запрашивает IP-адрес, соответствующий доменному имени, а затем возвращает его в браузер.Затем браузер печатает IP-адрес в протоколе, а также передаются параметры запроса. в протоколе, а затем вместе отправляются на соответствующий сервер.

3. Трехстороннее рукопожатие TCP

Далее мы вводим этап отправки HTTP-запроса на сервер, HTTP-запрос разделен на три части:TCP 三次握手,http 请求响应信息,关闭 TCP 连接.

на стороне клиента发送数据之前, инициирует трехстороннее рукопожатие TCP для同步клиент и сервер序列号а также确认号, и обменTCP 窗口大小信息.

3-1 Процесс трехэтапного рукопожатия TCP выглядит следующим образом:

  • Клиент отправляетSYN=1，Seq=Xпакеты на порт сервера (первое рукопожатие, инициированное браузером, сообщает серверу, что я собираюсь отправить запрос)
  • Сервер отправляет обратноSYN=1， ACK=X+1， Seq=YОтветный пакет для передачи подтверждающей информации (второе рукопожатие, инициированное сервером, сообщает браузеру, что я готов принять, вы можете отправить его быстро)
  • Клиент отправляет обратноACK=Y+1， Seq=ZПакет данных представляет собой «конец рукопожатия» (третье рукопожатие, отправленное браузером, сообщает серверу, что я отправлю его немедленно, готов его принять)

Описание каждого поля:

  • SYNУказывает на установление соединения
  • Seqсерийный номер, который используется для передачи данных после соединения
  • ACKУказывает ответ, который является подтверждением полученного пакета данных. Значение предполагает серийный номер пакета данных, который другая сторона будет продолжать отправлять. Поскольку X было получено, ожидается получение следующего X+1

3-2.Почему трехстороннее рукопожатие

Это для предотвращения无效сообщение с запросом на подключение到达服务器.

Потому что возможно, что А сначала отправил сообщение с запросом на подключение, но из-за проблем с сетью оно долго не дошло до хоста Б. В это время хост А повторно передал сообщение через какое-то время, а затем хост Б ответил на запрос сообщение. Но это нехорошо. Первое сообщение на самом деле снова приходит на хост B, затем хост B использует его как новый запрос на соединение. Если рукопожатий всего два, то хост B также установит соединение для запроса на соединение, но если это После трехэтапного рукопожатия, после того как узел B отправит подтверждающее сообщение, узел A проигнорирует его, так что TCP-соединение не будет установлено.

4. Отправить HTTP-запрос

После завершения трехэтапного рукопожатия TCP начинается отправка сообщения HTTP-запроса. Сообщение запроса отправляется请求行(строка запроса),请求头(заголовок),请求体Он состоит из 3-х частей, таких как:

image.png

4-1. Строка запроса ----- включает метод запроса, URL, версию протокола

Существует 8 методов запроса: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, TRACE. URL — это адрес запроса,<协议>：//<主机>：<端口>/<路径>?<参数>Версия протокола композиции — это номер версии http.

POST  /chapter17/user.html HTTP/1.1

В приведенном выше коде «POST» представляет метод запроса, «/chapter17/user.html» представляет URL-адрес, а «HTTP/1.1» представляет протокол и версию протокола. Сейчас более популярная версия — Http1.1.

4-2 Заголовки запроса ------- Содержит дополнительную информацию о запросе, состоящую из пар ключевое слово/значение, по одной паре в строке, а ключевое слово и значение разделяются английским двоеточием ":".

Заголовок запроса для информирования сервера об информации о клиентском запросе. Он содержит множество связанных客户端环境а также请求正文Полезная информация. Среди них, например:

image.png

  • Accept

    • эффект: типы мультимедиа, принимаемые браузером.
    • Например:Accept: text/htmlЭто означает, что браузер может принимать тип text/html, возвращаемый сервером, который мы часто называем html-документами.Если сервер не может вернуть данные типа text/html, сервер должен вернуть ошибку 406 (неприемлемо) .
    • подстановочный знак: представляет любой тип, например Accept: * / * означает, что браузер может обрабатывать все типы (обычно браузер отправляет это на сервер).

  • Принять кодировку:

    • эффект: Браузер объявляет метод кодирования, который он получает, обычно указывает метод сжатия, поддерживает ли он сжатие, какой метод сжатия (gzip, deflate) поддерживается (примечание: это не просто кодировка символов)
    • Например: Accept-Encoding: gzip, deflate, br

  • Accept-Language

    • эффект: Браузер объявляет язык, который он принимает.
    • Разница между языком и набором символов: китайский язык — это язык, а в китайском есть множество наборов символов, таких как big5, gb2312, gbk и т. д.
    • Например: Accept-Language: zh-CN,zh;q=0.9

  • Connection

    • эффект:Connection: keep-aliveПри открытии веб-страницы TCP-соединение между клиентом и сервером для передачи данных HTTP не будет закрыто.Если клиент снова обращается к веб-странице на сервере, он будет продолжать использовать эту запись.已经建立из连接.
    • Например:Connection: closeПосле завершения запроса TCP-соединение, используемое для передачи данных HTTP между клиентом и сервером, будет закрыто.Когда клиент снова отправляет запрос, TCP-соединение необходимо установить повторно.

  • Хост (это поле заголовка обязательно при отправке запроса)

    • эффект: имя хоста сервера, к которому необходимо получить доступ, например, Baidu.www.baidu.com. Это значение можно получить из URI, доступ к которому осуществляется при сканировании. Например: вводим в браузере:www.baidu.com, тогда:Host: www.baidu.com

  • Referer

    • браузер上次访问веб-страницаurl, Когда браузер отправляет запрос на веб-сервер, он обычно вызывает Referer, чтобы сообщить серверу, с какой страницы я делаю ссылку, и сервер может получить некоторую информацию для обработки. Например, ссылаясь на друга с моей домашней страницы, его сервер может подсчитать от HTTP Referer, сколько пользователей ежедневно нажимают на ссылку на моей домашней странице, чтобы посетить его веб-сайт.

  • User-Agent

    • эффект: сообщить HTTP-серверу имя и версию операционной системы и браузера, используемых клиентом.
    • Например:Агент пользователя: Mozilla/5.0

  • Cookie

    • Файлы cookie используются для хранения некоторой информации о пользователе, чтобы сервер мог идентифицировать личность пользователя (обычно для большинства веб-сайтов, требующих входа в систему). Например, файл cookie будет хранить имя пользователя и пароль некоторого пользователя. Когда пользователь входит в систему, файл cookie используется для хранения соответствующей информации, чтобы браузер мог подтвердить, что вы являетесь законным пользователем, прочитав информацию файла cookie, и убедиться, что вы являетесь законным пользователем, что позволит вам просматривать соответствующую веб-страницу. Конечно, данные в куки не только входят в вышеупомянутую область, но и много информации может быть сохранено в куки, например, sessionid и так далее.

  • If-Modified-Since

    • эффект: кэшировать страницу на стороне браузера最后修改时间отправлено на сервер, сервер будет соответствовать на этот раз с服务器Сравните время последней модификации фактического файла. Если время соответствует, возвращается 304, и клиент напрямую использует файл локального кеша. Если время несовместимо, возвращается 200 и новое содержимое файла. После того, как клиент получит его, он отбросит старый файл, кэширует новый файл и отобразит его в браузере.
    • Например:Mon, 17 Aug 2015 12:03:33 GMT

  • If-None-Match

    • эффект: If-None-Matchа такжеETagРаботая вместе, рабочий принцип заключается в добавлении информации ETag в ответ HTTP. Когда пользователь снова запрашивает ресурс, информация If-None-Match (значение ETag) будет добавлена ​​к HTTP-запросу. Если сервер подтвердит, что ETag ресурса не изменился (ресурс не был обновлен), он вернет статус 304, говорящий клиенту использовать локально кэшированный файл. В противном случае он вернет статус 200 и новый ресурс и Etag, использование такого механизма повысит производительность сайта.
    • Например: If-None-Match: W/“3119-1437038474000”.

  • Authorization

`- Когда клиент получает ответ WWW-Authenticate от веб-сервера, этот заголовок отвечает веб-серверу своей собственной аутентификационной информацией. В основном проверка авторизации для определения соответствия требованиям сервера

  • Proxy-Connection
    • При использовании прокси-сервера это указывает, использует ли прокси-сервер длинные ссылки. Однако при наличии информационной разницы между данными от клиента к прокси-серверу и от прокси-сервера к запрашиваемому серверу информационный запрос будет недоступен, но в большинстве случаев его все же можно установить.

4-3.Тело запроса, ------- может содержать данные нескольких параметров запроса, включая возврат каретки, перевод строки и данные запроса, не все запросы содержат данные запроса.

name=tom&password=1234&realName=tomson

Приведенный выше код содержит три параметра запроса: имя, пароль и реальное имя.

5. Сервер обрабатывает запрос и возвращает HTTP-сообщение.

5-1. Сервер

Сервер находится в сетевом окружении高性能计算机, который прослушивает запросы на обслуживание, отправленные другими компьютерами (клиентами) в сети, и предоставляет соответствующие услуги, такие как службы веб-страниц, службы загрузки файлов, почтовые службы и видеослужбы. Основными функциями клиента являются просмотр веб-страниц, просмотр видео, прослушивание музыки и т. д.两者截然不同. Приложение, обрабатывающее запрос, установлено на каждом сервере -web server. Общие продукты веб-сервера включаютapache、nginx、IIS 或 LighttpdЖдать.

web serverобслуживать管控Для запросов, отправленных разными пользователями, он будет комбинировать файлы конфигурации, чтобы делегировать различные запросы программам на сервере, которые обрабатывают соответствующие запросы (например, сценарии CGI, сценарии JSP, сервлеты, сценарии ASP, серверный JavaScript или некоторые другие). другие серверные технологии и т. д.), а затем возвращает результат обработки демона в качестве ответа.

5-2.Этап фоновой обработки MVC

Существует множество фреймворков для фоновой разработки, но большинство из них по-прежнему построены по шаблону проектирования MVC. MVC — это шаблон проектирования, который делит приложение на три основных компонента: модель — представление — контроллер, каждый из которых обрабатывает свои собственные задачи и реализует输入、处理和输出разделение.

5-2-1, вид (вид)

предоставляется пользователю操作界面, является процедурным外壳.

5-2-2 Модель

Модель в основном отвечает за数据взаимодействовать. Из трех компонентов MVC у модели больше всего задач обработки. Модель может предоставлять данные для нескольких представлений.

5-2-3 Контроллер

Он отвечает за выбор данных в «слое модели» в соответствии с инструкциями, введенными пользователем из «слоя представления», а затем выполняет над ними соответствующие операции для получения окончательного результата. контроллер принадлежит管理者Роль, которая получает запрос от представления и решает, какой компонент модели вызывать для обработки запроса, а затем какое представление использовать для отображения данных, возвращаемых обработкой модели.

5-3. HTTP ответное сообщение

Ответное сообщение состоит из трех частей: строки ответа (строки запроса), заголовка ответа (header) и тела ответа. Как показано ниже:

(1) Строка ответа содержит:协议版本，状态码，状态码描述

код состоянияПравила следующие:

  • 1xx: Информация об индикации — указывает, что запрос получен и обработка продолжается.
  • 2xx:success — указывает, что запрос был успешно получен, понят и принят.
  • 3xx:redirect -- необходимо предпринять дальнейшие действия для выполнения запроса.
  • 4xx: Ошибка клиента — запрос содержит синтаксическую ошибку или запрос не может быть выполнен.
  • 5xx: ошибка на стороне сервера — серверу не удалось выполнить допустимый запрос.

(2) Заголовок ответа содержит дополнительную информацию ответного сообщения, состоящую из пар имя/значение.

(3) Тело ответа содержит данные возврата каретки, перевода строки и возврата ответа, не все пакеты ответа содержат данные ответа.

6. Браузер анализирует и отображает страницу**

После того, как браузер получит текст ответа HTML, следующим шагом будет введение механизма рендеринга браузера.

Браузерный анализ и визуализация страницы разделены на следующие пять шагов:

  • Разобрать дерево DOM из HTML
  • Создание дерева правил CSS на основе разбора CSS
  • Объедините дерево DOM и дерево правил CSS для создания дерева рендеринга.
  • Рассчитать информацию о каждом узле в соответствии с деревом рендеринга
  • Рисовать страницы из рассчитанной информации

6-1.Разбор дерева DOM в соответствии с HTML

В зависимости от содержимого HTML,标签согласно с结构анализирует вDOM 树, процесс разбора DOM-дерева представляет собой深度优先遍历. То есть сначала построить все дочерние узлы текущего узла, а затем построить следующий родственный узел. В процессе чтения HTML-документа и построения дерева DOM, если встречается тег скрипта, дерево DOM构建会暂停(причина однопоточности js) до тех пор, пока скрипт не будет выполнен.

6-2. Сгенерируйте дерево правил CSS в соответствии с парсингом CSS

При разборе деревьев правил CSSjs 执行将暂停, пока дерево правил CSS не будет готово. Браузер не будет отображаться до тех пор, пока не будет сгенерировано дерево правил CSS.

6-3. Объедините дерево DOM и дерево правил CSS для создания дерева рендеринга.

После того, как дерево DOM и дерево правил CSS будут готовы, браузер начнет строить дерево рендеринга. Оптимизирован CSS и может ускорить построение дерева правил CSS, что приводит к более быстрому отклику страницы.

6-4 Рассчитать информацию (макет) каждого узла согласно дереву рендеринга

перерисовать:

Цвет фона, цвет текста и т. д. элемента,不影响вокруг или внутри элемента布局свойство, вызовет только перерисовку браузера.

Перекомпоновка:

элемента尺寸Если есть изменение, вам нужно пересчитать дерево рендеринга и повторно рендерить

Когда возникает рефлюкс?

  • Добавляйте или удаляйте видимые элементы DOM;
  • изменение положения элемента;
  • Изменения размера элемента - поля, отступы, границы, ширина и высота
  • Изменения содержимого — например, изменения расчетной ширины и высоты, вызванные изменениями текста или изменениями размера изображения;
  • инициализация рендеринга страницы;
  • Изменяется размер окна браузера - когда происходит событие resize;

6-5.Отрисовка страницы по рассчитанной информации

На этапе рисования система просматривает дерево рендеринга и вызывает метод «paint» модуля рендеринга для отображения содержимого модуля рендеринга на экране.

7. Отключить

image.pngКогда передача данных завершена, tcp-соединение необходимо разорвать, а tcp-волна инициируется в это время четыре раза.

  • Инициатор отправляет пассивной стороне пакеты Fin, Ack и Seq, указывающие на отсутствие передачи данных. и войдите в состояние FIN_WAIT_1. (Первая волна: инициировано браузером, отправлено на сервер, я закончил отправку сообщения запроса, вы готовы его закрыть)
  • Пассивная сторона отправляет сообщение Ack, Seq, указывающее, что она согласна с запросом на завершение работы. В этот момент инициатор хоста переходит в состояние FIN_WAIT_2. (Вторая волна: инициируется сервером, скажите браузеру, что я закончил принимать сообщение-запрос и собираюсь его закрыть, как и вы)
  • Пассивное направление отправляет инициатору сегменты сообщений Fin, Ack, Seq с просьбой закрыть соединение. и войдите в состояние LAST_ACK. (Третья волна: инициируется сервером, сообщите браузеру, я закончил отправку ответного сообщения, вы готовы его закрыть)
  • Инициатор отправляет пассивной стороне сегменты Ack и Seq. Затем войдите в состояние ожидания TIME_WAIT. Пассивная сторона закрывает соединение после получения сегмента сообщения от инициатора. Если инициатор ждет в течение определенного периода времени и не получает ответа, он нормально завершает работу. (Четвертая волна: инициируется браузером, сообщите серверу, что я закончил принимать ответное сообщение и собираюсь его закрыть, как и вы)

8. Цикл событий браузера (Цикл событий)

image.png

  • первый,整体的script(как первый宏任务) когда он начнет выполняться, он разделит весь код на同步任务、异步任务две части
  • 同步Задача перейдет непосредственно к主线程выполнять последовательно
  • 异步Задачи делятся на宏задачи и微Задача
  • Макро-задача попадает в Event Table и регистрирует в ней callback-функцию, после завершения указанного события Event Table будет перемещать функцию в Event Queue (очередь событий).
  • Микрозадача также войдет в другую Таблицу событий и зарегистрирует в ней callback-функцию, после завершения указанного события Таблица событий переместит эту функцию в Очередь событий.
  • Когда задача в основном потоке завершена,主线程为空, будет проверено微任务Очередь событий, если есть задачи, выполнить их все, если нет, выполнить следующую задачу макроса
  • Вышеупомянутый процесс будет продолжать повторяться, это цикл событий, относительно полный цикл событий.

Случай:

function test() {
  console.log(1)
  setTimeout(function () { 	// timer1
    console.log(2)
  }, 1000)
}
test();


setTimeout(function () { 		// timer2
    console.log(3)
})


new Promise(function (resolve) {
    console.log(4)
    setTimeout(function () { 	// timer3
        console.log(5)
    }, 100)
    resolve()
}).then(function () {
    setTimeout(function () { 	// timer4
    console.log(6)
    }, 0)
    console.log(7)
})


console.log(8)

Печать: 1, 4, 8, 7, 3, 6, 5, 2

Разобрать:

  • JS выполняется последовательно сверху вниз
  • Выполнить в test(), метод теста синхронный, выполнить напрямую, console.log(1) выводит 1
  • В тестовом методе setTimeout — это асинхронная макрозадача, для обратного вызова мы записываем ее как timer1 и помещаем в очередь макрозадач.
  • Затем выполните, в тестовом методе есть setTimeout, который является асинхронной макрозадачей, мы называем его timer2 и помещаем в очередь макрозадач.
  • Затем выполните обещание, новое обещание является синхронной задачей, выполните его напрямую, напечатайте 4
  • setTimeout в новом промисе — это асинхронная макрозадача, мы записываем обратный вызов как timer3 и помещаем его в очередь макрозадач.
  • Promise.then — это микрозадача, поместите ее в очередь микрозадач.
  • console.log(8) — это синхронная задача, выполняемая напрямую и выводящая 8
  • После выполнения задачи основного потока проверьте наличие Promise.then в очереди микрозадач
  • Начните выполнять микрозадачи и обнаружите, что setTimeout является асинхронной макрозадачей, запишите ее как timer4 и поместите в очередь макрозадач.
  • console.log(7) в очереди микрозадач — это синхронная задача, которая выполняется напрямую и выводит 7
  • После выполнения микрозадачи первый цикл завершается
  • Проверьте очередь задач макроса, есть таймер 1, таймер 2, таймер 3, таймер 4, четыре задачи макроса таймера, в соответствии с временем задержки таймера, чтобы получить порядок, который может быть выполнен, то есть очередь событий: таймер 2, таймер 4, таймер 3, таймер 1, вынимайте их по очереди и помещайте в Execute в конец стека выполнения (вставьте один: очередь макрозадач цикла событий браузера, то есть очередь задач макросов будет считывать только одну задачу в каждом цикле)
  • Выполнить timer2, console.log(3) — это задача синхронизации, выполнить ее напрямую, вывести 3
  • Проверяем, что микрозадач нет, второй цикл событий заканчивается
  • Выполнить timer4, console.log(6) — это задача синхронизации, выполнить ее напрямую, вывести 6
  • Проверяем, что микрозадач нет, третий цикл событий заканчивается
  • Выполнить timer3, задачу синхронизации console.log(5), выполнить напрямую, вывести 5
  • Проверяем, что микрозадач нет, четвертый цикл событий заканчивается
  • Выполнить timer1, задачу синхронизации console.log(2), выполнить напрямую, вывести 2
  • Проверяем, что нет ни микрозадач, ни макрозадач, а пятый цикл событий заканчивается

Нажми для деталей

9. Перерисовка и перекомпоновка

Когда стиль элемента изменяется, браузер должен инициировать обновление, перерисовывая элемент. В этом процессе есть два типа операций, а именно перерисовка и перекомпоновка.

Перекрасить:

при изменении стиля элемента不影响布局, браузер будет использовать перерисовку для обновления элемента. В настоящее время, поскольку требуется только перерисовка пикселей на уровне пользовательского интерфейса, потери меньше

Перекомпоновка:

когда элемент尺寸、结构или когда срабатывают определенные свойства, браузер重新渲染страница, называемая перекомпоновкой. В этот момент браузеру необходимо произвести перерасчет, а после расчета ему необходимо重新页面布局, а значит и более тяжелая операция.

Действия, вызывающие перекомпоновку:

  • Первый рендер страницы
  • Изменение размера окна браузера
  • Размер элемента, положение, содержимое изменены
  • Изменение размера шрифта элемента
  • Добавить или удалить видимые элементы dom
  • Активировать псевдоклассы CSS (например: :hover)
  • запрашивать определенные свойства или вызывать определенные методы
  • clientWidth, clientHeight, clientTop, clientLeft
  • offsetWidth, offsetHeight, offsetTop, offsetLeft
  • scrollWidth, scrollHeight, scrollTop, scrollLeft
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

Перекомпоновка должна запускать перерисовку, а перерисовка не обязательно запускает перерисовку. Накладные расходы на перерисовку невелики, а стоимость оплавления высока.

Как уменьшить обратный поток:

css

  • Избегайте использования макета таблицы
  • Примените эффект анимации к элементу, свойство position которого является абсолютным или фиксированным.

javascript

  • Избегайте частых манипуляций со стилями, которые можно объединить и изменить один раз.
  • Попробуйте использовать класс для модификации стиля
  • Чтобы уменьшить количество добавлений и удалений DOM, вы можете использовать строку или documentFragment для вставки за один раз.
  • Во время экстремальной оптимизации модификация стиля может быть изменена после display: none
  • Избегайте запуска вышеупомянутых методов, которые будут запускать перекомпоновку несколько раз.Если возможно, попробуйте использовать переменные для их хранения.

10. Хранилище

Нам часто нужно хранить некоторые данные в бизнесе, которые обычно можно разделить на短暂性存储а также持久性储存.

  • Когда это эфемерно, нам нужно только хранить данные в памяти, доступной только во время выполнения.
  • Постоянное хранилище можно разделить на浏览器端а также服务器端

Браузер:

  • cookie:Обычно используется для хранения идентификатора пользователя, статуса входа и т. д. Он автоматически переносится в http, верхний предел объема составляет 4 КБ, а время истечения срока действия можно установить самостоятельно.
  • localStorage / sessionStorage: долговременное хранение/закрытие и удаление окна, ограничение объема 4~5M
  • indexDB

сервер:

  • Распределенный кеш
  • база данных

11. протокол http/https

11-1.[1.] Недостатки протокола:

  • Невозможно повторно использовать ссылку, отключиться после завершения, перезапустить медленный старт и трехстороннее рукопожатие TCP
  • Блокировка заголовка строки: блокируется заголовок строки, в результате чего запросы влияют друг на друга.

11-2.[1.1] Улучшения:

  • Длинное соединение (поддержание активности по умолчанию), повторное использование
  • Поле host указывает соответствующий виртуальный сайт

новые особенности:

  • http
  • Аутентификация
  • государственное управление
  • кеш-кэш
  • Cache-Control
  • Expires
  • Last-Modified
  • Etag

11-3. [2.0]:

  • мультиплексирование
  • Двоичный уровень кадрирования: между прикладным уровнем и транспортным уровнем
  • сжатие заголовка
  • Пуш сервера

11-4 https: более безопасный протокол сетевой передачи

-Сертификат (открытый ключ)

  • SSL-шифрование
  • порт 443

11-5 Стратегия кэширования: можно разделить на надежный кэш и кэш согласования.

11-5-1 Сильный кеш

  • Cache-Control: Браузер определяет, истек ли срок действия кеша.未过期, использовать напрямую强缓存, максимальный приоритет Cache-Control高于 Expires
  • Expires: Браузер определяет, истек ли срок действия кеша

Когда срок действия кеша истек, используйте согласованный кеш

11-5-2 Кэш согласования

1. Уникальная схема идентификации:

  • Etag(responseнести)
  • If-None-Match(requestнести, последний вернулсяEtag) -- сервер определяет, был ли изменен ресурс

ETag/If-None-Match ETag может гарантировать, что каждый ресурс уникален, а изменения ресурсов приведут к изменениям ETag. Изменение значения ETag указывает на то, что состояние ресурса было изменено. Сервер определяет, нужно ли попадать в кеш, в соответствии со значением If-None-Match, отправленным браузером.

недостаток:

Поскольку это время является абсолютным, при изменении локального времени клиента разница во времени между сервером и клиентом становится больше, что приводит к путанице в кэше.

2. Схема времени последнего изменения:

Last-Modified(response) & If-Modified-Since (request, последнее вернуло Last-Modified)

  • Если это соответствует, верните 304 напрямую, чтобы уведомить браузер о необходимости использования кеша.
  • В случае несоответствия сервер возвращает новый ресурс

Last-Modify/If-Modify-Since Когда браузер впервые запрашивает ресурс, к заголовку, возвращаемому сервером, будет добавлено значение Last-Modify, которое определяет время последней модификации ресурса. При просмотре. Когда сервер снова запрашивает ресурс, заголовок отправленного запроса будет содержать If-Modify-Since, то есть Last-Modify, возвращаемый перед кэшированием. После получения If.Modify-Since сервер определяет, нужно ли попадать в кеш, в соответствии со временем последней модификации ресурса.

Недостатки последней модификации:

  • Периодическая модификация, но когда содержимое не меняется, это приведет к аннулированию кеша.
  • Минимальная степень детализации — только s, и изменения внутри s не могут быть обнаружены.

Etag имеет приоритет над Last-Modified

12. Перекрестный домен

Что такое та же политика происхождения:

Политика одинакового происхождения означает, что протокол, порт и доменное имя одинаковы, то есть находятся в одном домене.

Негомологичность ограничивается:

Файл cookie не может быть прочитан, dom не может быть получен и запрос ajax не может быть отправлен.

Что такое междоменный домен:

Запросы выполняются между двумя разными доменами (разные протоколы, порты, доменные имена).

Решение для междоменного:

  • JSONP, благодаря динамическому созданию тега скрипта атрибут src тега скрипта не имеет междоменных ограничений.
  • cors сервер добавляет некоторую информацию заголовка при ответе:
  • Nginx как обратный прокси
  • Среда разработки использует прокси-сервер webpack-dev-server между доменами.
Категории