(1.6w слов) Вопрос души браузера, сколько вы можете обрабатывать?

JavaScript ECMAScript 6

Как квалифицированный фронтенд-инженер, принцип работы браузера является краеугольным камнем нашей оптимизации производительности. Ранее я также подчеркивал важность системы знаний. Эта часть основного содержания является важной частью системы знаний и должна быть твердо усвоить.Только перед лицом постоянно меняющейся реальной ситуации мы можем целенаправленно дать фактическое решение, вместо того, чтобы читать различные инструкции для разработки военных уставов и оптимизации производительности, трудно найти реальную проблему, и это реально решить проблему невозможно.

содержание будет охватывать浏览器工作原理,浏览器安全а также性能监控和分析. Статья будет разделена на два раза, эта статья на сегодня представляет собой целую серию.

Часть 1. Можете ли вы рассказать о кешировании браузера?

Кэширование является очень важной частью оптимизации производительности, и механизм кэширования браузера также является очень важным элементом знаний для разработки. Далее механизм кэширования браузера объясняется в трех частях:

  • Сильный кеш
  • Согласовать кеш
  • расположение кеша

Сильный кеш

Роль кэша браузера разделена на два случая, один необходим для отправкиHTTPЗапрос один отправлять не нужно.

Первый — проверить сильный кеш, этот этап不需要Отправить HTTP-запрос.

Как это проверить? Осуществляется через соответствующее поле, но говорить об этом поле немного сложно.

существуетHTTP/1.0а такжеHTTP/1.1Среди этого поля это не то же самое. В первые дни, т.HTTP/1.0период, используяExpires,а такжеHTTP/1.1используетCache-Control. Давайте сначала посмотрим на Expires.

Expires

ExpiresТо есть время истечения, которое существует в заголовке ответа, возвращаемом сервером, сообщает браузеру, что данные могут быть получены напрямую из кеша до истечения срока, и нет необходимости запрашивать снова. Например следующее:

Expires: Wed, 22 Nov 2019 08:41:00 GMT

указывает, что ресурс находится в2019年11月22号8点41分По истечении этого срока необходимо отправить запрос на сервер.

Этот способ кажется безпроблемным и разумным, но на самом деле есть скрытая яма, т.е.Время сервера и время браузера могут не совпадать, время истечения срока действия, возвращаемое сервером, может быть неточным. Поэтому от этого метода быстро отказались в более поздней версии HTTP 1.1.

Cache-Control

В HTTP1.1 принято очень важное поле:Cache-Control. Это поле также существует в

это иExpiresпринципиально отличается тем, что не использует具体的过期时间点Таким образом, время истечения срока действия используется для управления кешем, и соответствующее полеmax-age. Возьмите этот пример:

Cache-Control:max-age=3600

Это означает, что кеш можно использовать напрямую в течение 3600 секунд, то есть через час после возврата ответа.

Если вы думаете, что это толькоmax-ageЕсли это атрибут, то это большая ошибка.

На самом деле, он может комбинировать множество инструкций, чтобы выполнить оценку кэша для большего количества сценариев.Некоторые ключевые атрибуты перечислены ниже:public: и клиент, и прокси-сервер могут кэшировать. Поскольку запрос может проходить через разные代理服务器Целевой сервер, наконец, достигнут, поэтому в результате не только браузер может кэшировать данные, но и любой прокси-узел в середине может кэшировать их.

private: В этом случае только браузер может кэшировать, а промежуточный прокси-сервер не может кэшировать.

no-cache: пропустить текущий сильный кеш и отправить HTTP-запрос, то есть ввести напрямую协商缓存阶段.

no-store: Очень грубо, не делает никакого кэширования.

s-maxage:с участиемmax-ageВыглядит похоже, но разница в том, что s-maxage — это время кэширования прокси-сервера.

Стоит отметить, что когдаExpiresа такжеCache-ControlКогда оба существуют,Cache-Controlбудет отдан приоритет.

Конечно, бывает и ситуация, когда время кэширования ресурсов истекает, т.е.强缓存Не работает, что делать дальше? Верно, это приведет к барьеру второго уровня——Согласовать кеш.

Согласовать кеш

После того, как сильный кэш станет недействительным, браузер перенесет соответствующий缓存tagЧтобы отправить запрос на сервер, сервер решает, использовать ли кеш по этому тегу, т.е.Согласовать кеш.

Конкретно такие теги кеша делятся на два типа:Last-Modifiedа такжеETag.这两者各有优劣，并不存在谁对谁有绝对的优势, который отличается от двух тегов в сильном кеше выше.

Last-Modified

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

После того, как браузер получит его, если он запросит снова, он будет перенесен в заголовок запроса.If-Modified-SinceПоле, значение этого поля — время последней модификации, отправленное сервером.

Сервер получает заголовок запросаIf-Modified-SinceПосле поля, и это на самом деле сервер该资源的最后修改时间В сравнении:

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

ETag

ETagЭто уникальный идентификатор, генерируемый сервером для файла в соответствии с содержимым текущего файла.Поскольку содержимое в нем изменяется, это значение будет меняться. сервер через响应头Передайте это значение браузеру.

Браузер получаетETagЗначение , будет использоваться в качестве значения в следующем запросе.If-None-MatchСодержимое этого поля помещается в заголовок запроса и отправляется на сервер.

сервер получаетIf-None-MatchПосле этого он будет следить за ресурсом на сервереETagСравнивать:

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

Сравните два

  1. существует精准度начальство,ETagлучше чемLast-Modified. Лучше, чем ETag, он идентифицирует ресурсы в соответствии с содержимым, поэтому он может точно воспринимать изменения в ресурсах. А Last-Modified отличается тем, что он не может точно воспринимать изменения ресурсов в некоторых частных случаях.Основных случаев два:
  • Файл ресурсов отредактирован, но содержимое файла не изменилось, что также приведет к аннулированию кеша.
  • Единицей времени, которую может воспринимать Last-Modified, являются секунды.Если файл изменяется несколько раз в течение 1 секунды, то Last-Modified в это время не отражает модификацию.
  1. С точки зрения производительности,Last-Modifiedлучше чемETag, также очень прост для понимания,Last-Modifiedпросто запишите момент времени, иEtagХэш-значение должно быть сгенерировано на основе конкретного содержимого файла.

Кроме того, если оба метода поддерживаются, сервер отдаст приоритетETag.

расположение кеша

Мы упомянули ранее, что когда强缓存Сервер кеша попаданий или переговоров возвращает 304, мы получаем ресурсы прямо из кеша. Что эти ресурсы точно кэшируются в какой позиции делать?

В браузере есть четыре места кэширования, расположенные в порядке убывания приоритета:

  • Service Worker
  • Memory Cache
  • Disk Cache
  • Push Cache

Service Worker

Service Worker опирается на идею Web Worker, то есть позволяет JS работать вне основного потока, потому что он отделен от формы браузера, к нему нельзя получить доступ напрямуюDOM. Несмотря на это, он все еще может помочь нам выполнить множество полезных функций, таких как离线缓存,消息推送а также网络代理и другие функции. один из них离线缓存то естьService Worker Cache.

Service Worker также является важным механизмом реализации PWA. О его деталях и функциях мы подробно расскажем позже при совместном использовании PWA.

Кэш памяти и дисковый кеш

Memory CacheОтносится к кэш-памяти, которая является самой быстрой с точки зрения эффективности. Но с точки зрения времени выживания он самый короткий, когда процесс рендеринга заканчивается, кэша памяти не существует.

Disk CacheЭто кеш, хранящийся на диске, который уступает кешу памяти с точки зрения эффективности доступа, но его преимущества заключаются в емкости и времени хранения. Немного основ компьютера должно быть хорошо понято, поэтому я не буду расширяться.

Что ж, теперь возникает вопрос, поскольку у обоих есть свои преимущества и недостатки, как браузер решает разместить ресурсы в памяти или на жестком диске? Основные стратегии следующие:

  • Файлы JS и CSS большего размера будут брошены прямо на диск, иначе они будут брошены в память.
  • Когда использование памяти относительно велико, файл предпочтительно записывается на диск.

Push Cache

То есть push-кеширование, которое является последней линией защиты браузерного кэширования. этоHTTP/2Хотя контент в HTTP/2 в настоящее время широко не используется, он все шире используется с продвижением HTTP/2. О Push Cache есть много контента, который нужно копать, но это не является предметом этой статьи, вы можете обратиться к этомуРасширенная статья.

Суммировать

Краткий обзор механизмов кэширования браузера:

сначала черезCache-ControlУбедитесь, что надежное кэширование доступно

  • Если доступен надежный кеш, используйте его напрямую
  • В противном случае войти в кеш согласования, то есть отправить HTTP-запрос, и сервер передаетIf-Modified-SinceилиIf-None-MatchПоле для проверки обновления ресурса
    • Если ресурс обновлен, вернуть ресурс и код состояния 200.
    • В противном случае верните 304, указав браузеру получить ресурс непосредственно из кеша.

Часть 2. Можете ли вы рассказать о локальном хранилище браузера? Каковы плюсы и минусы каждого?

Локальное хранилище браузера в основном разделено наCookie,WebStorageа такжеIndexedDB, вWebStorageможно еще разделить наlocalStorageа такжеsessionStorage. Далее мы проанализируем эти решения для локального хранения один за другим.

Cookie

CookieОн изначально был разработан не для локального хранения, а для его восполненияHTTPсуществуетНеадекватное государственное управление.

HTTPПротокол является stateless протоколом.Клиент отправляет запрос на сервер, а сервер возвращает ответ.На этом история заканчивается, но как дать знать серверу, кто клиент, при отправке запроса в следующий раз?

На этом фонеCookie.

Cookie — это, по сути, небольшой текстовый файл, хранящийся в браузере в виде пар ключ-значение (в панели разработчика Chrome).ApplicationЭтот столбец можно увидеть). Отправка запросов на одно и то же доменное имя будет содержать один и тот же файл cookie, и сервер может получить статус клиента после получения файла cookie для анализа.

Роль файлов cookie хорошо известна, они используются дляхранение состояния, но и у него есть много фатальных недостатков:

  1. Дефект емкости. Предельный размер файлов cookie составляет всего4KB, может использоваться только для хранения небольшого количества информации.

  2. недостатки производительности. Файл cookie тесно следует за доменным именем.Независимо от того, нуждается ли определенный адрес под доменным именем в этом файле cookie или нет, запрос будет содержать полный файл cookie, поэтому по мере увеличения количества запросов это фактически приведет к огромным потерям производительности, потому что запрос содержит много ненужного контента.

  3. Недостатки безопасности. Поскольку файл cookie передается в браузере и на сервере в виде простого текста, его легко перехватить нелегальными пользователями, а затем выполнить серию фальсификаций и повторно отправить на сервер в течение срока действия файла cookie, что составляет довольно опасно. Кроме того, вHttpOnlyВ случае false информация о файлах cookie может быть прочитана напрямую через JS-скрипт.

localStorage

Сходства и различия с файлами cookie

localStorageсовсем немногоCookieТо же самое и для доменного имени, то есть под одним и тем же доменным именем будет храниться один и тот же сегментlocalStorage.

Но это относительноCookieОтличий все же немало:

  1. емкость. Максимальная емкость localStorage составляет5M,в сравнении сCookie4K значительно увеличилось. Конечно, эти 5M предназначены для доменного имени, поэтому они постоянно хранятся для доменного имени.

  2. Существует только клиент, и по умолчанию он не участвует в общении с сервером. Это хороший способ избежать файлов cookieпроблемы с производительностьюа такжебезопасный вопрос.

  3. Инкапсуляция интерфейса. пройти черезlocalStorageэкспонируется в глобальном масштабе, и через егоsetItemа такжеgetItemОчень удобно работать другими способами.

Метод работы

Далее посмотрим как это сделатьlocalStorage.

let obj = { name: "sanyuan", age: 18 };
localStorage.setItem("name", "sanyuan"); 
localStorage.setItem("info", JSON.stringify(obj));

Затем, когда вы вводите то же доменное имя, вы можете получить соответствующее значение:

let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));

Отсюда видно, чтоlocalStorageНа самом деле все строки сохраняются, если это объект хранения, то нужно вызватьJSONизstringifyметод и использованиеJSON.parseдля разбора на объекты.

Сценарии применения

использоватьlocalStorageБольшая емкость и долговечностьlocalStorageХраните некоторые ресурсы со стабильным контентом, такие как официальный сайтlogo,место храненияBase64отформатируйте ресурсы изображения, поэтому используйтеlocalStorage

sessionStorage

Функции

sessionStorageследующие аспекты иlocalStorageПоследовательный:

  • емкость. Ограничение емкости также составляет 5M.
  • Существует только клиент, и по умолчанию он не участвует в общении с сервером.
  • Инкапсуляция интерфейса. КромеsessionStorageИзменилось название, способ хранения и способ эксплуатации прежниеlocalStorageТакой же.

ноsessionStorageа такжеlocalStorageЕсть существенная разница, то есть первое является только хранилищем на уровне сеанса, а не постоянным хранилищем. Сеанс заканчивается, то есть страница закрывается, эта частьsessionStorageбольше не существует.

Сценарии применения

  1. Вы можете использовать его для обслуживания информации формы, сохранения в ней информации формы и обеспечения того, чтобы предыдущая информация формы не была потеряна, даже если страница обновляется.
  2. Вы можете использовать его для хранения этой истории просмотров. Если эти записи не нужны после закрытия страницы, используйтеsessionStorageЭто как нельзя более уместно. Фактически, Weibo использует такой метод хранения.

IndexedDB

IndexedDBработает в браузере非关系型数据库, по сути, является базой данных и ни в коем случае не имеет того же порядка величины, что и 5 М в WebStorage. Теоретически нет верхнего предела этой емкости.

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

Тогда давайте проанализируемIndexedDBНекоторые важные функции , помимо наличия функций самой базы данных, такие как支持事务,存储二进制数据, есть некоторые особенности, которые требуют особого внимания:

  1. Хранилище ключей-значений. Внутреннее усыновление对象仓库Храните данные, в этом хранилище данных объекта используетсяпара ключ-значениеспособ хранить.
  2. Асинхронная работа. Чтение и запись базы данных — это операция ввода-вывода, а браузер обеспечивает поддержку асинхронного ввода-вывода.
  3. Ограничены политикой одного и того же источника, то есть доступ к междоменным базам данных невозможен.

Суммировать

Развитие различных технологий локального хранения и кэширования в браузерах открыло перед интерфейсными приложениями множество возможностей, и PWA были разработаны на основе этих превосходных решений для хранения. Реорганизуйте эти решения для локального хранения:

  1. cookieОн не пригоден для хранения и имеет много дефектов.
  2. Web StorageвключатьlocalStorageа такжеsessionStorage, по умолчанию не будет участвовать в обмене данными с сервером.
  3. IndexedDBПредоставляет интерфейс для хранения больших данных для нереляционной базы данных, работающей в браузере.

Часть 3: Поговорите о том, что происходит от ввода URL до рендеринга страницы? —— Сетевые статьи

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

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

Хорошо, давайте начнем.

В этот момент вы вводите URL-адрес Baidu в адресную строку браузера:

https://www.baidu.com/

сетевой запрос

1. Создайте запрос

Браузер построит строку запроса:

// 请求方法是GET，路径为根路径，HTTP协议版本为1.1
GET / HTTP/1.1

2. Найдите надежные тайники

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

3. DNS-разрешение

Так как мы ввели доменное имя, а пакет данных проходит черезIP地址переходит к другой стороне. Итак, нам нужно получить соответствующее доменное имяIP地址. Этот процесс должен опираться на сервисную систему, которая сопоставляет доменные имена и IP-адреса одно за другим, мы называем эту системуDNS(Система доменных имен). Процесс получения определенного IPDNSРазбор.

Конечно, стоит отметить, что браузер предоставляетФункция кэширования данных DNS. То есть, если доменное имя уже было разрешено, то результат разрешения будет закэширован, а следующая обработка пойдет сразу в кеш, минуяDNS解析.

Кроме того, если порт не указан, по умолчанию используется порт 80 соответствующего IP-адреса.

4. Установите TCP-соединение

Здесь напоминают, что Chrome требует до шести соединений TCP под тем же доменным именем, а оставшийся запрос ждет.

Предполагая, что сейчас ждать не нужно, мы вступили в фазу установления TCP-соединения. Сначала объясните, что такое TCP:

TCP (протокол управления передачей) — это ориентированный на установление соединения, надежный протокол связи транспортного уровня на основе потока байтов.

УчреждатьTCP连接Он прошел следующие три этапа:

  1. пройти черезтрехстороннее рукопожатие(I.e. Отправьте в общей сложности 3 пакетов для подтверждения того, что соединение было установлено) Установите соединение между клиентом и сервером.
  2. Передача данных. Здесь есть важный механизм, то есть получатель должен уведомить отправителя после получения пакета данных.确认, если отправитель не получит это确认сообщение, определяется, что пакет данных потерян, и пакет данных отправляется повторно. Конечно, есть еще одна стратегия оптимизации в процессе отправки, которая заключается в том, чтобы поставить大的数据包拆成一个个小包, которые передаются получателю по очереди, а получатель отправляет их в порядке малых пакетов.组装в полный пакет.
  3. Отключенная фаза. Передача данных завершена, теперь пора отключиться, черезпомахал четыре разаотключить.

Прочитав это, вы должны понять, какие средства использует TCP-соединение для обеспечения надежности передачи данных.三次握手Подтвердить подключение, второе数据包校验Чтобы гарантировать, что данные достигают получателя, третий должен пройти四次挥手Отключить.

Конечно, если вы спросите дальше, например,Почему три рукопожатия вместо двух? Что делать, если третье рукопожатие не удается? Зачем махать четыре разаДождитесь этой серии выпусков, посвященных основам компьютерных сетей, сравните дно, но это тоже очень важная деталь, надеюсь, вы сможете ее изучить, и здесь есть хорошая статья.Нажмите, чтобы ввести соответствующую рекомендуемую статью, я считаю, что эта статья может вдохновить вас.

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

СейчасTCP连接После завершения установления браузер может начать общение с сервером, то есть начать отправлять HTTP-запросы. Браузер отправляет HTTP-запрос, чтобы передать три вещи:строка запроса,заголовок запросаа такжетело запроса.

Сначала браузер отправляет сообщение на серверстрока запроса,острока запроса, мы завершили построение на первом шаге этой части, вставляем содержимое:

// 请求方法是GET，路径为根路径，HTTP协议版本为1.1
GET / HTTP/1.1

Структура очень проста, т.метод запроса,запрос-URIа такжеПротокол версии HTTPсочинение.

Также принеситезаголовок запроса, как мы уже говорилиCache-Control,If-Modified-Since,If-None-MatchОба идентифицируют информацию, которая может быть помещена в заголовок запроса как кэшированная. Конечно, есть и некоторые другие свойства, перечисленные ниже:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Cookie: /* 省略cookie信息 */
Host: www.baidu.com
Pragma: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

Наконец, тело запроса, только в теле запросаPOSTметод существует, общие сценарииотправка формы.

ответ сети

HTTP-запрос поступает на сервер, и сервер выполняет соответствующую обработку. Наконец, данные передаются в браузер, то есть возвращается сетевой ответ.

Как и часть запроса, сетевой ответ состоит из трех частей:строка ответа,заголовок ответаа такжетело ответа.

Строка ответа выглядит так:

HTTP/1.1 200 OK

Зависит отHTTP协议版本,状态码а также状态描述сочинение.

Заголовок ответа содержит некоторую информацию о сервере и возвращаемых им данных, время, когда сервер генерирует данные, тип возвращаемых данных и информацию о записываемом файле cookie.

Примеры следующие:

Cache-Control: no-cache
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Date: Wed, 04 Dec 2019 12:29:13 GMT
Server: apache
Set-Cookie: rsv_i=f9a0SIItKqzv7kqgAAgphbGyRts3RwTg%2FLyU3Y5Eh5LwyfOOrAsvdezbay0QqkDqFZ0DfQXby4wXKT8Au8O7ZT9UuMsBq2k; path=/; domain=.baidu.com

Что делать после завершения ответа? TCP-соединение разорвано?

неуверенный. пора судитьConnectionполе, если заголовок запроса или заголовок ответа содержитConnection: Keep-Alive, указывая на то, что установлено постоянное соединение, так чтоTCPСоединение всегда будет поддерживаться, и ресурсы, запрашивающие единый сайт, будут повторно использовать это соединение.

В противном случае отсоединитеTCPСоединение, процесс запрос-ответ завершается.

Суммировать

На этом этапе давайте подытожим основное содержание, то есть процесс сетевого запроса на стороне браузера:

Часть 4: Поговорите о том, что происходит от ввода URL-адреса до рендеринга страницы? ——Алгоритмы анализа

Завершает сетевые запросы и ответы, если заголовок ответаContent-TypeЗначениеtext/html, то следующий шаг - браузер解析а также渲染Уже работает.

Во-первых, давайте представим часть анализа, которая в основном разделена на следующие этапы:

  • ПостроитьDOMДерево
  • 样式рассчитать
  • генерировать布局树(Layout Tree)

Построить DOM-дерево

Поскольку браузер не может напрямую понятьHTML字符串, поэтому преобразуйте эту серию потоков байтов в осмысленную и удобную структуру данных, котораяDOM树.DOM树По существуdocumentявляется корневым узлом дерева с несколькими ответвлениями.

Так как его анализировать?

Суть грамматики HTML

Прежде всего, мы должны четко усвоить одну вещь: грамматика HTML не上下文无关文法.

Здесь необходимо обсудить, что上下文无关文法.

в информатикеПринцип составленияВ дисциплине есть очень четкое определение:

Если все продукционные правила формальной грамматики G = (N, Σ, P, S) принимают следующий вид: V -> w, то она называется контекстно-свободной грамматикой. где V∈N, w∈(N∪Σ)*.

Среди них объясните значение каждого параметра в G = (N, Σ, P, S):

  1. N естьнетерминальный(Как следует из названия, это означает, что последний символ не тот, то же самое верно и ниже) Установить.
  2. Σ являетсятерминаторсобирать.
  3. P — начальный символ, он должен принадлежать N, который не является терминальным символом.
  4. S – множество различных производств. Например, S -> aSb и так далее.

С точки зрения непрофессионала,上下文无关的文法То есть левая часть всех продукций в этой грамматике является нетерминалом.

Увидев это, если вы все еще немного запутались, я приведу вам пример, и вы все поймете.

Например:

A -> B

В этой грамматике каждая продукция имеет нетерминал в левой части, то есть上下文无关的文法. при этих обстоятельствах,xByдолжны регулироватьсяxAyиз.

Рассмотрим встречный пример:

aA -> B
Aa -> B

Это не тот случай上下文无关的文法, при встречеB, мы не знаем, можем ли мы сформулироватьA, в зависимости от того, левый или правыйaСуществование, то есть по отношению к контексту.

о том, почему это非上下文无关文法, первое, на что нужно обратить внимание, это соответствие стандартного синтаксиса HTML上下文无关文法, может проявить это非上下文无关данестандартный синтаксис. Здесь я просто привожу контрпример, чтобы доказать это.

Например, анализатор сканируетformПри маркировке,контекстно-свободная грамматикаМетод обработки заключается в непосредственном создании DOM-объекта, соответствующего форме, но в реальной HTML5-сцене это не так, парсер проверитformконтекст, если этоformРодительский тег тега такжеform, Такпросто пропуститьтокformтег, в противном случае создайте только объект DOM.

Обычные языки программирования — этобез контекста, в то время как HTML наоборот, что именнобез контекстахарактеристики, определитьHTML ParserЭто невозможно сделать с помощью синтаксического анализатора для обычного языка программирования и требует другого подхода.

алгоритм разбора

HTML5 Технические характеристикиПодробно описан алгоритм разбора. Алгоритм разбит на два этапа:

  1. токенизированный.
  2. Построить дерево.

Два соответствующих процессалексический анализа такжеРазбор.

алгоритм токенизации

Вход в этот алгоритмHTML文本, выходHTML标记, также становитсятокенизатор. которые используютКонечный автомат состоянийЧто нужно сделать. То есть в текущем состоянии получение одного или нескольких символов будет обновлено до следующего состояния.

<html>
  <body>
    Hello sanyuan
  </body>
</html>

Продемонстрируйте на простом примере标记化процесс.

встретить<, государствопометить открытым.

перенимать[a-z]символов, войдутстатус имени тега.

Это состояние сохраняется до тех пор, пока>, указывая на то, что запись имени тега завершена, и она становитсястатус данных.

Следующая встречаbodyЭтикетки делают то же самое.

В настоящее времяhtmlа такжеbodyотметки записываются.

Теперь перейдите к> в

, введитестатус данных, затем сохраните это состояние, чтобы получить следующие символыhello sanyuan.

Затем получите в<, вернуться кпометить открытым, получить следующий/, это создастend tagтокен.

Затем введитестатус имени тега, встретить>назадстатус данных.

Затем обработайте

в том же стиле.

алгоритм построения дерева

Как упоминалось ранее, DOM-дерево — этоdocumentявляется корневым узлом дерева с несколькими ответвлениями. Таким образом, парсер сначала создаетdocumentобъект. Токенизатор отправляет информацию о каждом токене настроитель дерева.строитель дереваКогда соответствующий токен будет получен, он будетСоздайте соответствующий объект DOM. создать этоDOM对象Тогда он сделает две вещи:

  1. БудуDOM对象Добавьте в дерево DOM.
  2. Нажмите соответствующую метку в отверстие для хранения (с闭合标签значение, соответствующее) элементам в стеке.

Или возьмем этот пример:

<html>
  <body>
    Hello sanyuan
  </body>
</html>

Во-первых, государствоинициализированное состояние.

получено от токенизатораhtmlметка, статус становитсяперед состоянием html. Также создайтеHTMLHtmlElementDOM элементы, добавьте его вdocumentНа корневом объекте и нажмите операцию стека.

Затем статус автоматически меняется наbefore head, на этот раз из генератора маркеровbody, указывая на то, что нетhead, В этот моментстроитель дереваавтоматически создастHTMLHeadElementи добавить его вDOM树середина.

теперь войдите вin headсостояние, затем сразу перейти кafter head.

Сейчастокенизаторпришелbodyотметить, создатьHTMLBodyElement, вставить вDOMдерево, при нажатии открытого стека тегов.

Тогда государство становитсяin body, а затем получить следующий ряд символов:Hello sanyuan. При получении первого символаTextnode и вставьте в него символы, затем поместитеTextУзлы вставляются в дерево DOMbody元素ниже. Поскольку следующие символы постоянно принимаются, они добавляются кTextна узле.

Сейчас,токенизаторпройти одинbodyконечный тег , входящий вafter bodyусловие.

токенизаторпришел последнийhtmlконечный тег, входящий вafter after body, указывая на то, что процесс синтаксического анализа завершен.

Отказоустойчивость

Говоря оHTML5спецификация, надо сказать, что она мощнаястратегия толерантности, Способность к отказоустойчивости очень сильная, хотя у всех разные мнения, но я думаю как старший фронтенд инженер, это надо знатьHTML ParserЧто сделано в плане отказоустойчивости.

Ниже приведены некоторые классические примеры отказоустойчивости в WebKit. Другие примеры можно добавить.

  1. Используйте вместо 
if (t->isCloseTag(brTag) && m_document->inCompatMode()) {
  reportError(MalformedBRError);
  t->beginTag = true;
}

Все заменено формой
.

  1. Табличный Дискретный
<table>
  <table>
    <tr><td>inner table</td></tr>
  </table>
  <tr><td>outer table</td></tr>
</table>

WebKitавтоматически преобразуется в:

<table>
    <tr><td>outer table</td></tr>
</table>
<table>
    <tr><td>inner table</td></tr>
</table>
  1. Вложение элементов формы

Просто игнорируйте внутреннюю частьform.

расчет стиля

Что касается стилей CSS, его источников обычно три:

  1. ссылка на тег ссылки
  2. стили в тегах стилей
  3. Атрибут встроенного стиля элемента

форматирование таблицы стилей

Во-первых, браузеры не могут напрямую распознавать текст стиля CSS, поэтому первое, что делает механизм рендеринга после получения текста CSS, — преобразует его в структурированный объект, таблицы стилей.

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

в консоли браузера черезdocument.styleSheetsчтобы увидеть эту окончательную структуру. Конечно, эта структура включает в себя три вышеуказанных источника CSS, которые обеспечивают основу для последующих операций со стилями.

Нормализация атрибутов стиля

Существуют некоторые значения стилей CSS, которые нелегко понять механизму рендеринга, поэтому их необходимо нормализовать перед вычислением стиля, напримерem->px,red->#ff0000,bold->700и т.п.

Рассчитать конкретный стиль каждого узла

стиль был格式化а также标准化, а затем вы можете вычислить конкретную информацию о стиле каждого узла.

На самом деле метод расчета не сложный, в основном два правила:наследоватьа такжекаскад.

Каждый дочерний узел по умолчанию наследует атрибут стиля родительского узла.Если родительский узел не найден, будет использоваться стиль браузера по умолчанию, также называемыйUserAgent样式. Это правило наследования, которое очень легко понять.

Тогда есть каскадные правила. Самая большая особенность CSS - это его каскадность, то есть окончательный стиль зависит от эффекта каждого атрибута. Есть даже много странных каскадных явлений. Студенты, которые прочитали "Мир CSS", должны иметь глубокое понимание этого Опыт, конкретные каскадные правила относятся к сфере углубленного языка CSS, здесь не слишком много введения.

Однако стоит отметить, что после расчета стиля все значения стиля будут привязаны кwindow.getComputedStyleСреди них расчетный стиль можно получить через JS, что очень удобно.

Создать дерево компоновки

теперь было сгенерированоDOM树а такжеDOM样式, следующее, что нужно сделать, это пройтись по системе компоновки браузера确定元素的位置, то есть для создания布局树(Дерево компоновки).

Грубая работа по созданию дерева компоновки выглядит следующим образом:

  1. Пройдитесь по полученным узлам дерева DOM и добавьте их в布局树中.
  2. Вычисляет положение координат узла дерева компоновки.

Стоит отметить, что это значение дерева макета содержит видимые элементы, дляheadЯрлыки и настройкиdisplay: none, в него не помещается.

Некоторые люди говорят, что он будет генерировать сначалаRender Tree, то есть дерево рендеринга.На самом деле это было 16 лет назад.Сейчас команда Chrome сделала очень много рефакторинга,а оно так и не сгенерировано.Render Treeобработать. Информация дерева компоновки уже очень полная, и ею полностью владеютRender Treeфункция.

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

Суммировать

Разберем основной контекст этого раздела:

Часть 5: Поговорим о том, что происходит от ввода URL на рендеринг страницы? - Рединг процесс

Браузеры были представлены в предыдущем разделе解析процесс, который включает构建DOM,样式计算а также构建布局树.

Далее разбираем следующий процесс -渲染. Делится на следующие этапы:

  • Учреждать图层树(Layer Tree)
  • генерировать绘制列表
  • генерировать图块а также栅格化
  • Показать содержимое

1. Построение дерева слоев

если ты чувствуешь сейчасDOM节点Там и информация о стиле и позиции также есть, вы можете начать рисовать страницу, то вы ошибаетесь.

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

Для решения упомянутых выше проблем браузер строит布局树После этого определенные узлы будут наслоены для построения图层树(Layer Tree).

Так на чем построено это дерево слоев?

При нормальных обстоятельствах слой узла по умолчанию будет принадлежать слою родительского узла (эти слои также называютсясинтетический слой). Когда он будет переведен в отдельный слой композитинга?

Есть два случая, которые необходимо обсудить отдельно, один из нихЯвный синтез, одинНеявный синтез.

Явный синтез

Ниже显式合成Случай:

1. Владениеконтекст стекаузел.

Контекст стека в основном создается с некоторыми специфическими свойствами CSS, как правило, в следующих случаях:

  1. Сам корневой элемент HTML имеет контекст стека.
  2. Общие настройки элементаположение не статичноа такжеСвойство z-index установлено, который создает контекст стека.
  3. элементальopacityзначение не 1
  4. элементальtransformзначение не равно
  5. элементальfilterзначение не равно
  6. элементальisolationзначение изолировано
  7. will-changeУказанное значение свойства является любым из указанных выше. (Роль воли-изменения будет подробно описана позже)

2. ПотребностьпортнойМесто.

Например, div, вы ему просто задаете размер 100*100 пикселей, и вставляете туда много текста, то лишнюю часть текста нужно будет обрезать. Конечно, если появятся полосы прокрутки, то полосы прокрутки будут продвигаться как один слой.

Неявный синтез

Далее隐式合成, простыми словами层叠等级低После того, как узлы продвинуты на отдельные слои, затем所有层叠等级比它高узелмегаполисв отдельный слой.

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

Стоит отметить, что при необходимостиrepaintмне нужно толькоrepaintсебя, не затрагивая другие слои.

2. Создайте список чертежей

Затем механизм рендеринга разделит отрисовку слоя на инструкции по рисованию, такие как сначала отрисовка фона, затем отрисовка границы... и затем объединение этих инструкций в список, который будет отрисовываться по порядку, что эквивалентно заданию после Операция рисования произвела волну планирования.

Здесь я беру домашнюю страницу Baidu в качестве примера, вы можете развернуть ее на панели настроек в инструментах разработчика Chrome.more tools, затем выберитеLayersпанель, вы можете увидеть следующий список чертежей:

3. Создавайте тайлы и создавайте растровые изображения

Теперь начнем операцию рисования.На самом деле, операция рисования в процессе рендеринга выполняется специальным потоком.Этот поток называетсясинтетическая нить.

После того, как список отрисовки будет готов, основной поток процесса рендеринга даст合成线程Отправитьcommitсообщение для отправки списка рисунков в поток компоновки. Затем пришло время синтетической нити показать общую картину.

Во-первых, учитывая, что область просмотра такая большая, когда страница очень большая, скольжение вниз занимает много времени, а рисовать все за один раз — пустая трата времени. Таким образом, первое, что делает композитный поток, — это помещает слойБлокировать. Размер этих блоков вообще не очень большой, обычно 256*256 или 512*512. Это может значительно ускорить отображение страницы в верхней части сгиба.

Поскольку более поздние данные тайла должны поступать в память графического процессора, учитывая, что операция загрузки памяти браузера в память графического процессора выполняется относительно медленно, даже отрисовка части тайлов может занять много времени. В ответ на эту проблему Chrome применяет стратегию: использовать только одну плитку при компоновке в первый раз.низкое разрешениеТаким образом, при отображении первого экрана отображаются только изображения с низким разрешением.В это время операция синтеза продолжается.При отрисовке обычного содержимого плитки текущее содержимое плитки с низким разрешением будет заменено. Это также средство для Chrome, чтобы оптимизировать скорость загрузки первого экрана внизу.

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

Затем поток компоновки выбирает объекты рядом с окном просмотра.плитка, дай этоРастеризованный пул потоковСоздайте растровое изображение.

Процесс генерации растровых изображений фактически ускоряется графическим процессором, и сгенерированные растровые изображения, наконец, отправляются в合成线程.

В-четвертых, отображаемый контент

После завершения операции растеризациисинтетическая нитьКоманда рисования «DrawQuad» генерируется и отправляется в процесс браузера.

В процессе браузераviz组件После получения этой команды, согласно этой команде, содержимое страницы обращается к памяти, то есть страница генерируется, а затем эта часть памяти отправляется на видеокарту. Зачем отправлять его на видеокарту? Я думаю, что необходимо поговорить о принципе отображения отображения отображения сначала.

Будь то монитор ПК или экран мобильного телефона, существует фиксированная частота обновления, как правило, 60 Гц, то есть 60 кадров, то есть 60 изображений обновляются за одну секунду, а время, в течение которого изображение остается, составляет около 16,7 мс. И каждый раз обновляется картинка с видеокартыпередний буфер. После того, как видеокарта получит страницу от процесса браузера, она синтезирует соответствующее изображение и сохранит изображение взадний буфер, то система автоматически前缓冲区а также后缓冲区Поменяйтесь местами и так далее.

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

Суммировать

На этом мы завершили весь процесс, и теперь мы снова разберемся с процессом рендеринга страницы.

Часть 6. Расскажите о своем понимании перерисовки и перекомпоновки.

Давайте сначала рассмотрим渲染流水线процесс:

Далее мы будем использовать это как основу для внедрения перерисовки и перекомпоновки, а также еще одного способа обновления вида — композитинга.

переплавка

Первое знакомство回流.回流Также известен как重排.

Условия срабатывания

Проще говоря, это происходит, когда наши модификации структуры DOM вызывают изменение геометрии DOM.回流процесс.

В частности, следующие операции вызовут перекомпоновку:

  1. Геометрические свойства элемента DOM изменяются, общие геометрические свойстваwidth,height,padding,margin,left,top,borderПодождите, это очень понятно.

  2. сделать узлы DOM доступными增减или移动.

  3. прочти и напишиoffsetклан,scrollсемья иclientКогда используется атрибут семейства, браузеру необходимо выполнить операцию перекомпоновки, чтобы получить эти значения.

  4. передачаwindow.getComputedStyleметод.

процесс оплавления

В соответствии с приведенным выше конвейером рендеринга, когда запускается перекомпоновка, если структура DOM изменяется, дерево DOM будет повторно визуализировано, а затем будут выполняться все последующие процессы (включая задачи, отличные от основного потока).

Это эквивалентно повторению процесса синтаксического анализа и синтеза, и накладные расходы очень велики.

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

Условия срабатывания

Когда модификация DOM приводит к изменению стиля, не влияя на геометрические свойства, это вызовет重绘(repaint).

процесс перерисовки

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

пропущен生成布局树а также建图层树На этапе непосредственно генерируется список чертежей, а затем продолжается последующий ряд операций, таких как генерация блоков и растровых изображений.

Видно, что перерисовка не обязательно приводит к оплавлению, но оплавление должно было произойти.

синтез

Другой случай — прямой синтез. Например, с помощью CSS3transform,opacity,filterЭтими свойствами можно добиться эффекта синтеза, о котором часто говорятУскорение графического процессора.

Причины ускорения графического процессора

В случае компоновки процесс компоновки и рисования будет пропущен напрямую и перейдет непосредственно к非主线程обработанная часть, т.е. непосредственно переданная合成线程иметь дело с. Есть два основных преимущества в том, чтобы оставить все как есть:

  1. в состоянии дать полную свободуGPUПреимущества. Пул потоков вызывается в процессе генерации растрового изображения синтетическим потоком и используется в нем.GPUДля ускоренной генерации графические процессоры хорошо справляются с обработкой растровых данных.

  2. Ресурсы не заняты основным потоком, и даже если основной поток завис, эффект все равно может отображаться плавно.

Практическая значимость

После знания вышеизложенных принципов, что является определяющим значением для процесса развития?

  1. Избегайте частого использования стилей, вместо этого используйте модификацииclassПуть.
  2. использоватьcreateDocumentFragmentМассовые манипуляции с DOM.
  3. Обработка против сотрясения/дросселирования для изменения размера, прокрутки и т. д.
  4. Добавьте will-change:transform, чтобы механизм рендеринга реализовал для него отдельный слой.Когда происходят эти преобразования, они просто используют поток композитинга для обработки этих преобразований без участия основного потока, что значительно повышает эффективность рендеринга. Конечно, это изменение не ограничиваетсяtranform, можно использовать любое свойство CSS, которое позволяет получить составной эффект.will-changeобъявить. Вот практический пример, одна строкаwill-change: tranformсохранить проект,Нажмите, чтобы перейти прямо.

Часть 7. Можете ли вы рассказать об атаках XSS?

Что такое XSS-атака?

XSSполное имяCross Site Scripting(который跨站脚本), чтобы отличить его от CSS, он называетсяXSS. Атака XSS относится к выполнению вредоносных сценариев (междоменных или однодоменных) в браузере для получения информации о пользователе и выполнения операций.

Эти операции обычно достигают следующих целей:

  1. вороватьCookie.
  2. Отслеживайте поведение пользователя, например ввод пароля учетной записи и отправку его непосредственно на хакерский сервер.
  3. Измените DOM, чтобы подделать форму входа.
  4. Создание всплывающей рекламы на странице.

Обычно существует три способа реализации XSS-атак:тип хранения,Светоотражающийа такжеТип документа. Принципы относительно просты, поэтому давайте представим их один за другим.

тип хранения

存储型, как следует из названия, хранит вредоносные скрипты.Действительно, хранимый XSS хранит скрипты в базе данных на стороне сервера, а затем выполняет эти скрипты на стороне клиента для достижения эффекта атаки.

Распространенным сценарием является отправка фрагмента кода скрипта в область комментариев.Если внешний и внутренний интерфейс не экранируются, содержимое комментария сохраняется в базе данных и直接执行, равносильно выполнению куска JS-кода с неизвестной логикой, что очень пугает. Это хранимая XSS-атака.

Светоотражающий

反射型XSSОтносится к вредоносному сценарию какчасть сетевого запроса.

Например, я набираю:

http://sanyuan.com?q=<script>alert("你完蛋了")</script>

Эта Ян, на стороне сервера получитqпараметры, а затем вернуть содержимое в браузер.Браузер анализирует содержимое как часть HTML, обнаруживает, что это скрипт, и выполняет его напрямую, тем самым подвергаясь атаке.

почему это называется反射型, так как вредоносный скрипт передается через сервер в качестве параметра сетевого запроса, а затем отражается в HTML-документе для разбора. а также存储型Разница в том, что сервер не хранит эти вредоносные скрипты.

Тип документа

XSS-атаки на основе документов не проходят через сервер, а действуют как посредник, перехватывая сетевые пакеты во время передачи данных, а затемИзмените HTML-документ внутри!

К таким методам захвата относятсяWIFI路由器劫持или本地恶意软件Ждать.

Меры предосторожности

понять триXSSВ принципе атаки мы можем найти одну общую черту: все они позволяют запускать вредоносные скрипты прямо в браузере.

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

Для того, чтобы этого добиться, необходимо сделатьОдна вера, два подвига.

Вера

Никогда не доверяйте пользовательскому вводу!

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

Такие как:

<script>alert('你完蛋了')</script>

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

&lt;script&gt;alert(&#39;你完蛋了&#39;)&lt;/script&gt;

Такой код не может быть выполнен во время парсинга html.

Конечно, вы также можете использовать фильтрацию ключевых слов для удаления тегов сценария. Итак, теперь осталось только:

Ничего не осталось :)

Использовать CSP

CSP, политика безопасности контента в браузере, ее основная идея заключается в том, что сервер решает, какие ресурсы загружает браузер, в частности, он может выполнять следующие функции:

  1. Ограничить загрузку ресурсов под другими доменами.
  2. Отправка данных на другие домены запрещена.
  3. Предоставление механизма отчетности может помочь нам вовремя обнаруживать XSS-атаки.

Использовать HttpOnly

Многие сценарии XSS-атак используются для кражи файлов cookie, и после установки атрибута HttpOnly файла cookie JavaScript не может прочитать значение файла cookie. Это также может быть хорошей защитой от XSS-атак.

Суммировать

XSSПод атакой понимается выполнение вредоносного скрипта в браузере с последующим получением информации пользователя для работы. в основном разделены存储型,反射型а также文档型. К профилактическим мерам относятся:

  • Одно убеждение: не доверяйте пользовательскому вводу, перекодируйте или фильтруйте ввод, чтобы сделать его неприменимым.
  • Два эксплойта: использование CSP, использование атрибута HttpOnly файлов cookie.

Часть 8: Можете ли вы рассказать об атаках CSRF?

Что такое CSRF-атака?

CSRF (подделка межсайтовых запросов), то есть подделка межсайтовых запросов, относится к хакеру, побуждающему пользователя щелкнуть ссылку, открыть веб-сайт хакера, а затем хакер использует пользователятекущий статус входаИнициировать межсайтовый запрос.

Например, вы нажимаете на фотографию девушки, тщательно отобранную хакерами на форуме, и после нажатия вы попадаете на новую страницу.

Тогда поздравляю, на вас напали :)

Вам может быть более любопытно, почему на него внезапно напали? Далее мы разберем, что хакеры делают за кулисами, когда вы переходите по ссылке.

Можно сделать три вещи. Перечислено ниже:

1. Автоматически отправлять GET-запрос

На хакерской странице может быть такой фрагмент кода:

<img src="https://xxx.com/info?user=hhh&count=100">

После входа на страницу автоматически отправляется запрос на получение, стоит отметить, что этот запрос автоматически принесет информацию из куки о xxx.com (здесь предполагается, что вы уже авторизовались на xxx.com).

Если на стороне сервера нет соответствующего механизма проверки, он может подумать, что запросчик является обычным пользователем, потому что он несет соответствующий файл cookie, а затем выполняет различные соответствующие операции, которые могут быть переводами, денежными переводами и другими вредоносными операциями.

2. Автоматически отправлять POST-запросы

Хакер мог заполнить форму самостоятельно, написав сценарий, который автоматически ее отправляет.

<form id='hacker-form' action="https://xxx.com/info" method="POST">
  <input type="hidden" name="user" value="hhh" />
  <input type="hidden" name="count" value="100" />
</form>
<script>document.getElementById('hacker-form').submit();</script>

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

3. Стимулируйте клики для отправки GET-запросов

На хакерском сайте может быть ссылка, которая побуждает вас щелкнуть:

<a href="https://xxx/info?user=hhh&count=100" taget="_blank">点击进入修仙世界</a>

После щелчка автоматически отправить запрос на получение, затем и自动发 GET 请求Часть того же.

ЭтоCSRFПринципы атаки. а такжеXSSВ отличие от атак CSRF-атаки не требуют внедрения вредоносного кода на текущую страницу пользователя.htmlдокумента, но перейти на новую страницу, используяПроверка уязвимостиа такжеПредыдущий статус входа пользователядля имитации действий пользователя.

Меры предосторожности

1. Используйте атрибут SameSite файла cookie.

CSRF攻击Важной частью этого является автоматическая отправкаCookie, а затем этот файл cookie олицетворяет личность пользователя. Таким образом, вCookieСтатья ниже — лучший способ предотвратить это.

Так уж получилось, что в куке есть ключевое поле, которое может вносить некоторые ограничения на перенос куки в запросе.SameSite.

SameSiteМожно установить до трех значений,Strict,Laxа такжеNone.

a.существуетStrictВ режиме браузер полностью запрещает сторонним запросам передавать файлы cookie. например запросsanyuan.comСайт может быть толькоsanyuan.comТолько запросы в доменном имени могут содержать файлы cookie, а запросы с других веб-сайтов не могут.

b.существуетLaxрежиме, он немного свободнее, но только вget 方法提交表单состояние илиa 标签发送 get 请求Cookie могут быть перенесены в случае , но не в других случаях.

c.существуетNoneВ режиме, который является режимом по умолчанию, запросы автоматически содержат файлы cookie.

2. Проверьте исходный сайт

Это требует использования двух полей в заголовке запроса:Originа такжеReferer.

в,Originсодержит только информацию о доменном имени, аRefererсодержит具体URL-адрес .

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

3. CSRF Token

DjangoКак back-end фреймворк Python, студенты, разрабатывавшие его с его помощью, будут знать, что в его шаблоне при разработке формы часто прикрепляется такая строчка кода:

{% csrf_token %}

ЭтоCSRF Tokenтипичное приложение. Так в чем же ее принцип?

Во-первых, когда браузер отправляет запрос на сервер, сервер генерирует строку, которая встраивается в возвращаемую страницу.

Тогда, если браузер захочет отправить запрос, он должен привести эту строку, и тогда сервер проверит, легально ли это, и если не легально, то не ответит. Эта строкаCSRF Token, обычно сторонний сайт не может получить этот токен, поэтому он отклоняется сервером.

Суммировать

CSRF (подделка межсайтовых запросов), то есть подделка межсайтовых запросов, относится к хакеру, побуждающему пользователя щелкнуть ссылку, открыть веб-сайт хакера, а затем хакер использует текущий статус входа пользователя для инициирования перекрестного запроса. - запрос сайта.

CSRFОбычно есть три способа атаки:

  • Автоматический GET-запрос
  • Автоматический POST-запрос
  • Вызовите клики для отправки GET-запросов.

Меры предосторожности:利用 Cookie 的 SameSite 属性,验证来源站点а такжеCSRF Token.

Часть 9. Почему HTTPS делает передачу данных более безопасной?

говоря оHTTPS, мы должны говорить об обратномHTTP.HTTPХарактеристикой HTTP является передача открытого текста, поэтому в каждом канале передачи данные могут быть украдены или изменены третьей стороной.В частности, данные HTTP проходят через уровень TCP, а затем проходят через уровень TCP.WIFI路由器,运营商а также目标服务器, по этим ссылкам данные могут быть получены посредником и подделаны, о чем мы часто говориматака «человек посередине».

Чтобы предотвратить этот тип атаки, нам пришлось ввести новую схему шифрования, а именно HTTPS.

HTTPSНе новый протокол, а расширенная версияHTTP. Принцип в том, чтоHTTPа такжеTCPМежду ними устанавливается промежуточный слой.HTTPа такжеTCPПри общении это не такое прямое общение, как раньше, оно шифруется напрямую через промежуточный уровень, и зашифрованные пакеты данных отправляются наTCP, Ответ,TCPПакет должен быть расшифрован, прежде чем его можно будет передать вышеуказанномуHTTP. Этот средний слой также называется安全层.安全层Ядром являются данные加解密.

Далее будем анализироватьHTTPSКак реализовано шифрование и дешифрование.

Симметричное и асимметричное шифрование

концепция

Сначала нужно понять对称加密а также非对称加密концепции, а затем обсудить эффект применения двух.

对称加密самый простой способ, относящийся к加密а также解密используетсятот же ключ.

И для非对称加密, если есть два ключа, А и В, если пакет данных, зашифрованный с помощью А, может быть расшифрован только с помощью В, и наоборот, если пакет данных, зашифрованный с помощью В, может быть расшифрован только с помощью А.

Процесс шифрования и дешифрования

Давай поговорим浏览器а также服务器Процесс согласования шифрования и дешифрования.

Сначала браузер отправляет на сервер случайное число.client_randomи список методов шифрования.

После того, как сервер его получает, он возвращает браузеру другое случайное число.server_randomи метод шифрования.

Теперь у обоих есть три идентичных учетных данных:client_random,server_randomи метод шифрования.

Затем используйте этот метод шифрования, чтобы смешать два случайных числа для генерации ключа, который браузер связывает с сервером.暗号.

Эффект от каждого приложения

Если вы используете对称加密таким образом, третья сторона может получитьclient_random,server_randomИ метод шифрования, потому что этот метод шифрования может быть расшифрован одновременно, поэтому посредник может успешно расшифровать пароль, получить данные и легко взломать этот метод шифрования.

теперь, когда对称加密Так уязвим, давайте попробуем非对称шифрование. В этом методе шифрования сервер имеет два ключа, один公钥, что означает, что каждый может получить его, который является общедоступным, а другой私钥, этот закрытый ключ известен только самому серверу.

Хорошо, теперь, чтобы начать передачу.

браузер поставитьclient_randomИ список методов шифрования передается, сервер его получает, ставитserver_random,加密方法а также公钥перешел в браузер.

Теперь у обоих одинаковыеclient_random,server_randomи метод шифрования. Затем браузер использует открытый ключ дляclient_randomа такжеserver_randomШифровать, генерировать связь с сервером暗号.

В это время, потому чтоАсимметричное шифрование, данные, зашифрованные открытым ключом, могут быть использованы только私钥Расшифровка, поэтому даже если посредник получает данные из браузера, поскольку у него нет закрытого ключа, он все равно не может их расшифровать, что обеспечивает безопасность данных.

Это обязательно безопасно? Умные друзья уже обнаружили подсказку. назад非对称加密Данные, зашифрованные открытым ключом, могут быть расшифрованы закрытым ключом, а данные, зашифрованные закрытым ключом, также могут быть расшифрованы открытым ключом!

Данные сервера могут быть зашифрованы только с помощью закрытого ключа (потому что, если он использует открытый ключ, браузер не сможет их расшифровать), как только посредник получит открытый ключ, он сможет расшифровать данные с сервера, и все. опять таки. Более того, простое использование асимметричного шифрования будет потреблять большую часть производительности сервера, поэтому мы пока не будем использовать эту схему.

Комбинация симметричного шифрования и асимметричного шифрования

Можно обнаружить, что симметричное шифрование и асимметричное шифрование, если какое-либо из них применяется отдельно, будут иметь риски для безопасности. Так можем ли мы объединить их для дальнейшего обеспечения безопасности?

На самом деле можно продемонстрировать весь процесс:

  1. Браузер отправляет на серверclient_randomи список методов шифрования.
  2. сервер получает, возвращаетserver_random, метод шифрования и открытый ключ.
  3. Браузер получает, а затем генерирует другое случайное числоpre_random, шифруются открытым ключом и отправляются на сервер. (Стук по доске! Основные операции!)
  4. Сервер расшифровывает зашифрованныеpre_random.

Теперь браузер и сервер имеют три одинаковых учетных данных:client_random,server_randomа такжеpre_random. Затем они смешивают три случайных числа с одним и тем же методом шифрования, чтобы сгенерировать окончательный результат.密钥.

Затем браузер и сервер взаимодействуют с одним и тем же ключом, то есть с помощью对称加密.

Этот последний ключ очень трудно получить посередине, потому что нет закрытого ключа, поэтомуНе могу получить pre_random, окончательный ключ не может быть сгенерирован.

Вернитесь и сравните с простым использованиемАсимметричное шифрование, какие улучшения сделаны таким образом? По сутиПредотвращает передачу данных от шифрования закрытым ключом. Использовать отдельноАсимметричное шифрование, самая большая лазейка в том, что сервер может использовать только私钥Шифрование, которое является источником опасности. использовать对称和非对称Комбинация шифрования предотвращает это, тем самым обеспечивая безопасность.

Добавить цифровой сертификат

Хотя комбинация двух методов шифрования может хорошо реализовать зашифрованную передачу, все же есть некоторые проблемы. Если хакер использует перехват DNS, заменяет целевой адрес адресом хакерского сервера, а затем создает открытый ключ и закрытый ключ, данные все равно могут быть переданы. Пользователь браузера не подозревает, что обращается к опасному серверу.

ФактическиHTTPSвыше结合对称和非对称加密На основании добавлено数字证书认证Шаг. Его цель — позволить серверу подтвердить свою личность.

процесс передачи

Чтобы получить этот сертификат, оператору сервера необходимо получить авторизацию от стороннего центра сертификации, который также называетсяCA(Certificate Authority), ЦС выдаст сертификат серверу после того, как сертификат будет переданЦифровой сертификат.

Этот цифровой сертификат служит двум целям:

  1. Сервер идентифицирует себя для браузера.
  2. Передайте открытый ключ браузеру.

Когда происходит этот процесс проверки?

Когда сервер отправляетserver_random,метод шифрования кстати принесёт数字证书(включает в себя公钥), то браузер начнет проверять цифровой сертификат после его получения. Если проверка пройдена, последующий процесс проходит как обычно, в противном случае он отказывается выполняться.

Теперь давайте разберемсяHTTPSОкончательный процесс шифрования и дешифрования:

Процесс сертификации

Как аутентифицировать сертификат после того, как браузер получит цифровой сертификат?

Сначала считывается открытый текст сертификата. Когда ЦС подписывает цифровой сертификат, он сохраняет хэш-функцию и использует эту функцию для вычисления содержимого открытого текста для получения信息A, а затем расшифровать содержимое открытого текста с помощью открытого ключа, чтобы получить信息B, две части информации сравниваются, и если они непротиворечивы, сертификация является законной.

Конечно, иногда браузер не знает, какие ЦС заслуживают доверия, поэтому он будет продолжать искать ЦС верхнего уровня и проверять легитимность ЦС верхнего уровня с помощью того же метода сравнения информации. Как правило, ЦС корневого уровня будет встроен в операционную систему.Конечно, если ЦС корневого уровня не будет найден, он будет считаться незаконным.

Суммировать

HTTPS — это не новый протокол, этоHTTPа такжеTCPСлуждный слой устанавливается в передаче对称加密а также非对称加密В сочетании с проверкой подлинности по цифровому сертификату значительно повышается безопасность процесса передачи.

Часть 10. Можно ли добиться стабилизации и регулирования событий?

дросселирование

Основная идея дросселирования: если он снова срабатывает в пределах временного диапазона таймера, игнорируйте его и ждите текущего таймера.完成, начатьследующая задача таймера. Это как автобус, он ходит каждые 10 минут, мне все равно, сколько людей ждет на остановке в течение 10 минут, как только он приедет через 10 минут, я уйду!

код показывает, как показано ниже:

function throttle(fn, interval) {
  let flag = true;
  return function(...args) {
    let context = this;
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(context, args);
      flag = true;
    }, interval);
  };
};

Написание следующим образом также выражает тот же смысл:

const throttle = function(fn, interval) {
  let last = 0;
  return function (...args) {
    let context = this;
    let now = +new Date();
    // 还没到时间
    if(now - last < interval) return;
    last = now;
    fn.apply(this, args)
  }
}

Стабилизатор

Основная идея: каждый раз, когда запускается событие, исходный таймер удаляется и устанавливается новый. а такжеКороль славыизВернуться в городФункция похожа, вы возвращаетесь в город неоднократно триггерную функцию, затем распознать только последнее время, начнут считать от последнего триггера.

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    let context = this;
    if(timer) clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

Объединение двух мечей — усиленное удушение

Теперь мы можем поставить防抖а также节流Соединить, зачем? Поскольку анти-тряска иногда срабатывает слишком часто, ответа вообще не будет.Мы надеемся, что ответ должен быть предоставлен пользователю в фиксированное время.На самом деле, многие интерфейсные библиотеки переняли эту идею.

function throttle(fn, delay) {
  let last = 0, timer = null;
  return function (...args) {
    let context = this;
    let now = new Date();
    if(now - last < delay){
      clearTimeout(timer);
      setTimeout(function() {
        last = now;
        fn.apply(context, args);
      }, delay);
    } else {
      // 这个时候表示时间到了，必须给响应
      last = now;
      fn.apply(context, args);
    }
  }
}

Часть 11: Можно ли реализовать ленивую загрузку изображений?

Вариант 1: clientHeight, scrollTop и offsetTop

Сначала дайте изображению ресурс-заполнитель:

<img src="default.jpg" data-src="http://www.xxx.com/target.jpg" />

Затем проверьте, достигло ли изображение области просмотра, прослушивая событие прокрутки:

let img = document.getElementsByTagName("img");
let num = img.length;
let count = 0;//计数器，从第一张图片开始计

lazyload();//首次加载别忘了显示图片

window.addEventListener('scroll', lazyload);

function lazyload() {
  let viewHeight = document.documentElement.clientHeight;//视口高度
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条卷去的高度
  for(let i = count; i <num; i++) {
    // 元素现在已经出现在视口中
    if(img[i].offsetTop < scrollHeight + viewHeight) {
      if(img[i].getAttribute("src") !== "default.jpg") continue;
      img[i].src = img[i].getAttribute("data-src");
      count ++;
    }
  }
}

Конечно, лучше ограничить событие прокрутки, чтобы избежать частых срабатываний:

// throttle函数我们上节已经实现
window.addEventListener('scroll', throttle(lazyload, 200));

Вариант 2: getBoundingClientRect

Теперь мы используем другой способ определить, появляется ли изображение в текущем окне просмотра, то есть DOM-элементgetBoundingClientRectAPI.

Лазиловая дорога выше этой функции в следующее:

function lazyload() {
  for(let i = count; i <num; i++) {
    // 元素现在已经出现在视口中
    if(img[i].getBoundingClientRect().top < document.documentElement.clientHeight) {
      if(img[i].getAttribute("src") !== "default.jpg") continue;
      img[i].src = img[i].getAttribute("data-src");
      count ++;
    }
  }
}

Вариант 3: IntersectionObserver

Это тот, который встроен в браузерAPI, выполнено监听window的scroll事件,判断是否在视口中так же как节流Три функции.

Давайте попробуем:

let img = document.getElementsByTagName("img");

const observer = new IntersectionObserver(changes => {
  //changes 是被观察的元素集合
  for(let i = 0, len = changes.length; i < len; i++) {
    let change = changes[i];
    // 通过这个属性判断是否在视口中
    if(change.isIntersecting) {
      const imgElement = change.target;
      imgElement.src = imgElement.getAttribute("data-src");
      observer.unobserve(imgElement);
    }
  }
})
Array.from(img).forEach(item => observer.observe(item));

Таким способом очень удобно реализовать ленивую загрузку картинок.IntersectionObserverЕго также можно использовать в качестве предварительной загрузки для других ресурсов, что очень эффективно.

Фрагменты в конце статьи

Все вышеуказанные статьи находятся в проекте с открытым исходным кодом.Блог Божественной ТроицыПервый запуск направлен на создание полной системы знаний переднего плана.Если это вам немного поможет, пожалуйста, поставьте звезду проекту, большое спасибо!

Кроме того, мой собственныйБрошюра о наггетсахНедавно был запущен «React Hooks and Immutable Data Streams». Хотя это практическое руководство по React, оно также включает в себя множество практических методов, связанных с браузерами и оптимизацией производительности.36В этом разделе я планирую поместить серию статей об анализе исходного кода хуков непосредственно в буклет и продолжать добавлять ценность буклету Я считаю, что он может быть полезен всем, кто продвигается вперед, и я надеюсь на дополнительную поддержку!Ссылка на брошюру

использованная литература:

Колонка Geek Time Browser

Составление слоев браузера и оптимизация рендеринга страниц

Как работают браузеры

Shanyue — сравнение нескольких схем ленивой загрузки картинок

Буклет Nuggets — Принципы и методы оптимизации производительности внешнего интерфейса

Категории