Фиктивное интервью во внешнем интерфейсе содержит более 234,77 миллиона слов.

Учетная запись команды Nuggets онлайн, чтобы помочь вам получить предложение!Нажми для деталей

Источник на гитхабе:| Просите звездочки ✨ | Ставьте ❤️ подписку, ❤️ лайк, ❤️ поощряйте автора

Интервью с фронтенд-разработчиком

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

Сяо Хуан: Расскажите мне о своем понимании http и https

Сяота: Ну хорошо.

HTTP – это протокол передачи гипертекста, который является наиболее широко используемым сетевым протоколом в Интернете. Это стандарт запросов и ответов на стороне клиента и сервера. Он используется для передачи гипертекста с WWW-сервера в локальный браузер. браузер более эффективен и снижает сетевой трафик.Для https это безопасный http-канал, который является безопасной версией http, добавляющим уровень ssl к http, а основой безопасности https является ssl.

Соединение по http очень простое и без сохранения состояния.Данные, передаваемые по http, не зашифрованы, то есть представляют собой открытый текст.Netscape настроила протокол ssl для шифрования данных, передаваемых по протоколу http.Таким образом, протокол https — это сетевой протокол, созданный протоколами http и ssl, который может выполнять зашифрованную передачу и аутентификацию и является более безопасным, чем протокол http.

Для протокола https требуется сертификат, а стоимость высока.http — это протокол передачи гипертекста, и информация передается в открытом виде.Вообще говоря, порт протокола http — 80, а порт https — 443.

Использование протокола https может аутентифицировать пользователей и серверы, чтобы гарантировать, что данные отправляются на правильный клиент и сервер. Для принципа работы протокола https, когда клиент взаимодействует с веб-сервером методом https, сначала клиент использует URL-адрес https для доступа к серверу, а веб-сервер должен установить ссылку ssl. клиент, а затем клиент и веб-сервер начинают согласовывать уровень безопасности ssl-ссылки, то есть уровень шифрования, устанавливают сеансовый ключ через уровень безопасности, согласованный обеими сторонами, а затем шифруют сеанс через общедоступный ключ ключа веб-сайта и передается на веб-сайт.(Веб-сервер расшифровывает ключ сеанса с помощью собственного закрытого ключа и шифрует связь с клиентом с помощью ключа сеанса.)

Рекомендуется использовать https, по сравнению с тем же http-сайтом сайт, зашифрованный https, будет иметь более высокий рейтинг в результатах поиска!

Этап рукопожатия протокола https занимает много времени, что увеличивает время загрузки страницы на 50 % и увеличивает энергопотребление на 10–20 %. Накладные расходы.Сертификат ssl тоже требует денег💴,чем мощнее сертификат.Чем выше стоимость,сертификат ssl должен быть привязан к ip,а несколько доменных имен не могут быть привязаны к одному и тому же ip.

Сяо Хуан: Ну, хорошо, вы только что упомянули фазу рукопожатия, затем вы говорите о трехэтапном рукопожатии tcp.

Сяода: Ну, хорошо

Как звонок, привет, ты слышал? О слышал! Ты меня слышал? Я слышал, теперь мы можем поболтать~

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

Сяо Хуан: Ну-ну, если говорить о TCP, то вы говорите о разнице между TCP и UDP.

Сяода: Ну, хорошо

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

А поскольку tcp надежен, ориентирован на соединение и не теряет данные, он подходит для обмена большими объемами данных;TCP ориентирован на потоки байтов. Фактически TCP рассматривает данные как ряд неструктурированных потоков байтов. UDP ориентирован на пакеты и не имеет контроля перегрузки., Следовательно, перегрузка сети не снизит скорость отправки исходного хоста, поэтому будут потери пакетов, что очень полезно для приложений реального времени, таких как IP-телефония и видеоконференции и т. д.

Каждое соединение TCP может быть только 1 к 1. UDP поддерживает интерактивную связь 1 к 1, 1 ко многим, многие к 1 и многие ко многим; заголовок TCP составляет 20 байтов, в то время как UDP составляет всего 8 байтов. ; TCP ориентирован на соединение для надежной транспортировки, в то время как UDP ненадежен.

Сяо Хуан: Ну да, тогда когда дело доходит до общения, давайте поговорим о реализации и применении WebSocket.

Сяода: Ну, хорошо

WebSocket — это протокол в HTML5, который поддерживает постоянные соединения.Протокол http не поддерживает постоянные соединения.Ни http1.0, ни http1.1 не поддерживают постоянные соединения.Keep-alive в http1.1 объединяет несколько http-запросов в один, то есть нет необходимости повторно устанавливать tcp-соединение.

WebSocket основан на протоколе http или заимствует протокол http для завершения части рукопожатия, что то же самое на этапе рукопожатия. Жизненный цикл http определяется запросом, то есть Request a Response, то в протоколе http1.0 этот http запрос означает конец.

В http1.1 были внесены улучшения, есть поле connection:keep-alive, то есть в http-соединении можно отправлять несколько запросов и получать несколько ответов.

Но в http запросу может соответствовать только один ответ, и этот ответ является пассивным, а не активно инициируемым.

Основываясь на реализации протокола рукопожатия веб-сокета, в основном есть два атрибута: Обновление и Соединение, В базовом запросе есть еще два атрибута, которые сообщают протоколу веб-сокета, инициированному сервером:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: fsdgfdsfew34rfdfdfds==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

Как и протокол Http, websocket основан на tcp и относится к протоколу прикладного уровня.Когда websocket устанавливает рукопожатие, данные передаются по протоколу http, но после установления соединения реальная фаза передачи данных не начинается. для участия требуется протокол http.

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

Сяо Хуан: Ну да, когда дело доходит до http-запросов, давайте поговорим о методе http-запросов и методе головы.

Сяода: Ну ладно,Методы http-запроса:

• получить, запросить указанную информацию о странице и вернуть тело объекта
• сообщение, запрашивает сервер принять указанный документ в качестве нового подчиненного объекта для идентифицированного URI
• head, аналогичен запросу get, за исключением того, что в возвращаемом ответе нет конкретного содержимого, и пользователь получает заголовок
• параметры, позволяет клиенту просматривать производительность сервера, например методы запросов, поддерживаемые сервером, и т. д.
• PUT, передать файл
• УДАЛИТЬ, удалить файл
• ВАРИАНТЫ, спросите о поддерживаемых методах
• TRACE, проследить путь
• CONNECT, для подключения к прокси-серверу требуется протокол туннелирования.

Метод HEAD аналогичен GET, за исключением того, что сервер НЕ ДОЛЖЕН возвращать тело сообщения в ответе. Метаинформация, включенная в заголовок HTTP в ответ на запрос HEAD, ДОЛЖНА быть той же информацией, которая отправляется в ответ на запрос GET. Этот метод можно использовать для получения метаинформации об объекте, подразумеваемом запросом, без передачи самого тела объекта.

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

Ответы на запросы HEAD можно кэшировать, поскольку информация, содержащаяся в ответе, может использоваться для обновления ранее кэшированных объектов из этого ресурса. Если новое значение поля указывает, что кэшированный объект отличается от текущего объекта (на что указывает изменение Content-Length, Content-MD5, ETag или Last-Modified), кэш ДОЛЖЕН рассматривать запись кэша как просроченную.

Сяо Хуан: Ну, тогда вы говорите о нескольких методах объекта атрибутов спецификации.

Маленький вверх: ах, да.

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

объект местоположения

location.href возвращает или задает URL-адрес текущего документа, location.search возвращает часть строки запроса URL-адреса.

location.hash, вернуть содержимое после URL#, если # нет, вернуть пустым. location.host возвращает часть URL-адреса с доменным именем, location.hostname возвращает часть URL-адреса с основным доменным именем.

location.pathname, возвращает часть URL-адреса после имени домена, location.port, возвращает портовую часть URL-адреса, location.protocol, возвращает протокольную часть URL-адреса, location.assign, устанавливает URL-адрес текущего документа .

• Location.replace (), установите URL текущего документа и удалите это URL-адрес. Replace (URL) в списке адресов объекта истории;
• location.reload() -- перезагрузить текущую страницу

history.go()

• Перейти вперед или назад на указанное количество страниц history.go(num);
• history.back() -- вернуться на одну страницу назад
• history.forward() -- перейти на одну страницу вперед

Объект навигатора

• navigator.userAgent -- возвращает строковое представление заголовка пользовательского агента (то есть строку, включающую информацию о версии браузера и т. д.)
• navigator.cookieEnabled -- возвращает, поддерживает ли браузер (включает) файлы cookie

Сяо Хуан: Ну, вы знаете http2.0? Вы можете сказать что-то?

Сяода: Ну ладно,По сравнению с http, https — это протокол http, основанный на шифровании ssl.

http2.0 — первое обновление после http1.0, выпущенного в 1999 году. Улучшите скорость доступа, требуйте меньше времени для запроса ресурсов, более высокую скорость доступа и разрешите мультиплексирование по сравнению с http1.0.

Мультиплексирование позволяет одновременно отправлять несколько сообщений запрос-ответ через одно соединение HTTP/2.В http1.1 клиент браузера имеет определенный предел (количество соединений) для запросов под одним и тем же доменным именем в одно время.Лимит будет заблокирован.

HTTP2.0 разделит всю передаваемую информацию на более мелкие данные или кадры (бинарное кадрирование) и выполнит для них двоичное кодирование.

Xiao Huang, эмм, а давайте поговорим об общих кодах состояния в ваших проектах, кроме 200?

Сяода: Ну ладно, типаКоды состояния 400, 401, 403.

Код состояния 400 указывает на то, что запрос недействителен. Причина в том, что имя поля и тип поля данных, отправленных внешним интерфейсом, не соответствуют сущностям во внутреннем интерфейсе. на серверную часть должен иметь строковый тип json, но внешний интерфейс не преобразовал объект JSON.stringify в строку.

Обходной путьСравните имя поля для обеспечения согласованности Сериализация объекта obj через JSON.stringify

• Код состояния 401: Текущий запрос требует аутентификации пользователя.
• Код состояния 403: Сервер получил запрос, но отказывается его выполнять

Сяо Хуан: Что касается кодов статуса, сколько вы можете назвать?

Сяода, эм, вроде:

100 Продолжайте продолжать.

Клиент должен продолжить свой запрос

101 Протоколы переключения Протоколы переключения.

Сервер переключает протоколы по запросу клиента. Переключитесь только на протокол более высокого уровня, например, на более новую версию HTTP.

200 OK Запрос выполнен успешно.

Обычно используется для запросов GET и POST.

201 Создано Создано.

Успешно запрошен и создан новый ресурс

202 Принято Принято.

Заявка принята, но не выполнена

203 Неавторитетная информация Неавторитетная информация.

Запрос выполнен успешно. Но возвращенная метаинформация находится не на исходном сервере, а на копии

204 Нет контента Нет контента.

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

205 Сбросить содержимое Сбросить содержимое.

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

206 Частичное содержимое Частичное содержимое.

Сервер успешно обработал часть запроса GET

300 Множественный выбор Множественный выбор.

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

301 Перемещено навсегда Перемещено навсегда.

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

302 Найдено Временно перемещено.

Похоже на 301. Но ресурс перемещается только временно. Клиенты должны продолжать использовать старый URI.

304 Не изменено Не изменено.

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

305 Использовать прокси Использовать прокси.

Запрошенный ресурс должен быть доступен через прокси

400 Bad Request

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

401 Unauthorized

Запрос требует аутентификации пользователя

402 Payment Required

зарезервировано для использования в будущем

403 Forbidden

Сервер понимает запрос запрашивающего клиента, но отказывается выполнять запрос

404 Not Found

Сервер не может найти ресурс (веб-страницу) в соответствии с запросом клиента. Через этот код дизайнер веб-сайта может установить страницу личности, которую «ресурсы, которые вы запрашивали»

405 Method Not Allowed

Способ по запросу клиента запрещен

503 Service Unavailable

Из-за перегрузки или обслуживания системы сервер временно не может обработать запрос клиента. Продолжительность задержки может быть включена в заголовок сервера Retry-After.

504 Gateway Time-out

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

505 HTTP Version not supported

Сервер не поддерживает запрошенную версию протокола HTTP и не может завершить обработку

Сяо Хуан: Ну, ладно, тогда можно говорить об общих заголовках HTTP-запросов.

Сяода: Ну ладно.

Accept

Допустимый тип содержимого ответа (Content-Types).

Accept-Charset

приемлемый набор символов

Accept-Encoding

Приемлемая кодировка содержимого ответа.

Accept-Language

Список допустимых языков содержимого ответа.

Accept-Datetime

приемлемые версии содержания ответа с точки зрения времени

Authorization

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

Cache-Control

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

Connection

Тип соединения, которое клиент (браузер) хочет использовать в первую очередь

Cookie

Файл cookie протокола HTTP, установленный предыдущим сервером с помощью Set-Cookie.

Content-Length

Длина тела запроса в восьмеричном формате

Content-MD5

Двоичный хэш MD5 (цифровая подпись) содержимого тела запроса, закодированный в Base64.

Content-Type

MIME-тип тела запроса (используется в запросах POST и PUT)

Expect

Указывает, что клиент просит сервер выполнить определенное действие

From

Адрес электронной почты пользователя, который инициировал этот запрос

If-Modified-Since

Разрешен возврат к 304 в случае немодифицированного ресурса, соответствующего немодифицированному

If-None-Match

Допускается возвращать 304 Not Modified (304 Not Modified), если соответствующий контент не был изменен, см. тег сущности протокола передачи гипертекста.

If-Range

Если объект не был изменен, верните отсутствующую часть или части. В противном случае возвращается весь новый объект

If-Unmodified-Since

Отправлять ответ только в том случае, если сущность не изменялась с определенного времени.

Max-Forwards

Ограничивает количество раз, которое это сообщение может быть перенаправлено прокси-серверами и шлюзами.

Range

Указывает, что запрашивается часть объекта, а смещение в байтах начинается с 0.

User-Agent

Идентификационная строка браузера

Upgrade

Требуется обновление сервера до более высокой версии протокола.

Сяо Хуан: Ну, ладно, тогда давайте поговорим о сильном кэшировании, согласовании кэширования.

Сяода: Ну ладно.

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

Сильный кеш

• Получить форму ресурса Получить из кэша
• код состояния200（from cache）
• Отправить запрос на сервер Нет, получить напрямую из кеша

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

• Получить форму ресурса Получить из кэша
• код состояния304（not modified）
• Отправить запрос на сервер Да, сообщить серверу, доступен ли кеш

Сильные поля, связанные с кешем,expires，cache-control. еслиcache-control 与 expiresЕсли оба существуют,cache-controlприоритет выше, чемexpires.

Поля, связанные с согласованным кэшем,Last-Modified/If-Modified-Since，Etag/If-None-Match

Сяо Хуан: Хм, когда дело доходит до этих двух кешей, когда какой использовать?

Сяода: Да, рекомендуюСильный кеш HTTP и кеш согласования

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

Кэш браузера в основном делится наСильный кеш (также известный как локальный кеш) и согласованный кеш (также известный как слабый кеш)

Сяо Хуан: Ну ладно, тогда давайте поговорим о том, почему fetch отправляет два запроса

Сяода: Ну ладно. Когда fetch отправляет почтовый запрос, он всегда отправляет его дважды, первый раз с кодом состояния 204, а второй раз успешно. Причина очень проста, потому что, когда вы используете почтовый запрос fetch, fetch отправляет запрос Options в первый раз, спрашивая сервер, поддерживает ли он измененный заголовок запроса, и если сервер поддерживает его, он отправляет реальный запрос во второй раз. время.

Сяо Хуан, хорошо, тогда объясни мне разницу между Cookie, sessionStorage и localStorage

Сяода: Ну ладно.

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

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

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

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

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

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

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

Что общего между sessionStorage, localStorage и куки:Все сохраняются на стороне браузера и имеют одинаковое происхождение.

Разница в том, что:

1. Данные cookie всегда передаются в HTTP-запросе одного и того же источника (даже если это не требуется), то есть cookie передаются туда и обратно между браузером и сервером, в то время какsessionStorage и localStorage не отправляют данные на сервер автоматически, только локально. Данные cookie также имеют концепцию пути, которая может ограничить принадлежность cookie определенному пути.

2,Ограничения на размер хранилища также отличаются, данные cookie не могут превышать 4 КБ, а поскольку каждый HTTP-запрос будет содержать файлы cookie, файлы cookie подходят только для хранения небольших данных, таких как идентификаторы сеансов. Хотя sessionStorage и localStorage также имеют ограничения на размер хранилища, они намного больше файлов cookie и могут достигать 5 МБ и более.

3.Срок действия данных отличается, sessionStorage: действителен только до закрытия текущего окна браузера; localStorage: действителен всегда, окно или браузер всегда сохраняются, поэтому они используются как постоянные данные; cookie: действительны только до истечения установленного срока действия cookie, даже если окно закрыть или просмотреть выключить

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

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

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

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

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

Сяо Хуан: Ну, вы только что говорили о сессиях, так что давайте поговорим о разнице между сессиями cookie.

Сяода: Ну ладно.

1. хранилище данных cookieв браузере клиента, сессияданные на сервере.

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

3. session будет храниться на сервере в течение определенного периода времени. Когда доступ увеличится, это поднимет производительность вашего сервера.Учитывая снижение производительности сервера, вы должны использовать COOKIE.

4. Данные, хранящиеся в одном файле cookie, не могут превышать 4 КБ, что ограничено многими браузерами.Сайт может хранить до 20 файлов cookie..

Сяо Хуан: Расскажите, как вы понимаете семантические теги HTML?

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

Сяо Хуан: Вы когда-нибудь использовали iframe? Расскажите мне о его недостатках.

Сяода: Ну, используется, элемент iframe создает встроенный фрейм, который содержит другой документ, и вы можете разместить всплывающую подсказку в<iframe###</iframe###между, чтобы запросить некоторые браузеры, которые не поддерживают iframes.

Его недостатком будет блокировка события загрузки главной страницы, а поисковая система не может интерпретировать такую ​​страницу, что не способствует SEO; iframe и главная страница делят пул соединений, а у браузера есть ограничения на одну и ту же область, так что это повлияет на производительность.

Сяо Хуан: А как насчет роли Doctype?Как вы различаете строгий режим и неразборчивый режим? Что они имеют в виду?

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

Строгий режим, то есть стандартный режим, означает, что браузер разбирает код по стандарту w3c (Строгий режим для типографики и JS работает в соответствии с самыми высокими стандартами, поддерживаемыми браузером.. )

Неразборчивый режим, также известный как странный режим или режим совместимости, означает, что браузер анализирует код по-своему (Обратная совместимость, эмулирует старые браузеры и предотвращает несовместимость браузеров со страницами.)

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

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

Сяо Хуан: Хорошо, тогда расскажи мне, как файлы cookie предотвращают атаки XSS

Сяода: Ну ладно.

XSS (межсайтовый скриптинг) означает, что злоумышленник встраивает скрипты javascript в возвращаемый HTML. Чтобы смягчить эти атаки, необходимо сопоставить заголовок HTTP. (XSS-атака — это когда на страницу внедряется вредоносный код)

set-cookie:

• httponly — этот атрибут может предотвратить XSS, он запретит javascript-скриптам доступ к куки.
• безопасный — этот атрибут указывает браузеру отправлять куки только тогда, когда запрос https.

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

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

Какие есть методы инъекций для XSS:

Вредоносный контент внедряется в виде тегов сценария в текст, встроенный в HTML.

Во встроенном JavaScript объединенные данные нарушают исходные ограничения (строки, переменные, имена методов и т. д.).

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

В href, src и другие атрибуты тега включите исполняемый код, например javascript:.

В событиях onload, onerror, onclick и т. д. внедрить неконтролируемый код.

В атрибуте стиля и теге включите что-то вродеbackground-image:url("javascript:...");кода (новые версии браузеров уже могут помешать).

В атрибуте стиля и теге включите что-то вродеexpression(...)Код выражения CSS (более новые версии браузеров уже могут это предотвратить).

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

• входная фильтрация
• Чистый интерфейсный рендеринг, разделяющий код и данные (предотвращает сохраненные и отраженные атаки XSS)
• Полностью избежать HTML (предотвратить сохраненные и отраженные атаки XSS)
• Избегайте объединения ненадежных данных js в строки (предотвращайте атаки XSS типа DOM)
• Content Security Policy
• Контроль длины входного содержимого
• Куки-файл только для HTTP: JavaScript запрещено читать некоторые конфиденциальные куки-файлы, и злоумышленники не могут украсть этот куки-файл после внедрения XSS.
• Captcha: не позволяет сценариям выдавать себя за пользователей и выполнять опасные действия.

Сяо Хуан: Что ж, давайте поговорим о области просмотра и мобильной верстке.

Сяода: Ну ладно. Мобильная верстка (обычно адаптивная верстка), мобильная адаптация:

А. Плавный макет + небольшая отзывчивость

B. макет на основе rem

C. Гибкая планировка.

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

<meta name="viewport" content="width=device-width,initial-scale=1"###

На статических веб-страницах пиксели часто используются в качестве единицы для описания ширины, высоты и информации о расположении элемента (На стороне ПК обычно считается, что в CSS реальная длина, представленная 1px, фиксирована.)

Результат отображения, когда размер шрифта составляет 16 пикселей на стороне ПК, отличается от результата отображения, когда размер шрифта составляет 16 пикселей на стороне мобильного устройства.

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

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

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

рекомендовать:Сравнение распространенных решений для адаптивных макетов (медиа-запросы, проценты, rem и vw/vh)

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"###

Сяо Хуан: Ну, тогда вы говорите о параметре addEventListener

Сяода: Ну ладно.addEventListener(event, function, useCapture)

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

Сяо Хуан: Ну, тогда вы говорите об оптимизации внешнего интерфейса.

Сяода: Ну ладно.

Сокращение запросов: объединение ресурсов, сокращение HTTP-запросов, сжатие minify/gzip, webP, lazyLoad. Ускорение запросов: pre-resolve DNS, уменьшение количества доменных имен, параллельная загрузка, раздача CDN.

Кэш: запрос кэша протокола HTTP, манифест автономного кэша, локальное хранилище автономного кэша данных.

Рендеринг: оптимизация JS/CSS, порядок загрузки, рендеринг на стороне сервера, конвейер.

Сяо Хуан: Хорошо, тогда объясните мне разницу между GET и POST

Сяода: Ну ладно.

1. Различные функции

1, получить — получить данные с сервера.

2, сообщение для отправки данных на сервер.

Во-вторых, процесс отличается

1. Получить — добавить очередь данных параметра в URL-адрес, на который указывает атрибут ACTION отправленной формы, а значение соответствует каждому полю в форме, которое можно увидеть в URL-адресе.

2. Публикация выполняется через механизм HTTP-публикации, и каждое поле формы и ее содержимое помещаются в ЗАГОЛОВОК HTML и отправляются на URL-адрес, на который указывает атрибут ACTION. Пользователь не может видеть этот процесс.

Три, получить разные значения

1. Для метода get сервер использует Request.QueryString для получения значения переменной.

2. Для почтового метода сервер использует Request.Form для получения отправленных данных.

В-четвертых, объем передаваемых данных отличается

1. Объем данных, передаваемых get, невелик и не может превышать 2 КБ.

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

Пять, разная безопасность

1. Безопасность get очень низкая.

2. Почтовая охрана на высоком уровне.

• Параметр get передается через URL-адрес, а сообщение помещается в тело запроса.
• Параметр, передаваемый в URL-адресе, ограничен по длине, а POST — нет.
• get менее безопасен, чем post, потому что параметры отображаются непосредственно в URL-адресе, поэтому его нельзя использовать для передачи конфиденциальной информации.
• Запросы на получение могут быть закодированы только в URL-адресе, в то время как сообщение поддерживает несколько методов кодирования.
• Запрос на получение будет активно кэшироваться браузером, а сообщение поддерживает различные методы кодирования.
• Параметры запроса на получение будут полностью сохранены в истории просмотров, а параметры публикации не будут сохранены.
• GET и POST по сути являются ссылками TCP, и между ними нет никакой разницы. Однако из-за правил HTTP и ограничений браузера/сервера они показывают некоторые различия в процессе подачи заявки.
• GET создает один TCP-пакет, POST — два TCP-пакета.

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

Сяо Хуан: Хорошо, тогда скажи мне разницу между 301 и 302

Сяода: Ну ладно.

301 Moved Permanently

Запрошенный ресурс был окончательно перемещен в новое место, и любые будущие ссылки на этот ресурс ДОЛЖНЫ использовать один из нескольких URI, возвращаемых этим ответом. Если возможно, клиенты с возможностью редактирования ссылок должны автоматически изменять запрошенный адрес на адрес, возвращаемый сервером. Если не указано иное, этот ответ также можно кэшировать.

302 Found

Запрошенный ресурс теперь временно отвечает на запрос с другого URI. Поскольку такие перенаправления являются временными, клиент ДОЛЖЕН продолжать отправлять будущие запросы на исходный адрес. Этот ответ можно кэшировать, только если он указан в Cache-Control или Expires.

Буквальная разница в том, что 301 — это постоянное перенаправление, а 302 — временное перенаправление. Наиболее распространенный сценарий 301 — использование перенаправления доменного имени. 302 используется для временных переходов, например, пользователи, которые не вошли в систему, посещают пользовательский центр и перенаправляются на страницу входа.

Сяо Хуан: Хорошо, тогда расскажи мне о методах, поддерживаемых HTTP

Сяода: Ну ладно. Такие как:GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

Сяо Хуан: Ну, тогда расскажи мне, как нарисовать треугольник

Сяода: Ну ладно.

div { 
    width:0px; 
    height:0px; 
    border-top:10px solid red; 
    border-right:10px solid transparent; 
    border-bottom:10px solid transparent; 
    border-left:10px solid transparent; 
}

Сяо Хуан: Ну, тогда вы говорите о новых элементах HTML5.

Сяода: Ну ладно.

• повысилсяheader，footer，nav, aside, sectionизосемантические теги
• На стороне формы, чтобы улучшить форму, вход был добавленcolor, emial, data, rangeРавный тип
• С точки зрения хранения он обеспечиваетsessionStorage，localStorageи автономное хранилище с помощью этих методов хранения для облегчения хранения и получения данных на клиенте.
• Определяет аудио- и видеоэлементы в мультимедиаaudio 和 vedio, помимо геолокации,canvasХолст, перетаскивание, многопоточное программированиеweb worker 和 websocketпротокол.

Сяо Хуан: Ну, тогда вы говорите о вводе URL-адреса в адресной строке, представлении этой страницы, что происходит в середине?

Сяода: Ну ладно.

1. Разрешение доменного имени DNS

Найдите реальный IP-адрес в соответствии с введенным URL-адресом доменного имени.В процессе поиска браузер сначала будет искать кеш, чтобы проверить, есть ли запись в кеше.Запись поиска кеша:

• Кэш браузера — «Кэш ОС —» кеш роутера;
• Если записи в кеше нет, проверьте, есть ли запись в файле hosts системы;
• Если нет, запросите DNS-сервер сначала с доменного имени верхнего уровня, затем с доменного имени второго уровня и так далее.

После ввода url сначала нужно найти ip сервера доменного имени url.Чтобы найти этот ip, браузер сначала будет искать кеш, чтобы увидеть, есть ли запись в кеше.Запись поиска кеша : кеш браузера - "системный кеш -" кеш роутера, если нет записи в кеше, проверить есть ли запись в файле hosts системы, если нет, запросить DNS-сервер

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

В соответствии с IP-адресом клиент и сервер выполняют трехэтапное рукопожатие для установления соединения.

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

• Отправитель сначала отправляет пакет данных с флагом SYN получателю.

• После того, как принимающая сторона получает его, она возвращает пакет данных с флагом SYN/ACK, чтобы указать правильную передачу и подтвердить информацию.

• Наконец, отправитель отправляет обратно пакет данных с флагом ACK, что означает конец «рукопожатия».

После получения IP-адреса сервера браузер создает HTTP-запрос в соответствии с IP-адресом и соответствующим номером порта. Сообщение запроса будет включать информацию об этом запросе, в основном метод запроса, описание запроса и данные, прикрепленные к запросу, и отправить HTTP-запрос инкапсулирован в tcp-пакет, и tcp-пакет будет проходить через транспортный уровень, сетевой уровень, канальный уровень и физический уровень, чтобы достичь сервера.Сервер анализирует запрос для ответа и возвращает соответствующий html в браузер.

3. Передача данных

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

В-четвертых, закройте TCP-соединение

После завершения передачи данных клиент и сервер четыре раза сигнализируют о закрытии соединения.

Для отключения TCP-соединения требуются «четыре волны»:

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

• вторая волна: после того, как пассивная закрывающая сторона получает пакет FIN, она отправляет ACK другой стороне, а порядковый номер подтверждения равен полученному порядковому номеру + 1 (так же, как SYN, один FIN занимает один порядковый номер).

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

• четвертая волна: После того, как активная закрывающая сторона получает FIN, она отправляет ACK пассивной закрывающей стороне, а порядковый номер подтверждения равен полученному порядковому номеру + 1. На данный момент четырехэтапное рукопожатие завершено.

5. Рендеринг страницы

Для статических ресурсов, возвращаемых браузером в соответствии с сервером, браузер использует механизм Native GUI для рендеринга HTML и CSS, а для загрузки JS использует механизм JS.

Поскольку html является древовидной структурой, браузер строит DOM-дерево на основе этого html.Если он обнаружит JS-скрипт и внешнее JS-соединение во время построения DOM-дерева, он прекратит построение DOM-дерева для выполнения и загрузки соответствующего Это вызовет блокировку, поэтому JS-код рекомендуется размещать после html-кода, а затем по внешнему стилю, внутреннему стилю,

Встроенный стиль строит дерево объектной модели CSS Дерево CSSOM.После завершения построения оно объединяется с деревом DOM в дерево рендеринга.Главное здесь – исключить невизуальные узлы, такие как скрипт, метатеги и узлы с отображением ни одного, а затем выполнить макет. Макет в основном для определения положения и размера каждого элемента, а затем для отображения страницы, потому что файл html будет содержать изображения, видео, аудио и другие ресурсы, в процессе разбирая DOM, эти будут загружаться параллельно, браузер будет скачивать каждый Существует определенное ограничение на количество параллельных загрузок домена, обычно 4-6. Конечно, среди всех этих запросов нам также нужно обратить внимание в тайник

• Разобрать узлы HTML в древовидную структуру DOM

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

Переход от байт-кода HTML к древовидной структуре DOM: Байты = ### Символы = ### Токены = ### Узлы = ### DOM

Компьютер может распознавать только байты 0 и 1, преобразовывать байты в строки в соответствии с правилами кодирования байтов, а затем преобразовывать строки в различные теги, определенные W3C, генерировать токены, сопоставлять строки и преобразовывать токены. преобразуются в узловые объекты (узлы), содержащие атрибуты и правила в соответствии с правилами, и преобразуются в интуитивно понятную древовидную структуру в соответствии с иерархическими отношениями (родительско-дочерние узлы) и правилами каждого узла. HTML строится постепенно, и процесс преобразования начинается, когда файл HTML все еще находится в пути. Наконец, получите полную DOM (объектная модель документа Document Object Module)

• Разобрать CSS в дерево правил CSSOM

Главное здесь — исключить невизуальные узлы, такие как скрипты, метатеги и узлы без отображения; с Render Tree браузер уже может знать, какие узлы находятся на веб-странице, определения CSS каждого узла и их принадлежность

Процесс построения CSS аналогичен процессу DOM, за исключением того, что CSS включает в себя сложные вычисления, такие как источник атрибутов CSS, сопоставление различных классов (идентификатор или класс), подтверждение правил перезаписи и веса и, наконец, определение значения стиля для каждый узел для формирования CSSOM (CSS Object Module CSS Object Model).

• Объединение DOM и CSSOM в Render-дерево

• Макет: рассчитать положение каждого узла на экране

• Draw: т. е. пройтись по дереву рендеринга и нарисовать каждый узел, используя внутренний слой пользовательского интерфейса.

6. Загрузите сценарий JavaScript

Хотя HTML\CSS и JS загружаются через разные движки, они взаимоисключающие, то есть при загрузке HTML\CSS JS перестанет загружаться, и наоборот, потому что движок JS может манипулировать DOM, менять стили, контент, и т.п. Поэтому при выполнении JS дерево рендеринга необходимо перестроить.

Кэш обычно управляется полями заголовка, такими как Cache-Control, Last-Modify и Expires. Разница между Cache-Control и Expires заключается в том, что Cache-Control использует относительное время, а Expires использует абсолютное время на стороне сервера.Из-за проблемы с разницей во времени обычно используется Cache-Control.При запросе этих кэшированных данных он будет сначала проверьте, истек ли срок его действия, если нет, используйте напрямую локальный кеш. Если срок его действия истек, запросите и проверьте, был ли файл изменен на сервере. Если значение ETag было установлено в последнем ответе, оно будет передано server в качестве значения If-None-Match в этом запросе. Проверка, если она непротиворечива, продолжите проверку Last-Modified, если ETag не установлен, непосредственно проверьте Last-Modified, а затем решите, следует ли возвращать 304.

Проще говоря:

разрешение DNS

TCP-соединение

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

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

Браузер анализирует отображаемую страницу

соединение завершено

Сяо Хуан: Хорошо, а каковы значения управления кешем?

Сяода: Ну ладно.

cache-controlэто общее поле заголовка сообщения, используемое дляHTTPВ запросе и ответе это реализуется указанием инструкциимеханизм кэширования, эта инструкция кеша односторонняя, общие значенияprivate、no-cache、max-age、 must-revalidateд., по умолчаниюprivate.

Сяо Хуан: Итак, какие два дерева создаст браузер при создании страницы?

Сяода: Ну ладно.

Постройте два дерева: дерево DOM и дерево правил CSSOM. Когда браузер получает соответствующий HTML-документ с сервера, он проходит через узлы документа для создания дерева DOM. Дерево правил CSSOM создается браузером, анализирующим файл CSS. .

Сяо Хуан: А вы часто используете CSS3? Узнать об их новых свойствах?

Сяода: Ну, все в порядке.

Граница CSS3:

border-radius：CSS3Закругленная граница.

Добавить закругленные прямоугольники в CSS2 сложно, мы должны использовать разные изображения для каждого закругленного угла, в CSS3 очень легко создавать закругленные углы, в CSS3,border-radiusСвойства используются для создания закругленных углов.border：2px solid;

box-shadow: тень границы CSS3. В CSS3,box-shadowИспользуется для добавления тени к коробке.

box-shadow:10px 10px 5px #888888;

border-image: изображение рамки CSS3.

через CSS3border-imageсвойство, вы можете использовать изображение для создания границы.border-image：url(border.png) 30 30 round;

background-size: свойство определяет размер фонового изображения. До CSS3 размер фонового изображения определялся фактическим размером изображения. В CSS3 можно указать размер фонового изображения, что позволяет нам повторно использовать фоновое изображение в различных контекстах. Вы можете указать размеры в пикселях или процентах. Если размеры указаны в процентах, размеры относятся к ширине и высоте родительского элемента.

background-origin: Свойство указывает область позиционирования фонового изображения. Фоновое изображение может быть размещеноcontent-box、padding-box 或 border-boxплощадь.

text-shadow: в CSS3,text-shadowТени могут быть применены к тексту.text-shadow:5px 5px 5px #FFFFFF;

word-wrap: если слово слишком длинное, оно не может превышать определенную область, что позволяет разделить длинные слова и перенести их на следующую строку:p{word-wrap:break-word;}

transform: С преобразованиями CSS3 мы можем перемещать, масштабировать, вращать, растягивать или растягивать элементы.

CSS3 3DКонвертировать:

rotateX(): Поворачивает элемент вокруг своей оси X на заданный градус.transform：rotateX(120deg);

rotateY(): Поворачивает элемент вокруг своей оси Y на заданный градус.transform：rotateY(120deg);

Сяо Хуан: Ну, тогда можно говорить о блочной модели css.

Сяода: Ну ладно.

CSSКоробочная модель включает в себяIEкоробочная модель и стандартW3Cкоробочная модель

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

Сяо Хуан: Хорошо, тогда скажи мне, в чем разница между тегом ссылки и тегом импорта?

Сяода: Ну ладно.

• ссылка — это html-тег,И @import предоставляется css
• Когда страница загружается, ссылка будет загружена одновременно,И css, на который ссылается @import, будет загружен после загрузки страницы..
• ссылка является html-тегом, поэтому совместимости нет,И @import распознается только IE5 и выше..
• Вес стиля ссылки выше, чем у стиля @import.

Сяо Хуан: Что ж, давайте поговорим о макете Flex.

Сяода: Ну ладно.

рекомендовать:Нэчжа в море, подметая переднюю часть гибкого макета графического обучения — удар за семь дней

Традиционные решения компоновки, основанные на блочной модели, полагаются наdisplay 属性 + position 属性 + float 属性.

Свойства контейнера:

flex-direction：决定主轴的方向（即子 item 的排列方法） 

.box { flex-direction: row | row-reverse | column | column-reverse; }

flex-wrap：决定换行规则 

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

flex-flow： 

.box { flex-flow: <flex-direction### || <flex-wrap###; }

justify-content：对其方式，水平主轴对齐方式 

align-items：对齐方式，竖直轴线方向 

项目的属性（元素的属性）： 

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0 

flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小 

flex-basis 属性：定义了在分配多余的空间，项目占据的空间。 

flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。 

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖 align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

Сяо Хуан: Ну, тогда вы говорите о BFC.

Сяода: Ну ладно.BFCКонтекст форматирования уровня блока для очистки поплавков, предотвращение перекрывающихся краев и т. Д.

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

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

эти элементы будут генерироватьBFC

Как создать БФЦ

1. Значение float неnone

2. Значение позиции неstatic或者relative

3. Значение дисплеяinline-block、table-cell、flex、table-caption或者inline-flex

4. Значение переполнения неvisible

<!DOCTYPE html###
<html lang="en"###
<head###
    <meta charset="UTF-8"###
    <meta name="viewport" content="width=device-width, initial-scale=1.0"###
    <meta http-equiv="X-UA-Compatible" content="ie=edge"###
    <title###防止margin重叠</title###
</head###
<style###
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style###
<body###
    <p###看看我的 margin是多少</p###
    <p###看看我的 margin是多少</p###
</body###
</html###

<!DOCTYPE html###
<html lang="en"###
<head###
    <meta charset="UTF-8"###
    <meta name="viewport" content="width=device-width, initial-scale=1.0"###
    <meta http-equiv="X-UA-Compatible" content="ie=edge"###
    <title###防止margin重叠</title###
</head###
<style###
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        overflow: hidden;
    }
</style###
<body###
    <p###看看我的 margin是多少</p###
    <div###
        <p###看看我的 margin是多少</p###
    </div###
</body###
</html###

Сяо Хуан: Хорошо, тогда расскажите мне о методе вертикального центрирования.

Сяода: Ну ладно.

Один: родительский элементdisplay:flex,align-items:center;

Два: абсолютное позиционирование элемента,top:50%，margin-top：-（高度/2）

Три: неопределенность высотыtransform：translateY（-50%）

Четыре: макет таблицы родительского элемента, настройки дочернего элементаvertical-align:center;

div { 
    width: 400px; 
    height: 400px; 
    position: relative; 
    border: 1px solid #465468; 
}

img { 
    position: absolute; 
    margin: auto; top: 0; 
    left: 0; right: 0; 
    bottom: 0; 
}

<div###
<img src="mm.jpg"### 
</div###

利用 flex
display:flex;
align-items:center;
justify-content:center;

Сяо Хуан: Что ж, давайте поговорим о блочных и линейных элементах.

Сяода: Ну ладно.

• Блочный элемент: отдельная строка и автоматически заполняет родительский элемент, который можно установитьmargin 和 paddingи высота и ширина
• Линейный элемент: не будет находиться в строке сам по себе,width 和 heightпотерпит неудачу, и вертикальные отступы и поля потерпят неудачу.

Сяо Хуан: Ну, тогда вы можете поговорить об атрибуте позиции.

Сяода: Ну ладно.

Исправлено фиксированное позиционирование:

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

Относительное позиционирование:

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

Абсолютное позиционирование абсолютное:

положение абсолютно расположенного элементаОтносительно ближайшего позиционированного родительского элемента, если у элемента нет позиционированного родителя, его позиция определяется относительно<html###. Абсолютное позиционирование сохраняет позицию элемента независимой от потока документа,Так что место не занимает. Абсолютно позиционированные элементы перекрывают другие элементы.

Липкое позиционирование липкое:

Элементы сначала позиционируются в соответствии с обычным потоком документов, то относительно элементаflow root（BFC）а такжеcontaining block(ближайший элемент-предок блочного уровня) позиционирование. Позиционирование элемента затем ведет себя как относительное позиционирование до тех пор, пока не будет пересечен определенный порог, а затем фиксированное позиционирование.

Позиционирование по умолчанию Статическое:По умолчанию.

Без позиционирования элемент появляется в обычном потоке (игнорируяtop, bottom, left, right 或者 z-indexЗаявление).

inherit:Указывает, что он должен наследовать от родительского элементаpositionстоимость имущества

Сяо Хуан: Ну, тогда ты можешь очистить поплавок.

Сяода: Ну ладно.

Способ 1: используйте пустой элемент с атрибутом clear

Используйте пустой элемент после плавающего элемента, например

<div class="clear"###</div###, и назначьте его в CSS.clear{clear:both;}Свойство для очистки поплавка. также можно использовать<br class="clear" /###或<hr class="clear" /###помыть.

Способ 2: ИспользованиеCSSизoverflowАтрибуты

Добавить в контейнер плавающего элементаoverflow:hidden;илиoverflow:auto;Поплавок можно очистить, а в IE6 его тоже нужно срабатыватьhasLayout, например, установка ширины и высоты контейнера для родительского элемента или настройкаzoom:1. в добавленииoverflowПосле установки атрибута плавающий элемент возвращается на слой контейнера, поддерживая высоту контейнера для достижения эффекта очистки плавающего элемента.

Способ 3: использовать обработку смежных элементов Ничего не делать, добавить к элементу за плавающим элементомclearАтрибуты.

Способ 4: ИспользованиеCSSиз:afterпсевдоэлемент

комбинировать:afterПсевдоэлементы (обратите внимание, что это не псевдокласс, а псевдоэлемент, представляющий ближайший элемент после элемента) иIEhack, может быть полностью совместим с текущими основными браузерами, здесьIEhackотносится к триггеруhasLayout. Добавьте контейнер к плавающему элементуclearfixизclass, то дайте этоclassдобавить один:afterПсевдоэлемент реализует невидимый блочный элемент в конце элемента (Block element), чтобы очистить поплавок.

рекомендовать:Навыки CSS (1): Clear Floating

Сяо Хуан: Хорошо, тогда расскажи мне, что такое селекторы CSS и их приоритеты.

Сяода: Ну ладно.

• Селектор ID,class 选择器，标签选择器，伪元素选择器，伪类选择器Ждать
• Порядок приоритета следующий:id 选择器 ### class 选择器 ### 标签选择器
• с участием!importantОтмеченные атрибуты стиля имеют наивысший приоритет
• Порядок приоритета следующий:内联样式### 内部样式 ### 外部样式 ### 浏览器用户 自定义样式 ### 浏览器默认样式

Сяо Хуан: Хорошо, тогда скажи мне, как заставить элемент исчезнуть?

Сяода: Ну ладно. можно использовать:

display:none; 
visibility:hidden; 
opacity: 0;

Сяо Хуан: Что ж, давайте поговорим об обработке переполнения в CSS3.

Сяода: Ну ладно.

• text-overflowАтрибут, значение clip — обрезать текст;
• ellipsisТекст обрезан для отображения эллипсов;
• stringиспользовать данную строку для представления обрезанного текста.

Сяо Хуан: Ну, тогда можно говорить о методе позиционирования z-index.

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

Сяо Хуан: Хорошо, тогда расскажи мне о перерисовке и перестановке

Сяода: Ну ладно.

• Перерисовка не обязательно требует перестановки, а перестановка неизбежно приведет к перерисовке.
• Перекомпоновка: когда необходимо обновить часть дерева рендеринга и изменить размер узла, браузер аннулирует затронутую часть дерева рендеринга и перестраивает дерево рендеринга (Когда изменения в DOM приводят к изменению геометрических свойств элементов, таких как изменение ширины и высоты элементов, а также положения элементов, браузер должен пересчитать геометрические свойства элементов и перестроить дерево рендеринга.Этот процесс называется "переплавка".. )
• Перерисовка: это поведение браузера, которое запускается при изменении внешнего вида элемента.Браузер будет перерисовывать в соответствии с новыми атрибутами элемента, чтобы элемент имел новый внешний вид (После завершения перестройки реконструированное дерево визуализации отображается на экран, и этот процесс называется «RedRaw»)
• Дерево DOM: представляет структуру страницы.
• Дерево рендеринга: как отображаются узлы, представляющие страницу
• После того, как дерево рендеринга построено, пора приступить к рисованию элементов страницы.

Спусковой механизм перестановки Основополагающий принцип перестановки состоит в том, что изменились геометрические свойства элементов

• Добавить или удалить видимые элементы DOM
• изменение позиции элемента
• Меняется размер самого элемента
• Изменения содержания
• инициализация рендерера страницы
• Изменился размер окна браузера

Сяо Хуан: Ну, тогда можно говорить о размерах коробок.

Сяода: Ну ладно.box-sizingЗадает два расположенных рядом прямоугольника с рамкой, синтаксис такой:box-sizing：content-box/border-box/inherit

Пример Определяет два прямоугольника с границами рядом:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

• content-box: ширина и высота применяются к окну содержимого элемента соответственно, а отступы и границы элемента рисуются в дополнение к ширине и высоте.
• border-box: ширина и высота, установленные для элемента, определяют ограничивающую рамку элемента.
• inherit: унаследовано от родительского элементаbox-sizing

Сяо Хуан: Хорошо, тогда расскажи мне, в чем разница между get и post запросами с точки зрения кэширования

Сяода: Ну ладно.

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

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

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

Сяо Хуан: Ну, тогда можно говорить о создании и наследовании классов

Сяода: Ну ладно.

Создание класса (es5):new 一个 function,в этотfunction 的 prototypeДобавьте свойства и методы внутрь.

Давайте создадимAnimalДобрый:

// 定义一个动物类 
function Animal (name) { 
// 属性 
this.name = name || 'Animal'; 
// 实例方法 
this.sleep = function(){ 
console.log(this.name + '正在睡觉！'); 
}
}
// 原型方法 
Animal.prototype.eat = function(food) { 
console.log(this.name + '正在吃：' + food); 
};

Это создаетAnimalКласс после создания экземпляра объекта имеет методы и свойства.

Наследование классов — наследование цепочки протоколов — наследование прототипов

function Cat(){ } 
Cat.prototype = new Animal(); 
Cat.prototype.name = 'cat'; 

// Test Code 
var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.eat('fish')); 
console.log(cat.sleep()); 

console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

• Особенности: судя по цепочке прототипов, это экземпляр родительского класса и экземпляр подкласса.
• Недостаток: множественное наследование невозможно

Конструктивное наследование: использование конструктора родительского класса для улучшения экземпляра подкласса эквивалентно копированию атрибутов экземпляра родительского класса в подкласс (без использования прототипа).

function Cat(name){ 
Animal.call(this); 
this.name = name || 'Jeskson'; 
}

// Test Code 
var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.sleep()); 

console.log(cat instanceof Animal); // false 
console.log(cat instanceof Cat); // true 

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

Комбинированное наследование: композиция эквивалентна построению наследования и наследованию цепочек выступов.

function Cat(name){ 
Animal.call(this); 
this.name = name || 'Tom'; 
}

Cat.prototype = new Animal(); 
Cat.prototype.constructor = Cat; 

// Test Code 
var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.sleep()); 
console.log(cat instanceof Animal); // true 
console.log(cat instanceof Cat); // true

• Особенности: Вы можете наследовать свойства/методы экземпляра, а также свойства/методы прототипа.
• Недостаток: конструктор родительского класса вызывается дважды, и создаются два экземпляра.

Наследование паразитарного состава:

Пример:

function Cat(name){ 
Animal.call(this); 
this.name = name || 'Jeskson'; 
}

(function(){ 
// 创建一个没有实例方法的类 
var Super = function(){}; 
Super.prototype = Animal.prototype; 
//将实例作为子类的原型 
Cat.prototype = new Super(); 
})(); 

// Test Code 
var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.sleep()); 
console.log(cat instanceof Animal); // true 
console.log(cat instanceof Cat); //true

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

Сяода: Ну ладно.

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

Сяо Хуан: Что ж, тогда можно говорить о делегировании событий.

Сяода: Ну ладно.

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

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

Сяо Хуан: Ну, тогда можно говорить о ленивой загрузке и предварительной загрузке картинок

Сяода: Ну ладно.

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

Суть двух технологий:

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

Сяо Хуан: Ну, скажи мне разницу между mouseover и mouseenter

Сяода: Ну ладно.

• mouseover: Когда мышь перемещается в элемент или его дочерние элементы, событие срабатывает, поэтому происходит процесс повторного срабатывания и всплытия. Соответствующее событие удаления — mouseout

• mouseenter: Когда мышь удаляет сам элемент (подэлементы, не содержащие элемент), будет срабатывать событие, то есть он не будет всплывать, а соответствующее событие удаления — mouseleave

Сяо Хуан: Ну, тогда расскажи мне, что делает новый оператор JS

Сяода: Ну ладно.

новый операторСоздал пустой объект, этот объектпрототипнаправлениеПрототип конструктора,воплощать в жизньКонструкторназад послеэтот объект

Сяо Хуан: Ну, тогда вы говорите о реализации функции перетаскивания JS.

Сяода: Ну ладно.

Во-первых, есть три события, а именноmousedown，mousemove，mouseup

Когда мышь щелкнута и нажата, появитсяtagЛоготип был нажат в это время и может быть выполненmousemoveспециальные методы внутри.clientX，clientYОпределяет координаты мыши, соответственно абсциссу и ординату, и мы используемoffsetX 和 offsetYПервоначальные координаты элементов для представления элементов

Пример движения должен быть: Координаты при движении мыши - координаты при нажатии мыши.

То есть информация о позиционировании: координаты при движении мыши - координаты при нажатии мыши + начальное состояние элемента.offetLeft, Есть еще принципиальная вещь, то есть когда перетаскивание является абсолютным позиционированием, то, что мы меняем, находится в условиях абсолютного позиционирования.leftтак же какtopЭквивалентное значение.

Сяо Хуан: Ну, тогда можно говорить о троттлинге и анти-тряске JS.

Сяода: Ну ладно.

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

// timer用于储存定时器
delayed(){
    // 检测定时器
    if(this.timer){
        // 如果有定时器,则清除
        clearTimeout(this.timer)
        this.timer=null
    }
    // 设置定时器和事件
    this.timer=setTimeout(()=>{
        // do something
    },500)
}

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

test(){
    let that=this
    if(that.stopClickLogin){
        console.log(`请等待1s后再次点击 >>>>>>>>>`)
        return false
    }
    that.stopClickLogin=true
    setTimeout(()=>{
        that.stopClickLogin=false
    },1000)
    console.log(`do something >>>>>>>>>`)
}

• событие ввода окна поиска, например, для поддержки поиска ввода в реальном времени вы можете использовать схему регулирования (Соответствующее содержание должно быть запрошено через определенный период времени), или интервал ввода больше определенного значения (например, 500 мс), считается, что ввод пользователя завершен, и затем начинается поиск.Конкретное используемое решение зависит от бизнес-требований.
• событие изменения размера страницы, который часто используется, когда требуется адаптация страницы. Рендеринг DOM должен выполняться в соответствии с окончательно отображаемой страницей (В этом случае обычно используется защита от сотрясений., потому что нужно оценивать только последнее изменение)

Функция защиты от тряски

регулирование функции

Сяо Хуан: Ну, тогда вы реализуете однократную функцию, а параметры функции выполняются только один раз.

Сяода: Ну ладно.

function ones(func){ 
    var tag=true; 
    return function(){ 
        if(tag==true){ 
            func.apply(null,arguments); 
            tag=false; 
        }
        return undefined 
    }
}

Сяо Хуан: ну, ты говоришь о==和===、以及 Object.isразница

Сяода: Ну ладно.

(1) ==В основном существует: принудительноnumber,null==undefined

" "==0 //true 
"0"==0 //true 
" " !="0" //true 
123=="123" //true 
null==undefined //true 

(2)Object.jsОсновное отличие+0！=-0а такжеNaN==NaN(сравнить с===和==улучшение)

Сяо Хуан: Ну, тогда вы понимаете функцию связывания

Сяода: Ну ладно.

Function.prototype.bind=function(obj,arg){
var arg=Array.prototype.slice.call(arguments,1);
var context=this;
return function(newArg){
arg=arg.concat(Array.prototype.slice.call(newArg));
return context.apply(obj,arg);
}
}

Function.prototype.bind=function(obj,arg){
var arg=Array.prototype.slice.call(arguments,1);
var context=this;
var bound=function(newArg){
arg=arg.concat(Array.prototype.slice.call(newArg));
return context.apply(obj,arg);
}
var F=function(){}
//这里需要一个寄生组合继承
F.prototype=context.prototype;
bound.prototype=new F();
return bound;
}

Сяо Хуан: Ну, как дедуплицировать массив

Сяода: Ну ладно.

один:indexOfЦиклическая дедупликация

два:ES6 Setубрать вес;Array.from(new Set(array))

три:ObjectДедупликация пар ключ-значение; сохраните значение массива какObject 的 keyзначение, напримерObject[value1] = true, при оценке другого значения, еслиObject[value2]Если он существует, значение повторяется.

Сяо Хуан: Ну, как судить о массиве

Сяода: Ну ладно.

• Object.prototype.call.toString()
• instanceof

Сяо Хуан: Что ж, давайте поговорим об основных типах данных JS.

Сяода: Ну ладно. Основные типы данных:undefined、null、number、boolean、string、symbol

Сяо Хуан: Что ж, давайте поговорим о принципе кросс-доменности.

Сяода: Ну ладно.

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

Сяо Хуан: Ну, скажи мне, что такое загрузка по запросу?

Сяода: Ну ладно. Соответствующая функция загружается только тогда, когда пользователь инициирует действие. Триггерные действия зависят от конкретных бизнес-сценариев, включая, помимо прочего, следующие ситуации: щелчки мышью, ввод текста, прокрутка полосы прокрутки, движение мыши, изменение размера окна и т. д. Загружаемый файл может быть JS, изображением, CSS, HTML и т. д.

Сяо Хуан: Что ж, давайте поговорим о нескольких способах наследования в JS.

Сяода: Ну ладно.

1. Наследование цепочки прототипов

2. Конструктивное наследование

3. Наследование экземпляра

4. Скопируйте наследование

5, наследование композиции

6. Наследование паразитарного состава

Сяо Хуанг: Что ж, давайте поговорим о жизненном цикле Vue.

Сяода: Ну ладно.

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

Каждый компонент или экземпляр проходит полный жизненный цикл, который делится на три этапа: инициализация, запуск и уничтожение.

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

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

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

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

Когда данные компонента или экземпляра изменяются, beforeUpdate будет выполнен немедленно, а затем механизм виртуального дома Vue перестроит виртуальный дом и последнее дерево виртуального дома, используя алгоритм diff для сравнения и повторного рендеринга, как правило, не Делать что-нибудь

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

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

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

Сяо Хуан: Хорошо, расскажи мне, на какие операции повлияет блокировка браузера

Сяода: Ну ладно.scriptСкрипт будет блокироваться во время выполненияDOMразбор дерева, рендеринг, задержкаDOMContentLoadedСобытие запущено.

Сяо Хуан: Хорошо, давайте поговорим о загрузке файлов, что вы делали до и после?

Сяода: Ну ладно.

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

Сяо Хуан: Что ж, давайте поговорим о реализации v-модели во Vue.

Сяода: Ну ладно.

<template>
 <input type="text" :value="inputValue" @change="handleInputChange"/>
</template>
export default {
 methods: {
  handleInputChange(e) {
   this.inputValue = e.target.value;
  },
 }
}
Vue.component('child',{
 template: `<span>1024bibi.com</span>`,
 model: {
  prop: 'checked',
  event: 'change',
 },
 props: {
  checked: Boolean
 }
})
<child v-model="status" @change="handleChange"></child>

Сяо Хуан: Что ж, давайте поговорим о том, что такое мониторинг событий.

Сяода: Ну ладно.

addEventListener()Метод, используемый для добавления обработчиков событий к указанным элементам, позволяет более легко управлять событиями, синтаксисelement.addEventListener(event, function, useCapture);

Первый параметр — тип события.(如 "click" 或 "mousedown")

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

Третий параметр — логическое значение, используемое для описанияявляется ли событие всплывающим или захватывающим.该参数是可选的。事件传递有两种方式，冒泡和捕获

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

Сяо Хуан: Ну, поговорим об обещании.

Сяода: Ну ладно.Promiseэто объект, который содержит события, которые закончатся в будущем

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

Как только состояние изменится, оно больше не изменится.Есть только две возможности для изменения состояния объекта обещания: с ожидания на выполнение или с ожидания на отклонение.Пока происходят эти две ситуации, состояние будет заморожено и будет не изменится снова. В это время это называется преодоленным стереотипом

Основное использование промисов:

let promise1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('ok')
},1000)
})
promise1.then(function success(val){
console.log(val)
})

Сяо Хуан: Что ж, давайте поговорим о цепочке прототипов JS, что является вершиной цепочки прототипов? Что является прототипом объекта? Каков прототип прототипа объекта? Реализация метода удаления повторяющихся данных в массиве на цепочке прототипов массива

Сяода: Ну ладно.

JS реализует наследование через прототипы.prototypeсвойство, значением свойства this является объект, и этоprototypeобъект имеетconstructorатрибут, этот атрибут указывает на этот конструктор, и каждый экземпляр будет иметь_proto_атрибут указывает на этоprototypeОбъект, мы можем назвать этот неявный прототип, когда мы используем метод экземпляра, мы сначала проверим, есть ли этот метод в этом экземпляре, если нет, мы проверим этотprototypeЕсть ли у объекта этот метод

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

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

Так как же выразить связь между экземпляром и прототипом экземпляра?

_proto_Это свойство, которое будет иметь каждый объект JS, указывающее на прототип этого объекта.

Поскольку и объект-экземпляр, и конструктор могут указывать на прототип, есть ли у прототипа атрибуты, указывающие на конструктор или экземпляр? прямо указывает на конструктор.constructorТолько что

Связь экземпляра и прототипа:

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

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

Как показано на рисунке:

ТакObject.prototypeЧто насчет прототипа, мы можем распечататьconsole.log(Object.prototype.__proto__ === null),вернутьtrue

nullозначает, что объекта нет, т.е. там не должно быть значения, поэтомуObject.prototypeнет прототипа

Пример:

constructor：
function Person(){
}
var person = new Person();
console.log(Person === person.constructor);

оригинальныйpersonНет вconstructorсвойства, когда не читаютсяconstructorсобственность, отpersonчитается из прототипа, поэтому указывает на конструкторPerson

__proto__：

Большинство браузеров поддерживают этот нестандартный метод доступа к прототипу, однако вPerson.prototype, на самом деле это происходит отObject.prototype, когда используешьobj.__proto__это можно понять как возвращениеObject.getPrototype(obj)

наследовать:

Каждый объект наследует свойства от прототипа

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

Сяо Хуан: ах, а что такое закрытие js?

Сяода: Ну ладно.

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

Так что с технической точки зрения все функции JS являются замыканиями, но это теоретическое замыкание, а есть практическое замыкание.С практической точки зрения, только если:

1,Он сохраняется, даже если контекст, создавший его, был уничтожен.

2,Когда в код вводится свободная переменная, это называется замыканием.

** Применение закрытия: **

• Объем блока мнемосхемы
• переменные, содержащие внешние функции
• инкапсулировать частные переменные

Сяо Хуан: Ну, давай поговоримpromise+Generator+Asyncиспользование

Сяода: Ну ладно.

PromiseПроблема решена: ад обратного звонка

PromiseТехнические характеристики:

promiseЕсть три состояния,Ожидание (в ожидании), завершено (выполнено/решено), отклонено (отклонено).

PromiseСтатус можно изменить только с «ожидание» на «завершено» или «отклонено», его нельзя отменить, а «завершено» и «отклонено» нельзя преобразовать друг в друга.

promiseдолжен предоставитьthenметод

promise.then(resolve, reject),resolveа такжеrejectявляются необязательными параметрами. еслиresolve 或 rejectне является функцией, ее следует игнорировать.thenметод должен возвращатьpromiseобъект.

использование: создание экземпляраpromiseОбъект нужно передать в функцию (содержащую два параметра),resolve 和 reject, определяется внутреннее состояние.resolve 和 rejectФункции могут передавать параметры и использовать их в функциях обратного вызова.resolve 和 rejectВсе функции, а переданные параметрыthenполучено в функции обратного вызова.

var promise = new Promise(function(resolve, reject) {
setTimeout(function(){
resolve('1024bibi.com');
});
}); 
promise.then(function(val){
console.log(val)
})

promise.then(val=>{ 
//resolved 
},reason=>{ 
//rejected 
})

Promiseцепочка обратного вызова:

promiseМожет использоваться в функциях обратного вызоваreturn 和 throw, так что вthenМогуreturnиз одногоpromiseобъект или другое значение, илиthrowобъект ошибки, но если нетreturn, который вернет по умолчаниюundefined, то последнийthenПараметр обратного вызова в полученном будетundefined.

Функция генератора:

функции генератора используют:

1. Выполнение сегмента, можно приостановить

2. Вы можете контролировать этап и возвращаемое значение каждого этапа

3. Вы можете узнать, дошло ли исполнение до конца

генераторы и асинхронное управление:

использоватьGeneratorЭффект приостановки выполнения функции можно записать в асинхронной операцииyieldзаявление, дождитесь звонкаnextметод, а затем выполнить его позже. Фактически это эквивалентно отсутствию необходимости писать функцию обратного вызова, потому что последующие операции асинхронной операции могут быть помещены вyieldВ любом случае ниже оператора мы должны дождаться вызоваnextметод выполняется. так,GeneratorВажным практическим значением функции является то, чтоИспользуется для обработки асинхронных операций, переписать функции обратного вызова.

asyncи асинхронный:

Применение:

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

awaitПосле, как правило,promiseобъект

Пример:asyncопределитьасинхронная функция, функция возвращаетPromise. еслиasyncФункция возвращает синхронизированное значение, которое будет упаковано в пониманиеresolve 的 Promise, эквивалентноreturn Promise.resolve(value).awaitПеред использованием в асинхронной операции это означает «ожидание» возвращаемого значения асинхронной операции.awaitМожет также использоваться для синхронизированного значения.

Сяо Хуан: Что ж, давайте поговорим о делегировании событий и принципе всплытия.

Сяода: Ну ладно.

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

Преимущество делегирования в том, что

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

Сяо Хуан: Что ж, давайте поговорим о спецификации кода.

Сяода: Ну ладно.

• Исходный файл

Исходные файлы JavaScript должны быть закодированы в UTF-8 без BOM.

• отступ

Должен иметь отступ в 4 пробела, табуляция или 2 пробела не допускаются.

• case и default в переключателе должны оставаться с отступом.

// 正例
switch (variable) {
    case '1':
        // do...
        break;
    case '2':
        // do...
        break;
    default:
        // do...
}

• пространство

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

let a = !arr.length;
a++;
a = b + c;

• существует{Должен предваряться 1 пробелом.

// 正例

if (condition) {
}

set('attr', {
    some: 'xxx',
    any: 'yyy'
});

function funcName() {
}

• if / else / for / while / function / switch / do / try / catch / finallyМежду ключевыми словами и скобками необходимо добавить пробел.

// 正例

if (condition) {
}

while (condition) {
}

(function () {
})();

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

// 正例
const obj = {
    a: 1,
    b: 2,
    c: 3
};

• В объявлениях функций, именованных функциональных выражениях и вызовах функций имя функции и(Между ним нет места.

// 正例

function funcName() {
}

const funcName = function funcName() {
};

funcName();

• , 和 ;Перед ним не может быть пробела.

// 正例
callFunc(a, b);

• ( 和 [ 之后、 ) 和 ]Раньше пробелов быть не может.

// 正例

callFunc(param1, param2, param3);

save(this.list[this.indexes[i]]);

needIncream && (variable += increament);

if (num > list.length) {
}

while (len--) {
}

// 正例
const arr1 = [];
const arr2 = [1, 2, 3];
const obj1 = {};
const obj2 = {name: 'obj'};
const obj3 = {
    name: 'obj',
    age: 20,
    sex: 1
};

• После каждой строки кода не должно быть пробелов.

• Количество символов в одной строке не может превышать 120, и если оно превышает, требуется новая строка.

• Если содержимое в скобках состоит из нескольких строк, оно должно быть)、 ]、 }Откройте новую строку и сделайте новую строку такой же, как(、 [、 {Отступ в строке соответствует.

// 正例
if (product) {
    product.load();
    if (user.isAuthenticated()
        && user.isInRole('admin')
        && user.hasAuthority('add-admin')
    ) {
        sendProduct(user, product);
    }
}
const arr = [
    'candy', 'sugar'
];

• , 或 ;нет новой строки перед

// 正例
const obj = {
    a: 1,
    b: 2,
    c: 3
};

foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);

• Если используется многострочный кодовый блок,else 和 catchДолжна быть открыта новая строка.

// 正例

if (condition) {
    // some statements;
}
else {
    // some statements;
}

try {
    // some statements;
}
catch (ex) {
    // some statements;
}

• заявление должно начинаться с;конец.
• Если есть только одна строка,{}Это не может быть опущено.

// 正例
if (condition) {
    callFunc();
}

• В конце определения функции не может быть точки с запятой.;.

// 正例
function funcName() {
}

• Объявления объектов и массивов не могут иметь завершающие запятые.

// 正例

const obj = {
    attr1: 'xxx',
    attr2: 'yyy'
};

const arr = [
    'xxx',
    'yyy'
];

соглашение об именовании

• Имена имен переменных, имен свойств и имен функций должны следоватьlowerCamelCase(орфография маленького верблюда).

const loadingModules = {};
function loadProduct() {
}

• classИмя класса должно следоватьUpperCamelCase (Pascal), что означает написание верблюда (написание Паскаля).

function Element(options) {
}

• Все символы акронимов должны быть либо прописными, либо строчными.

function parseSVG() {
}
const svgParser;

• Используйте const для объявления переменных в первую очередь, и одна строка не может объявлять несколько переменных одновременно.

// 正例
const name = 'MyName';
const hangModules = [];
const missModules = [];
const visited = {};

• Для операторов равенства==можно использовать только для проверкиnullилиundefined, иначе вы должны использовать===

// 正例
if (age === 30) {
    // ...
}
if (type == null) {
    // ...
}

• Рекомендуется использоватьxxx == nullсудитьnull 或 undefined

• Функциональные выражения или объявления функций не должны помещаться в тело цикла.

// 正例
function clicker() {
    // ......
}

for (let i = 0, len = elements.length; i < len; i++) {
    const element = elements[i];
    addListener(element, 'click', clicker);
}

• Рекомендуется использовать+ ''Преобразуйте значение в строку.

// 正例
num + '';

• Рекомендуется использовать+Преобразуйте значение в числовое значение.

// 正例
+str;

• В использованииparseInt, должен быть передан второй параметр.

// 正例
parseInt(str, 10);

• должен использовать'вместо"Определите строку.
• должен использоваться литерал объекта{}для создания простых предметов.

// 正例
const obj = {};

• Если все свойства литерала объекта не требуют кавычек, кавычки должны быть опущены. Если требуются кавычки, используйте'вместо"

// 正例
const info = {
    name: 'someone',
    age: 28
};

• Модификация прототипов встроенных объектов запрещена.

// 禁止
String.prototype.trim = function () {
};

• использовать как можно больше.вместо[]Доступ к свойствам объектов.
• использоватьfor ... in ...когда используешьhasOwnPropertyНе допуститьObjectПрототип добавляется с некоторыми дополнительными свойствами в некоторых средах выполнения.

const newInfo = {};
for (const key in info) {
    if (info.hasOwnProperty(key)) {
        newInfo[key] = info[key];
    }
}

• Вы должны использовать литерал массива, если вам не нужно создавать массив указанной длины[]Создайте массив.

// 正例
const arr = [];
const arr2 = new Array(1e4);

• Не используйтеfor in
• нужно использоватьeval 和 with. с разрешенияnew Function.

Сяо Хуан: Что ж, давайте поговорим о темных и светлых копиях.

Сяода: Ну ладно.

Мелкая копия массива:

Если это массив, мы можем использовать некоторые методы массива, например,slice，concatМетод возвращает свойства нового массива для реализации копии, но если массив имеет вложенные объекты или массивы, используйтеconcatКлонирование метода не завершено, если элементы массиваДля базового типа копии будут сделаны, не затрагивая друг друга., и еслиобъект или массив, он будет только копироватьСсылки на объекты и массивы, так что независимо от того, изменим ли мы старый и новый массивы, оба изменятся, мы помещаем этоМетод копирования ссылки называется мелкой копией.

глубокая копия

Относится к полной копии объекта, даже если объект вложен, они отделены друг от друга, изменение свойств одного объекта не повлияет на другой

Сяо Хуан: Хорошо, давайте поговорим о разнице между let const var

Сяода: Ну ладно.

varОбъявленная переменная является глобальной или целым функциональным блоком, иlet,constОбъявленная переменнаяпеременные блочного уровня,varОбъявленная переменная имеет продвижение переменной,let,constне существует,letОбъявленные переменные допускают переназначение,constне положено

Сяо Хуан: Ну, говорите о характеристиках функции стрелки ES6

Сяода: Ну ладно.

Отличие стрелочных функций от обычных функций в том, что:

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

2. Стрелочные функции не имеют собственного объекта аргументов, но могут обращаться к объекту аргументов окружающей функции.

3. Его нельзя вызвать через ключевое слово new, а также нет значения new.target и прототипа

Сяо Хуан: Что ж, давайте поговорим о порядке выполнения setTimeout и Promise.

Сяода: Ну ладно.

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

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

thenОбратный вызов, на который указывает метод, будет выполнен после выполнения всех задач синхронизации текущего скрипта, и порядок выполнения следующий:同步执行的代码-》promise.then->settimeout

Сяо Хуан: Ну, давай поговоримsetTimeout(fn,100);100Как взвешиваются миллисекунды

Сяода: Ну ладно.

setTimeout()Функция просто вставляет событие в список задач. Она должна дождаться выполнения текущего кода, прежде чем основной поток выполнит указанную им функцию обратного вызова. Это может занять много времени, поэтому нет никакого способа гарантировать, что функция обратного вызова будет быть вsetTimeoutвыполнить в указанное время,100миллисекунды - время вставки в очередь + время ожидания

Сяо Хуан: Что ж, давайте поговорим о том, как получить атрибуты объекта.

Сяода: Ну ладно.

• for（let I in obj）Этот метод последовательно обращается к объекту и его цепочке прототипов.все перечисляемые типы
• object.keys: возвращает массив, включаяВсе перечисляемые имена свойств
• object.getOwnPropertyNames: возвращает массив, содержащийнеперечислимое свойство

Сяо Хуанг: Что ж, давайте поговорим о некоторых новых возможностях ES6.

Сяода: Ну ладно.

ES6 добавляет let и const для объявления переменных в объявлении и определении переменных и имеет концепцию локальных переменных.В присваиваниях есть более привлекательные структурные присваивания.В то же время ES6 расширяет некоторые методы на строки, массивы, регулярные выражения, объекты, функции и т. д., такие как строки шаблона в терминах строк, параметры по умолчанию в терминах функций и краткие представления свойств в терминах объектов

ES6 также представляет новые типы данных.symbol, новая структура данныхset 和 map,symbolв состоянии пройтиtypeofОбнаружено, чтобы решить проблему асинхронного обратного вызова, введеноpromise 和 generator, и самый привлекательныйClassИ модули, вы можете улучшить объектно-ориентированное программирование с помощью Class и использовать загрузку модулей для облегчения модульного программирования.

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

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

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

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

promise:Решение для асинхронного программирования, которое является более мощным, чем традиционные решения, называемые функциями обратного вызова и событиями.

модульный: его функция модуля в основном состоит из двух команд,export 和 import,exportкоманды используются для указанияВнешний интерфейс,importКоманды используются для входа в функции, предоставляемые другими модулями.

Сяо Хуан: Что ж, давай поговорим об этом.call 和 applyдля чего это используется

Сяода: Ну ладно.

Функции Call и apply точно такие же, но форма передачи параметров отличается.

1. Измените точку этого

2. Заимствуйте методы других объектов,

3. Вызовите функцию, потому что метод apply, call заставит функцию выполняться немедленно.

Сяо Хуан: Что ж, давай поговорим об этом.for(var i=0;i<5;i++) { setTimeout(function(){ console.log(i); },1000); } console.log(i)

Сяода: Ну ладно.

Выход 5 5s через одну секунду

setTimeout будет выполняться каждый раз при выполнении цикла for, но функция внутри не будет выполняться и помещаться в очередь задач, поэтому она помещается 5 раз; менее чем через 1000 миллисекунд после 5 выполнения цикла for; после 1000 миллисекунд выполняются все очереди задач Функция в , поэтому она выводит 5 5s.

Сяо Хуан: Какой синтаксис ES6 и ES7 вы знаете?

Сяода: Мммм.promise，await/async，let、const, область блока, стрелочные функции

Сяо Хуан: Знаете ли вы разницу между базовыми типами объектов и эталонными типами объектов?

Сяода: Мммм.

Разделяется на ** базовый тип объекта и ссылочный тип объекта **

Основные типы данных:

С помощью доступа к значению вы можете манипулировать фактическим значением, хранящимся в переменной. Примитивные значения относятся к простым сегментам данных. Существует шесть основных типов данных:undefined、null、string、number、boolean、symbol。

Тип ссылки:

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

Существует несколько видов справки:Object、Array、RegExp、Date、Function, специальный базовый тип упаковки(String、 Number、Boolean)И мономерный встроенный объект(Global、Math).

Сяо Хуан: Ну, вы знаете аргументы?

Сяода: Мммм.argumentsпредставляет собой массивоподобный объект, сlengthсвойство, не может вызывать методы массива ДоступноArray.from()конвертировать

Сяо Хуан: Ну, вы знаете недостатки JSONP?

Сяода: Мммм.JSONтолько поддержкаget,потому чтоscriptтеги можно использовать толькоgetпросить;JSONPСерверная часть должна сотрудничать, чтобы возвращать данные в указанном формате.

Говоря о jsonp, поговорим о междоменном: междоменном (jsonp, ajax)

JSONP:

На Ajax-запросы распространяется политика одного и того же источника, а междоменные запросы не допускаются, но ссылки в атрибуте src тега script могут обращаться к междоменным js-скриптам.Используя эту функцию, сервер больше не возвращает JSON в формате данные, но возвращает сегмент Код js, который вызывает функцию, вызывается в src, таким образом реализуя междоменный доступ.

Говоря об ajax, скажите мне, каков его статус возврата.

0 - (неинициализировано) метод send() не вызывался

1 - (Загрузка) был вызван метод send() и запрос отправляется

2 - (загрузка завершена) выполнение метода send() завершено и все содержимое ответа получено

3 - (интерактивный) ответ анализируется

4 - (Завершено) Содержимое ответа анализируется и может быть вызвано на стороне клиента

Сяо Хуан: Ну, тогда вы говорите о плане мобильной компоновки.

рекомендовать:Общие методы компоновки CSS

рекомендовать:Подробное объяснение использования и различия между rem и em

рекомендовать:Окончательное решение проблемы адаптации к 1px на мобильном терминале

рекомендовать:Как оптимизировать мобильную производительность

рекомендовать:Распространенные проблемы совместимости с мобильными устройствами

• Анализ адаптации мобильной веб-страницы
• (Супер подробный) Сравнительный анализ макета медиазапроса, процента, rem и vw/vh
• Мобильный: недопустимое решение для активного псевдокласса
• Кратко поговорим о масках в CSS — эффективно используйте mask-image
• Мобильный веб-терминал и вопросы для интервью
• Каков принцип Вавилона?
• АСД

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

• Модуль отмечает, что квалифицированный младший фронтенд-инженер должен освоить
• Письменные тестовые вопросы Vue.js решают типичные проблемы в бизнесе
• [Основной] Лично делиться заметками к руководству по разработке интерфейса Vue
• Краткое изложение JavaScript, укрепление фундамента интерфейса
• Всестороннее резюме ES6, необходимого для предварительных интервью
• Личный веб-интерфейс Dada делится 92 вопросами интервью JavaScript с дополнительными ответами
• [И картинки, и тексты, лайкайте и собирайте! ] Переучитесь, чтобы закрепить свою систему знаний Vuejs
• [Карта разума] Фронтенд-разработка — Консолидируйте свою систему знаний JavaScript
• Выпуск 14-Лянган за 7 ночей, обобщающий очки знаний компьютерной сети! (всего 66)
• Это мой первый трюк для новичков в JavaScript.
• локальное хранилище localStorage и sessionStorage
• Функция перетаскивания в HTML5
• Бросьте вызов внешним знаниям HTTP / ECMAScript
• Должен учиться - аудио и видео
• Начальная часть 170 вопросов для интервью + изучение и сортировка ответов (производство совести)
• Интерфейсные интервьюеры HTML5 и тестировщики Вопросы и ответы
• Nezha находится в море, подметая внешний интерфейс Flex для графического обучения
• Приложение для разработки службы определения местоположения Tencent
• [Дополнительно] Интервьюер спросил меня о принципе рендеринга в браузере Chrome (длинный текст на 6000 слов)
• Как только интервьюер подошел, он спросил меня, что лежит в основе Chrome и протокола HTTP (длинный текст из тысячи слов).
• Не ложась спать всю ночь, мы подвели итоги знаний о «холсте HTML5».
• this/call/apply/bind (длинный текст из 10 000 символов)
• HTTP/HTTPS/HTTP2/DNS/TCP/Классический
• контекст выполнения/цепочка областей/закрытие/гражданин первого класса
• Основы создания веб-страницы
• Резюме изучения меча HTML5 относится к внешнему интерфейсу (рекомендуемая коллекция, изображения и тексты)

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️

Нравится, добавляете в избранное и комментируете

яJeskson(Front End End), спасибо:Нравится, добавляете в избранное и комментируете, увидимся в следующий раз! (Если что-то не так с объяснением в этой статье, укажите ☞Спасибо, будем учиться вместе)

Увидимся в следующий раз!

Статья постоянно обновляется, вы можете искать в WeChat "Программист Дораэмон«Первое чтение, Ответить [Информация] имеет первую заводскую информацию, которую я подготовил, эта статьяwww.dadaqianduan.cn/#/был записан

githubвключено, добро пожаловатьStar:GitHub.com/веб-блог VUE/…