Front-end Swastika — Основы

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

Эта статья является передней частьюОсновыпридет позжеПередовой

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

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: 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. Хранить данные:

• Cookie: около 4k
• Локальное хранилище и хранилище сессий: вы можете сохранить информацию 5M

3. HTTP-запрос:

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

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

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

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

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

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

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

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

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

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

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

HTML5:

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

css3:

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

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

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

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

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

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

Справочный ответ: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 не изменено, если соответствующий ресурс не был изменен
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	Значение in (вы также можете использовать «трейлеры», чтобы указать, как данные передаются фрагментами) используется для указания того, что браузер ожидает получить некоторые дополнительные поля после последнего фрагмента размера 0.
User-Agent	Идентификационная строка браузера
Upgrade	Требуется обновление сервера до более высокой версии протокола.
Via	Сообщите серверу, какие прокси сделали этот запрос.
Warning	Общее предупреждение о том, что в теле содержимого объекта может быть ошибка.

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

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

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

• Поля, связанные с сильным буфером, имеют Expires, Cache-Control. Если Cache-Control существует в то же время, 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:

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

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

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

// (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，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元
素删除掉。

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

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

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 динамически вычисляет значение длины Любое значение длины можно рассчитать с помощью функции 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- от родительского элемента Значение свойства индекса.

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

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

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

Справочный ответ:Фоновый цвет установленного цвета фона заполнит содержимое, отступы, границы области элементов.

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

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

Разница между встроенным блоком, встроенным и блочным; почему 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, className для одновременного изменения свойств
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. Ограничение на получение параметров запроса заключается в том, что источник совпадает с браузером или веб-сервером, а браузер или веб-сервер ограничивает длину URL-адреса. Чтобы прояснить эту концепцию, мы должны еще раз подчеркнуть следующие моменты:

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

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

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

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

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

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

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

// 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 оно сначала перехватывается, а затем всплывает. Однако, если вы хотите достичь эффекта пузыринга сначала, а затем захватить, для того же события, мониторинга захвата и пузырька, соответствующие соответствующим функциям обработки, прослушивайте событие захвата и приостановить выполнение до тех пор, пока событие Bubling не будет приостановлено, а затем выполнить захват. между.

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

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

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

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

Анонимная функция самовыполнения: мы знаем все переменные, если вы не добавите ключевое слово 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 можно установить на стороне сервера, нет необходимости устанавливать на внешнем интерфейсе, если вы хотите использовать файлы cookie, пожалуйста Пожалуйста, передняя и задняя части должны быть установлены. Междоменный прокси: запустите прокси-сервер для реализации пересылки данных

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

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

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

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

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

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

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

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

• Обещание имеет три состояния: ожидание, выполнено/разрешено и отклонено. Состояние обещания может быть изменено только с "ожидание" на "завершено" или "отклонено" и не может быть отменено, и в то же время "завершено" и "отклонить" также не являются взаимозаменяемыми.
• Обещание должно предоставлять метод 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 ближайшего не -стрелочная функция.
• У стрелочной функции нет собственного объекта arguments, но вы можете получить доступ к объекту Arguments периферийной функции.
• Не может быть вызван с ключевым словом new, а также не имеет значения new.target и прототипа.

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

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

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