Резюме интервью после прохождения одного раунда крупных заводов (включая шесть направлений) - Браузер

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

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

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

Я разобью его на несколько статей в зависимости от типа:

Резюме интервью: Резюме пунктов интервью JavaScript (длинный текст из 10 000 слов)(Завершено) [Внимательно прочитайте эту статью, js — это большая голова в интервью]

Резюме интервью: резюме интервью NodeJS(завершенный)

Резюме интервью: сводка точек интервью, связанных с браузером(завершенный)

Резюме интервью: Резюме пунктов интервью CSS(завершенный)

Резюме интервью: краткое изложение моментов интервью, связанных с framework vue и проектированием.(завершенный)

Резюме интервью: Резюме нетехнических вопросов(завершенный)

Поспешу закончить незаконченное резюме~

эта статья правильная浏览器Связанные темы обобщаются, и друзья могут сначала собрать их.

первый взгляд на каталог

Ввести кеш

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

Кэш делится на сильный кеш и кеш согласования, см. блок-схему ниже.

Поля, относящиеся к механизму кэширования, находятся в заголовках запроса и ответа.

Сильный кеш

Сильный кеш, в течение срока действия кеша клиент напрямую читает локальные ресурсы.

Возвращается надежный код состояния кэша 200.

Expires

существуетhttp1.0Он используется в , указывая конкретный момент времени отказа ресурса.Expires:Sat, 09 Jun 2018 08:13:56 GMT, если аксессор не соответствует местному времени, могут быть проблемы.В текущем http1.1 он заменен наmax-age, также можно добавить для совместимости.

Cache-control

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

max-age: действительное время надежного кеша в секундахmax-age=30672000

no-cache: Используйте согласование кеша, чтобы сначала подтвердить с сервером, был ли изменен возвращаемый ответ.

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

public: Указывает, что ответ может кэшироваться любым объектом (в том числе: клиентом, отправляющим запрос, прокси-серверами и т. д.), даже контентом, который обычно не кэшируется (например, ответ не имеет директивы max-age или заголовка Expires).

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

Сильный кеш

Сильный кеш, в течение срока действия кеша клиент напрямую читает локальные ресурсы.

Код состояния, возвращаемый сильным кешем, равен 200.

Expires

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

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

код состояния:

Если локальный ресурс актуален, то вернуть 304 (тестовый сайт!)
Если сравнить, вам нужно получить последние ресурсы с сервера, то есть нормальные 200

Last-modified If-Modified-Since

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

Last-Modified: время последнего обновления ресурса сервера.Tue, 14 Jan 2020 09:18:29 GMT

If-Modified-Since: клиент инициирует согласование и передает локально записанное время обновления файла на сервер, а сервер делает оценку и сравнение

Этот метод оценки является продуктом http1.0, поскольку точность времени составляет секунды.Если частота обновления файла находится в пределах секунд, будет несогласованность файла.

ETag If-None-Match

Чтобы решить вышеуказанную проблему, http1.1 добавил этот набор тегов

ETag: сервер генерирует уникальный строковый идентификатор на основе содержимого

If-None-Match: клиент инициирует согласование и передает хэш-идентификатор локальной записи на сервер, а сервер делает оценку и сравнение.

Если оба существуютLast-Modifiedа такжеETag , ETagболее высокий приоритет.

Место хранения кеша браузера

Видно, что есть два источника:

memory cache: читать по памяти

disk cache: чтение с жесткого диска

Конечно, память быстрее жесткого диска, зачем там жесткий диск для хранения?

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

Справочная документация

developer.Mozilla.org/this-cn/docs/…

Вы знаете о PWA?

PWA (прогрессивные веб-приложения) используют современные веб-API наряду с традиционными стратегиями прогрессивного улучшения для создания кроссплатформенных веб-приложений. (из МДН)

Посмотрите, что такое основная технология PWA там, вы знаете, какое преимущество

App Shell

Архитектура App Shell — это способ создания прогрессивных веб-приложений, которые надежно и мгновенно загружаются на ваши пользовательские экраны, подобно нативным приложениям.

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

Или, если понимать так, App Shell похожа на нативное приложение, которое можно запускать локально без сети.

ServiceWork

Ядро PWA, как уже упоминалось выше, кэш может заставить страницу загружаться как можно быстрее, но это необходимо делать при наличии сети.Что делать, если я хочу загрузить веб-страницу без сети?

Способность ServiceWork сохранять автономное кэширование может быть достигнута.

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

Независимый рабочий поток, независимый от текущего процесса веб-страницы, имеет свой собственный независимый рабочий контекст.
После установки он существует вечно, если его не зарегистрировать вручную.
Вы можете просыпаться сразу, когда используете его, и автоматически спать, когда вы его не используете.
Программируемый перехват прокси-запросов и возвратов, кэшированные файлы и кэшированные файлы могут быть получены веб-процессами (включая статус сети в автономном режиме).
Контролируемый разработчиком офлайн-контента
Может отправлять сообщения клиентам
Невозможно напрямую манипулировать DOM
Должен быть в среде HTTPS для работы
Асинхронная реализация, большая часть которой реализована внутри через Promise.

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

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

Следующее ядро — как разработать стратегию кэширования,

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

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

Код не сложный, в основном цикл деклараций, общение с js тредами и вызовы API, так что не буду выкладывать сюда.

Справочная документация:

lavas.Baidu.com/Fatwa/offline…

developer.Mozilla.org/this-cn/docs/…

Ввод URL в процесс рендеринга

Разрешение доменного имени, найти адрес службы
Построить TCP-соединение, если есть https, то добавить слой рукопожатия TLS,
Обработка специального кода ответа 301 302
Разобрать документ
Построить дерево домов и csscom
Создайте дерево рендеринга: пройдите каждый видимый узел из корневого узла дерева DOM, для каждого видимого узла найдите соответствующие правила в дереве CSSOM и примените их в соответствии с каждым видимым узлом и его соответствующим стилем, объедините для создания рендеринга Дерево
Макет (перекомпоновка): в соответствии с сгенерированным деревом рендеринга выполните перекомпоновку (макет), чтобы получить информацию о наборе узлов.
Покраска: в зависимости от коллекции дерева коллекций и ее перекомпоновки получите абсолютный пиксель узла.
Рисование, отображение на странице, этот шаг также включает в себя уровень рисования, точки знаний, связанные с графическим процессором.
Загрузите скрипт js, загрузите и проанализируйте скрипт js

Это грубый процесс, и интервьюер выберет другие моменты, из которых можно задать вопросы.

Перерисовка и перекомпоновка (Reflow)

Сначала посмотрите на это изображение, изображение html-документа и процесса рендеринга css.

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

Перекрашивание относится к манипулированию внешним видом элемента, таким как цвет, фон, тень и т. д.

Таким образом, reflow должен вызывать перерисовку.

Сценарии, запускающие перекомпоновку

Получите информацию о местоположении или измените геометрические свойства следующим образом:

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

// 获取位置信息相关属性
- offsetTop offsetLeft offsetWidth offsetHeight 相对于父级容器的偏移量
- scrollTop scrollLeft scrollWidth scrollHeight 相对于父级容器滚动上去的距离
- clientTop clientLeft clientWidth clientHeight 元素边框的厚度
- getComputedStyle()
- getBoundingClientRect

Оптимизация оплавления

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

Современные браузеры сделали за нас оптимизацию, используя очереди для хранения нескольких операций перекомпоновки, а затем выполняя их пакетно, за исключением получения информации о макете, потому что для получения значений в реальном времени браузер должен очищать очередь и выполнять перекомпоновку немедленно.
Что касается кодирования, избегайте нескольких последовательных модификаций, которые можно изменить, объединив и запустив один раз.
Dom для ряда различных модификаций, может ли он сначала из потока документов, например, использовать абсолютное позиционирование, или display: none, изменить, а затем вернуться, чтобы завершить документацию в документе вне потока
Управляйте частотой запуска с дросселированием и защитой от дрожания
css3 аппаратное ускорение, преобразование, непрозрачность, фильтры, при включении будет создан новый слой рендеринга

Как включить ускорение графического процессора

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

transform: translateZ(0)
opacity
filters
Will-change

Расскажите о своем понимании протокола http

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

Односторонние ссылки короткие, естьhttp1.0 http 1.1 http2.0

http1.0: каждый запрос клиента требует установления отдельного соединения, и соединение автоматически разрывается после обработки запроса. http1.1: несколько запросов могут быть обработаны в одном соединении, и несколько запросов могут перекрываться, не дожидаясь окончания одного запроса перед отправкой следующего запроса. http2.0: может поддерживать мультиплексирование, один tcp может передавать несколько http-запросов одновременно, а данные заголовка также сжимаются

Интервьюер попросил это вообще, чтобы больше внимания уделить пониманию tcp

tcp

tcp — это протокол транспортного уровня, и его характеристики: трехстороннее рукопожатие и четырехсторонняя волна.

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

Трехстороннее рукопожатие устанавливает процесс соединения:

Клиент отправляет битовый код как syn=1, случайным образом генерирует пакеты данных на сервер, и сервер знает из SYN=1, что клиент запрашивает установку соединения (клиент: я хочу соединить вас)
После того, как сервер получит запрос, он должен подтвердить онлайн-информацию и отправить номер подтверждения = (последовательность клиента + 1), syn = 1, подтверждение = 1 на A и случайным образом сгенерировать пакеты данных (сервер: ОК, давайте подключимся)
После того, как клиент его получит, проверьте правильность номера подтверждения, то есть номер последовательности +1, отправленный в первый раз, и равен ли битовый код подтверждения 1. Если он правильный, клиент отправит номер подтверждения =( seq+1 сервера), ack снова =1, после того как сервер получит его и подтвердит значение seq и ack=1, соединение будет успешно установлено. (Клиент: Хорошо, я пришел)

Процесс махания четыре раза для отключения:

Клиент отправляет запрос на сервер, подает заявку на активное отключение, переходит в состояние ожидания, не отправляет данные на сервер, а получает данные (клиент: хочу отключиться)
После того, как сервер его получает, он сообщает клиенту, что он знает, сервер находится в состоянии ожидания, он не получает данные, но может продолжать отправлять данные (сервер: ОК, я понимаю, но я должен немного подождать )
После того, как клиент получает уведомление от сервера, он переходит к следующему этапу ожидания. (Клиент: Хорошо, я подожду)
После того, как сервер завершает отправку оставшихся данных, он сообщает клиенту, что его можно отключить, а сервер не принимает и не читает данные (сервер: можно отключить)
После того, как клиент его получает, он сообщает серверу, что он был получен, а затем отпускает ссылку (клиент: ОК, я отключил ссылку)
После того, как сервер его получает, он также выпускает ссылку

UDP

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

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

Введите https

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

Для решения этой проблемы существует TLS.https = http + TLS

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

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

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

TLS-рукопожатие

Действуйте следующим образом:

Клиент запрашивает сервер установить сертификат (Примечание: CA, связанный подробно ниже) RandomC, выданный агентством и ссылкой CA SSL, сервер и клиент отправляет случайное число
Клиент проверяет сертификат, после прохождения проверки генерирует случайное число randomS, шифрует randomS открытым ключом, генерирует подпись randomS и отправляет на сервер
После того, как сервер его получает, он расшифровывает секретный текст с помощью закрытого ключа, генерирует подпись с расшифрованным ключом и сравнивает ее с подписью, отправленной от клиента.Хеш-значение, сгенерированное случайным числом, отправляется клиенту вместе.
Клиент расшифровывает с помощью открытого ключа, и после проверки того, что хеш-значение передано, обе стороны используют randomC randomS randomP для генерации сеансового ключа по определенному алгоритму, а последующие пакеты будут передаваться посредством симметричного шифрования сеансового ключа.

Для фронтенда все-таки уклон в сторону теории, поэтому рекомендуется рисовать блок-схему по шагам, что более способствует пониманию и запоминанию.

сертификат ЦС

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

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

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

Таким образом, проверяя, является ли сертификат законным, мы знаем, был ли открытый ключ подделан, так как же проверить законность?

Естественно через отпечаток сертификата.

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

Так можно ли полностью избежать атак «человек посередине»?

Ведь сертификат CA верхнего уровня встроен, или есть способ, вы еще помните, что мы его используем, мы можем использовать Fiddle для захвата https-пакетов, значит, Fiddle — посредник?

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

Таким образом, до тех пор, пока стороннему сертификату не доверяют произвольно, атака «злоумышленник посередине» практически отсутствует.

что вызывает запрос опций

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

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

Используемый HTTP-методGET POST HEAD
тип содержимогоtext/plain mutipart/form-data application/x-www-form-urlencodeодин из трех
Заголовки запросов могут содержать только эти

- Accept
- Accept-Language
- Content-Language
- Content-Type （需要注意额外的限制）
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width

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

общие, такие как использование

Запросы POST с типом содержимого application/xml или text/xml
Установите пользовательские заголовки, такие как X-JSON, X-MEGXIANHUI и т. д.

Пакет заголовка, возвращаемый предварительным запросом, содержит

Access-Control-Allow-Origin: Приемлемый исходный сервер запроса

Access-Control-Request-Method: Метод HTTP, используемый сервером для фактического запроса.

Access-Control-Request-Headers: Пользовательское поле заголовка, которое содержит фактический запрос сервера.

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

Примечание. Если вы хотите отправлять информацию о файлах cookie для междоменных запросов, вам необходимо установить resp.setHeader("Access-Control-Allow-Credentials","true") на стороне сервера; withCredentials: true на стороне клиента.

Использованная литература:cloud.Tencent.com/developer/you…

Каковы общие заголовки запросов http

Смотрите прямо на картинку

Несколько различий в Content-Type отправки сообщения

Поле Content-Type, чтобы узнать, как закодировано тело сообщения в запросе.

Content-Type: application/json : строка json Content-Type: application/x-www-form-urlencoded : & willkey=valueДля сплайсинга jquery использует это по умолчанию Content-Type: multipart/form-data : обычно используется для загрузки файлов

О внешней безопасности

В основном есть два типаXSS CSRF

XSS

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

Способ предотвратить это — избежать содержимого, полученного с веб-страницы.

CSRF

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

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

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

Метод профилактики:

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

В Интернете есть очень подробное введение в xss csrf, но основной принцип относительно прост.

Узнать о КОРБ

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

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

Когда данные возвращаются из междоменного запросаMIME typeТо же, что и междоменная меткаMIMEКогда тип не совпадает, браузер запуститсяCORBЧтобы защитить данные от утечки, защищенные типы данныхhtml xml json.

MIME type

MIME — это стандарт Интернета, расширяющий стандарт электронной почты для поддержки большего количества типов сообщений. Общие типы MIME, такие как: text/html text/plain image/png application/javascript используются для определения того, к какому типу документа относится возвращаемое сообщение. Записывается как тип/подтип. В заголовке ответа HTTP-запроса в форме Content-Type: application/javascript; charset=UTF-8 тип MIME является частью значения Content-Type.

Эта статья очень подробная, я предлагаю вам проверить ее непосредственноCross-Origin Read Blocking (CORB)

междоменное решение

Есть несколько основных

Воспользуйтесь преимуществами междоменных тегов`image script`Инициировать междоменный запрос для метода get

реализация тега изображения

var img = new Image;
img.onload = function() {
},
img.onerror = function() {
},
img.src = options.url;

реализация тега script Это часто называют JSONP. Скрипт выполнит возвращенную строку, затем вы можете согласовать параметр, внешний параметр указывает глобальный метод, после того, как сервер получит глобальный метод, создаст строку, которая выполняет функцию, и поместит сообщение в параметр функции. . После того, как браузер получитapplication/javascriptСпособ анализа, вы можете вызвать предустановленную функцию обратного вызова.

/* html */
let scr = document.createElement('script');
scr.src = `http://127.0.0.1:3500/xx?callback=cb`
document.getElementsByTagName('head')[0].appendChild(scr)
function cb(res){
    console.log('into');
    console.log(res);
}

/* server */ 
let data = { name: 'xiaoli' }
var str = ctx.query.callback + '(' + JSON.stringify(data) + ')';
// ctx.query = {callback:'cb'}
// str = 'cb({"name":"xiaoli"})'
ctx.body = str;

обратный прокси

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

CORS

Это вся работа сервера, основные три параметра

Access-Control-Allow-Origin: Источники запросов, приемлемые для сервера

Access-Control-Request-Method: Метод HTTP, используемый сервером для фактического запроса.

Access-Control-Request-Headers: Пользовательское поле заголовка, которое содержит фактический запрос сервера.

Промежуточный слой BFF для преобразования

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

В чем разница между настройкой кеша в html мета и настройкой кеша в заголовке http-запроса?

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

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

маршрутизация истории и маршрутизация хэшей

хэш-маршрутизация

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

window.addEventListener('hashchange', function(){ 
    // 监听hash变化，点击浏览器的前进后退会触发
})

исторический маршрут

Маршрут истории — это спецификация html5, которая обеспечивает операции с содержимым в стеке истории.

window.history.pushState(state, title, url) 
// let currentState = history.state; 获取当前state
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录

window.addEventListener("popstate", function() {
    // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发              
});

Несколько методов привязки js-событий

привязать непосредственно к элементу dom,<div class="an" onclick="aa()">aaaa</div>
Привязка в jsdocument.getElementById("demo").οnclick=function(){}
Добавить событие прослушивателяdocument.addEventListener('name',()=>{})

Что такое делегирование события

В браузере есть три этапа срабатывания события:

Наибольшее распространение от внешнего слоя к внутреннему, то есть этап захвата событий
Событие достигло целевого узла, целевого этапа
Возврат с целевой стадии на внешний слой, то есть на стадию пузырьков.

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

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

Преимущества брокеров событий:

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

Понимание захвата событий и всплытия событий:

Захват событий: события распространяются снаружи внутрь. Для последнего параметра addEventListener установлено значение true для захвата событий. По умолчанию установлено значение false для отслеживания всплывающих событий. Захват — это логика, по которой компьютер обрабатывает ввод

Бульканье событий: событие распространяется изнутри, а бульканье — это мышление человеческого понимания.

Разница между целевой и CentreTarget

target: относится к целевому этапу потока событий, который получает выбранный элемент.

currentTarget: на этапах захвата и всплытия потока событий он указывает на текущий объект действия события, и только на целевом этапе они будут равны.

Проблема с загрузкой CSS

По процессу рендеринга страницы мы можем знать:

загрузка css не блокирует парсинг дерева DOM;
Загрузка CSS заблокирует рендеринг дерева DOM;
Загрузка CSS блокирует выполнение следующего оператора JS

Ввести предварительную загрузку ресурсов prefetch/preload async/defer

prefetch preload

Оба говорят браузеру загружать файлы (изображения, видео, js, css и т. д.) заранее, но есть различия в исполнении.

prefetch: использует время простоя браузера для загрузки или предварительной выборки документов, к которым пользователь может получить доступ в ближайшем будущем.<link href="/js/xx.js" rel="prefetch">

preload: он может указать, какие ресурсы необходимы сразу после загрузки страницы, и браузер предварительно загружает их до того, как вмешается основной механизм рендеринга. Этот механизм позволяет загружать ресурсы и делать их доступными раньше и с меньшей вероятностью блокирует первоначальный рендеринг страницы. тем самым повышая производительность.<link href="/js/xxx.js" rel="preload" as="script">Тип ресурса должен быть указан как.В настоящее время доступны следующие типы атрибутов:

audio: 音频文件。
document: 一个将要被嵌入到<frame>或<iframe>内部的HTML文档。
embed: 一个将要被嵌入到<embed>元素内部的资源。
fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
font: 字体文件。
image: 图片文件。
object: 一个将会被嵌入到<embed>元素内的文件。
script: JavaScript文件。
style: 样式表。
track: WebVTT文件。
worker: 一个JavaScript的web worker或shared worker。
video: 视频文件。

Разница между js async и отсюда

для предварительной загрузки js-скрипта

async: загружать скрипт и параллельно визуализировать последующие элементы документа.После загрузки скрипта приостановить синтаксический анализ html и сразу же выполнить синтаксический анализ js-скрипта.

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

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

developer.Mozilla.org/this-cn/docs/…

Ввести Viewport.

<meta name="viewport" content="width=500, initial-scale=1">

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

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

Причина задержки 300мс на мобильном терминале, как с этим бороться?

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

решение:

css touch-action touch-action по умолчанию имеет значение auto, установите для него значение none, чтобы удалить 300-миллисекундную задержку целевого элемента Недостатки: новые свойства, могут быть проблемы с совместимостью браузера
Используйте touchstart и touchend для имитации событий щелчка, недостатком является проникновение щелчка.
Принцип FastClick: когда обнаружено событие TACKEND, событие Click будет немедленно смоделировано через пользовательское событие DOM, а событие Real Click в браузере будет заблокировано после 300 мс.
Во всех версиях браузера Android Chrome, если для метаданных области просмотра установлено значение user-scalable=no, браузер также немедленно инициирует событие щелчка.

Web Worker

(будет добавлено позже)

Мониторинг производительности браузера

использоватьperformance.timingЭтот API может получить большую часть данных, связанных с производительностью.

navigationStart: В том же контексте браузера отметка времени выгрузки предыдущей веб-страницы (не обязательно того же домена, что и текущая страница), если предыдущей выгрузки веб-страницы нет, она равна значению fetchStart.
unloadEventStart: Предыдущая веб-страница (с текущей страницей) Отметка времени выгрузки, если выгружается 0 страниц или предыдущая веб-страница с текущей страницей, значение равно 0
redirectStart: Время, когда происходит первое перенаправление HTTP. Там перенаправлено, чтобы прыгать и рассматриваться в том же доменном имени, в противном случае значение 0
redirectEnd: время, когда было выполнено последнее перенаправление HTTP. Только если есть редирект и это редирект внутри того же доменного имени, иначе значение равно 0

Начать загрузку текущей страницы

fetchStart: время, когда браузер готов получить документ с помощью HTTP-запроса, это происходит до проверки локального кеша

Фаза сетевого транспорта DNS TCP

domainLookupStart: время начала запроса имени домена DNS.Если используется локальный кеш (т. е. без запроса DNS) или постоянное соединение, оно равно значению fetchStart.
domainLookupEnd: время завершения запроса доменного имени DNS, если используется локальный кэш (т. е. без запроса DNS) или постоянное соединение, оно равно значению fetchStart.
connectStart: время, когда HTTP (TCP) начинает устанавливать соединение. Если это постоянное соединение, оно равно значению fetchStart. Если на транспортном уровне возникает ошибка и соединение восстанавливается, время, когда здесь отображается новое установленное соединение.
secureConnectionStart: время начала HTTPS-соединения или 0, если это небезопасное соединение.
connectEnd:HTTP (TCP) Время установления соединения (завершения рукопожатия), если это постоянное соединение, равно значению fetchStart, если на транспортном уровне возникает ошибка и соединение восстанавливается , это время, когда вновь установленное соединение завершено.

этап чтения документа

requestStart: Время начала чтения HTTP-запросом реального документа (завершение установления соединения), в том числе чтение кеша из локального, при переподключении ошибка соединения, здесь же отображается время вновь установленного соединения.
responseStart: время, когда HTTP начал получать ответ (выбран первый байт), включая чтение из локального кеша.
responseEnd: время получения всех HTTP-ответов (до последнего байта), включая чтение из локального кеша.

Этап разбора документа

domLoading: время начала синтаксического анализа и рендеринга дерева DOM. В это время начинается загрузка Document.readyState, и будут генерироваться события, связанные с readystatechange.
domInteractive: время завершения синтаксического анализа дерева DOM, Document.readyState становится интерактивным и вызывает события, связанные с readystatechange.
domContentLoadedEventStart: после завершения синтаксического анализа DOM время, когда ресурс на веб-странице начинает загружаться, представляет узел времени, активированный событием DOMContentLoaded.
domContentLoadedEventEnd: после завершения парсинга DOM время загрузки ресурсов веб-страницы (например, когда загружается и выполняется JS-скрипт), время окончания события DOMContentLoaded документа, то есть время domready в jQuery;
domComplete: Когда синтаксический анализ дерева DOM завершен и ресурс готов, Document.readyState становится завершенным, и будут генерироваться события, связанные с readystatechange.
loadEventStartВ документ отправляется событие :load, то есть время начала выполнения callback-функции load.Если событие load не привязано, значение равно 0
loadEventEnd: Событие загрузки функции обратного вызова завершено вовремя, если событие не привязано к загрузке, значение 0

Запрос периода времени на каждом этапе

Время запроса DNS = domainLookupEnd - domainLookupStart

Время соединения TCP = connectEnd - connectStart

время запроса запроса = responseEnd - responseStart

Требуется много времени для разбора дерева dom = domComplete - domInteractive

время белого экрана = domloadng - fetchStart

время domready = domContentLoadedEventEnd - fetchStart

время загрузки = loadEventEnd - fetchStart

Дайте несколько новых возможностей h5

Этот вопрос немного скучен, но все же встречается

Добавьте семантические теги
Добавить API, локальное хранилище
css границы, фоны, анимация

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

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

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

Compositionend: событие запускается, когда компоновка текстового абзаца завершена или отменена (запускается специальными символами, требует последовательности клавиш и других входных данных, таких как распознавание речи или подсказки слов в движении).

Ввести кеш

Сильный кеш

Expires

Cache-control

Сильный кеш

Expires

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

Last-modified If-Modified-Since

ETag If-None-Match

Место хранения кеша браузера

Справочная документация

Вы знаете о PWA?

App Shell

ServiceWork

Ввод URL в процесс рендеринга

Перерисовка и перекомпоновка (Reflow)

Сценарии, запускающие перекомпоновку

Оптимизация оплавления

Как включить ускорение графического процессора

Расскажите о своем понимании протокола http

tcp

UDP

Введите https

TLS-рукопожатие

сертификат ЦС

что вызывает запрос опций

Каковы общие заголовки запросов http

Несколько различий в Content-Type отправки сообщения

О внешней безопасности

XSS

CSRF

Узнать о КОРБ

MIME type

междоменное решение

Воспользуйтесь преимуществами междоменных теговimage scriptИнициировать междоменный запрос для метода get

обратный прокси

CORS

Промежуточный слой BFF для преобразования

В чем разница между настройкой кеша в html мета и настройкой кеша в заголовке http-запроса?

маршрутизация истории и маршрутизация хэшей

хэш-маршрутизация

исторический маршрут

Несколько методов привязки js-событий

Что такое делегирование события

Разница между целевой и CentreTarget

Проблема с загрузкой CSS

Ввести предварительную загрузку ресурсов prefetch/preload async/defer

prefetch preload

Разница между js async и отсюда

Ввести Viewport.

Причина задержки 300мс на мобильном терминале, как с этим бороться?

Web Worker

Мониторинг производительности браузера

Начать загрузку текущей страницы

Фаза сетевого транспорта DNS TCP

этап чтения документа

Этап разбора документа

Запрос периода времени на каждом этапе

Дайте несколько новых возможностей h5

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

Воспользуйтесь преимуществами междоменных тегов`image script`Инициировать междоменный запрос для метода get