Фронтенд классический лицом к лицу

HTTP/HTML/Браузер

Поговорим о http и https

Справочный ответ:Шифрование SSL для https реализовано на транспортном уровне.

Основные понятия http и httpsHTTP: протокол передачи гипертекста, наиболее широко используемый сетевой протокол в Интернете, представляет собой клиентский и серверный стандарт запросов и ответов (TCP), протокол передачи, используемый для передачи гипертекста с сервера www в локальный браузер, что может сделать браузер повысить эффективность и сократить сетевой трафик. https: это http-канал с целью обеспечения безопасности. Короче говоря, это безопасная версия http, то есть добавление уровня ssl под http.Основой безопасности https является ssl, поэтому для подробного содержания шифрования требуется ssl . Основной функцией протокола https является создание канала информационной безопасности для обеспечения передачи данных и подлинности веб-сайта.

Разница между http и https?Данные, передаваемые по протоколу http, не зашифрованы, т. е. являются открытым текстом. Netscape установила протокол ssl для шифрования данных, передаваемых по протоколу http. Короче говоря, протокол https создан на основе протоколов http и ssl и может быть зашифрован для передачи. .и сетевой протокол аутентификации, который является более безопасным, чем протокол http. Основные отличия заключаются в следующем:

1. Для протокола https требуется сертификат ЦС, который стоит дорого.
2. http — это протокол передачи гипертекста, информация передается в виде открытого текста, а https — безопасный протокол передачи с шифрованием ssl.
3. Используются разные способы подключения, и порты тоже разные, вообще говоря, порт протокола http 80, а порт https 443.
4. Ссылка http очень проста и не имеет состояния; протокол https — это сетевой протокол, созданный на основе протокола ssl+http, который может выполнять зашифрованную передачу и аутентификацию и является более безопасным, чем протокол http.

Как работает протокол httpsУ клиента есть следующие шаги при использовании https для связи с веб-сервером:

1. Клиенты используют URL-адрес https для доступа к серверу, а затем просят веб-сервер установить ssl-соединение.
2. После того, как веб-сервер получит запрос клиента, он вернет или передаст сертификат веб-сайта (сертификат содержит открытый ключ) клиенту.
3. Клиент и веб-сервер начинают согласовывать уровень безопасности ssl-соединения, то есть уровень шифрования.
4. Браузер клиента устанавливает сеансовый ключ с уровнем безопасности, согласованным обеими сторонами, а затем шифрует сеансовый ключ с помощью открытого ключа веб-сайта и передает его веб-сайту.
5. Веб-сервер расшифровывает сеансовый ключ своим закрытым ключом.
6. Сервер шифрует связь с клиентом с помощью сеансового ключа.

Преимущества протокола https

1. Используйте протокол https для аутентификации пользователей и серверов, гарантируя, что данные отправляются на правильный клиент и сервер.
2. Протокол https — это сетевой протокол, созданный на основе протокола ssl+http, который может выполнять зашифрованную передачу и аутентификацию личности.Он более безопасен, чем протокол http.Он может предотвратить кражу и изменение данных во время передачи и обеспечить целостность данных.
3. https — наиболее безопасное решение в текущей архитектуре, хотя оно и не является абсолютно безопасным, но значительно увеличивает стоимость атак типа «человек посередине».
4. Google скорректировал алгоритм своей поисковой системы в августе 2014 года, заявив, что «сайт, зашифрованный с помощью https, будет иметь более высокий рейтинг в результатах поиска, чем эквивалентный http-сайт».

Недостатки протокола https

1. При рукопожатии HTTPS время загрузки страницы увеличивается до 50%, а энергопотребление увеличивается с 10% до 20%.
2. Кэширование HTTPS не так эффективно, как HTTP, и увеличивает нагрузку на данные.
3. SSL-сертификаты также стоят денег, а более мощные сертификаты стоят дороже.
4. SSL-сертификат должен быть привязан к IP-адресу. Несколько доменных имен не могут быть привязаны к одному и тому же IP-адресу. Ресурсы IPv4 не могут поддерживать такое потребление.

Трехстороннее рукопожатие TCP, краткое изложение в одном предложении

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

Из рисунка можно получить, что трехэтапное рукопожатие можно упростить как: C инициирует запрос на соединение S для подтверждения, а также инициирует соединение с C для подтверждения нас Давайте посмотрим на роль каждого рукопожатия:

1. Первое рукопожатие: S может только подтвердить, что он может принять сегмент, отправленный C
2. Второе рукопожатие: C может подтвердить, что S получил сегмент, отправленный им самим, и может подтвердить, что он может принять сегмент, отправленный S.
3. Третье рукопожатие: S может подтвердить, что C получил отправленный им сегмент.

ПТС махнул четыре раза

Справочный ответ:

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

1. Клиент TCP отправляет FIN, чтобы закрыть передачу данных от клиента к серверу.
2. Сервер получает этот FIN и отправляет обратно ACK, подтверждая, что порядковый номер равен полученному порядковому номеру плюс 1. Как и SYN, FIN занимает порядковый номер.
3. Сервер закрывает соединение клиента и отправляет клиенту FIN.
4. Клиент отправляет обратно подтверждение сообщения ACK и устанавливает порядковый номер подтверждения равным полученному порядковому номеру плюс 1.

Разница между TCP и UDP

Справочный ответ:

1. TCP ориентирован на соединение, а UDP подключен к соединению, то есть нет необходимости устанавливать соединение перед отправкой данных.
2. TCP обеспечивает надежный сервис. То есть данные, передаваемые по TCP-соединению, не содержат ошибок, не теряются, не дублируются и поступают по порядку; UDP обеспечивает доставку с максимальной эффективностью, т. е. надежная доставка не гарантируется. А поскольку TCP надежен, ориентирован на соединение и не теряет данные, он подходит для обмена большими объемами данных.
3. TCP ориентирован на байты, UDP — на пакеты, и перегрузка сети не снизит скорость отправки (поэтому будут потери пакетов для приложений реального времени, таких как IP-телефония, видеоконференции и т. д.).
4. TCP может быть только 1-к-1, UDP поддерживает 1-к-1, 1-ко-многим.
5. Заголовок TCP больше 20 байт, а UDP всего 8 байт.
6. TCP — это надежный транспорт, ориентированный на соединение, в то время как UDP ненадежен.

Реализация и применение WebSocket

Справочный ответ:

Что такое веб-сокет?WebSocket — это протокол в HTML5, который поддерживает постоянное соединение, в то время как протокол http не поддерживает постоянное соединение. http1.0 А HTTP1.1 не поддерживает постоянные ссылки, поддерживает активность в HTTP1.1, объединяет несколько HTTP-запросов в 1.

Что за протокол WebSocket и в чем его преимущества?Жизненный цикл HTTP определяется запросом, то есть запрос является ответом, затем в Http1.0 В протоколе этот Http запрос закончился. Улучшено в Http1.1, да есть связь: Keep-alive, то есть в Http-подключении, вы можете отправлять несколько запросов и получать несколько ответов. Но нужно помнить, что в Http Запросу может соответствовать только один Ответ, и этот Ответ Он пассивен и не может быть активно инициирован.

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

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

Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
//多了下面2 个属性：
1.Upgrade:webSocket
2.Connection:Upgrade
//告诉服务器发送的是websocket
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

Метод HTTP-запроса, метод HEAD

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

Как напрямую загрузить URL-адрес изображения после доступа к нему?

Справочный ответ:В возвращаемом заголовке запроса важным параметром, используемым для синтаксического анализа браузера, является возвращаемый http в документе OSS API. Заголовок, параметры, определяющие поведение пользователя при загрузке.

下载的情况下：
1. x-oss-object-type:
Normal
2. x-oss-request-id:
598D5ED34F29D01FE2925F41
3. x-oss-storage-class:
Standard

Разговор о веб-качестве (доступность)

Справочный ответ:Веб-сайт, которым могут пользоваться люди с ограниченными возможностями, можно назвать удобным (доступным) веб-сайтом. Отключенные относятся к пользователям, которые отключены или нездоровы. Используйте атрибут alt:<img src="person.jpg" alt="this is a person"/>Иногда браузер не может отобразить изображение. Конкретные причины: Пользователь отключил отображение изображения Браузер представляет собой мини-браузер, не поддерживающий графическое отображение. Браузер голосовой (для слепых и слабовидящих) Если вы используете атрибут alt, браузер может по крайней мере отображать или читать описание изображения.

Расскажите о нескольких очень практичных методах объекта атрибутов спецификации?

Справочный ответ:Что такое Bom Bom — это объект браузера. Каковы обычно используемые свойства Bom?

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

location.href-- 返回或设置当前文档的URL
location.search -- 返回URL 中的查询字符串部分。例
// 如http://www.xxx.com/xxx.go?id=5&name=xxx 返回包括(?)后面的内容?id=5&name=xxx
location.hash -- 返回URL#后面的内容，如果没有#，返回空
location.host -- 返回URL 中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL 中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL 的域名后的部分。例如http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL 中的端口部分。例如http://www.dreamdu.com:8080/xhtml/ 返回 8080
location.protocol -- 返回URL 中的协议部分。例如http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，并且在history 对象的地址列表中移除这个
URL location.replace(url);
location.reload() -- 重载当前页面

объект истории

history.go() -- 前进或后退指定的页面数history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页

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

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

Разговор о API перетаскивания HTML5

Справочный ответ:

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

Давайте поговорим о http2.0

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

Краткое содержание:

1. http2.0 — первое обновление после http1.0, выпущенного в 1999 году. Повышение скорости доступа (запрос ресурсов занимает меньше времени и быстрее по сравнению с http1.0) Позволяет мультиплексирование: мультиплексирование позволяет одновременно отправлять несколько запросов-ответов по одному соединению HTTP/2.
2. Улучшение: В http1.1 браузерный клиент имеет определенный лимит (количество подключений) на запросы под одним и тем же доменным именем одновременно, и при превышении лимита он будет заблокирован.
3. Двоичное кадрирование: HTTP 2.0 будет разделять всю передаваемую информацию на более мелкие сообщения или кадры и выполнять сжатие заголовков в двоичном кодировании для отправки на стороне сервера.

Дополнение 400 и 401, 403 коды состояния

Справочный ответ:

1. 400 Код состояния: неверный запрос.причина:Имена полей и типы полей данных, отправляемых внешним интерфейсом, не согласуются с сущностями во внутреннем. Данные, отправляемые внешним интерфейсом на серверную часть, должны иметь строковый тип json, но внешний -end не преобразует объект JSON.stringify в строку.Решение:Сравните имя поля, поддерживайте согласованность и сериализуйте объект obj через JSON.stringify.
2. Код состояния 401: Текущий запрос требует аутентификации пользователя.
3. Код состояния 403: сервер получил запрос, но отказался его выполнить.

Причина, по которой fetch отправляет 2 запроса

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

Разница между куки и сессиями, разница между локальным хранилищем и сессионным хранилищем

Справочный ответ:Cookie, sessionStorage и localStorage имеют нечто общее: все они хранятся на стороне браузера и имеют одно и то же происхождение.

Файлы cookie и сеансы:Для хранения информации о пользователе могут использоваться как файлы cookie, так и сеансы. Файлы cookie хранятся на стороне клиента, а сеансы — на стороне сервера. Поскольку файлы cookie, хранящиеся на стороне клиента, могут быть украдены, файлы cookie обычно используются для хранения конфиденциальной информации, такой как как тема веб-сайта, установленная пользователем. Конфиденциальная информация хранится в сеансе, например, данные для входа пользователя, сеанс может храниться в файле, базе данных, памяти, файл cookie может быть установлен, когда сервер отвечает, или клиент может установить файл cookie через JS и он будет в http при запросе Заголовок отправляется клиенту.Файл cookie обычно имеет ограничение на размер на клиенте, обычно 4K.Многие браузеры ограничивают сайт, чтобы сохранить максимум 20 файлов cookie.

Какие методы кодирования существуют для файлов cookie?encodeURI（）

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

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

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

конкретное отличие

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

1. Жизненный цикл:

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

2. Хранить данные:

• Куки: около 4k
• Localstorage и Sessionstorage: можно сохранить 5M информации

3. HTTP-запрос:

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

4. Простота использования:

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

5. Сценарии применения:

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

Поговорим о веб-воркерах

Справочный ответ:На HTML-странице, если состояние страницы не соответствует при выполнении сценария, страница не становится соответствующей до тех пор, пока не будет выполнен сценарий. Веб-воркеры — это js, работающие в фоновом режиме, независимые от других скриптов, и не влияющие на производительность вашей страницы. И результат отправляется обратно в основной поток через postMessage. Таким образом, при выполнении сложных операций основной поток не будет блокироваться. Как создать веб-воркер: Определите поддержку браузером веб-воркеров, создайте файлы веб-воркеров (js, функции обратной передачи и т. д.) и создайте объекты веб-воркеров.

Понимание семантических тегов HTML

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

Вы часто используете HTML5 и CSS3? Вы понимаете их новые свойства? Вы использовали его в проекте?

Справочный ответ:

HTML5:

• 8 семантических элементов заголовок раздел нижний колонтитул в стороне навигация основная статья рисунок
• Метка элемента содержимого подчеркивает прогресс прогресса
• Новая форма управления каландром дата время адрес электронной почты поиск URL
• Новый тип ввода: цвет, дата, дата, время, дата и время, локальная электронная почта.
• удалить устаревший тег большой набор рамок шрифта
• Рисование на холсте, поддерживает встроенный SVG. Поддержка MathML
• Мультимедийная дорожка для встраивания аудио-видеоисточника
• Локальное автономное хранилище, список файлов, которые должны храниться автономно локально в файле конфигурации манифеста.
• веб-хранилище. локальное хранилище, хранилище сеансов

css3:

• границы CSS3, такие как border-radius, box-shadow и т. д.;
• Фон CSS3, такой как Background-size, Background-Origin и т.д.;
• CSS3 2D, 3D преобразование, такое как преобразование и т.д.;
• Анимации CSS3, такие как анимация и т. д.Ссылаться на

что такое айфрейм? Каковы недостатки?

Справочный ответ:

• Определение: элемент iframe создает iframe, содержащий другой документ.
• Совет: Вы можете поместить текст подсказки между ними, чтобы напомнить некоторым браузерам, которые не поддерживают iframes.
• недостаток:

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

Какова роль Doctype Как отличить строгий режим от неразборчивого режима? Что они имеют в виду?

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

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

Как файлы cookie предотвращают XSS-атаки

Справочный ответ:XSS (межсайтовый скриптинг) относится к встраиванию javascript-скриптов злоумышленником в возвращаемый HTML-код, чтобы смягчить эти Атака должна быть сопоставлена ​​с заголовком HTTP,set-cookie： httponly-Этот атрибут предотвращает XSS, он предотвращает доступ сценариев javascript к файлам cookie.secure -Этот атрибут сообщает браузеру отправлять файлы cookie только при запросе HTTPS. Результат должен быть таким:Set-Cookie=<cookie-value>.....

Разница между куки и сессиями

Справочный ответ:

1. Данные cookie хранятся на стороне клиента, а данные сеанса — на стороне сервера.
2. Файлы cookie не очень безопасны. Другие могут анализировать файлы cookie, хранящиеся локально, и выполнять обман файлов cookie. Учитывая безопасность, следует использовать сеанс.
3. Установка времени файла cookie может привести к истечению срока действия файла cookie. Но с помощью session-destory() мы уничтожим сеанс.
4. Сессия будет сохранена на сервере в течение определенного периода времени. Когда количество посещений увеличится, это поднимет производительность вашего сервера.Чтобы снизить производительность сервера, вы должны использовать файлы cookie.
5. Данные, сохраняемые одним файлом cookie, не могут превышать 4 КБ, и многие браузеры ограничивают сайт сохранением не более 20 файлов cookie. (Объекты сеанса не имеют ограничений на объем хранимых данных, которые могут содержать более сложные типы данных).

ОТДЫХ в одном предложении

Справочный ответ:Это использование URL для поиска ресурсов и использование HTTP для описания операций.

Расскажите о видовом экране и мобильной верстке.

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

Задержка клика на ios 300мс, почему и как решить?

Справочный ответ:

1. Грубо, зум отключен<meta name="viewport" content="width=device-width, user-scalable=no">
2. При использовании FastClick принцип таков: после обнаружения события touchend событие click будет смоделировано немедленно, а событие фактического запуска браузера через 300 миллисекунд блокируется.

параметры addEventListener

Справочный ответ:

addEventListener(event, function, useCapture)
// 其中，event 指定事件名；function 指定要事件触发时执行的函数；
// useCapture 指定事件是否在捕获或冒泡阶段执行。

Ввести известные коды состояния, возвращаемые http

Справочный ответ:

100 Continue 继续。客户端应继续其请求
101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更
高级的协议，例如，切换到HTTP 的新版本协议
200 OK 请求成功。一般用于GET 与POST 请求
201 Created 已创建。成功请求并创建了新的资源
202 Accepted 已接受。已经接受请求，但未处理完成
203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta 信息不在原
始的服务器，而是一个副本
204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，
可确保浏览器继续显示当前文档
205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文
档视图。可通过此返回码清除浏览器的表单域
206 Partial Content 部分内容。服务器成功处理了部分GET 请求
300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特
征与地址的列表用于用户终端（例如：浏览器）选择
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会
包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI 代替
302 Found 临时移动。与301 类似。但资源只是临时被移动。客户端应继续使用原有
URI
303 See Other 查看其它地址。与301 类似。使用GET 和POST 请求查看
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回
任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返
回在指定日期之后修改的资源
305 Use Proxy 使用代理。所请求的资源必须通过代理访问
306 Unused 已经被废弃的HTTP 状态码
307 Temporary Redirect 临时重定向。与302 类似。使用GET 请求重定向
400 Bad Request 客户端请求的语法错误，服务器无法理解
401 Unauthorized 请求要求用户的身份认证
402 Payment Required 保留，将来使用
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站
设计人员可设置"您所请求的资源无法找到"的个性页面
405 Method Not Allowed 客户端请求中的方法被禁止
406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
407 Proxy Authentication Required 请求要求代理的身份认证，与401 类似，但请求者
应当使用代理进行授权
408 Request Time-out 服务器等待客户端发送的请求时间过长，超时
409 Conflict 服务器完成客户端的PUT 请求是可能返回此代码，服务器处理请求时发
生了冲突
410 Gone 客户端请求的资源已经不存在。410 不同于404，如果资源以前有现在被永
久删除了可使用410 代码，网站设计人员可通过301 代码指定资源的新位置
411 Length Required 服务器无法处理客户端发送的不带Content-Length 的请求信息
412 Precondition Failed 客户端请求信息的先决条件错误
413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。
为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则
会包含一个Retry-After 的响应信息
414 Request-URI Too Large 请求的URI 过长（URI 通常为网址），服务器无法处理
415 Unsupported Media Type 服务器无法处理请求附带的媒体格式
416 Requested range not satisfiable 客户端请求的范围无效
417 Expectation Failed 服务器无法满足Expect 的请求头信息
500 Internal Server Error 服务器内部错误，无法完成请求
501 Not Implemented 服务器不支持请求的功能，无法完成请求
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接
收到了一个无效的响应
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)
Date	Дата и время отправки сообщения (отправлено в формате «Дата HTTP», как определено в RFC 7231)
Expect	Указывает, что клиент просит сервер выполнить определенное действие
From	Адрес электронной почты пользователя, который инициировал этот запрос
Host	Указывает доменное имя сервера и номер порта, который прослушивает сервер. Если запрошенный порт является стандартным портом (80) соответствующей службы, номер порта можно не указывать.
If-Match	Соответствующая операция выполняется только в том случае, если объект, предоставленный клиентом, соответствует соответствующему объекту на сервере. В основном используется в таких методах, как PUT, для обновления ресурса, только если он не был изменен с момента последнего обновления пользователем.
If-Modified-Since	Разрешить возвращать 304 Not Modified, если соответствующий ресурс не был изменен
If-None-Match	Допускается возврат 304 NotModified ( 304 NotModified ), если соответствующий контент не был изменен, см. тег объекта протокола передачи гипертекста.
If-Range	Если объект не был изменен, верните отсутствующую часть или части. В противном случае вернуть всю новую сущность
If-Unmodified-Since	Отправлять ответ только в том случае, если сущность не изменялась с определенного времени.
Max-Forwards	Ограничивает количество раз, которое это сообщение может быть перенаправлено прокси-серверами и шлюзами.
Origin	Инициировать запрос на совместное использование ресурсов между источниками (этот запрос требует, чтобы сервер добавил к ответу заголовок Access-Control-Allow-Origin, указывающий источник, разрешенный контролем доступа).
Pragma	В зависимости от конкретной реализации эти поля могут создаваться в любой точке цепочки запроса/ответа.
Proxy-Authorization	Информация об аутентификации, используемая для аутентификации на прокси.
Range	Указывает, что запрашивается часть объекта, а смещение в байтах начинается с 0.
Referer	Указывает на предыдущую страницу, посещенную браузером, которую можно рассматривать как ссылку на ранее посещенную страницу, которая привела браузер на текущую страницу. Referer на самом деле является словом Referrer, но RFC неправильно написал его при создании стандарта, а позже по ошибке использовал Referer.
TE	Кодировка передачи, которую браузер ожидает получить: можно использовать заголовок ответа
Transfer-Encoding	Значение (также может использовать прицепы »представляет собой блочный режим при передаче данных) используется для указания браузера, предназначенного для получения некоторых дополнительных полей после последнего размера блока нуля.
User-Agent	Строка личности браузера
Upgrade	Требуется обновление сервера до более высокой версии протокола.
Via	Сообщите серверу, какие прокси сделали этот запрос.
Warning	Общее предупреждение о том, что в теле содержимого объекта может быть ошибка.

сильный, согласованный кеш

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

Типы	Получить форму ресурса	код состояния	отправить на сервер
Сильный кеш	получить из кеша	200 (из кеша)	Нет, получить напрямую из кеша
Согласовать кеш	получить из кеша	304 (без изменений)	Да, сообщить серверу, доступен ли кеш

• Сильные поля, связанные с кешем, включают в себя истечение срока действия и управление кешем. Если cache-control и expires существуют одновременно, cache-control имеет приоритет над expires.
• Поля, связанные с согласованным кэшем, включают Last-Modified/If-Modified-Since, Etag/If-None-Match.

Сильное кэширование, согласование кэширования, когда что использовать

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

Вы можете обратиться к этой статье, Лично мне нравится "HTTP сильный кеш и кеш согласования"

Разговор 304

Справочный ответ:304: Сервер ДОЛЖЕН вернуть этот код состояния 304, если клиент отправил условный запрос GET и запрос был разрешен, но содержимое документа (с момента последнего доступа или по условиям запроса) не изменилось.

Разница между 301 и 302

Справочный ответ:

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

Оптимизация внешнего интерфейса

Справочный ответ:

1. Сокращение запросов: объединение ресурсов, сокращение HTTP-запросов, сжатие minify/gzip, webP, lazyLoad.
2. Ускорение запросов: pre-resolve DNS, уменьшение количества доменных имен, параллельная загрузка, раздача CDN.
3. Кэш: запрос кэша протокола HTTP, манифест автономного кэша, локальное хранилище автономного кэша данных.
4. Рендеринг: оптимизация JS/CSS, порядок загрузки, рендеринг на стороне сервера, конвейер.

Разница между GET и POST

Справочный ответ:

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

Добавлено: поддерживаемые 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;
}

Введите URL-адрес в адресную строку, и страница отобразится. Что происходит посередине?

Справочный ответ:Это обязательный вопрос на собеседовании. После ввода url сначала нужно найти ip сервера доменного имени url.Чтобы найти этот ip, браузер сначала будет искать кеш, чтобы увидеть, есть ли запись в кеше.Запись поиска кеша : кеш браузера - "кэш системы" - "кэш роутера" Если записи в кеше нет, проверьте, есть ли запись в файле hosts системы. Если нет, запросите DNS-сервер. После получения ip-адреса сервера , браузер создает http-запрос в соответствии с IP-адресом и соответствующим номером порта.Это сообщение запроса будет включать информацию об этом запросе, в основном метод запроса, описание запроса и данные, прикрепленные к запросу, и инкапсулировать запрос http в пакет tcp, пакет tcp будет проходить через транспортный уровень, сетевой уровень, уровень канала передачи данных, физический уровень. Уровень поступает на сервер, сервер анализирует запрос на ответ и возвращает соответствующий html в браузер, потому что html — это древовидной структуры браузер строит дерево DOM в соответствии с html, и если он встречает JS-скрипт во время построения дерева DOM, при подключении к внешнему JS он прекращает построение дерева DOM для выполнения и загрузки соответствующего кода, который приведет к блокировке, поэтому рекомендуется размещать код JS за кодом html, а затем создавать его в соответствии с внешним сопоставлением, внутренним сопоставлением и встроенными стилями.Дерево объектной модели CSS Дерево CSSOM, объединенное с DOM-дерево в дерево рендеринга после завершения построения.Главное здесь – исключить невизуальные узлы, такие как скрипт, метатеги и узлы, отображение которых отсутствует, а затем выполнить верстку.В основном определяется верстка.Позиция и размер каждого элемента с последующим рендерингом страницы, потому что html-файл будет содержать такие ресурсы, как изображения, видео, аудио и т. д. В процессе анализа DOM будут выполняться параллельные загрузки при их обнаружении, и Браузер будет загружать каждый домен параллельно.Количество ограничено, обычно 4-6.Конечно, среди всех этих запросов нам также нужно обратить внимание на кеш.Кэш обычно управляется полями заголовка, такими как Cache-Control, Last-Modify и Expires. Разница между Cache-Control и Expires заключается в том, что Cache-Control использует относительное время, а Expires использует абсолютное время на стороне сервера.Из-за проблемы с разницей во времени обычно используется Cache-Control.При запросе этих кэшированных данных он будет сначала проверьте, истек ли срок его действия, если нет, используйте напрямую локальный кеш. Если срок его действия истек, запросите и проверьте, был ли файл изменен на сервере. Если значение ETag было установлено в последнем ответе, оно будет передано server в качестве значения If-None-Match в этом запросе. Проверка, если она непротиворечива, продолжите проверку Last-Modified, если ETag не установлен, непосредственно проверьте Last-Modified, а затем решите, следует ли возвращать 304.

Ввод URL-адреса для загрузки страницы показывает, что произошло?

Справочный ответ:

• разрешение DNS
• TCP-соединение
• отправить HTTP-запрос
• Сервер обрабатывает запрос и возвращает HTTP-сообщение.
• Браузер анализирует отображаемую страницу
• соединение завершено

Когда браузер сгенерирует страницу, какие два дерева будут сгенерированы?

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

Общие заголовки HTTP

Справочный ответ:Заголовки HTTP могут использоваться как общие заголовки, заголовки запросов, заголовки ответов и заголовки объектов. связаны с кэшированием. Например, заголовок ответа if-Modified-Since уникален в ответном сообщении, таком как set-cookie, и расположение, связанное с перенаправлением. Заголовок объекта используется для описания части объекта, например разрешить для описания исполняемого метода запроса, content-type описывает тип субъекта, а content-Encoding описывает кодировку тела.

Сетевая атака и предотвращение csrf и xss

Справочный ответ:

• CSRF: подделка межсайтовых запросов, которую можно понимать как злоумышленник, крадущий личность пользователя и отправляющий вредоносные запросы от имени пользователя. Веб-сайт, этот веб-сайт запрашивает посещение веб-сайта, на который вы только что вошли, и отправляет вредоносный запрос. время генерируется CSRF.Например, веб-сайт, который совершает атаку, использует изображение, но ссылка на это изображение может изменить базу данных.В это время злоумышленник может оперировать базой данных от имени пользователя.Метод защиты это: используйте код подтверждения, проверьте ссылку заголовка https и используйте токен.
• XSS: атака с использованием межсайтовых сценариев, что означает, что злоумышленник проводит атаки, когда пользователи просматривают веб-страницы, внедряя вредоносные сценарии, такие как получение файлов cookie или другой идентификационной информации пользователя, которую можно разделить на тип хранилища и анти-тип. злоумышленник вводит некоторые данные и сохраняет их в базе данных. Когда другие браузеры их видят, атакуйте их. Если это отражается, они не сохраняются в базе данных. Это часто выражается в том, что код атаки помещается в параметр запроса URL-адреса. Если он является защитным, установите атрибут httpOnly для файла cookie, проверяет ввод пользователя и фильтрует специальные символы.

Как посмотреть, как работает сайт

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

Представьте протокол HTTP (функции)

Справочный ответ:HTTP — это коммуникационный протокол, основанный на TCP/IP для передачи данных (файлы HTML, файлы изображений, результаты запросов и т. д.) HTTP — это объектно-ориентированный протокол, относящийся к прикладному уровню Благодаря своей простоте и скорости он подходит для распределенная гипермедийная информационная система. Он был предложен в 1990 году и после нескольких лет использования и развития постоянно совершенствовался и расширялся. Шестая редакция HTTP/1.0 в настоящее время используется в WWW, работа по стандартизации HTTP/1.1 продолжается, и было предложено предложение HTTP-NG (Next Generation of HTTP). Протокол HTTP работает по архитектуре клиент-сервер. В качестве HTTP-клиента браузер отправляет все запросы HTTP-серверу, т. е. веб-серверу, через URL-адрес. Веб-сервер отправляет ответную информацию клиенту в соответствии с полученным запросом.

оптимизация веб-производительности

Справочный ответ:

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

CSS

Справочный ответ:Введение: это прямоугольная область, используемая для размещения элементов на странице. Блочные модели в CSS включают блочную модель IE и стандартную блочную модель W3C. box-sizing (есть 3 значения): border-box, padding-box, content-box.

Стандартная модель коробки:

Коробочная модель IE:

Отличие: Как видно из рисунка, основное различие между двумя моделями коробок заключается в размахе ширины. В стандартной блочной модели ширина относится к ширине части содержимого, а в блочной модели IE ширина относится к ширине содержимого.content+padding+borderШирина этих трех частей, так что это имеет значение при расчете ширины всей коробки. Отличия: Ширина коробки стандартной модели коробки:左右border+左右padding+widthШирина окна модели блока IE: ширина Представлено в CSS3box-sizingАтрибуты,box-sizing:content-box;представляет стандартную блочную модель w3c,box-sizing:border-boxПредставляет блочную модель IE. Наконец, как мы упоминали ранее,box-sizing:padding-box, ширина значения этого свойства включает левый и правыйpadding+width.

нарисуйте линию 0,5px

Справочный ответ:

采用meta viewport 的方式
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
采用border-image 的方式
采用transform: scale()的方式

Разница между тегом ссылки и тегом импорта

Справочный ответ:

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

Разница между переходом и анимацией

Справочный ответ:Большинство свойств анимации и перехода одинаковы. Они оба изменяют значение свойства элемента с течением времени. Основное различие между ними заключается в том, что переходу необходимо инициировать событие для изменения свойства, в то время как анимации не нужно инициировать какое-либо событие. событие для изменения во времени.Значение атрибута, и переход составляет 2 кадра, от от .... до, и анимация может быть кадр за кадром.

Гибкая компоновка

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

Ссылка на статью:Уууу. Руан Ифэн.com/blog/2015/0…

Уууу. Руан Ифэн.com/blog/2015/0…

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

Справочный ответ:

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

Эти элементы генерируют BFC:

• корневой элемент
• элементы, у которых float не равно none
• Элементы с фиксированной и абсолютной позицией
• Элементы, отображаемые как встроенный блок, табличная ячейка, табличный заголовок, гибкий, встроенный гибкий
• элементы, переполнение которых не видно

Как центрировать по вертикали

Справочный ответ:

// (1)margin:auto 法
css:
div{
    width: 400px;
    height: 400px;
    position: relative;
    border: 1px solid #465468;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
html:
<div>
    <img src="mm.jpg">
</div>
// 定位为上下左右为0，margin：0 可以实现脱离文档流的居中.

// (2)margin 负值法
.container{
    width: 500px;
    height: 400px;
    border: 2px solid #379;
    position: relative;
}
.inner{
    width: 480px;
    height: 380px;
    background-color: #746;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -190px; /*height 的一半*/
    margin-left: -240px; /*width 的一半*/
}
// 补充：其实这里也可以将marin-top 和margin-left 负值替换成，
// transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脱离文档流的）
//设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。
div{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

//(4)利用flex
//将父元素设置为display:flex，并且设置align-items:center;justify-content:center;
.container{
    width: 300px;
    height: 200px;
    border: 3px solid #546461;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.inner{
    border: 3px solid #458761;
    padding: 20px;
}

О разнице между анимацией JS и анимацией css3

Справочный ответ:Поток рендеринга делится наmain threadа такжеcompositor thread, если анимация css меняется толькоtransformа такжеopacity, тогда вся анимация CSS может бытьcompositor trheadсделано (пока анимация JS будетmain threadВыполните, затем начнитеcompositor threadпереходите к следующему шагу), обратите особое внимание на то, что при измененииtransformа такжеopacityНе будет компоновки или покраски.

разница:

• Функциональный охват, JS больше, чем CSS
• Сложность реализации/рефакторинга варьируется, CSS3 проще, чем JS, а направление скачка производительности фиксировано.
• Для низкоуровневых браузеров с низкой частотой кадров css3 может естественным образом деградировать.
• CSS-анимации имеют встроенную поддержку событий
• css3 имеет проблемы с совместимостью

Поговорим о блочных элементах и ​​линейных элементах.

Справочный ответ:

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

Многоточие в тексте для многострочных элементов

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3  // 设置成几就在第几行显示省略号
overflow:hidden

видимость = скрыта, непрозрачность = 0, отображение: без разницы

Справочный ответ:

• opacity=0, элемент скрыт, но макет страницы не изменится, и если элемент связан с некоторыми событиями, такими как событие щелчка, то щелчок по области также может вызвать событие щелчка.
• visibility=hidden, элемент скрыт, но макет страницы не меняется, но и не вызывается событие, к которому был привязан элемент.
• display=none, скрывает элемент и изменяет макет страницы, что можно понимать как удаление элемента на странице.

Проблема перекрытия двойных полей (коллапс полей)

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

Результат складывания:

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

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

Справочный ответ:

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

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

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

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

Позиционирование по умолчанию Статическое:По умолчанию. Без позиционирования элемент появляется в обычном потоке (игнорируяtop, bottom, left, right 或者z-indexутверждение).наследовать:Указывает, что он должен наследовать от родительского элементаpositionСтоимость имущества.

очистить поплавок

Справочный ответ:

1. Используйте пустые элементы с четким атрибутом

/**
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS 中予.clear{clear:both;}
属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
*/
.news {
  background-color: gray;
  border: solid 1px black;
 }

.news img {
  float: left;
 }

.news p {
  float: right;
 }

.clear {
  clear: both;
 }

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
</div>
/**
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
*/

2. Использование свойства переполнения CSS

/**
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在IE6 中还
需要触发hasLayout ，例如为父元素设置容器宽高或设置zoom:1。
在添加overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动
的效果。
*/
.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;  *zoom: 1;
 }

.news img {
  float: left;
 }

.news p {
  float: right;
 }

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

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

// 什么都不做，给浮动元素后面的元素添加clear 属性。
.news {
  background-color: gray;
  border: solid 1px black;
}

.news img {
  float: left;
}

.news p {
  float: right;
}

.content{
  clear:both;
}

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="content"></div>
</div>

5. Использование CSS-псевдоэлемента :after

/**
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，
可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素
实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
*/
.news {
  background-color: gray;
  border: solid 1px black;
 }

.news img {
  float: left;
  }

.news p {
  float: right;
 }

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
 }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
 }

<div class="news clearfix">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

Обработка переполнения в CSS3

Справочный ответ:Свойство text-overflow, значение clip — обрезать текст, многоточие — отображать многоточие для обозначения обрезанного текста; string, чтобы использовать данную строку для представления обрезанного текста.

элемент float, что такое display

Справочный ответ:дисплей блокируется

Как скрыть элемент на странице

Справочный ответ:

display:none; visibility:hidden; opacity: 0; position 移到外部，z-index 涂层遮盖等等
1. opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定
一些事件，如click 事件，那么点击该区域，也能触发点击事件的
2. visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已
经绑定的事件
3. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元
素删除掉。

Реализация трехколоночного макета, напишите как можно больше, когда плавающий макет, имеет ли какой-либо эффект порядок генерации трех div

Справочный ответ:

1. использоватьfloat+margin：установить divfloat：left, добавить свойство левого divmargin-right：leftи центральный интервал px, право добавить атрибуты в divmargin-left：leftСумма ширины центра и центра плюс интервал.
2. использовать float+overflow：установить divfloat：left, а затем установите правильный divoverflow:hidden. Таким образом, две коробки плавают, а другая коробка запускает BFC для достижения самоадаптации.
3. использоватьposition：настройки родительского блокаposition：relative, установлены три дочерних элементаposition：absolute, для этого необходимо рассчитать ширину и интервал поля, чтобы установить положение, совместимость лучше.
4. Реализация с использованием таблицы: настройки родительского divdisplay：table,настраиватьborder-spacing：10px//Устанавливаем интервал, значение необязательное, устанавливается дочерний divdisplay:table-cell, этот метод имеет хорошую совместимость и подходит для случаев, когда высота и ширина неизвестны, но поля недействительны, а расчетный интервал более проблематичен.
5. Реализация Flex: настройки родительского divdisplay：flex; настройки div слева и по центруmargin-right; Затем правый div устанавливается на flex: 1; таким образом, правый адаптивный, но совместимость flex не очень хорошая.
6. Реализация сетки: настройки родительского divdisplay：grid,настраиватьgrid-template-columnsАтрибут, фиксированная ширина первого столбца, ширина второго столбца, автоматический ввод третьего столбца,

кальциевое свойство

Справочный ответ:Пользователь Calc динамически вычисляет значение длины Любое значение длины можно рассчитать с помощью функции calc(). Необходимо зарезервировать пробел до и после оператора, например: width: calc(100% - 10px);

display: в чем разница между таблицей и собственной таблицей

Справочный ответ: display:tableСоответствует самой таблице, разница в том, чтоdisplay：tableОбъявление css может сделать html-элемент и его дочерние узлы похожими на элементы таблицы, используя компоновку css на основе таблицы, чтобы мы могли легко определить границу ячейки, фон и другие стили без использования таблицы.Семантические проблемы, вызванные метками вкладок. . Причина, по которой элемент table теперь постепенно устраняется, заключается в том, что файл, написанный с помощью div+css, меньше, чем файл, написанный с помощью таблицы, и таблица должна отображаться после полной загрузки страницы, div отображается построчно. , и таблица отображается построчно.Слишком много вложенности, нет краткости div.

метод позиционирования по z-индексу

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

Разница между высотой строки и высотой

Справочный ответ:Высота строки обычно относится к высоте между верхней и нижней строками фрагмента текста в макете, который установлен для шрифта. Обычно относится к общей высоте контейнера.

Установите цвет фона элемента, какие области будут заполнены цветом фона?

Справочный ответ:Цвет фона, заданный параметром background-color, заполняет содержимое, отступы и границы элемента.

Приоритет селекторов атрибутов и селекторов псевдоклассов

Справочный ответ:Селекторы атрибутов и селекторы псевдоклассов имеют одинаковый приоритет

Разница между встроенным блоком, встроенным и блочным; почему img является встроенным и также может устанавливать ширину и высоту

Справочный ответ:

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

Реализовать эффект вращения монеты с помощью css

Справочный ответ:

#euro {
    width: 150px;
    height: 150px;
    margin-left: -75px;
    margin-top: -75px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    animation: spin 2.5s linear infinite;
}
.back {
    background-image: url("/uploads/160101/backeuro.png");
    width: 150px;
    height: 150px;
}
.middle {
    background-image: url("/uploads/160101/faceeuro.png");
    width: 150px;
    height: 150px;
    transform: translateZ(1px);
    position: absolute;
    top: 0;
}
.front {
    background-image: url("/uploads/160101/faceeuro.png");
    height: 150px;
    position: absolute;
    top: 0;
    transform: translateZ(10px);
    width: 150px;
}
@keyframes spin {
    0% {
    transform: rotateY(0deg);
    }
    100% {
    transform: rotateY(360deg);
    }
}

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

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

1. добавлять или удалять видимые элементы DOM,
2. Изменение размера и положения элемента
3. инициализация страницы браузера,
4. При изменении размера окна браузера перекомпоновка обязательно приведет к перерисовке, но перерисовка не обязательно ведет к перекомпоновке.

Методы уменьшения перерисовки оплавления:

1. не делать DOM-запросы при изменении информации о макете,
2. Используйте CSSText, атрибут одноразового изменения имени класса
3. использовать фрагмент
4. Для элементов, которые перекомпоновываются несколько раз, например анимации. Используйте абсолютное позиционирование, чтобы выйти из потока документа, чтобы оно не влияло на другие элементы.

Синтаксис и основная польза box-sizing

Справочный ответ:

box-sizing 规定两个并排的带边框的框，语法为box-sizing：content-box/border-box/inherit
content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框
border-box：为元素设定的宽度和高度决定了元素的边框盒，
inherit：继承父元素的box-sizing

JavaScript

Непонимание длины параметра запроса на получение

Справочный ответ:Непонимание: мы часто говорим, что на размер параметров GET-запроса существует ограничение, а размер параметра POST-запроса не ограничен. На самом деле, протокол HTTP никогда не определял, как длина ограничения длины запроса GET/POST. Ограничения для параметров запроса GET — это источники ограничения длины URL-адреса с помощью браузера или веб-сервера, браузера или веб-сервера. Для того чтобы уточнить это понятие, мы должны еще раз подчеркнуть следующее:

1. Протокол HTTP не определяет ограничение длины для GET и POST.
2. Показана максимальная длина для GET, поскольку браузеры и веб-серверы ограничивают длину URI.
3. Различные браузеры и веб-серверы имеют разные ограничения максимальной длины.
4. Для поддержки IE максимальная длина составляет 2083 байта, а если поддерживается только Chrome, максимальная длина составляет 8182 байта.

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

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

Разговор о закрытии

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

Разговор о создании классов и наследовании

Справочный ответ:

// 1）类的创建（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 类，实力化生成对象后，有方法和属性。
//（2）类的继承——原型链继承
// --原型链继承
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
/**
介绍：在这里我们可以看到new 了一个空对象,这个空对象指向Animal 并且Cat.prototype
指向了这个空对象，这种就是基于原型链的继承。
特点：基于原型链，既是父类的实例，也是子类的实例
缺点：无法实现多继承
*/
//（3）构造继承：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
function Cat(name){
    Animal.call(this);
    this.name = name || 'Tom';
}
// 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
// 特点：可以实现多继承
// 缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。
/**
（4）实例继承和拷贝继承
实例继承：为父类实例添加新特性，作为子类实例返回
拷贝继承：拷贝父类元素上的属性和方法
上述两个实用性不强，不一一举例。
*/
/**
（5）组合继承：相当于构造继承和原型链继承的组合体。通过调用父类构造，继承父
类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
*/
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
// 特点：可以继承实例属性/方法，也可以继承原型属性/方法
// 缺点：调用了两次父类构造函数，生成了两份实例
/**
（6）寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的
构造的时候，就不会初始化两次实例方法/属性
*/
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(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
// 较为推荐

Расскажите о потоке событий во внешнем интерфейсе

Справочный ответ:Взаимодействие с javascript в HTML реализуется на основе событий, таких как событие щелчка мыши при щелчке, событие прокрутки страницы при прокрутке и т. д. Вы можете добавлять прослушиватели событий в документ или элементы в документе для подписки на события. Чтобы знать, когда вызываются эти события, необходимо понимать концепцию «потока событий». Что такое поток событий: поток событий описывает порядок получения событий со страницы.Поток событий уровня DOM2 включает следующие этапы.

• этап захвата событий
• на целевой стадии
• фаза всплытия события

addEventListener：addEventListenerэто операция указанного обработчика событий, добавленная к событию уровня DOM2, Этот метод принимает 3 параметра: имя события для обработки, функцию, которая будет обработчиком события, и логическое значение. наиболее Если этот логический параметр имеет значение true, это означает, что обработчик события вызывается на этапе захвата, если значение false, это означает, что Обработчик событий вызывается на этапе всплытия.

IE поддерживает только всплывающие окна событий.

Как сделать событие после первого захвата пузыря

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

Разговор о делегировании событий

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

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

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

Поговорим о ленивой загрузке и предварительной загрузке изображений

Справочный ответ:

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

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

Разница между наведением мыши и вводом мыши

Справочный ответ:

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

Что делает новый оператор в JS?

Справочный ответ:Оператор new создает пустой объект, прототип которого указывает на прототип конструктора, и возвращает этот объект после выполнения конструктора.

Измените указатель this внутри функции, чтобы он указывал на функцию (разница между связыванием, применением и вызовом)

Справочный ответ:Измените эту точку функции через применение и вызов.Первый параметр двух функций один и тот же, указывая на объект, который необходимо изменить.Второй параметр, применение представляет собой массив, а вызов является arg1, arg2... эта форма . Изменение этой области с помощью bind возвращает новую функцию, которая не будет выполняться немедленно.

Различные позиции JS, такие как clientHeight, scrollHeight, offsetHeight и разница между scrollTop, offsetTop, clientTop?

Справочный ответ:

• clientHeight: указывает высоту видимой области, исключая границы и полосы прокрутки.
• offsetHeight: указывает высоту видимой области, включая границы и полосы прокрутки.
• scrollHeight: указывает высоту всех областей, включая часть, которая скрыта из-за прокрутки.
• clientTop: указывает толщину границы, которая обычно равна 0, если она не указана.
• scrollTop: высота, которая будет скрыта после прокрутки, получить высоту объекта сверху относительно родительской координаты (элемент с позиционированием css или элемент тела), указанный свойством offsetParent.

Реализация функции перетаскивания JS

Справочный ответ:

1. Во-первых, есть три события, а именноmousedown，mousemove，mouseup
2. Когда мышь щелкнута и нажата, необходим тег, чтобы определить, что она была нажата в это время, и может быть выполнен конкретный метод в mousemove.
3. clientX и clientY идентифицируют координаты мыши, которые определяют абсциссу и ординату соответственно, и мы используем offsetX и offsetY для представления начальных координат элемента.Пример движения должен быть: координаты при движении мыши - когда мышь нажимается координата. То есть информация о позиционировании это: координаты при движении мыши - координаты при нажатии мыши + offsetLeft в начальном состоянии элемента.Есть еще принципиальная вещь, то есть абсолютное позиционирование при перетаскивании , то, что мы изменили, осталось в абсолютном позиционировании и

сверху и так далее. Дополнение: Это также может быть достигнуто с помощью перетаскивания html5 (Drag and drop).

Как загрузить JS асинхронно

Справочный ответ:

• defer: поддерживает только IE Если ваш скрипт не изменяет содержимое документа, вы можете добавить атрибут defer в<script>теги для ускорения обработки документов. Поскольку браузер знает, что он сможет безопасно прочитать остальную часть документа без выполнения сценария, он отложит интерпретацию сценария до тех пор, пока документ не будет показан пользователю.
• async, атрибуты HTML5 применяются только к внешним скриптам, и если в IE одновременно существуют defer и async, то defer имеет более высокий приоритет, и скрипт будет выполнен, когда страница будет завершена. Создайте тег скрипта и вставьте его в DOM.

Ajax решает проблемы с кешированием браузера

Справочный ответ:

• Добавить перед отправкой запроса ajaxanyAjaxObj.setRequestHeader("If-Modified-Since","0").
• Добавить перед отправкой запроса ajaxanyAjaxObj.setRequestHeader("Cache-Control","no-cache").
• Добавьте случайное число к URL-адресу: "fresh=" + Math.random().
• Добавьте метку времени после URL:"nowtime=" + new Date().getTime().
• Если вы используете jQuery, вы можете сделать это напрямую.$.ajaxSetup({cache:false}). Таким образом, все ajax страницы будут выполнять этот оператор, поэтому нет необходимости сохранять запись в кеше.

дросселирование и стабилизация JS

Справочный ответ:

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

// 防抖动函数

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function () {
            timeout = null ;
            if  (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
var myEfficientFn = debounce(function() {
    // 滚动中的真正的操作
}, 250);
// 绑定监听
window.addEventListener(``'resize'``, myEfficientFn);

Регулирование: регулирование функций, позволяющее выполнять только одну функцию один раз в X миллисекунд.

`// 简单的节流函数`

function throttle(func, wait, mustRun) {
     var timeout,
         startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
       // 如果达到了规定的触发时间间隔，触发 handler
        if(curTime - startTime >= mustRun){
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔，重新设定定时器
        }else{
            timeout = setTimeout(func, wait);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));

Механизм сборки мусора в JS

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

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

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

что делает eval

Справочный ответ:Его функция состоит в том, чтобы проанализировать соответствующую строку в JS и выполнить ее.Вам следует избегать использования JS, потому что он потребляет очень много производительности (2 раза, один раз анализируется в JS и один раз выполняется)

Как понять модульность интерфейса

Справочный ответ:Модульность внешнего интерфейса — это сложное файловое программирование один за другим независимых модулей, таких как JS-файлы и т. д., разделение на независимые модули способствует повторному использованию (повторному использованию) и обслуживанию (итерации версий), что приведет к проблеме взаимозависимости между модулями. , Итак, есть общие спецификации JS, спецификации AMD, CMD и т. д., а также веб-пакет, инструмент для упаковки (компиляции и т. д.) JS.

Расскажите о CommonJS, AMD и CMD

Справочный ответ:Модуль - это файл, который может реализовать определенную функцию. С модулем вы можете легко использовать код других людей, и вы можете загрузить любой модуль, который вы хотите, с любой функцией, которую вы хотите.CommonJS: Модульность, начинающаяся со стороны сервера, модульность определяется синхронно, каждый модуль является отдельным объем, выход модуля,modules.exports, модуль загруженrequire()модуль импорта.AMD: Значение определения китайского имени асинхронного модуля.requireJSДостигнутоAMDСпецификация в основном используется для решения следующих двух задач.

1. Несколько файлов имеют зависимости, и зависимый файл должен быть загружен в браузер раньше, чем файл, который зависит от него.
2. При загрузке браузер остановит отрисовку страницы, чем больше загружено файлов, тем дольше страница будет не отвечать.

// 语法：requireJS 定义了一个函数define，它是全局变量，用来定义模块。
// requireJS 的例子：
//定义模块
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
//加载模块
require(['myModule'], function (my){
my.printName();
}
// RequireJS 定义了一个函数define,它是全局变量，用来定义模块：
define(id?dependencies?,factory)
// 在页面上使用模块加载函数：
require([dependencies],factory)；

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

Простая реализация глубокого клонирования объекта

function deepClone(obj){
    var newObj= obj instanceof Array ? []:{};
    for(var item in obj){
        var temple= typeof obj[item] == 'object' ? deepClone(obj[item]):obj[item];
        newObj[item] = temple;
    }
    return newObj;
}

Распространенный способ клонирования объектов в ES5. Обратите внимание, что массив — это объект, но он отличается от объекта, поэтому мы сначала оценили некоторые типы и решили, является ли newObj объектом или массивом.

Реализуйте одноразовую функцию, передайте параметры функции и выполните ее только один раз.

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

Инкапсулировать собственный ajax в обещание

var myNewAjax=function(url){
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.open('get',url);
        xhr.send(data);
        xhr.onreadystatechange=function(){
            if(xhr.status==200&&readyState==4){
                var json=JSON.parse(xhr.responseText);
                resolve(json)
            }else if(xhr.readyState==4&&xhr.status!=200){
                reject('error');
            }
        }
    })
}

JS прослушивает изменения свойств объекта

// 我们假设这里有一个user 对象,
// (1)在ES5 中可以通过Object.defineProperty 来实现已有属性的监听
Object.defineProperty(user,'name',{
    set：function(key,value){
    }
})
// 缺点：如果id 不在user 对象中，则不能监听id 的变化
// (2)在ES6 中可以通过Proxy 来实现
var user = new Proxy({}，{
    set：function(target,key,value,receiver){
    }
})
// 这样即使有属性在user 中不存在，通过user.id 来定义也同样可以这样监听这个属性的变化哦。

Как реализовать приватную переменную, доступ к которой можно получить с помощью метода getName, но к которой нельзя получить доступ напрямую

// (1)通过defineProperty 来实现
obj={
    name:yuxiaoliang,
    getName:function(){
        return this.name
    }
}
object.defineProperty(obj,"name",{
//不可枚举不可配置
});
// (2)通过函数的创建形式
function product(){
    var name='yuxiaoliang';
    this.getName=function(){
        return name;
    }
}
var obj=new product();

== и ===, а также разница между 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
// (相对比===和==的改进)

Разница между setTimeout, setInterval и requestAnimationFrame

Справочный ответ:В отличие от setTimeout и setInterval, requestAnimationFrame не нужно устанавливать временной интервал. Большинство компьютерных мониторов имеют частоту обновления 60 Гц, что соответствует примерно 60 перерисовкам в секунду. Большинство браузеров Операция перерисовки будет ограничена не более чем частотой перерисовки дисплея, потому что даже если она превышает эту частоту, пользовательский опыт Продвижения не будет. Поэтому оптимальный интервал цикла для максимально плавной анимации — 1000 мс/60, что примерно равно 16,6 мс. RAF использует интервал системного времени, который не повлияет на RAF из-за предыдущей задачи, но если предыдущая задача Если задач много, он будет реагировать на временной интервал между setTimeout и setInterval, когда они фактически выполняются.

Функции:

• requestAnimationFrame будет объединять все операции DOM в каждом кадре, выполняя одну перерисовку или перекомпоновку, а интервал перерисовки или перекомпоновки точно соответствует частоте обновления браузера.
• В скрытых или невидимых элементах requestAnimationFrame не будет перерисовываться или перекомпоновываться, что, конечно, означает меньшее использование ЦП, графического процессора и памяти.
• requestAnimationFrame — это API, специально предоставляемый браузером для анимации. Браузер автоматически оптимизирует вызов метода во время выполнения, и если страница не находится в активном состоянии, анимация будет автоматически приостановлена, что эффективно снижает нагрузку на ЦП.

Вот статья о requestAnimationFrameблог woo woo woo.cn на.com/smallmatch…

Реализуйте функцию привязки самостоятельно

Справочный ответ:

// 原理：通过apply 或者call 方法来实现。
// (1)初始版本
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);
    }
}
// (2) 考虑到原型链
// 为什么要考虑？因为在new 一个bind 过生成的新函数的时候，必须的条件是要继承原函数的原型
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;
}

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

Справочный ответ:

// (1)方法1
<script type="text/javascript">
    var obj=new Image();
    obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
    obj.onload=function(){
    alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
    document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>
// (2)方法2
<script type="text/javascript">
    var obj=new Image();
    obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
    obj.onreadystatechange=function(){
    if(this.readyState=="complete"){
    alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
    document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
    }
}
</script>
<div id="mypic">onloading……</div>

Типы данных в JS

Справочный ответ:

Основные типы данных: Undefined, Null, Boolean, Number, String, Symbol
Тип ссылочных данных: Объект

Тип решения JS

Справочный ответ:Метод оценки: typeof(), instanceof, Object.prototype.toString.call(), конструктор и т. д.

Дедупликация массива

Справочный ответ:

• Дедупликация цикла indexOf
• Дедупликация набора ES6; Array.from(новый набор(массив))
• Дедупликация пары ключ-значение объекта; сохраните значение массива как значение ключа объекта, например, объект[значение1] = true, при оценке другого значения, если объект[значение2] существует, это означает, что значение повторяется.

Для чего нужны замыкания?

Справочный ответ:

(1) Что такое замыкание:

Средство закрытия имеет доступ к дополнительной функции переменной функции Scopes. Закрытие - это набор локальных переменных, локальных переменных, но они будут продолжать существовать после возвращения функции. Закрытие Является ли функция «стека» не выпущена после возврата функции, мы также можем быть поняты как функция этих стеков не в стеке Но распределение выделено на кучу. Когда другая функция генерируется в определенной функции закрытия.

(2) Зачем использовать:

Анонимная самовыполняющаяся функция: мы знаем все переменные, если не добавить ключевое слово var, то ко всему добавится значение по умолчанию Добавление такой временной переменной в глобальный объект имеет много недостатков, таких как: другие функции могут некорректно Используйте эти переменные; глобальный объект будет слишком большим и повлияет на скорость доступа (поскольку значение переменной необходимо получить из цепочки прототипов пройдено выше). Помимо использования ключевого слова var каждый раз, когда используется переменная, мы часто сталкиваемся с такой ситуацией на практике. В этом случае некоторые функции нужно выполнить только один раз, а их внутренние переменные не нужно поддерживать, поэтому можно использовать замыкания. Кэширование результатов: мы столкнемся со многими ситуациями в нашей разработке.Предположим, у нас есть объект функции, который требует много времени для обработки. Каждый вызов будет занимать много времени, поэтому нам нужно сохранить вычисленное значение при вызове этой функции При подсчете сначала смотрите в кеш, если не найдёте, производите вычисление, затем обновляете кеш и возвращаете значение, например Если найдено, вернуть найденное значение напрямую. Закрытие делает именно это, потому что оно не освобождает внешний , так что значение внутри функции может быть сохранено. Инкапсуляция: реализация классов и наследования и т. д.

Можете ли вы рассказать о языковых особенностях JS?

Справочный ответ:

• запустить в клиентском браузере;
• Без предварительной компиляции напрямую анализировать и выполнять код;
• Это язык со слабой типизацией и более гибкий;
• ОС-независимый, кроссплатформенный язык;
• языки сценариев, интерпретируемые языки

JS реализует междоменный

Справочный ответ:JSONP: междоменная связь достигается за счет динамического создания сценария и запроса URL-адреса с параметрами. документ.домен + Междоменный iframe: обе страницы принудительно устанавливают document.domain в качестве базового основного домена через js, который реализует один и тот же домен. location.hash + междоменный iframe: хочет общаться с междоменным b через промежуточную страницу c для достижения. три страницы, Location.hash iframe используется для передачи значений между разными доменами, а прямой доступ js используется для связи между одними и теми же доменами. window.name + iframe cross-domain: атрибут src iframe переносится из внешнего домена в локальный домен, а междоменные данные передаются из внешнего домена в локальный домен через window.name iframe.

postMessage cross-domain: одно из свойств окна, которое может работать между доменами.

CORS: можно настроить сервер Access-Control-Allow-Origin, не нужно устанавливать интерфейс, чтобы порадовать куки Спрос, нужно установить перед и зад. Действующий междоменный: запустите прокси-сервер для пересылки данных

Перекомпоновать и перерисовать, поговорить об этом

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

Условие для запуска перерисовки: изменение свойства внешнего вида элемента. Например: цвет, цвет фона и т. д.

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

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

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

Использование обещания + генератор + асинхронный

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

• Обещание имеет три состояния: ожидание, выполнено/разрешено и отклонено. Состояние обещания может быть изменено только с "ожидание" на "завершено" или "отклонено" и не может быть отменено, и в то же время "завершено" и "отклонить" также не являются взаимозаменяемыми.
• Обещание должно предоставлять метод then для доступа к его текущему значению, конечному значению и причине. обещание.затем(разрешение,отклонение), разрешение и отклонение являются необязательными параметрами. Если разрешение или отклонение не являются функциями, их следует игнорировать, а метод должен возвращать обещанный объект.

/**使用:
实例化promise 对象需要传入函数(包含两个参数),resolve 和reject,内部确定状态.resolve
和reject 函数可以传入参数在回调函数中使用.
resolve 和reject 都是函数,传入的参数在then 的回调函数中接收.
*/
var promise = new Promise(function(resolve, reject) {
setTimeout(function(){
resolve('好哈哈哈哈');
});
});
promise.then(function(val){
console.log(val)
})
// then 接收两个函数,分别对应resolve 和reject 状态的回调,函数中接收实例化时传入的参数.
promise.then(val=>{
//resolved
},reason=>{
//rejected
})
/**catch 相当于.then(null, rejection)
当then 中没有传入rejection 时,错误会冒泡进入catch 函数中,若传入了rejection,则错误会
被rejection 捕获,而且不会进入catch.此外,then 中的回调函数中发生的错误只会在下一级
的then 中被捕获,不会影响该promise 的状态.*/
new Promise((resolve,reject)=>{
throw new Error('错误')
}).then(null,(err)=>{
console.log(err,1);//此处捕获
}).catch((err)=>{
console.log(err,2);
});

// 对比
new Promise((resolve,reject)=>{
throw new Error('错误')
}).then(null,null).catch((err)=>{
console.log(err,2);//此处捕获
});

// 错误示例
new Promise((resolve,reject)=>{
resolve('正常');
}).then((val)=>{
throw new Error('回调函数中错误')
},(err)=>{
console.log(err,1);
}).then(null,(err)=>{
console.log(err,2);//此处捕获,也可用catch
});
// 两者不等价的情况:
// 此时，catch 捕获的并不是p1 的错误，而是p2 的错误，
p1().then(res=>{
return p2()//p2 返回一个promise 对象
}).catch(err=> console.log(err))
/** 一个错误捕获的错误用例:
该函数调用中即使发生了错误依然会进入then 中的resolve 的回调函数,因为函数p1 中实
例化promise 对象时已经调用了catch,若发生错误会进入catch 中,此时会返回一个新的
promise,因此即使发生错误依然会进入p1 函数的then 链中的resolve 回调函数.*/
function p1(val){
return new Promise((resolve,reject)=>{
if(val){
var len = val.length;//传入null 会发生错误,进入catch 捕获错
resolve(len);
}else{
reject();
}
}).catch((err)=>{
console.log(err)
})
};
p1(null).then((len)=>{
console.log(len,'resolved');
},()=>{
console.log('rejected');
}).catch((err)=>{
console.log(err,'catch');
})
/** Promise 回调链:
promise 能够在回调函数里面使用return 和throw， 所以在then 中可以return 出一个
promise 对象或其他值，也可以throw 出一个错误对象，但如果没有return，将默认返回
undefined，那么后面的then 中的回调参数接收到的将是undefined.*/
function p1(val){
return new Promise((resolve,reject)=>{
val==1?resolve(1):reject()
})
};
function p2(val){
return new Promise((resolve,reject)=>{
val==2?resolve(2):reject();
})
};
let promimse = new Promise(function(resolve,reject){
resolve(1)
})
.then(function(data1) {
return p1(data1)//如果去掉return,则返回undefined 而不是p1 的返回值,会导致报错
})
.then(function(data2){
return p2(data2+1)
})
.then(res=>console.log(res))

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

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

• Выполнение сегмента, можно приостановить
• Может контролировать этапы и возвращаемое значение каждого этапа
• Может знать, выполнять ли до конца

function* g() {
var o = 1;
yield o++;
yield o++;
}
var gen = g();
console.log(gen.next()); // Object {value: 1, done: false}
var xxx = g();
console.log(gen.next()); // Object {value: 2, done: false}
console.log(xxx.next()); // Object {value: 1, done: false}
console.log(gen.next()); // Object {value: undefined, done: true}

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

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

let timer = async function timer(){
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve('500');
},500);
});
}
timer().then(result => {
console.log(result); //500
}).catch(err => {
console.log(err.message);
});
//返回一个同步的值
let sayHi = async function sayHi(){
let hi = await 'hello world';
return hi; //等同于return Promise.resolve(hi);
}
sayHi().then(result => {
console.log(result);
});

Особенности стрелочных функций ES6

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

• У стрелочной функции this нет, поэтому значение this необходимо определить, просматривая цепочку областей видимости, а это означает, что если стрелочная функция содержится в нестрелочной функции, this привязано к this ближайшего не -стрелочная функция.
• Стрелочные функции не имеют собственного объекта аргументов, но могут получить доступ к объекту аргументов включающей функции.
• Не может быть вызван с ключевым словом new, а также не имеет значения new.target и прототипа.

Процесс загрузки JS заблокирован, решение.

Справочный ответ:Указывает асинхронный атрибут тега скрипта. Если async="async", скрипт выполняется асинхронно по отношению к остальной части страницы (сценарий будет выполняться, пока страница продолжает парсинг). Если async не используется и defer="defer": скрипт будет выполнен, когда страница завершает синтаксический анализ

Серверное программирование/Ajax

Недостатки JSONP

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

Междоменный (jsonp, ajax)

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

Как добиться междоменного

• JSONP: междоменная связь достигается за счет динамического создания сценария и запроса URL-адреса с параметрами. document.domain + iframe cross-domain: обе страницы вынуждены устанавливать document.domain в качестве базового основного домена через js, который реализует один и тот же домен. location.hash + междоменный iframe: хочет общаться с междоменным b через промежуточную страницу c для достижения. Для трех страниц для передачи значений между разными доменами используется location.hash iframe, а для связи между одними и теми же доменами используется прямой js-доступ. window.name + iframe cross-domain: атрибут src iframe переносится из внешнего домена в локальный домен, а междоменные данные передаются из внешнего домена в локальный домен через window.name iframe.
• postMessage cross-domain: одно из свойств окна, которое может работать между доменами.
• CORS: Access-Control-Allow-Origin может быть установлен на стороне сервера. Внешний интерфейс не нужно устанавливать. Чтобы запросить запрос cookie, необходимо установить как внешний, так и внутренний интерфейс.
• Междоменный прокси: запустите прокси-сервер для реализации пересылки данных

Внедрить Ajax

AJAX создает асинхронный объект Операция XMLHttpRequest Объект XMLHttpRequest

1. Установить параметры запроса (метод запроса, относительный путь запрашиваемой страницы, асинхронный или нет)
2. Установите функцию обратного вызова, функцию, которая обрабатывает ответ сервера, используя onreadystatechange, аналогичную указателю функции.
3. Получите свойство readyState асинхронного объекта: это свойство хранит информацию о состоянии ответа сервера. При каждом изменении readyState будет выполняться функция onreadystatechange.
4. Судите о статусе ответного сообщения, если оно равно 200, это означает, что сервер работает нормально и возвращает данные ответа.
5. Чтобы прочитать данные ответа, вы можете получить данные, возвращенные сервером, через свойство responseText.

var xhr = new XMLHttpRequest();
xhr.open('get', 'aabb.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
    if(xhr.readyState==4) {
        if(xhr.status==200) {
        console.log(xhr.responseText);
        }
    }
}

мобильная веб-разработка

Вы знаете о PWA?

Полное название PWA — Progressive Web App, то есть прогрессивное веб-приложение. Приложение PWA — это сначала веб-страница, а приложение веб-страницы может быть написано с помощью веб-технологий. Затем добавляются App Manifest и Service Worker для реализации установки PWA и автономных функций.

Схема мобильной раскладки

Просто дайте ссылку для более подробной информации.самородки.IM/post/599970…

Rem, Em

Как единицы rem преобразуются в значения пикселейПри использовании единиц rem преобразование страницы в размер пикселя зависит от размера шрифта корневого элемента листа, т.е. HTML Размер шрифта элемента. Размер шрифта корневого элемента, умноженный на значение rem. Например, размер шрифта корневого элемента равен 16px, тогда 10rem эквивалентно 10*16=160px.

как em конвертируется в pxПри использовании EM-блока значение пикселя является умножением EM в размер шрифта элемента с помощью единицы EM. Например Шрифт DIV - 18 пикселей и устанавливает его ширину до 10EM, то как высокое 18 пикселей * 10em = 180px.

.test{
    width: 10em;
    height: 10em;
    background-color: #ff7d42;
    font-size: 18px;
}
/**
一定要记住的是，em 是根据使用它的元素的font-size 的大小来变化的，而不是根据父
元素字体大小。有些元素大小是父元素的多少倍那是因为继承了父元素中font-size 的设
定，所以才起到的作用。
*/

Унаследованные эффекты единиц emПри наследовании с использованием единиц em каждый элемент автоматически наследует размер шрифта своего родительского элемента, эффект наследования Может быть переопределен только явными единицами шрифта, такими как px и vw. Пока родительский элемент всегда имеет размер шрифта em single бит, он всегда будет унаследован, но если вы установите единицу измерения размера шрифта в px, вы будете напрямую использовать размер шрифта Значение в собственных единицах пикселей.

Элементы в корневом html наследуют размер шрифта, установленный в браузере.Если явно не установлено фиксированное значение для переопределения. Поэтому, хотя размер шрифта html-элемента напрямую определяет значение rem, Но этот размер шрифта в первую очередь определяется настройками браузера. (Поэтому обязательно задайте размер значения html, т.к. Возможно, размер шрифта в браузере пользователя несовместим. )

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

html{
    font-size: 1.5em;
}
/**
可以看到，因为浏览器默认字体大小为16px，所以当设置HTML 的fontsize 的值为1.5em
的售后，其对应的px 的值为16*1.5=24px
所以此时，再设置其他元素的rem 的值的时候，其对应的像素值为n*24px。
例如，test 的rem 的值为10，
*/
.test{
    width: 10rem;
    height: 10rem;
    background-color: #ff7d42;
}
/**
总结：
1. rem 单位翻译为像素值的时候是由html 元素的字体大小决定的。此字体大小会
被浏览器中字体大小的设置影响，除非显式的在html 为font-size 重写一个单位。
2. em 单位转换为像素值的时候，取决于使用它们的元素的font-size 的大小，但是有
因为有继承关系，所以比较复杂。
优缺点
em 可以让我们的页面更灵活，更健壮，比起到处写死的px 值，em 似乎更有张力，改
动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能,
em 做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那
么其后代元素都得重新计算
*/

Проблема адаптации к 1px на мобильном терминале

рекомендоватьblog.CSDN.net/WeChat_4367…

1. Запишите значения px в виде десятичных дробей (не рекомендуется)

// IOS8 下已经支持带小数的px 值, media query 对应devicePixelRatio 有个查询值
// -webkit-min-device-pixel-ratio, css 可以写成这样
// 通过-webkit-min-device-pixel-ratio 设置。
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
// 如果使用less/sass 的话只是加了1 句mixin
// 缺点: 安卓与低版本IOS 不适用, 这个或许是未来的标准写法, 现在不做指望

2. flexible.js

Это решение принято мобильным терминалом Taobao, адрес github.:https://github.com/amfe/lib-flexible.уже раньше Я сказал, что причина утолщения в 1 пиксель заключается в том, чтобы установить ширину области просмотра по всем направлениям. Что касается фактической физической ширины устройства, разве 1px в css не равен фактической длине 1px? сухой.<meta name=”viewport”>Значение масштаба внутри относится к масштабированию идеального окна просмотра, проверяет flexible.js Когда модель IOS будет обнаружена, она рассчитаетscale = 1/devicePixelRatio, затем установите область просмотра

3. Псевдокласс + реализация преобразования

/** 对于解决1px 边框问题，我个人觉得最完美的解决办法还是伪类+transform 比较好。
原理：是把原先元素的border 去掉，然后利用:before 或者:after 重做border ，并
transform 的scale 缩小一半，原先的元素相对定位，新做的border 绝对定位。
media query
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比
如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x 图，为
大屏幕手机设置@3x 图，通过媒体查询就能很方便的实现。
但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么
多套样式代码会很繁琐。*/
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media
/** 方便应用广泛适用于pc 端手机页面，通常做自适应布局时我们比较常用。
缺点：相对于代码要重复很多，得知道设备的宽度，手机的分辨率很多所以麻烦了点，
不过性能方面肯定最高； 可能存在闪屏的问题
@media 处理手机和pc 端界面兼容的问题，在IE 上的访问出现问题，百度方法，找找
两种，一种是respond.js，另一种是 
css3-mediaquerieshttp://blog.csdn.net/small_tu/article/details/47317453
*/

Опыт оптимизации мобильных приложений

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

Мобильная совместимость

Другие справочные ссылки: https://column.direct call.com/afraid/28206065

событие жеста

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

Рисунок 2X Рисунок 3X Адаптация рисунка

При реальной разработке программы значение, используемое в нашем коде, относится к логическому разрешению pt, а не к разрешению в пикселях px. Например, мы определяем высоту кнопки как 45, это 45 означает 45pt вместо 45px. 1pt = 1px под экраном не Retina, 1pt = 2px под экраном Retina 4 и 4,7 дюйма, 1pt = 3px под экраном 5,5 и х. Делаем картинки разных размеров, Например, если @1x — это 22 пикселя, то @2x — это 44 пикселя, а @3x — 66 пикселей, с именем image.png соответственно. Создайте новый набор изображений в Assets.xcassets, измените имя на изображение и перетащите изображение соответствующего размера в соответствующую позицию.

/* 根据dpr 显示2x 图/3x 图*/
.bg-image(@url){
background-image:~"url('@{url}@2x.png')";
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
background-image:~"url('@{url}@3x.png')";
}
}
.bg-color(@color) {
background-color: @color;
}

Картинка на Андроиде, на некоторых устройствах размыто

Эта проблема вызвана разницей в devicePixelRatio, потому что разрешение мобильного телефона слишком маленькое. Если веб-страница отображается в соответствии с разрешением, символы будут очень маленькими. Все системы Apple изначально изменили разрешение 960x640 пикселей на iphone. От 4 до 480x320 пикселей на веб-странице. Это devicePixelRatio = 2. Android devicePixelRatio запутанный, со значениями 1,5, 2 и 3. Чтобы изображение отображалось более четко в мобильном телефоне, вместо него необходимо использовать фоновое изображение в 2 раза больше ширины и высоты. тега img (обычно оба используются дважды) Например: ширина и высота div — 100 x 100. Фоновое изображение должно быть 200 x 200, а затем установите стиль background-size:contain, чтобы отобразить его более четко.

Запретить увеличение и уменьшение страницы на мобильных устройствах

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

Переходный всплеск экрана

//设置内联的元素在3D 空间如何呈现：保留
3D-webkit-transform-style:preserve-3D;
//设置进行转换的元素的背面在面对用户时是否可见：隐藏
-webkit-backface-visibility:hidden;

Потяните вверх и вниз полосу прокрутки Катон, медленно

body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling:touch;
}

Нажмите и удерживайте страницу в течение длительного времени, и страница начнет мигать

element{
    -webkit-touch-callout: none;
}

Фронтенд-инжиниринг

Каков принцип Вавилона?

Процесс перевода babel также делится на три этапа, которые заключаются в следующем:

• Parse Parse: анализ кода для создания абстрактного синтаксического дерева (т. е. AST), то есть процесс лексического и синтаксического анализа.
• Transform Transform: для серии операций по преобразованию AST Babel принимает AST и проходит через Babel-traverse, добавляя, обновляя и удаляя операции в процессе.
• Генерировать Генерировать: Преобразование преобразованного AST в код JS, используемый модуль — babel-generator.

Как написать плагин для Babel?

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

module.export = function(babel){
    return {
        visitor:{
        }
    }
}

Посетитель — это место, где обрабатываются различные типы узлов AST, так как же мы узнаем, что сгенерировал Babel? Какие узлы есть у AST? Очень просто, вы можете распечатать результат преобразования Бабеля, Или вот порталы:AST explorer

/** 这里我们看到const result = 1 + 2 中的1 + 1 是一个BinaryExpression 节点，那么在
visitor 中，我们就处理这个节点 */
var babel = require('babel-core');
var t = require('babel-types');
const visitor = {
BinaryExpression(path) {
const node = path.node;
let result;
// 判断表达式两边，是否都是数字
if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {
// 根据不同的操作符作运算
switch (node.operator) {
case "+":
result = node.left.value + node.right.value;
break
case "-":
result = node.left.value - node.right.value;
break;
case "*":
result = node.left.value * node.right.value;
break;
case "/":
result = node.left.value / node.right.value;
break;
case "**":
let i = node.right.value;
while (--i) {
result = result || node.left.value;
result = result * node.left.value;
}
break;
default:
}
}
// 如果上面的运算有结果的话
if (result !== undefined) {
// 把表达式节点替换成number 字面量
path.replaceWith(t.numericLiteral(result));
}
}
};
module.exports = function (babel) {
return {
visitor
};
}
// 插件写好了，我们运行下插件试试
const babel = require("babel-core");
const result = babel.transform("const result = 1 + 2;",{
plugins:[
require("./index")
]
});
console.log(result.code); // const result = 3;
/** 与预期一致，那么转换const result = 1 + 2 + 3 + 4 + 5;呢?
结果是: const result = 3 + 3 + 4 + 5;
这就奇怪了，为什么只计算了1 + 2 之后，就没有继续往下运算了?
我们看一下这个表达式的AST 树
你会发现Babel 解析成表达式里面再嵌套表达式。
表达式( 表达式( 表达式( 表达式(1 + 2) + 3) + 4) + 5)
而我们的判断条件并不符合所有的，只符合1 + 2 */
// 判断表达式两边，是否都是数字
if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {}
/** 那么我们得改一改
第一次计算1 + 2 之后，我们会得到这样的表达式
表达式( 表达式( 表达式(3 + 3) + 4) + 5)
其中3 + 3 又符合了我们的条件， 我们通过向上递归的方式遍历父级节点
又转换成这样:
表达式( 表达式(6 + 4) + 5)
表达式(10 + 5)
15 */
// 如果上面的运算有结果的话
if (result !== undefined) {
// 把表达式节点替换成number 字面量
path.replaceWith(t.numericLiteral(result));
let parentPath = path.parentPath;
// 向上遍历父级节点
parentPath && visitor.BinaryExpression.call(this, parentPath);
}
/** 到这里，我们就得出了结果const result = 15;
那么其他运算呢: */
const result = 100 + 10 - 50>>>const result = 60;
const result = (100 / 2) + 50>>>const result = 100;
const result = (((100 / 2) + 50 * 2) / 50) ** 2>>>const result = 9;

Каков ваш рабочий процесс git?

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

Разница между webpack и gulp (модульный и потоковый)

• Webpack — это интерфейсное модульное решение, которое больше ориентировано на упаковку модулей.Мы можем обрабатывать все ресурсы в разработке (изображения, файлы js, файлы css и т. д.) как модули и использовать загрузчик (загрузчик) и плагины (плагин). для обработки ресурсов.Обработка, упаковка во внешние ресурсы, соответствующие развертыванию в производственной среде.
• Gulp делает упор на рабочий процесс фронтенд-разработки.Мы можем настроить ряд задач, определить транзакции, обрабатываемые задачами (такие как сжатие и слияние файлов, карта спрайтов, запуск сервера, контроль версий и т. д.), а затем определить порядок выполнения, позволяющий gulp выполнять эти задачи, тем самым выстраивая весь процесс разработки интерфейса проекта.

Vue

Расскажите мне о своем понимании vue

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

1. Вид диска данных, абстрактный виртуальный DOM для реального DOM (Essence - это объект JS), а настроение с алгоритмом дифференциров, реагированием и наблюдателем, асинхронной очередью и т. Д., Перевод DOM, рендеринг страницы.
2. Компонентизация, компоненты организованы и написаны в виде одного файла, так что мы можем написать html\css (конфигурация атрибутов css с изоляцией области действия)\js в одном файле и взаимодействовать с Vue-загрузчиком для поддержки более мощных препроцессоров и т. д. Функция .
3. Из-за использования виртуального дома Vue ssr по своей сути достаточно, а мощный и богатый API предоставляет ряд API для удовлетворения различных потребностей в развитии бизнеса.
4. Функция хука жизненного цикла, опциональная организация кода, ее довольно легко написать, но еще есть место для оптимизации (композиция Vue3-api)

недостаток:

1. Поскольку нижний слой основан на Object.defineProperty (vue3.0 использует новый прокси()) для реализации отзывчивости, а сам этот API не поддерживает браузеры IE8 и ниже.
2. Врожденный недостаток csr, проблема производительности первого экрана (белый экран)
3. Поскольку Baidu и другие сканеры поисковых систем не могут сканировать контент в js, спа по своей сути не имеет SEO-оптимизации (кукловод Google довольно хорош, и этот инструмент также используется для достижения нижнего уровня предварительного рендеринга).

Что такое виртуальный DOM?

Виртуальный DOM относится к реальному DOM, отображаемому браузером.До появления реакции, vue и других технологий, Если мы хотим изменить содержимое, отображаемое на странице, мы можем найти дом, который нужно изменить, только путем обхода дерева запросов. Затем измените поведение или структуру стиля для достижения цели обновления пользовательского интерфейса. Этот метод потребляет много вычислительных ресурсов, потому что каждый запрос dom должен пройти через все дерево dom, если Создайте виртуальный объект dom (объект js), соответствующий дереву dom, чтобы представить dom в форме вложения объектов. дерево, то каждое изменение dom становится изменением свойств js-объекта, так что js-объект можно найти Изменения атрибутов обходятся дешевле, чем запросы к дереву dom.

жизненный цикл

Как vue прослушивает события клавиатуры?

//  @keyup. 方法
<template>
<input ref="myInput" type="text" value="hello world" autofocus
@keyup.enter="handleKey">
</template>
<script>
    export default {
    methods: {
        handleKey(e) {
            console.log(e)
        }
    }
}
</script>
//  addEventListener
<script>
    export default {
        mounted() {
            document.addEventListener('keyup', this.handleKey)
        },
        beforeDestroy() {
            document.removeEventListener('keyup', this.handleKey)
        },
        methods: {
            handleKey(e) {
                console.log(e)
            }
        }
}
</script>
<script>
export default {
    mounted() {
        document.addEventListener('keyup', this.handleKey)
    },
    beforeDestroy() {
        document.removeEventListener('keyup', this.handleKey)
    },
    methods: {
        handleKey(e) {
            console.log(e)
        }
    }
}
</script>

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

deep 设置为true 就可以监听到对象的变化
let vm=new Vue({
    el:"#first",
    data:{msg:{name:'北京'}},
    watch:{
        msg:{
            handler (newMsg,oldMsg){
                console.log(newMsg);
            },
            immediate:true,
            deep:true
        }
    }
})

В чем разница с массивом Delete Удалить и Vue.delete?

• Удалить: только что удаленные элементы массива становятся ПУСТЫМИ/неопределенными, другие значения ключей элементов остаются постоянными
• Vue.delete: удаляет элементы массива напрямую и изменяет значение ключа массива (объект реагирует, гарантируя, что удаление может вызвать обновление представления, этот метод в основном используется, чтобы избежать ограничения, которое Vue не может обнаружить свойство, являющееся удалено)

В чем разница между наблюдением и вычисляемым свойством?

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

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

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

Принцип двусторонней привязки Vue

Двусторонняя привязка данных Vue достигается за счет перехвата данных в сочетании с шаблоном издатель-подписчик. воспользовался Object.defineProperty() Этот метод переопределяет объект, чтобы получить значение свойства (get) и установить значение свойства (set).

Vue3.0 принимает новый прокси()Вы можете обратиться к https://juejin.cn/post/6950826293923414047Написано великим богом, подписавшим контракт с Наггетс.

Подскажите как пользоваться аксиосами? Как решить междоменную проблему?

axios — это асинхронный запрос, его использование похоже на ajax, его можно использовать, установив npm install axios — сохраните, пожалуйста Запрос включает в себя пять методов запроса, таких как получение, отправка, размещение, исправление, удаление и т. д. Чтобы решить проблему кроссдоменности, вы можете добавить его в заголовок запроса. Access-Control-Allow-Origin, вы также можете изменить конфигурацию proxyTable в файле index.js для решения междоменных проблем. вопрос.

Как внедрить сторонние библиотеки (например, jQuery) в проект vue?

// 1、绝对路径直接引入
// 在index.html 中用script 引入
<script src="./static/jquery-1.12.4.js"></script>
// 然后在webpack 中配置external
externals: { 'jquery': 'jQuery' }
// 在组件中使用时import
import $ from 'jquery'
// 2 、在webpack 中配置alias
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'jquery':
resolve('static/jquery-1.12.4.js') } }
// 然后在组件中import
// 3、在webpack 中配置plugins
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }) ]
// 全局使用，但在使用eslint 情况下会报错，需要在使用了$ 的代码前添加/*eslint-disable*/ 来去掉ESLint 的检查。

Зачем использовать Proxy API VUE3.0 в альтернативной защите PEFINEPROPERTY API?

Отзывчивая оптимизация.

1. Самая большая причина ограничения API defineProperty заключается в том, что он может отслеживать только одноэлементные свойства. Отзывчивая реализация в Vue2.x основана на дескрипторе в defineProperty, который просматривает + рекурсивно выполняет свойства в данных и устанавливает геттеры и сеттеры для каждого свойства. Вот почему Vue может реагировать только на предопределенные свойства в данных.В Vue невозможно использовать метод подстрочного индекса для прямого изменения значения свойства или добавления уже существующего свойства объекта, которое не может контролироваться сеттером. является ограничением defineProperty.
2. Мониторинг API прокси предназначен для объекта, тогда все операции над этим объектом войдут в операцию мониторинга, которая может полностью проксировать все атрибуты, что приведет к значительному повышению производительности и улучшению кода. Прокси можно понимать как настройку уровня «перехвата» перед целевым объектом, и доступ к объекту из внешнего мира должен сначала пройти этот уровень перехвата, поэтому он обеспечивает механизм фильтрации и перезаписи доступа к внешнему миру. .
3. Отзывчивость ленива.В Vue.js 2.x для объекта с глубоко вложенными свойствами, чтобы перехватить его изменения на глубоком уровне, необходимо рекурсивно пройти по объекту, выполнить Object.defineProperty для хранения данных каждого слоя объекта Станьте отзывчивым, что, несомненно, приведет к большим потерям производительности. В Vue.js 3.0 использование Proxy API не может отслеживать глубокие изменения свойств внутри объекта, поэтому его метод обработки заключается в рекурсивном ответе в геттере.Преимущество этого заключается в том, что внутренние свойства, к которым фактически осуществляется доступ, становятся отзывчивыми. можно просто сказать, чтобы реализовать реакцию по запросу и снизить потребление производительности.

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

let datas = {
    num:0
}
let proxy = new Proxy(datas,{
    get(target,property){
        return target[property]
    },
    set(target,property,value){
        target[property] += value
    }
})

Оптимизация компилятора Vue3.0, чтобы делать то, что?

1. Сгенерировать дерево блоков

Детализация обновления данных Vue.js 2.x и повторного рендеринга триггера осуществляется на уровне компонентов, и один компонент должен пройти через группу. Все дерево vnode файла. В версии 2.0 скорость рендеринга положительно связана с размером компонента: чем больше компонент, тем больше Чем медленнее эффективность. Более того, для некоторых статических узлов нет обновления данных, эти обходы являются потерей производительности. Vue.js 3.0 анализирует статический шаблон на этапе компиляции, компилирует и создает дерево блоков. Дерево блоков Это вложенный блок, вырезающий шаблон на основе инструкций динамического узла, структура узла внутри каждого блока фиксирована. Каждый блок должен отслеживать только те динамические узлы, которые он содержит. Итак, в версии 3.0 эффективность рендеринга больше не связана с размером шаблона. положительно коррелирует, но положительно коррелирует с количеством динамических узлов в шаблоне.

2. оптимизация компиляции слотов

В Vue.js 2.x, если компоненту передан слот, каждый раз, когда родительский компонент обновляется, дочерняя группа будет принудительно обновление файла, что приводит к потере производительности.

Vue.js 3.0 оптимизирует создание слотов, так что обновление свойств в нединамических слотах будет запускать только обновление подкомпонентов. Динамический слот относится к использованию v-if, v-for, имени динамического слота и т. д. в слоте, что заставит слот генерировать движение во время выполнения. состояние изменяется, но не может быть отслежено дочерними компонентами.

3. Оптимизация алгоритма сравнения

Виртуальный дом в Vue2.x — это полное сравнение. В Vue3.0 добавлен статический флаг (PatchFlag): при сравнении с последним виртуальным узлом сравнивается значение Узел с флагом исправления и конкретное содержимое текущего узла, подлежащего сравнению, могут быть известны через информацию о флаге.

4. подъемникСтатический статический подъем

Vue2.x: пересоздавать каждый раз, независимо от того, участвует элемент в обновлении или нет. Vue3.0: для элементов, которые не участвуют в обновлении, они будут созданы только один раз и будут повторно использоваться при каждом рендеринге.

5. Кэш прослушивателя событий cacheHandlers

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

говорить о прокси

Перехват данных Vue имеет два недостатка:

1. Невозможно прослушать изменения значения массива, измененного по индексу
2. Невозможно отследить изменение объекта, то есть стоимость объекта

Так что в vue2.x будет атрибут $set proxy — новый API, запущенный в es6, который может компенсировать два вышеуказанных недостатка, поэтому версия vue3.x заменена на proxy объект.defineproperty.

React

избыточное промежуточное ПО

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

Общее промежуточное ПО: redux-logger: обеспечивает вывод журнала; redux-thunk: обрабатывает асинхронные операции; redux-promise: Обрабатывает асинхронные операции; возвращаемое значение actionCreator — обещание

Разделение компонентов React Бизнес-компоненты Технологические компоненты?

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

Функции жизненного цикла React

// 1. 初始化阶段
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的DOM 节点
componentDidMount:组件真正在被装载之后
// 2. 运行中状态
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据
后不更新，阻止render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
// 3. 销毁阶段：
componentWillUnmount:组件即将销毁

Какая периодическая функция является оптимизацией производительности React?

shouldComponentUpdate Этот метод используется для определения необходимости вызова метода рендеринга для перерисовки dom. потому что Рендеринг dom очень затратный, если мы можем написать подробнее в методе shouldComponentUpdate Оптимизированный алгоритм dom diff может значительно повысить производительность.

Решение для оптимизации производительности React

1. Переопределите shouldComponentUpdate, чтобы избежать ненужных манипуляций с домом.
2. Используйте производственную версию RACT.JS.
3. Используйте ключ, чтобы помочь React определить наименьшее изменение для всех дочерних компонентов в списке.

Кратко опишите идею флюса

Самая большая особенность Flux — это «односторонний поток» данных.

• Доступ пользователей Просмотр
• Просмотр проблем Действия пользователя
• Диспетчер получает действие и просит магазин обновить его соответствующим образом.
• После обновления магазина создайте событие «change»
• После того, как View получит событие «change», обновите страницу

Знать о shouldComponentUpdate

Технология React virtual dom требует постоянного сравнения различий между dom и виртуальным dom.Если цена дерева dom велика, Эта операция сравнения занимает много времени, поэтому React предоставляет функцию исправления, такую ​​как shouldComponentUpdate, например Если для некоторых изменений, если мы не хотим, чтобы компонент обновлялся, или если он такой же, как и оригинал после обновления, мы можем Используйте эту функцию, чтобы сообщить React напрямую, исключив операцию сравнения и еще больше повысив эффективность.

Как работает реакция

React создаст виртуальный DOM (виртуальный DOM). Когда состояние в компоненте изменяется, React сначала Изменения в виртуальном DOM помечаются алгоритмом «diffing», вторым шагом является сверка, которая будет использовать diff результат для обновления DOM.

Каковы преимущества использования React

1. Легко увидеть, как компонент визуализируется, просто взглянув на функцию рендеринга.
2. Внедрение JSX делает код компонентов более читабельным и упрощает понимание расположения компонентов или того, как компоненты относятся друг к другу.
3. Поддерживается рендеринг на стороне сервера, что улучшает SEO и производительность.

В чем разница между компонентом класса и функциональным компонентом

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

В чем разница между состоянием (компонента) и реквизитом?

1. Состояние - это структура данных, требуемые данные, когда значение по умолчанию для компонента монтажа. Состояние может происходить со временными мутациями, но большую часть времени в результате поведения о событии пользователя.
2. Props (сокращение от properties) — это конфигурация компонента. Реквизиты передаются от родительских компонентов к дочерним компонентам, а что касается дочерних компонентов, то реквизиты неизменяемы. Компонент не может изменять свои собственные реквизиты, но может объединять реквизиты своих подкомпонентов (унифицированное управление). Реквизиты — это не только данные — обратные вызовы также могут передаваться через реквизиты.

сделать запрос ajax в течение этого жизненного цикла

В компонентах React сетевые запросы должны выполняться в componentDidMount. Этот метод будет вызываться в компоненте Выполняется после «монтирования» (добавления в DOM), только один раз за время существования компонента. важнее, Вы не можете гарантировать, что запрос Ajax будет завершен до монтирования компонента, если это так, это означает, что вы попытаетесь Вызов setState для несмонтированного компонента не будет работать. Инициировать сеть в componentDidMount Запрос гарантирует наличие компонента, который можно обновить.

Какова роль рефов в React

Рефы можно использовать для получения ссылки на узел DOM или компонент React. Хороший пример того, когда использовать refs Либо управляйте фокусом/выделением текста, запускайте анимацию команд, либо интегрируйтесь со сторонними библиотеками DOM. вам следует избегать использования Ссылки типа String и встроенные обратные вызовы ссылок. Обратные вызовы Refs — это то, что рекомендует React.

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

Компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент. HOC запускает ваш повторно используемый код, логику и загрузочная абстракция. Наиболее распространенной, вероятно, является функция подключения Redux. В дополнение к простому обмену библиотеками инструментов и простым Композиция, лучший способ HOC — разделить поведение между компонентами React. Если вы обнаружите, что пишете в другом месте Если у вас много кода для выполнения одной и той же задачи, вам следует подумать о рефакторинге кода в многоразовый HOC.

Почему предполагается, что параметр, передаваемый в setState, является обратным вызовом, а не объектом

Поскольку обновления this.props и this.state могут быть асинхронными, на их значения нельзя полагаться для расчета следующего состояния.

Как предотвратить рендеринг компонента

Возврат null в методе рендеринга компонента не влияет на метод жизненного цикла инициирующего компонента.

Что является ключом при отображении списка? Какова цель установки ключа

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

Какова цель вызова super(props) (в конструкторе)

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

JSX

JSX — это синтаксическое расширение синтаксиса JavaScript, обладающее всеми возможностями JavaScript. Производство JSX Реагируйте на «элементы», вы можете заключить любое выражение JavaScript в фигурные скобки и встроить его в JSX. середина. После компиляции выражения JSX становятся обычными объектами JavaScript, что означает, что вы можете Внутри операторов if и циклов for используется JSX, присваивается переменная, принимается как параметр и возвращается из функции. Это.

Angular

Как компоненты взаимодействуют друг с другом в Angular

Props down

1. Вызов подкомпонентов и передача значений через пользовательские свойства
2. Дочерний компонент получает значение свойства через Input

Events up

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

Восемь компонентов Angular и краткое описание

model 是Angular 开发中的基本单位,是一个容器,可以包含组件、指令、管道等
Components 是可被反复使用的带有特定功能的视图
Templates 是经过指令和管道、组件等增强过的html
Bindings 结合着事件绑定属性绑定双向数据绑定等扩展html 的功能
Directives 分为结构性和属性型指令还有其他模块中比如路由模块中的指令等,
主要是增强html.
Pipes 可以对数据做一个筛选、过滤、格式化从而得到目的数据
Service 将组件、应用中的可共用的部分,比如数据或者方法等封装成服务以方便服用
DependencyInjection 依赖注入

Общие функции хука жизненного цикла в Angular

ngOnChanges:当Angular 设置其接收当前和上一个对象值的数据绑定属性时响应。
ngOnInit:在第一个ngOnChange 触发器之后,初始化组件/指令。这是最常用的方法,
用于从后端服务检索模板的数据。
ngDoCheck：检测并在Angular 上下文发生变化时执行。
每次更改检测运行时,会被调用。
ngOnDestroy:在Angular 销毁指令/组件之前消除。取消订阅可观察的对象并脱离
事件处理程序,以避免内存泄漏。
组件特定的hooks:
ngAfterContentInit:组件内容已初始化完成
ngAfterContentChecked:在Angular 检查投影到其视图中的绑定的外部内容之后。
ngAfterViewInit:Angular 创建组件的视图后。
ngAfterViewChecked：在Angular 检查组件视图的绑定之后

Как работает маршрутизация в Angular

Приложение Angular имеет один экземпляр службы маршрутизатора, и всякий раз, когда изменяется URL-адрес, соответствующий маршрут связывается с маршрутом. по массиву конфигурации соответствовать. При успешном совпадении он применяет перенаправление, после чего маршрутизатор строит дерево объектов ActivatedRoute, Также содержит текущее состояние маршрутизатора. Перед перенаправлением роутер будет запускать защиту (CanActivate) чтобы проверить, разрешено ли новое состояние. Route Guard — это просто метод интерфейса, который маршрутизаторы используют для проверки авторизации маршрутизации. После запуска Guard анализирует данные маршрутизации и создает экземпляры необходимых компонентов для<router-outlet></router-outlet>Активировать статус роутера.

Объясните сценарии использования RJX в угловом угловом

Rxjs 是在微软所提供的一种的异步处理数据的方式,在Angular 中处理网络通信时用到了。
创建一个Observable 并subsribe
比如:this.http.get('').subscribe((data)=>{ })

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

Прекрасная рекомендация в прошлом

Холст Восхождение на Пит-Роуд [Методы]

Не разбираетесь в сео-оптимизации? Статья, которая поможет вам понять, как сделать SEO-оптимизацию

Холщовая дорога для скалолазания [Свойства]

[Практическая глава] Руководство по разработке мини-программы WeChat и практика оптимизации

Давайте поговорим о мобильной адаптации

Практика оптимизации производительности интерфейса

Разговор о раздражающих регулярных выражениях

Получите адрес потока большого двоичного объекта файла для реализации функции загрузки.

Не понимаете виртуальный DOM Vue? Эта статья поможет вам полностью получить виртуальный DOM

Рекомендации, связанные с Git

Простое введение в Git

git реализует автоматическое нажатие

Как я использую git на работе

Рекомендации, связанные с интервью

Front-end Swastika — Основы

Внешний вид 4D-зоны — расширенный

Для получения дополнительной информации см.:Домашняя страница