Я давно не обновлял пост. Недавно я просматривал и готовился к осеннему набору. Недавно я наконец получил свое первое письмо о намерениях. Наконец-то у меня есть время разобраться с содержанием моего последнего отзыва. Следующие точки знаний все вопросы, заданные арендодателем во время интервью, я сделал несколько больших категорий, и вы можете собрать их, если они вам нужны. Поскольку интервью все еще продолжается, оно будет время от времени обновляться.Поскольку статья Nuggets имеет ограничение на количество слов, точки знаний о части HTML, части CSS, части JS, Vue, git, webpack и информации, связанной с сетью, опубликовано здесь Знания в следующей статьесамородки.IM/post/687707….

HTML-часть:

Классификация тегов HTML:

HTML-теги документа

<!DOCTYPE>: определяет тип документа.
<html>: определяет документ HTML.
<head>: определяет заголовок документа.
<meta>: определяет метаинформацию о странице, которую может предоставить элемент, например описания и ключевые слова для поисковых систем и частоту обновления.
metaМетка имеет два свойства:http-equivАтрибут: Эквивалентен роли файла заголовка http, возвращает некоторую полезную информацию в браузер, используя содержимое для указания содержимого атрибута, такого как

nameАтрибут: он в основном используется для описания веб-страниц.Содержимое в контенте в основном используется роботами поисковых систем для поиска информации и классификации информации.
<base>: Все ссылки на странице определения указывают адрес по умолчанию или пункт назначения по умолчанию.
<title>: определяет заголовок документа.
<link>: определяет связь между документом и внешними ресурсами.
<style>: определение информации о стиле HTML-документа.

<body>: определяет тело документа. (скрипт в конце когда не надо)

<script>: определяет сценарии на стороне клиента, такие как javascript.
<noscript>: определяет альтернативное содержимое, когда скрипт не выполняется. (как текст)

Сортировать по закрытым функциям:

Закрывающий тег — это пара тегов, состоящая из открывающего тега и закрывающего тега, которая позволяет вкладывать и переносить содержимое, например<html></html>,<p></p>Ждать.
Пустые теги — это теги, которые не имеют содержимого и автоматически закрываются в открывающем теге. Общие пустые теги:<br>,<hr>,<img>,<input>,<link> <meta>.

Классификация по признаку разрыва строки:

Элементы уровня блока: элемент уровня блока — это элемент, значение которого равно display:block.
Встроенный элемент: встроенный элемент — это элемент, собственным атрибутом которого является display:inline, а его ширина изменяется в зависимости от содержимого элемента.

Особенности блочных элементов:

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

Общие элементы блочного уровня:

Особенности встроенных элементов:

Встроенные элементы располагаются на одной строке с другими элементами слева направо.
Встроенные элементы не могут напрямую управлять шириной и высотой, а также свойствами CSS, связанными с блочной моделью.Вы можете установить горизонтальное значение внутреннего и внешнего полей. Другими словами, для полей и отступов встроенных элементов допустимы только поля слева/отступы справа и отступы слева/отступы справа, а поля и отступы в вертикальном направлении не действуют.
Ширина и высота встроенного элемента определяются размером самого его содержимого.
Строчные элементы могут содержать только текст или другие строчные элементы. Вложение блочных элементов во строчные элементы не допускается.

Общие встроенные элементы:

Новые функции H5 (часто используемые):

Новые элементы HTML5:

1) Добавлять и удалять теги 8 смысловых элементовheader section footer aside nav main article figure
элемент контентаmarkвыделятьprogressрасписание
новый элемент управления формойcalander date time email url search
новый тип вводаcolor date datetime datetime-local email
Удалить устаревшие тегиbig font frame frameset
2)canvasРисование, поддерживает встроенный SVG. Поддержка MathML
3) Мультимедиаaudio video source embed track
4) Локальное автономное хранилище, перечислите файлы, которые необходимо хранить автономно локально в файле конфигурации манифеста.
5) веб-хранилище,localStorage,SessionStorage

cookie sessionStorage localStorage разница:

Сведения об атрибутах файлов cookie
Nameполе: имя куки
ValueПоле: значение куки
DomainПоле: доменное имя, которое может получить доступ к этому файлу cookie, доменное имя второго уровня может получать файлы cookie в доменном имени верхнего уровня, одно и то же доменное имя второго уровня не может быть получено друг от друга, и доменное имя верхнего уровня не удается получить cookie доменного имени второго уровня
PathПоле: путь к странице, которая может получить доступ к этому файлу cookie, только страница по этому пути может прочитать этот файл cookie.
Expires/Max-AgeПоле: Время ожидания этого файла cookie. Если установлено время, файл cookie будет недействителен, когда это время будет достигнуто. Если оно не установлено, значением по умолчанию является сеанс, то есть он станет недействительным после того, как браузер закрыто.
SizeПоле: указывает размер этого файла cookie.
httpПоле: указывает атрибут httponly этого файла cookie. Если для этого атрибута установлено значение true, в заголовок HTTP-запроса будет включена только информация этого файла cookie, доступ к которой через document.cookie будет недоступен.
SecureПоле: указывает, может ли этот файл cookie быть доставлен только через https.

Файлы cookie и веб-хранилище:

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

sessionStorage и localStorage:

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

Код состояния HTTP:

1xx (предварительный ответ): код состояния, указывающий на предварительный ответ и требующий от запрашивающей стороны продолжения операции.
- 100 (Продолжить) Инициатор запроса должен продолжить выполнение запроса. Сервер возвращает этот код, чтобы указать, что первая часть запроса получена и ожидает остальных.
- 101 (Переключить протокол) Заявитель попросил сервер переключить протоколы, сервер подтвердил и готов к переключению.

2xx (успех): код состояния, указывающий, что запрос успешно обработан.
- 200 (Успех) Сервер успешно обработал запрос. Как правило, это означает, что сервер обслуживал запрошенную веб-страницу. Если этот код состояния отображается для вашего файла robots.txt, это означает, что робот Googlebot успешно просканировал файл.
- 201 (Создано) Запрос выполнен успешно, и сервер создал новый ресурс.
- 202 (Принято) Сервер принял запрос, но еще не обработал его.
- 203 (Неавторизованная информация) Сервер успешно обработал запрос, но возвращенная информация могла быть получена из другого источника.
- 204 (Нет содержимого) Сервер успешно обработал запрос, но не вернул содержимого.
- 205 (Сброс содержимого) Сервер успешно обработал запрос, но ничего не вернул. В отличие от ответа 204, этот ответ требует от отправителя запроса сбросить представление документа (например, очистить содержимое формы, чтобы ввести новое содержимое).
- 206 (Частичное содержимое) Сервер успешно обработал частичный запрос GET.
3xx (перенаправление): для выполнения запроса требуются дальнейшие действия. Обычно эти коды состояния используются для перенаправления.
- 300 (несколько вариантов) Сервер может выполнять различные операции над запросом. Сервер может выбрать действие в зависимости от инициатора запроса (агента пользователя) или предоставить список действий для выбора инициатора запроса.
- 301 (Перемещено навсегда) Запрошенная веб-страница была окончательно перемещена в новое место. Когда сервер возвращает этот ответ (на запрос GET или HEAD), он автоматически перенаправляет запросчика в новое место. Вы должны использовать этот код, чтобы сообщить роботу Googlebot, что страница или сайт были окончательно перемещены в новое место.
- 302 (Временно перемещено). В настоящее время сервер отвечает на запросы с веб-страницы из другого места, но инициатор запроса должен продолжать использовать исходное расположение для будущих запросов. Этот код аналогичен коду 301 для ответа на запросы GET и HEAD и автоматически отправит отправителя запроса в другое место, но вы не должны использовать этот код, чтобы сообщить роботу Googlebot, что страница или сайт перемещены, так как робот Googlebot продолжит сканирование. исходное местоположение и индексация.
- 303 (см. другие местоположения) Сервер возвращает этот код, когда запрашивающая сторона должна использовать отдельные запросы GET для разных местоположений для получения ответа. Для всех запросов, кроме HEAD, сервер автоматически переходит в другое место.
- 304 (не изменено) Запрошенная страница не была изменена с момента последнего запроса. Когда сервер возвращает этот ответ, содержимое веб-страницы не возвращается. Вам следует настроить сервер так, чтобы он возвращал этот ответ (известный как HTTP-заголовок If-Modified-Since), если веб-страница не изменилась с момента последнего запроса запрашивающей стороны. Сервер может сэкономить пропускную способность и накладные расходы, сообщив роботу Googlebot, что страница не изменилась с момента последнего сканирования.
- 305 (использовать прокси). Запрашивающая сторона может использовать только прокси для доступа к запрошенной веб-странице. Если сервер возвращает этот ответ, это также указывает, что запрашивающая сторона должна использовать прокси.
- 307 (временное перенаправление). В настоящее время сервер отвечает на запрос с веб-страницы из другого места, но отправитель запроса должен продолжать использовать исходное расположение для будущих запросов. Этот код аналогичен коду 301 в ответ на запросы GET и HEAD и автоматически отправит отправителя запроса в другое место, но вы не должны использовать этот код, чтобы сообщить роботу Googlebot, что страница или сайт перемещены, так как робот Googlebot продолжит сканирование. исходное местоположение и индексация.
4xx (ошибка запроса): эти коды состояния указывают на то, что запрос мог быть выполнен неправильно, что помешало серверу его обработать.
- 400 (неверный запрос) Сервер не понимает синтаксис запроса.
- 401 (Неавторизованный) Запрос требует аутентификации. Сервер может вернуть этот ответ для веб-страниц, запрошенных после входа в систему.
- 403 (Запрещено) Сервер отклонил запрос. Если вы видите этот код состояния, когда робот Googlebot пытается просканировать действующую страницу на вашем сайте (это можно увидеть на странице веб-сканирования в диагностике инструментов Google для веб-мастеров), возможно, ваш сервер или хост отклоняет доступ робота Googlebot.
- 404 (не найдено) Сервер не может найти запрошенную веб-страницу. Например, этот код часто возвращается для страниц, которых нет на сервере.
- 405 (метод отключен) Отключает метод, указанный в запросе.
- 406 (не принято). На запрошенную веб-страницу не удалось ответить с запрошенными атрибутами содержимого.
- 407 (Требуется авторизация прокси-сервера) Этот код состояния похож на 401 (Неавторизовано), но указывает, что инициатор запроса должен авторизовать использование прокси-сервера. Если сервер возвращает этот ответ, это также указывает, что запрашивающая сторона должна использовать прокси.
- 408 (Тайм-аут запроса) Время ожидания сервера истекло во время ожидания запроса.
5xx (ошибка сервера): эти коды состояния указывают на то, что на сервере произошла внутренняя ошибка при обработке запроса. Эти ошибки могут быть ошибками самого сервера, а не запроса.
- 500 (Внутренняя ошибка сервера) Сервер обнаружил ошибку и не смог выполнить запрос.
- 501 (еще не реализовано) Сервер не может выполнить запрос. Этот код может быть возвращен, например, когда сервер не распознает метод запроса.
- 502 (Bad Gateway) Сервер, выступающий в роли шлюза или прокси, получил недопустимый ответ от вышестоящего сервера.
- 503 (Сервис недоступен) Сервер в настоящее время недоступен (из-за перегрузки или простоя на техническое обслуживание). Обычно это лишь временное состояние.
- 504 (Время ожидания шлюза) Сервер действует как шлюз или прокси, но не получил своевременный запрос от вышестоящего сервера.
- 505 (версия HTTP не поддерживается) Сервер не поддерживает версию протокола HTTP, используемую в запросе.

Метод внешней оптимизации:

классификация методов:

Сокращение запросов: объединение ресурсов, сокращение HTTP-запросов, сжатие minify/gzip,

вебплазилоад.

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

конкретная мера:

Уменьшите количество HTTP-запросов: спрайты CSS, js, сжатие исходного кода CSS, соответствующий контроль размера изображения, Gzip веб-страницы, хостинг CDN, кэш данных, сервер изображений
Интерфейсный шаблон JS + данные, сокращение потерь пропускной способности, вызванное HTML-тегами, внешний интерфейс использует переменные для сохранения результатов запроса AJAX, каждый раз, когда локальные переменные манипулируются, запросы не требуются, а количество запросов уменьшается.
Замена операций DOM на innerHTML уменьшает количество операций DOM и оптимизирует производительность JavaScript.
Когда нужно установить много стилей, установите className вместо того, чтобы напрямую манипулировать стилем.
Используйте меньше глобальных переменных и кэшируйте результаты поиска узлов DOM. Уменьшить количество операций ввода-вывода
Избегайте использования CSS Expression (выражения css), также известного как Dynamic properties (динамические свойства)
Изображения предварительно загружены, таблицы стилей вверху, сценарии внизу и метки времени.
Предотвращение утечек памяти. Утечка памяти — это любой объект, который продолжает существовать после того, как он больше не принадлежит или не нужен. Сборщик мусора периодически сканирует объекты и подсчитывает, сколько других ссылаются на каждый объект. Память объекта может быть восстановлена, если количество ссылок на объект равно 0 (никакие другие объекты не ссылались на объект) или если единственная ссылка на объект циклическая.

Изящная деградация и прогрессивное улучшение:

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

Разница между сообщением и получением:

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

В чем разница между http и https?

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

Поток обработки кэширования в протоколе HTTP:

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

Сильный кешОн управляется полями Expires и cache-Control в заголовке http, которые используются для указания времени кэширования ресурсов. В сильном кеше нормальное обновление будет игнорировать его, но не будет очищено, и потребуется принудительное обновление. Браузер принудительно обновится, и запрос выдаст cache-Control: no-cache и pragma: no-cache
Согласовать кешСервер должен определить, доступен ли кэшированный ресурс, поэтому клиент и сервер должны взаимодействовать через определенный идентификатор, чтобы сервер мог определить, можно ли кэшировать запрошенный ресурс для доступа.
Обычный сброс включает слабые кеши, игнорируя сильные кеши. Только когда URL-адрес вводится в адресной строке или в избранном, ссылки на ресурсы и т. д., браузер включит сильное кэширование, поэтому иногда, когда мы обновляем изображение или файл js, содержимое страницы все еще старое, но напрямую браузер обращается к этому изображению или файлу и видит что-то новое. В основном это включает два набора полей заголовка, связанных с кэшем согласования: Etag и If-None-Match, Last-Modified и If-Modified-Since.

Процесс кеширования браузера:

Когда браузер запрашивает ресурс, он сначала получает информацию о заголовке кэша ресурса, а затем оценивает, истекает ли срок его действия в соответствии с параметрами cache-Control и Expires в заголовке.

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

Например, клиент отправит Etag, отправленный предыдущим сервером, на сервер через заголовок If-None-Match, и служба сравнит, совпадает ли Etag, отправленный клиентом, с сервером. Если они совпадают, установите значение If-None-Match в false и верните статус 304. Клиент продолжает использовать локальный кеш и не анализирует данные, отправленные обратно сервером, если нет, установите значение If -None-Match равно true, статус возврата равен 200, клиент повторно обрабатывает данные, возвращенные сервером; клиент также отправляет отметку времени последней модификации, отправленную сервером, на сервер через заголовок If-Modified-since, и по этой метке времени сервер определяет, актуальна ли страница клиента, если нет, возвращает последний контент, если она актуальна, возвращает 304, и клиент продолжает использовать локальный кеш.

Как решить проблему с кешем во фронтенд-разработке

Для разработчиков просто отключите кеш браузера, найдите сеть, параметр «Отключить кеш» и отметьте его, чтобы отменить кеш.
Разработчики могут закрыть кеш, но они не могут требовать от всех пользователей выполнения таких операций, в этом случае после файла ссылки могут быть вставлены случайные числа или даты, например css/index.css?v=0.0001, браузер рассматривать это как новые запросы без использования кэшированного файла. Поскольку каждая модификация ресурса требует обновления позиции, на которую указывает ссылка, и изменения значения параметра, работать с ним не очень удобно, если только серверная переменная (v=${sysRnd}) не используется на динамических страницах, таких как jsp.
Если проблема с кешем возникает в запросе ajax, добавьте случайное число к адресу запроса ajax.
Прямой ctrl+f5, этот метод может решить проблему обновления ресурсов, на которые непосредственно ссылается страница.
Разработано с использованием режима конфиденциальности браузера;
Если страница, на которую ссылается ресурс, встроена в iframe, вы можете щелкнуть правой кнопкой мыши в области iframe, чтобы перезагрузить страницу.

Как вовремя обновлять файлы кеша (js, css или картинки) в html5

Настройки страницы внутреннего интерфейса

header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

Установите атрибуты метатега на странице html (формат синтаксиса атрибута http-equiv метатега: )

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">//是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出 
<meta http-equiv="Expires" content="0">

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

<link rel="stylesheet" href="./style/style.css?+Math.random()">

Вы также можете использовать подход 3 для файлов js или использовать метку времени после имени файла.

<script language="javascript" src="UILib/Common/Common.js?time=new Date()">

Что происходит после ввода URL-адреса:

простой процесс:

разрешение доменного имени DNS;
установить TCP-соединение;
отправить HTTP-запрос;
сервер обрабатывает запрос;
вернуть результат ответа;
закрыть TCP-соединение;
Браузер анализирует HTML;
Отрисовка макета браузера;

Детальный анализ
Процесс создания запроса:

Разрешение DNS на прикладном уровне

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

Прикладной уровень генерирует сообщение HTTP-запроса

Прикладной уровень генерирует запрос сообщения HTTP для целевого сервера.Запрос HTTP включает в себя начальную строку, заголовок и тело. Заголовок включает хост доменного имени, поддержку активности, User-Agent, Accept-Endoding, Accept-Language, cookie и другую информацию.

Транспортный уровень устанавливает TCP-соединение

Протокол TCP, используемый протоколом http. Разделите сообщение HTTP-запроса на несколько сегментов сообщения в соответствии с порядковым номером и инкапсулируйте каждый сегмент сообщения, используйте локальный случайный исходный порт tcp, чтобы возобновить соединение с портом tcp80 (https — это порт 443) целевого сервера, TCP source К сообщению добавляются порт и порт назначения. То есть блок данных протокола, в то же время будут добавлены такие параметры, как серийный номер, номер подтверждения, контрольная сумма и т. д., и всего будет добавлено 20 байт информации заголовка. Построение здесь запроса TCP-соединения добавит большую задержку в сети. Обычно используются следующие методы оптимизации:
1) Упаковка ресурсов, мерж-реквесты
2) Используйте больше кеша, чтобы уменьшить передачу по сети
3) Используйте keep-alive, чтобы установить постоянное соединение
4) Используйте несколько доменных имен, чтобы увеличить количество одновременных загрузок ресурсов браузера, или используйте технологию мультиплексирования конвейерного соединения http2.

Сетевой уровень использует протокол IP для выбора линий.

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

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

Чтобы обеспечить надежность данных, пакеты данных инкапсулируются в кадры, и каждый кадр передается последовательно, и для каждого блока данных вычисляется CRC (проверка циклическим избыточным кодом), чтобы предотвратить потерю и повторную передачу пакетов данных при возникновении ошибок. происходить. Пакет данных инкапсулируется в кадр, который делится на заголовок кадра и трейлер кадра.Конец кадра является частью проверки CRC.Заголовок кадра в основном добавляет адрес, адрес источника и адрес назначения канального уровня, который то есть MAC-адрес между соседними узлами в сети. 6. Физический уровень передает данные Кадр канального уровня преобразуется в битовый поток в двоичной форме, отправляемый с сетевой карты, а затем преобразуется в электронные, оптические сигналы для передачи в сети.

Резюме: 6 шагов: протокол DNS анализирует URL-адрес, генерирует сообщение HTTP-запроса, строит TCP-связь, использует протокол IP для выбора маршрута передачи, канальный уровень обеспечивает надежную передачу данных, а физический уровень преобразует данные в физический сигнал для передачи.

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

Процесс рендеринга в браузере:

Основные шаги

Браузер анализирует полученный HTML-документ в дерево DOM.
Обработка тегов CSS для формирования CSSOM (объектная модель css)
Объедините DOM и CSSOM в дерево рендеринга, представляющее ряд объектов для рендеринга.
Содержимое, содержащееся в каждом элементе дерева рендеринга, вычисляется, что называется компоновкой Браузер использует метод потоковой передачи для компоновки всех элементов всего за одну операцию рисования.
Отрисовка каждого узла дерева рендеринга на экране, этот шаг называется рисованием.

конкретный процесс:

Постройте DOM-дерево:

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

Построить дерево правил CSSOM

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

Постройте дерево визуализации:

Браузер просматривает каждый видимый узел из корня дерева DOM, а затем находит и применяет правила стиля CSS для каждого видимого узла. Дерево рендеринга не совсем соответствует DOM-дереву, элемент с display:none не находится в дереве рендеринга, а элемент с visible:hidden находится в дереве рендеринга. В настоящее время он еще не выведен на экран.При выводе на экран необходимо использовать информацию о положении каждого узла, а также требуется обработка макета.

макет дерева рендеринга:

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

визуализировать краску дерева:

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

Блокировка Js:
JS может манипулировать DOM, чтобы изменить структуру DOM и модифицировать стиль CSSOM, поэтому браузер сталкивается с<script>тег, построение DOM приостановится до завершения выполнения скрипта, а затем продолжит построение DOM, поэтому<script>Метки обычно размещаются в последнюю очередь. теперь доступно в<script>добавлено на ярлыкdefer,asyncи другие атрибуты, а также отдельно анализирует места, где DOM и CSSOM манипулируются в js, и добавляет их в DOM и CSSOM.
CSS-блокировка:
CSSOM отвечает за хранение информации о рендеринге, поэтому CSSOM должен быть завершен до того, как браузер сможет синтезировать дерево рендеринга, иначе он не войдет в процесс рендеринга. Так что ставьте стили в голову, чтобы парсить css быстрее.
Разница между атрибутами отсрочки и асинхронности:
нетdeferиasyncКогда браузер считывает атрибут,<script>При использовании тега файл скрипта будет прочитан сразу, а последующие элементы документа не будут загружены, что заблокирует последующее построение DOM. При синтаксическом анализе документа он обнаружил параметрdeferСкрипт будет загружен в фоновом режиме, но не помешает рендерингу документа при анализе и рендеринге страницы. Он будет ждать, пока все сценарии отсрочки будут загружены и выполнены по порядку.После выполнения будет запущено событие DOMContentLoaded (загружено содержимое dom).asyncСкрипт будет выполнен после загрузки.asyncЗагрузка скрипта не учитывается в статистике событий DOMContentLoaded имеютdeferилиasyncПосле атрибута чтение файла сценария и загрузка последующих документов выполняются параллельно, то есть асинхронно.Выполнение js-скрипта будет ждать, пока все элементы будут проанализированы и выполнены до вызова события DOMContentLoaded. есть несколькоdeferфайлы скриптов, они будут в порядкеdeferпорядок исполнения иasyncЗагрузка неупорядоченная, как только DOM загрузится, он будет выполнен сразу, вне зависимости от зависимостей между скриптами.

Переставить (макет) и перекрасить (перекрасить):

Изменения DOM влияют на визуализированные геометрические свойства, такие как ширина и высота. Браузер пересчитает геометрические свойства элемента, а также повлияет на геометрические свойства других элементов. Браузеру необходимо перестроить дерево визуализации (Render Этот процесс, называемый перерисовкой (также называемый перекомпоновкой), процесс, с помощью которого браузер перерисовывает затронутую часть экрана, называется перерисовкой.display:noneвызовет перекомпоновку иvisibility: hiddenСвойство не считается невидимым, оно вызывает только перерисовку.

Причины перекраски:

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

Способы уменьшения перерисовки оплавления:

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

Состав http-сообщения:

Каковы преимущества использования длинных HTTP-соединений:

Длинное соединение HTTP (постоянное соединение): на основе TCP-соединения отправьте несколько HTTP-запросов и получите несколько HTTP-ответов, чтобы не открывать новое соединение для каждого запроса.
Короткие соединения используются по умолчанию в HTTP/1.0. То есть каждый раз, когда клиент и сервер выполняют HTTP-операцию, устанавливается соединение, которое разрывается при завершении задачи. Начиная с HTTP/1.1, постоянные соединения используются по умолчанию для поддержания характеристик соединения. Используя протокол HTTP с длинным подключением, эта строка кода будет добавлена в заголовок ответа:Connection:keep-aliveВ случае использования длительного соединения при открытии веб-страницы TCP-соединение, используемое для передачи HTTP-данных между клиентом и сервером, не будет закрыто, при повторном обращении клиента к серверу он продолжит использовать установленное связь. .
Keep-Alive не сохраняет соединение вечно, у него есть время сохранения, которое можно установить в другом серверном ПО (например, в Apache). Реализация постоянного соединения требует, чтобы и клиент, и сервер поддерживали постоянные соединения.
Длинное соединение и короткое соединение протокола HTTP по существу представляют собой длинное соединение и короткое соединение протокола TCP.

Особенности длинного подключения:

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

Особенности коротких соединений:

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

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

Как протокол TLS/SSL обеспечивает информационную безопасность:

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

Базовый процесс протокола SSL/TLS

(1) Клиент запрашивает и проверяет открытый ключ с сервера.
(2) Обе стороны договариваются о создании «ключа диалога».
(3) Обе стороны используют «ключ разговора» для зашифрованной связи.
Конкретный процесс можно разделить на 8 шагов.:

Клиент инициирует https-запрос к серверу и подключается к порту 443 сервера.
У сервера есть пара ключей, то есть открытый ключ и закрытый ключ, которые используются для асимметричного шифрования.
Сервер отправляет открытый ключ клиенту
После того, как клиент получает данные от сервера, он сначала проверяет действительность своего сертификата.Если он легальный, клиент генерирует клиентский ключ и шифрует клиентский ключ открытым ключом, полученным сервером.
Клиент снова инициирует https-запрос и отправляет зашифрованный клиентский ключ на сервер.
Сервер получает зашифрованный ключ, отправленный клиентом, расшифровывает его своим закрытым ключом, а затем шифрует отправляемые данные с помощью ключа клиента.
Отправлять зашифрованные данные клиенту
Клиент расшифровывает зашифрованные данные, используя ключ клиента, чтобы получить данные, отправленные сервером.

Содержание протокола SSL:

протокол рукопожатия

Протокол рукопожатия — это первый подпротокол, который используется, когда клиент и сервер взаимодействуют с помощью SSL-соединения. Протокол рукопожатия включает серию сообщений между клиентом и сервером. Это самый сложный протокол в протоколе SSL. позволяет серверу и клиенту взаимную аутентификацию, согласованное шифрование и алгоритм MAC (хэш-функция с секретным ключом) и секретный ключ используются для защиты данных, отправленных в записи SSL, а протокол квитирования используется перед передачей данных приложения. 1.1 Установить возможности безопасности, отправить информацию, версию обмена, случайное число, идентификатор сеанса, набор шифров, метод сжатия и другую информацию 1.2 Аутентификация сервера и обмен ключами 1.3 Аутентификация клиента и обмен ключами 1.4 Готово

Соглашение о записи

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

Протокол оповещения

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

Резюме: В SSL протокол рукопожатия используется для согласования алгоритмов шифрования и MAC-адресов, а также секретных ключей, протокол рукопожатия используется для шифрования и подписи обмениваемых данных, а протокол оповещения используется для определения того, как решать проблемы во время передачи данных.

Различия между протоколами HTTP 1.0, 1.1, 2.0:

HTTP1.0 HTTP 1.1 Основные отличия
Длинное соединение
HTTP 1.0 должен использовать параметр keep-alive, чтобы указать серверу установить длительное соединение, в то время как HTTP 1.1 поддерживает длинные соединения по умолчанию.
HTTP основан на протоколе TCP/IP. Для создания TCP-соединения требуется трехстороннее рукопожатие, которое имеет определенные накладные расходы. Если соединение необходимо повторно устанавливать для каждого сеанса связи, это повлияет на производительность. Поэтому лучше всего поддерживать длинное соединение, и вы можете использовать длинное соединение для отправки нескольких запросов.
экономить пропускную способность
HTTP 1.1 поддерживает отправку только информации заголовка (без какой-либо информации тела).Если сервер считает, что у клиента есть разрешение на запрос к серверу, он вернет 100, в противном случае он вернет 401. Если клиент получает 100, он начинает отправлять тело запроса на сервер.
Таким образом, когда сервер возвращает 401, клиенту не нужно отправлять тело запроса, что экономит пропускную способность.
Кроме того, HTTP также поддерживает передачу части контента. Таким образом, когда у клиента уже есть какие-то ресурсы, ему нужно только запросить у сервера другую часть ресурсов. Это основа для поддержки возобновления точки останова файла.
HOST-домен
В настоящее время очень распространено создание виртуального сайта на веб-сервере, таком как tomat, то есть несколько виртуальных сайтов на веб-сервере могут использовать один и тот же IP-адрес и порт.
HTTP1.0 не имеет хост-домена, а HTTP1.1 поддерживает этот параметр.

HTTP1.1 HTTP 2.0 Основные отличия
мультиплексирование
HTTP2.0 использует (аналогично epoll) технологию мультиплексирования, так что одно и то же соединение может обрабатывать несколько запросов одновременно, а количество одновременных запросов на несколько порядков больше, чем у HTTP1.1.
Конечно, HTTP1.1 также может установить несколько дополнительных TCP-соединений для поддержки обработки большего количества одновременных запросов, но само создание TCP-соединения также требует дополнительных затрат.
TCP-соединение имеет процесс предварительного нагрева и защиты.Во-первых, проверьте, успешно ли переданы данные.Как только это будет успешно, медленно увеличивайте скорость передачи. Поэтому ответ сервера будет медленнее для мгновенных одновременных подключений. Так что лучше использовать установленное соединение, и это соединение может поддерживать мгновенные одновременные запросы.
Сжатие данных
HTTP1.1 не поддерживает сжатие данных заголовков HTTP2.0 использует алгоритм HPACK для сжатия данных заголовков, чтобы объем данных был небольшим, а передача по сети была быстрее.
Определение заголовков запросов и ответов практически не изменилось в HTTP2.0, за исключением того, что все ключи заголовков должны быть строчными, а строки должны быть независимыми :method:, :scheme:, :host:, :path: эти пары ключ-значение
Для одних и тех же данных больше не нужно повторно отправлять каждый запрос и ответ. Каждая новая пара ключ-значение заголовка либо добавляется в конец текущей таблицы, либо заменяет предыдущее значение в таблице. Таблица заголовков всегда существует во время соединения HTTP2.0 и постепенно обновляется клиентом и сервером.
пуш сервера
Это означает, что когда мы запрашиваем данные с веб-сервера, поддерживающего HTTP2.0, сервер попутно проталкивает некоторые ресурсы, необходимые клиенту, клиенту, чтобы клиент не создавал соединение снова и не отправлял запрос на сервер для его получения. Этот метод очень подходит для загрузки статических ресурсов.
Эти ресурсы, проталкиваемые сервером, на самом деле существуют где-то на стороне клиента, и клиентская сторона может подгружать эти ресурсы напрямую с локального, не идя через сеть, скорость естественно гораздо быстрее.
слой бинарного кадра
HTTP 2.0 будет разделять всю информацию на более мелкие сообщения и кадры и инкапсулировать их в двоичном формате. Например, заголовок инкапсулируется во фрейм заголовков, а тело запроса инкапсулируется во фрейм данных.
Связь HTTP2.0 завершается через соединение TCP, которое может передавать любое количество двунаправленных потоков данных, и каждый соответствующий поток данных отправляется в форме сообщения. Вместо этого сообщение состоит из одного или нескольких кадров, которые могут быть отправлены не по порядку, а затем повторно собраны на основе идентификатора потока в заголовке каждого кадра.

Протокол веб-сокета:

ajax-опрос
Ajax (асинхронный метод javascript и xml) — это эффективное использование операций javascript и dom для частичной загрузки жаккардовых веб-страниц и средств асинхронной связи. По сравнению с предыдущей синхронной связью он обновлял только часть страницы, поэтому соответствующий объем передаваемых данных может быть уменьшен.

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

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

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

WebSocket

WebSocket - это что-то (протокол) из HTML5. Это сетевая технология, предоставляемая HTML5 для полнодуплексной связи между браузерами и серверами. Она относится к протоколу прикладного уровня. Он основан на транспортном протоколе TCP и мультиплексирует канал квитирования HTTP.
Как только веб-сервер и клиент устанавливают коммуникационное соединение с протоколом веб-сокета, все последующие соединения зависят от этого выделенного соединения. Ему нужно только пройти HTTP-запрос, чтобы обеспечить постоянный поток передачи информации.
Указав в заголовке запросаConnection: Upgradeиспользовать протокол websocket

Протокол веб-сокета имеет следующие характеристики.
Функция нажатия
Поддержка функции push от сервера к клиенту. Сервер может отправлять данные напрямую, не дожидаясь запроса клиента.
уменьшить трафик
Пока установлено соединение через веб-сокет, соединение сохраняется, в течение которого сообщения могут непрерывно передаваться до тех пор, пока запрос не будет закрыт. Это также позволяет избежать природы HTTP без сохранения состояния.
По сравнению с http уменьшаются не только общие накладные расходы на каждое соединение, но и объем информации заголовка веб-сокета, а также уменьшается объем связи.
Поддержка двусторонней связи, более в режиме реального времени.
лучшая бинарная поддержка.
меньше затрат на контроль.
После создания соединения, когда клиент ws и сервер обмениваются данными, заголовок пакета данных, контролируемого протоколом, имеет небольшой размер. В случае отсутствия заголовка заголовок от сервера к клиенту составляет всего 2~10 байт (в зависимости от длины пакета данных), и необходимо добавить дополнительную 4-байтовую маску от клиента к сервер. Протокол HTTP должен содержать полный заголовок для каждой связи.
Поддержка расширений
Протокол ws определяет расширения, и пользователи могут расширять протокол или реализовывать собственные подпротоколы. (например, поддержка пользовательских алгоритмов сжатия и т. д.)

Раздел CSS:

css3 добавлено:

границы CSS3, такие какborder-radius,box-shadowи т. д.; фоны CSS3, такие какbackground-size,background-originи т. д.; CSS3 2D, 3D-преобразования, такие какtransformи т. д.; анимации CSS3, такие какanimationЖдать.
Среди новых возможностей CSS3 в макет был добавлен гибкий макет, а также добавлены селекторы, такие какfirst-of-type,nth-childСелектор Etc, добавленный с точки зрения блочной моделиbox-sizingдля изменения модели коробки, добавленной в плане анимацииanimation, 2d-преобразование, 3d-преобразование и т. д., добавление прозрачности, rbga и т. д. с точки зрения цвета, возможность встраивания шрифтов и установка теней шрифтов с точки зрения шрифтов, и, наконец, медиа-запросы и т. д.

Две боксовые модели css

В стандартной блочной модели ширина относится к ширине раздела контента.
В блочной модели IE ширина представляет собой ширину трех частей: содержимое + отступы + граница.
Если вы хотите переключить блочную модель, это также очень просто, здесь вам нужно использовать свойство box-sizing css3.
box-sizing: content-box — это блочная модель W3C
box-sizing: border-box — это блочная модель IE.
Свойство по умолчанию для box-sizing — это content-box.

Центрирование по вертикали:

Используя позиционирование и отрицательные поля, родительский элемент, дочерний элемент имеет фиксированную ширину и высоту, родительский элемент относится к дочернему элементу, верхний атрибут дочернего элемента составляет 50%, а верхнее поле margin-top составляет половину высота самого дочернего элемента (этот метод должен знать высоту дочернего элемента high)
Используя позиционирование и преобразование, родительский элемент имеет фиксированную ширину и высоту, родительский элемент относительно дочернего элемента, верхний атрибут дочернего элемента равен 50 %, а атрибут преобразования смещен на -50 % в направлении оси Y.
Используйте автоматические поля позиционирования, родительский элемент, дочерний элемент имеет фиксированную ширину и высоту, родительский элемент относительно дочернего элемента, верхний элемент дочернего элемента, нижний атрибут равен 0, а поле автоматически устанавливается в вертикальном направлении.
Используйте гибкий макет, родительский элемент, фиксированную ширину и высоту дочернего элемента, родительский элемент использует гибкий макет, установите для свойства align-items значение center
Использовать гибкий макет, родительский элемент, фиксированную ширину и высоту дочернего элемента, использовать гибкий макет родительского элемента, установить свойство flex-direction (установить направление основной оси) на столбец (вертикальная ось), свойство justify-content установить выравнивание по основной оси центрировать
Используйте display:table-cell , родительский элемент имеет фиксированную ширину и высоту, для родительского элемента установлено значение display:table, для дочернего элемента установлено значение display:table-cell и вертикальное выравнивание: посередине.

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

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

свойство анимации

name задает имя анимации,
продолжительность устанавливает период для завершения анимации,
time-function устанавливает кривую скорости анимации,
задержка устанавливается при запуске анимации,
iteration-count устанавливает количество воспроизведений анимации,
Направление указывает, будет ли следующий цикл воспроизводиться в обратном порядке,
Независимо от того, выполняется ли анимация состояния воспроизведения или приостановлена,
fill-mode устанавливает состояние позиции после остановки анимации

свойство перехода

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

разница:

переход — это переход, процесс изменения значений стиля, имеющий только начало и конец, анимация на самом деле еще называется ключевым кадром, а состояние промежуточного кадра можно задать комбинируя с @keyframe;
Анимация с помощью @keyframe может запускать этот процесс, не вызывая событий, а переход должен запускаться событиями наведения или js;
Анимация может задавать множество свойств, таких как количество циклов, состояние конца анимации и т. д., переход может быть запущен только один раз;
анимация может быть объединена с ключевым кадром для установки каждого кадра, но переход имеет только два кадра;
С точки зрения производительности: у браузера есть основной поток и поток набора текста; основной поток обычно выполняет js, макет страницы, создание растровых изображений и т. д., а затем передает сгенерированный битовый массив потоку набора текста, а поток набора текста передает Графический процессор Отрисовка растровых изображений на странице, а также запрос растровых изображений из основного потока и т. д. Когда мы используем анимацию, мы можем изменить многие свойства, например, мы изменяем свойства ширины, высоты, положения и т. д., которые изменяют поток документ Это вызовет, когда страница будет перекомпонована и перерисована, что окажет большее влияние на производительность, но когда мы используем переход, мы обычно комбинируем преобразование с поворотом и масштабированием и т. д. и, конечно, не будем генерировать новые растровые изображения, это не вызовет перестановки страницы;

переходить, преобразовывать и переводить

Преобразование - это преобразование, которое относится к изменению внешнего вида элемента, в котором он расположен.У него есть много средств (функций преобразования) для изменения внешнего вида, таких как смещение, масштабирование, вращение и т. д., и имя функции смещения называется translate, поэтому перевод является частью преобразования.
преобразование: [функция преобразования];
Функция свойства:
translate(x, y): смещение элемента, расстояние по осям x и y смещения элемента, которое может быть отрицательным
scale(x, y): масштабирование элемента, кратное масштабированию элемента по осям x и y, меньше 1 уменьшается, больше 1 увеличивается, меньше 0 эффект равен 0
rotate(angle): поворот элемента, угол поворота, единица измерения, градус, поворот по часовой стрелке

transform: translate(-10px, 10px);//当前元素往上移动 10 像素，往右移动 10 像素。
transform: translate(10px, 10px) rotate(10deg);//指定多个转换效果。

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

transition: [属性名] [持续时间] [速度曲线] [延迟时间];
transition: height 2s ease .5s;//高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒。

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

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

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

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

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

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

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

Позиционирование по умолчанию Статическое:
По умолчанию. Без позиционирования элемент отображается в обычном потоке (игнорируя объявления сверху, снизу, слева, справа или z-index).

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

Несколько методов флоатинга:

Способ 1: используйте пустой элемент с атрибутом clear
Используйте пустой элемент после плавающего элемента, например<div class="clear"></div>и назначьте свойство .clear{clear:both;} в CSS, чтобы очистить поплавок. также можно использовать<br class="clear" />или<hr class="clear" />помыть.

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

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

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

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

Что такое селекторы CSS и их приоритет:

Существует четыре основных селектора и четыре расширенных селектора для CSS:

Основной селектор:

Селектор тегов: для класса тегов
P{}: выбрать все<p>элемент

Селектор ID: использовать для определенного тега
#id{}: выберите все элементы с id="firstname"

Селектор класса: используйте для всех тегов, которые вы хотите
.class{}: выбирает все элементы с class="intro"

Универсальный селектор (подстановочный знак): работает для всех тегов (устаревший)

: выделить все элементы

Расширенный селектор:

Селекторы потомков: разделены пробелами
раздел п: выбрать<div>все внутри элемента<p>элемент
div>p: выбрать всех родителей<div>элементаль<p>элемент
div+p: выбрать все сразу после<div>после элемента<p>элемент

Селектор атрибута: с атрибутом или указать содержимое атрибута
[цель]: выберите все элементы с целевым атрибутом
[target=-blank]: выберите все элементы, используя target="-blank"
[title~=flower]: выбирает все элементы, атрибут title которых содержит слово «цветок».
[lang|=en]: выбирает все элементы, атрибут lang которых начинается с en

Селектор пересечения: разделенный .
h3.специальный: выберите<h3>тег и класс - это тег .special

Селекторы объединения (селекторы групп): разделены запятыми
div,p: выбрать все<div>элементы и<p>элемент
p,h1,#mytitle,.one: выберите все теги с p,h1,id="mytitle",class="one"

Селектор псевдокласса:
Селектор статического псевдокласса:
a:link: выбрать все непросмотренные ссылки
a:visited: выбирает все посещенные ссылки
Селектор динамического псевдокласса:
a:active: выберите активную ссылку
a:hover: выберите, когда мышь находится над ссылкой
input:focus: выбирает элемент ввода с фокусом
Заказать селектор псевдокласса:
p:first-letter: выберите первую букву каждого элемента p
p:first-line: выберите первую строку каждого элемента p
p:first-child: задает стиль, только если элемент p является первым дочерним элементом своего родителя.
p:before: вставить содержимое перед каждым элементом p
p:after: вставить содержимое после каждого элемента p

Новые селекторы Css3: p~ul: выберите каждый элемент ul после элемента p
a[src^"ttps"]: выбирает каждый элемент, значение атрибута src которого начинается с "https"
a[src$=".pdf"]: выбирает каждый элемент, значение атрибута src которого заканчивается на "pdf"
a[src*="runoob"]: выбирает каждый элемент, значение атрибута src которого содержит подстроку "'runoob"
p:first-of-type: выбирает первый элемент p, для которого каждый элемент p является его родителем
p:last-of-type: выбирает последний элемент p, для которого каждый элемент p является его родителем
p:only-of-type: выбирает единственный элемент p, родительским элементом которого является каждый элемент p.
p:only-child: выбирает каждый элемент p, который является единственным потомком своего родителя
p:nth-child(2): выбирает каждый элемент p, который является вторым дочерним элементом его родителя.
p::nth-child(-n+3): выбирает первых трех дочерних элементов каждого элемента p, который является его родителем
p:th-last-child(2): то, что выбирает каждый элемент p, является вторым дочерним элементом его родителя, считая от последнего дочернего элемента
p:th-of-type(2): выбирает второй элемент p, родительским элементом которого является каждый элемент p.
p:nth-last-of-type(2): то, что выбирает каждый элемент p, является вторым элементом p его родителя, считая от последнего дочернего элемента
p:last-child: выбирает каждый элемент p как последний дочерний элемент своего родителя.
.root: выбирает корневой элемент документа
p:empty: выбирает каждый элемент p без дочерних элементов (включая текстовые узлы)
#news:target: выбирает текущий активный элемент #news (URL-адрес, по которому щелкнули, содержащий имя привязки)
inputenabled: выбирает каждый включенный элемент ввода
input:disabled: выбирает каждый отключенный элемент ввода
input.checked: выбирает каждый отмеченный элемент ввода
:not(p): выбирает каждый элемент, который не является элементом p
:selection: Соответствует той части элемента, которая выбрана или выделена пользователем.
:out-of-range: соответствует элементам ввода, значения которых выходят за пределы указанного диапазона
:in-range: соответствует элементам ввода, значение которых находится в указанном диапазоне
.read-write: для сопоставления элементов, доступных для чтения и записи.
:read-only: используется для сопоставления элементов с установленным атрибутом «только для чтения».
:Optional: используется для соответствия необязательным элементам ввода
.required: используется для сопоставления элементов с установленным атрибутом «required».
действительный: используется для сопоставления элементов, чье входное значение является тайваньским.
cinvalid: используется для сопоставления элементов с недопустимыми входными значениями

Приоритет селектора CSS:

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

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

Во-первых, сжатие полей относится к двум элементам в отношениях родитель-потомок, а слияние полей — к двум элементам относительно двух одноуровневых отношений.

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

Для двух элементов с отношениями родитель-потомок поля в вертикальном направлении будут склеены вместе.Верхнее поле внешнего слоя и модели берет максимальное верхнее поле двух элементов, а внутренний элемент с коллапсом поля равен относительно всего документа.
Решение: оба варианта можно решить, активировав BFC.

Что такое БФК:

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

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

Какие элементы генерируют BFC:

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

Разница между встроенным блоком, встроенным и блочным:

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

Разница между px, em, rem, %, vw, vh, vm в этих единицах

em: относится к размеру шрифта родительского элемента, который имеет характеристики наследования.Если размер шрифта определен сам по себе, он будет рассчитан в соответствии с самим собой (шрифт браузера по умолчанию равен 16px), а 1em в вся страница не является фиксированным значением
rem: по сравнению с корневым элементом html размер шрифта корневого элемента html может быть установлен равным 10px, тогда 1.2em равен 12px;
vw: новая единица измерения css3, аббревиатура ширины просмотра, относится к высоте видимого окна.Если ширина 1200 пикселей, то 10vw равно 120 пикселей, например: ширина браузера составляет 1200 пикселей, 1 vw = 1200 пикселей/100 = 12 пикселей.
Vh: Подобно vw, относится к высоте видимого окна.
Vm: Относительно ширины или высоты области просмотра, в зависимости от того, что меньше, наименьшая единица делится на 100 единиц, например: высота браузера 900 пикселей, ширина 1200 пикселей, взять наименьшую высоту браузера, 1 vm = 900 пикселей/100 = 9 пикселей.

гибкий макет:

Часто используемые свойства Flex:

display: задает тип поля HTML-элемента.
flex-direction: определяет расположение дочерних элементов в контейнере flex.
- ряд: горизонтально расположен слева направо (выравнивание по левому краю), расположение по умолчанию.
- row-reverse: инвертировать горизонтальное расположение (выравнивание по правому краю, сзади наперед, последний элемент находится спереди.
- столбец: вертикальное расположение.
- column-reverse: изменить вертикальное расположение сзади на передний план, чтобы последний элемент был сверху.
justify-content: устанавливает выравнивание элемента flexbox в основном (горизонтальном) направлении.
- flex-start: элементы Flex заполняются рядом с заголовком строки. Это значение по умолчанию. Край основного начального поля первого гибкого элемента помещается на основной начальный край строки, а последующие гибкие элементы, в свою очередь, размещаются заподлицо.
- Flex-End: Эластичный проект находится рядом с рядом. Внешний край основного конца первого упругого члена помещается в боковую линию основного конца ряда, в то время как последующая эластичность размещается на месте.
- center: гибкий элемент центрируется рядом с отступом. (Если оставшееся свободное пространство отрицательное, flex-элемент будет переполнен в обоих направлениях).
- space-between: элементы Flex равномерно распределены по строке. Если оставшееся пространство отрицательное или имеется только один гибкий элемент, значение эквивалентно flex-start. В противном случае поле первого гибкого элемента выравнивается с основным начальным краем строки, а поле последнего гибкого элемента выравнивается с основным конечным краем строки, а затем остальные гибкие элементы распределяются по ряд, соседние элементы расположены на одинаковом расстоянии друг от друга.
- space-round: элементы Flex равномерно распределяются по строке, оставляя половину пространства с обеих сторон. Если оставшееся пространство отрицательное или имеется только один гибкий элемент, значение эквивалентно центру. В противном случае гибкие элементы распределяются вдоль линии и находятся на одинаковом расстоянии друг от друга (скажем, 20 пикселей), с половиной расстояния (1/2 * 20 пикселей = 10 пикселей) между первой и последней сторонами и гибким контейнером.
align-items: устанавливает выравнивание элементов flexbox в боковом (вертикальном) направлении.
- flex-start: граница начальной позиции боковой оси (вертикальной оси) элемента flex box непосредственно примыкает к начальной границе боковой оси строки.
- flex-end: граница начального положения боковой оси (вертикальной оси) элемента flex box непосредственно примыкает к конечной границе боковой оси строки.
- center: элемент flexbox центрируется на боковой (вертикальной) оси строки. (Если размер строки меньше размера элемента flexbox, он будет переполняться на ту же длину + градусы в обоих направлениях).
- baseline: если встроенная ось и боковая ось элемента flexbox совпадают, это значение эквивалентно «flex-start». В противном случае это значение будет участвовать в выравнивании базовой линии.
- stretch: Если значение свойства, задающего размер боковой оси, равно 'auto', его значение сделает размер поля поля элемента максимально приближенным к размеру линии, на которой он расположен, но в то же время , он будет соответствовать свойствам min/max-width/height.
flex-wrap: устанавливает, следует ли выполнять перенос, когда дочерние элементы flex-бокса превышают родительский контейнер.
- nowrap — по умолчанию flex-контейнеры представляют собой одну строку. В этом случае flex-потомок может переполнить контейнер.
- wrap — контейнер flex многострочный. В этом случае переходящая часть эластичного подпункта будет помещена на новую строку, а внутри подпункта строка будет разорвана.
- wrap-reverse - изменить расположение обтекания.
align-content: изменяет поведение свойства flex-wrap аналогично align-items, но вместо установки выравнивания дочерних элементов задает выравнивание строк.
- растянуть - по умолчанию. Ряды будут растягиваться, чтобы занять оставшееся место.
- flex-start — строки располагаются по направлению к началу контейнера flexbox.
- flex-end — строки располагаются ближе к концу контейнера flexbox.
- center — строки располагаются по направлению к центру контейнера flexbox.
- space-between — строки равномерно распределены в контейнере flexbox.
- space-round — строки равномерно распределяются в контейнере flexbox, оставляя половину пространства между дочерними элементами и дочерними элементами на обоих концах.
flex-flow: сокращение для flex-direction и flex-wrap
порядок: Установите порядок, в котором расположены дочерние элементы flexbox.
- целое число: используйте целочисленное значение для определения порядка сортировки, начиная с меньшего значения. Может быть отрицательным.
align-self: используется для гибких дочерних элементов. Переопределите свойство контейнера align-items.
- auto: если значение 'align-self' равно 'auto', его вычисленное значение равно значению 'align-items' родителя элемента или 'stretch', если у него нет родителя.
- flex-start: граница начальной позиции боковой оси (вертикальной оси) элемента flex box непосредственно примыкает к начальной границе боковой оси строки.
- flex-end: граница начального положения боковой оси (вертикальной оси) элемента flex box непосредственно примыкает к конечной границе боковой оси строки.
- center: элемент flexbox центрируется на боковой (вертикальной) оси строки. (Если размер строки меньше размера элемента flexbox, он будет переполняться на одинаковую длину в обоих направлениях).
- baseline: если встроенная ось и боковая ось элемента flexbox совпадают, это значение эквивалентно «flex-start». В противном случае это значение будет участвовать в выравнивании базовой линии.
- stretch: Если значение свойства, задающего размер боковой оси, равно 'auto', его значение сделает размер поля поля элемента максимально приближенным к размеру линии, на которой он расположен, но в то же время , он будет соответствовать свойствам min/max-width/height.
flex: установите, как дочерние элементы flex-бокса распределяют пространство. Обычно используйте flex:1, чтобы разделить пространство пополам,flex: 1; === flex: 1 1 auto;
- Первый параметр означает: flex-grow определяет коэффициент увеличения элемента, по умолчанию 0, то есть если осталось место, то не будет увеличиваться
- Второй параметр означает: flex-shrink определяет коэффициент сжатия элемента, по умолчанию 1, то есть если места недостаточно, элемент сожмется
- Третий параметр означает: flex-basis вычисляет, есть ли у элемента избыточное пространство, прежде чем выделять лишнее пространство для двух вышеуказанных свойств.Значение по умолчанию — auto, то есть размер самого элемента.
  - auto: оценивается как 1 1 auto
  - начальный: вычисленное значение равно 0 1 авто
  - нет: вычисленное значение равно 0 0 авто
  - наследовать: наследовать от родительского элемента
  - [ flex-grow ]: определяет коэффициент расширения элемента flex box.
  - [ flex-shrink ]: определяет коэффициент сжатия элемента flex box.
  - [ flex-basis ]: определяет базовое значение по умолчанию для элементов flex box.

Разница между гибкой версткой и адаптивной версткой:

Часто используемые свойства Flex:

Макет потоковой передачи: используйте нефиксированные пиксели для определения содержимого веб-страницы, то есть макет в процентах. Установив степень поля в процентах, его можно масштабировать в соответствии с шириной экрана. Он не ограничен фиксированными пикселями. , и содержимое автоматически заполняется.
Отзывчивый макет с использованием Media Query (медиазапрос) в css3 путем запроса ширины экрана для указания макета веб-страницы определенного диапазона ширины

Ультрамаленький экран (мобильное устройство): 768 пикселей или меньше Устройства с маленьким экраном: 768-992 пикселей;
Устройство со средним экраном: 992–1200 пикселей;
Широкоэкранные устройства: 1200 пикселей и выше
Из-за громоздкости разработки адаптивных макетов обычно используются сторонние адаптивные фреймворки, такие как bootstrap для выполнения части работы.

Как реализовать трехколоночный макет:

Часто используемые свойства Flex:

плавать

Задается высота трех столбцов, ширина левого и правого столбцов фиксируется, а левый и правый плавающие столбцы устанавливаются соответственно.
Достоинства: хорошая совместимость
Недостатки: всплывающие вне потока документов, необходимо выполнить обработку, чтобы очистить плавающие
2. Абсолютное позиционирование
Родительский элемент настроен на абсолютное позиционирование, левый и правый столбцы имеют фиксированную ширину, левый столбец установлен на левый: 0; правый столбец установлен на правый: 0; средний столбец установлен на левый и правый, чтобы быть ширина левой и правой колонок соответственно
Преимущества: быстро, меньше проблем
Недостатки: макет находится вне потока документов, дочерние элементы также должны быть вне потока документов, а удобство использования оставляет желать лучшего.
3. Гибкая компоновка
Родительский элемент настроен на display: flex, левый и правый столбцы имеют фиксированную ширину, а средний столбец установлен на flex: 1, занимая оставшееся пространство.
Достоинства: совершеннее, мобильная верстка в основном гибкая
4. Макет таблицы
Для родительского элемента установлено значение display:table, для всех левого и правого средних столбцов установлено значение display:table-cell, а левый и правый столбцы имеют фиксированную ширину.
Достоинства: хорошая совместимость
Недостатки: Операция громоздкая, когда одна из ячеек становится больше, другие ячейки становятся больше.
5. Макет сетки
Родительский элемент устанавливает display:grid, фиксированную ширину,grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
Достоинства: может делать много сложных вещей, код относительно лаконичен
Недостатки: новая технология, плохая совместимость с младшими версиями браузеров.

JS-часть:

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

Простые типы данных: Undefined, Null, Boolean, Number and String, es6xinzeng Сложный тип данных: объект Просмотрите базовый тип данных через typeof, где null вернет объект, который понимается как пустой объект.
Разница между Null и undefined:

Null представляет несуществующий объект, преобразованный в значение 0, объект, который еще не существует, и часто используется для обозначения того, что функция пытается вернуть несуществующий объект.

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

в качестве аргумента функции, указывая, что аргумент функции не является объектом
как конец цепочки прототипов объекта

Undefined — это примитивное значение, не представляющее ничего, которое преобразуется в значение NaN.Когда объявленная переменная не инициализирована, значение переменной по умолчанию не определено.

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

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

ES6 новый

1. Добавлены команды объявления let и const, Let означает переменные, а const означает константы.

И let, и const являются блочными областями. Блок кода {} используется в качестве области действия и может использоваться только в блоках кода.
Переменного продвижения нет, его можно только объявить перед использованием, иначе будет сообщено об ошибке. Переменная недоступна, пока переменная не объявлена.
В пределах одного и того же блока кода не допускаются повторяющиеся объявления.
Const объявляет константу только для чтения, которую необходимо присвоить при объявлении. (Если const является объектом, значение объекта может быть изменено, то есть адрес, на который указывает объект, не может быть изменен, и переменная-член может быть изменена.)

2. Строка шаблона

В качестве идентификатора используется пара обратных кавычек, которые можно использовать как обычную строку, также можно использовать для определения многострочной строки, а также можно встраивать переменные, выражения js или функции в строку, переменные, выражения js или функции должны быть написаны на${}середина.

3. Методы расширения, связанные с функциями

параметры функции по умолчанию
ES6 предоставляет значения по умолчанию для параметров, которые инициализируются при определении функции, чтобы их можно было использовать, если параметр не передается.
стрелочная функция
Способ записи: имя функции=(формальный параметр)=>{…}, когда в теле функции только одно выражение, {} и return можно не указывать, когда в теле функции только один формальный параметр, () можно быть опущен.
Функции:

Стрелочные функции — это анонимные функции, их нельзя использовать в качестве конструкторов и нельзя использовать новые значения.
Стрелочные функции не связывают аргументы, вместо этого используют остальные параметры...
Стрелочная функция не привязывает this, она будет захватывать значение this контекста, в котором оно находится, как собственное значение this.
Никакой метод не может изменить эту точку в стрелочной функции.Когда стрелочная функция вызывает функцию через методы call() и apply(), передаются только параметры, а эта точка не изменяется.

Стрелочные функции не имеют свойства прототипа

Стрелочные функции нельзя использовать в качестве функций-генераторов, а ключевое слово yield нельзя использовать.
Отличие от обычных функций: this в обычных функциях всегда указывает на объект, вызвавший его последним (например, функция, определенная в объекте, this внутри этой функции указывает на этот объект), если объект не вызывается напрямую, он будет указывать на undefined или window, обычно указывает на окно и указывает на undefined только в строгом режиме.

Четыре режима вызова this в обычных функциях:

шаблон вызова функции

Если функция не является свойством объекта, она вызывается как функция. В этот момент это указывает на окно

вызов метода

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

вызов конструктора

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

Вызов контекста (заимствованный шаблон метода)

Режим контекстного вызова также называется режимом заимствования методов, который делится на применение и вызов Метод использования: function.call() или function.apply()

Несколько специальных пунктов

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

4. Объектные методы расширения

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

Метод Object.keys() получает все имена свойств или методов объекта (за исключением содержимого прототипа) и возвращает массив.

Object.assign(), метод assign объединяет свойства и методы нескольких исходных объектов в целевой объект. Он может получать несколько параметров, первый параметр — это целевой объект, а следующие — исходные объекты.

Атрибуты первого уровня копируются глубоко, а атрибуты более позднего уровня копируются неглубоко.

5. для цикла

представляет собой унифицированный способ обхода всех структур данных. Диапазон циклов for...of, которые можно использовать, включает массивы, структуры Set и Map, определенные массивоподобные объекты (такие как объекты arguments, объекты DOM NodeList), объекты Generator и строки.Невозможно выполнить итерацию по объектам, поскольку объекты не имеют встроенных итераторов.

6.импорт и экспорт

В стандарте ES6 JavaScript изначально поддерживает модули. Таким образом, код JS делится на небольшие блоки с разными функциями для модуляризации, а коды разных функций пишутся в разных файлах, каждому модулю нужно только экспортировать публичную интерфейсную часть, а затем его можно использовать в других местах. путем импорта модуля.
export используется для экспорта интерфейса переменных этого модуля (файл можно понимать как модуль).
import используется для загрузки модуля с интерфейсом экспорта в другой модуль.
Команды импорта и экспорта могут находиться только в верхней части модуля, а не внутри блока кода.

7. Деструктивное назначение

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

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

8.установить структуру данных

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

размер Длина данных
add() добавляет значение, возвращая саму структуру Set.
delete() удаляет значение и возвращает логическое значение, указывающее, было ли удаление успешным.
has() находит часть данных и возвращает логическое значение.
clear() очищает все члены, без возвращаемого значения.
Применение: дедупликация массива

Примечание. Возвращаемый результат нового набора (arr) — это объект, вы можете использовать Array.from (новый набор (arr)) или [... новый набор (arr)] для возврата массива.

9.структура данных карты

Структура карты представляет собой набор пар ключ-значение (структура хэша). Представление объекта по умолчанию в JS — {}, представляющее собой набор пар ключ-значение, но ключ должен быть строкой. Чтобы использовать число или другие типы данных в качестве ключей, спецификация ES6 вводит новый тип данных Map. Карта представляет собой структуру набора пар ключ-значение с чрезвычайно высокой скоростью поиска. Для инициализации карты требуется двумерный массив или прямая инициализация пустой карты. Разница между картой и объектом

Ключи Obj можно использовать только как ключи с простыми типами данных, такими как строки, числа или символы.
Ключи карты могут быть любого типа данных
Карта не имеет проблемы коллизии одинаковых имен, каждый объект представляет собой отдельный адрес памяти.
Map реализует итераторы, которые можно пройти с помощью for...of, а Object — нет.
Map может получить длину напрямую, но Object не может.
Мета-карта, заполненная в карте, может быть расширена с использованием синтаксиса с многоточием, а объект - нет. Заполнение элементов сохранит первоначальный порядок, чего не может Object.

10. Оператор спреда Оператор спреда (...)

Может расширять строки, массивы, объекты и т. д.

преобразовать строку в массив

Преобразование коллекции в данные

Слияние двух массивов или объектов

В функции, используемой вместо параметра arguments,

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

объект обещания

Promise — это решение для асинхронного программирования, которое выражает асинхронные операции в процессе синхронных операций, избегая уровней вложенных функций обратного вызова.
Конструктор обещаний выполняется синхронно, а метод then выполняется асинхронно.
Он имеет три состояния: ожидание выполнения, решено-завершено, отклонено-сбой.
Конструктор Promise принимает один параметр и обратный вызов с двумя параметрами: разрешение и отклонение. Сделайте что-нибудь в обратном вызове (например, асинхронно) и вызовите разрешение, если все в порядке, в противном случае отклоните. Метод promise.then() можно вызвать для уже созданного экземпляра объекта обещания, передав методы разрешения и отклонения в качестве обратных вызовов. Метод then() принимает два параметра: onResolve и onReject, которые представляют успех или неудачу текущего объекта обещания соответственно.

Принцип реализации ОбещанияВо-первых, промисы имеют три состояния
Исходное состояние экземпляра объекта Pending при его создании
Выполнено можно понимать как успешное состояние
Отклонено может быть понято как неудачное состояние
Создание экземпляра Promise требует передачи функции конструктору Promise. Входящая функция должна иметь два формальных параметра, оба из которых являются параметрами типа function. Они разрешаются и отклоняются соответственно.
В Promise также есть метод then. Метод then используется для указания операции, которая будет выполняться при изменении состояния объекта Promise.Первая функция (onFulfilled) выполняется при его разрешении, а вторая функция (onRejected) выполняется при отклонении.
Когда состояние изменяется на разрешение, его уже нельзя изменить на отклонение и наоборот.
Недостатки обещаний:

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

Promise.all()
После того, как массив объектов промисов завершен в асинхронном порядке, завершенный результат передается в первую функцию then.Параметр списка представляет собой массив img, возвращаемый во всех асинхронных then в массиве arr объектов промисов по порядку. Это также можно понимать как добавление img после завершения каждого объекта обещания в arr в массив по порядку и возвращение этого списка массивов после того, как все завершено
Promise.all(requestPromises).then(…).catch(…) войдет в метод then, когда все requestPromises будут разрешены, и вернет все результаты в виде массива. Пока есть сбой, он попадет в ловушку. Если метод catch определен в одном запросе, то метод catch Promise.all не будет введен. Таким образом, невыполненные промисы могут быть помещены в список в одном улове, и после завершения раунда запросов можно запросить неудачные запросы.
Promise.race()
Функция состоит в том, чтобы передать параметр, возвращаемый then в обещании, которое выполняется первым в массиве объектов обещания arr, в img, то есть параметр первой функции promise.race().then().

Процесс создания новой функции

Конкретный процесс использования ключевого слова new для вызова функции (new ClassA(...))

Создать пустой объектVar obj={};
Установите свойство конструктора нового объекта на имя конструктора и укажите __proto__ нового объекта на прототип конструктора.Obj.__proto__==ClassA.prototype
Используйте новый объект для вызова конструктора, укажите это в конструкторе на новый объект экземпляра,ClassA.call(obj)
Сохраните адрес инициализированного нового объекта в переменной слева от знака равенства.
Если конструктор возвращает это или возвращаемое значение является базовым типом (число, строка, логическое значение, null, undefined) или не имеет возвращаемого значения, возвращается новый объект экземпляра, а если это значение ссылочного типа, возвращается ссылочный тип. .

Разница между вызовом, применением и привязкой в ES5

В Js и вызов, и применение предназначены для изменения контекста среды выполнения функции, то есть для изменения указателя this внутри тела функции.
Формат: function.call(объект), function.apply(объект), function.bind(объект)().
Методы, вызывающие call и apply, выполняются немедленно.
Метод Bind создает новую функцию, вам нужно добавить (), будет реализован, входящий параметр в () внутри

Различия между модульностью ES6 и CommonJS

Что такое модульность js?

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

CommonJs
CommonJs переносится через nodeJs, каждый файл js представляет собой модуль, и каждый модуль имеет отдельную область. Модуль экспортирует объект через module.exports. Используйте метод require, чтобы прочитать файл и вернуть его внутренний объект module.exports.
Проблема с CommonJs заключается в том, что его загрузка является синхронной, что нормально на стороне сервера, но неприменимо в браузерах, полных асинхронности. В сообществе произошел раскол, чтобы приспособиться к браузеру.

AMD (определение асинхронного модуля)
Спецификация AMD определяет модуль с помощью метода define и загружает модуль с помощью метода require. RequireJS реализует эту спецификацию.
У AMD есть только один интерфейс: define(id?,dependencies?,factory); он должен сформулировать все зависимости (dep) при объявлении модуля и передать их фабрике в качестве формального параметра. Если зависимостей нет, определите простые модули (или автономные модули)

CMD (Общее определение модуля)
CMD — это стандартизированный результат определения модуля в процессе продвижения SeaJS.

Разница между AMD и CMD:

Для зависимых модулей AMD — раннее выполнение, CMD — отложенное выполнение. Однако, начиная с RequireJS 2.0, он также был изменен для задержки выполнения (в зависимости от метода написания метод обработки отличается). CMD выступает за как можно более ленивую (максимально ленивую загрузку, также известную как отложенная загрузка, то есть загрузка только при необходимости).
CMD отдает предпочтение закрытым зависимостям (определяется, когда зависимости доступны), AMD отдает предпочтение передним зависимостям (зависимости должны быть записаны в первую очередь).
API AMD по умолчанию один для многократного использования, API CMD строго дифференцирован, и рекомендуется единая ответственность. Например, в AMD требование делится на глобальное требование и локальное требование, оба называются требованием. В CMD нет глобального требования, но в зависимости от полноты модульной системы предоставляется seajs.use для реализации загрузки и запуска модульной системы. В CMD каждый API прост и чист.

Модульность в es6До выхода es6 сообщество сформулировало несколько схем загрузки модулей, наиболее важными из которых являются CommonJS и AMD.Первый используется для серверов, а второй – для браузеров.ES6 реализует модульные функции на уровне языковых стандартов, а реализация довольно прост, и он может полностью заменить спецификации CommonJS и AMD и стать общим модульным решением для браузеров и серверов.
Главная особенность модульности в es6 — быть как можно более статичным.
Модули ES6 не являются объектами, но явно указывают код вывода с помощью команды экспорта, а затем ввод с помощью команды импорта.
Функция модуля в основном состоит из двух команд: экспорта и импорта.Команда экспорта используется для указания внешнего интерфейса модуля, а команда импорта используется для ввода функций, предоставляемых другими модулями.
Вообще говоря, модуль является независимым файлом, и все переменные внутри файла не могут быть получены извне.Если вы хотите, чтобы снаружи можно было прочитать переменную внутри модуля, вы должны использовать ключевое слово экспорта для вывода переменной .

Существует три основных варианта модульности Javascript:

CommonJS

2. AMD / CMD 3. ES6 Различия между модулями ES6 и CommonJS:

Модули CommonJS выводят копию значения, модули ES6 выводят ссылку на значение.
Модули CommonJS загружаются во время выполнения, а модули ES6 представляют собой скомпилированные интерфейсы.
Модуль CommonJs выводит копию значения, то есть после вывода значения изменения в модуле не повлияют на значение.

Вы можете видеть, что количество было изменено в common.js, но вывод остался прежним. Это связано с тем, что count является примитивным значением и будет кэшироваться. Если это не записано как функция, можно получить значение внутреннего изменения. Перепишите module.exports в common.js на
Вывод такой: 1, 2, 2
В ES6 написано так, что импортируется с помощью экспорта и импорта
Модули ES6 динамически ссылаются и не будут кэшироваться.Модули в модуле привязаны к модулю, в котором они расположены, но значения загружаются динамически и не могут быть повторно скопированы.
**Возможности модулей es6:

Статический, должен быть вверху, не может использовать условные операторы, автоматически принимает строгий режим
оптимизация дерева и компиляции, а также увеличение объема в webpack3
Внешний может получать значение в реальном времени, а не кешированное значение (ссылка вместо копии)

**Разница между модулем es6 и модулем commonjs:

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

** Те же точки между модулями es6 и модулями commonjs:

Оба могут изменить значение внутренних свойств объекта.

Перезвони:

Перезвони: Функция передается в качестве параметра другой функции (здесь мы называем другую функцию «otherFunction»), а функция обратного вызова вызывается в otherFunction.

/注意到click方法中是一个函数而不是一个变量
//它就是回调函数
$("#btn_1").click(function() {
    alert("Btn 1 Clicked");
});

//或者
function click() { // 它就是回调函数
    alert("Btn 1 Clicked");
}
$("#btn_1").click(click);

Функция обратного вызова не выполняется немедленно. Он будет «обратно вызван» (как и его имя) в определенный момент времени внутри функции, которая его содержит.
Основные принципы реализации callback-функций
Используйте именованные или анонимные функции в качестве обратных вызовов
Как и в предыдущем примере, первый метод представляет собой анонимную функцию обратного вызова (с использованием анонимной функции, определенной в позиции параметра, в качестве функции обратного вызова). Второй способ — использовать именованную функцию в качестве обратного вызова (определить именованную функцию и передать имя функции как переменную в функцию).

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

function a(functionb(){
    c(function d(){
    })
})

Мы обнаружили, что в приведенном выше коде используется множество функций обратного вызова (передача одной функции в качестве параметра другой функции) и много символов в конце }), что делает код запутанным.
Как решить ад обратного вызова
Первый использует Promise в ES6, что переводится с китайского как promise, что означает, что он обещает вернуть вам данные в определенный момент в будущем.
Промисы имеют три состояния: pending/reslove/reject. pending есть ожидание, решение может быть понято как успех, отклонение может быть понято как отклонение.
В то же время три часто используемых метода Promise означают, что состояние данных после успешного асинхронного выполнения изменяется на reslove catch, что означает, что состояние данных, выполняемое после асинхронного сбоя, изменяется на отклонение всех означает, что несколько несвязанных промисов инкапсулируются в Promise объект, а затем возвращает массив данных.
Но если вы используете слишком много, это также вызовет новую проблему с потоком выполнения. Итак, на сцену выходит другой наш главный герой, это Генератор в ES6.
Generator (генератор) — это механизм эффективного использования памяти, и механизм вычисления и генерации значений при выполнении цикла. Работая с промисами, вы можете писать асинхронный код более элегантно.
Итератор: когда мы создаем экземпляр функции-генератора, экземпляр является итератором. Вы можете использовать метод next() для запуска генератора и контроля выполнения генератора вниз.
yield/next: это хорошая пара друзей для управления порядком выполнения кода.
С помощью оператора yield вы можете приостановить выполнение кода внутри функции-генератора, чтобы заставить его приостановиться.В это время функция-генератор все еще работает и активна, а ее внутренние ресурсы будут зарезервированы, но в приостановленном состоянии.
Вызов метода next() для итератора заставляет код продолжаться с того места, где он остановился.

Конечно, генераторы не идеальны, и их синтаксис сложен для понимания, поэтому в ES7 ввели async/await (асинхронное ожидание), как удачно. Метод написания yield + Promise требует, чтобы мы вручную обрабатывали разрешение полученного промиса (отличали успех или неудачу), в ES7 предусмотрен async/await, чтобы помочь нам сохранить этот шаг.

четкая концепция
- Асинхронные функции — это синтаксический сахар для функций-генераторов.
- асинхронная функция, это функция генератора*Замените его на async, а yield — на await.
Улучшение асинхронной функции для генератора
- Встроенный исполнитель, нет необходимости использовать next() для выполнения вручную.
- За командой await может следовать объект Promise или значение примитивного типа, а за командой yield может следовать только функция Thunk или объект Promise.
- Возвращаемое значение — обещание. При возврате не-Promise асинхронная функция завершит его в возврат Promise. (Обещание.разрешение(значение))
эффект

Идеальное решение для асинхронного программирования. 4. Народное понимание (личное понимание) async/await — это альтернатива написанию функции обратного вызова асинхронного программирования. (Заставьте код писать синхронно для выполнения асинхронных операций)

Принцип (порядок выполнения)Когда функция выполняется, она вернется, как только столкнется с ожиданием. Дождитесь завершения инициированной асинхронной операции (и очистки стека вызовов), а затем выполните следующие операторы в теле функции. 【Личное понимание】

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

Цепочка прототипов JS:

**Что такое цепочка прототипов?

У каждого объекта может быть объект-прототип, у этого прототипа тоже может быть свой прототип и так далее, образуя цепочку прототипов. При поиске определенного атрибута мы сначала идем к объекту, чтобы найти его, если нет, то идем к его объекту-прототипу, если еще нет, то идем к объекту-прототипу объекта-прототипа, чтобы найти... Эта операция делегируется на вся цепочка прототипов, это то, что мы называем цепочкой прототипов.
Конец цепочки прототипов указывает на null, а неопределенные свойства в цепочке прототипов возвращают значение undefined.
Свойство прототипа является уникальным для функций. Оно указывает от функции к объекту. Это свойство является указателем на объект. Целью этого объекта является включение свойств и методов, общих для всех экземпляров. Свойство прототипа можно использовать для функций и Объекты добавляют общие (унаследованные) методы и свойства.
Каждый объект экземпляра JavaScript (кроме null) имеет свойство __proto__, которое указывает на прототип объекта, что позволяет найти цепочку прототипов функции или объекта.
Каждый прототип имеет свойство конструктора, которое указывает на связанный с ним конструктор, а прототипы экземпляров указывают на конструктор.

Есть несколько способов реализовать наследование в Js:

Наследование цепочки прототипов (экземпляр родительского класса как прототип дочернего класса)

преимущество:
Простые и легкие в реализации, новые экземпляры и атрибуты родительского класса могут быть доступны для подклассов.
недостаток:
Свойства экземпляра могут быть добавлены в подклассы.Если вы хотите добавить новые свойства и методы прототипа, вам нужно добавить их после конструктора нового родительского класса.
Множественное наследование невозможно
При создании экземпляра подкласса нельзя передавать параметры конструктору родительского класса.
2. Заимствование наследования конструктора (фальшивый объект, классическое наследование).
) Скопируйте свойства экземпляра родительского класса в дочерний класс
преимущество:
Решена проблема передачи параметров конструктором подкласса конструктору родительского класса.
Может быть достигнуто множественное наследование (вызов или применение нескольких родительских классов)
недостаток:
Все методы определены в конструкторе и не могут быть использованы повторно.
Свойства/методы прототипа не могут наследоваться, могут наследоваться только свойства и методы родительского класса.
3. Наследование экземпляров (прототипное наследование)
преимущество:
Неограниченные методы вызова, простые и легкие в реализации
недостаток:
Не может наследовать несколько раз
4. Композиционное наследование
Вызовите конструктор родительского класса, наследуйте свойства родительского класса и реализуйте повторное использование функций, используя экземпляр родительского класса в качестве прототипа дочернего класса.
преимущество:
Функции можно использовать повторно, нет проблем со ссылками на свойства, свойства и методы могут наследоваться, а свойства и методы прототипов могут наследоваться
недостаток:
Родительский класс вызывается дважды, что приводит к двум экземплярам
5. Наследование ES6
Разница между наследованием ES5 и наследованием ES6
Наследование Es5 сначала создает собственный указатель this в подклассе и, наконец, добавляет метод к this.
Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)
Наследование ES6 заключается в использовании ключевого слова, чтобы сначала создать объект экземпляра this родительского класса и, наконец, изменить его в классе подкласса.

Закрытие:

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

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

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

Применение затворов:Достигайте выхода каждую секунду 1,2,3,4....
Метод реализации

ES6 позволяет блокировать область действия
Закрытие ES5 Автоматически выполняются анонимная функция и функция, (function(i){})(i) где первая () возвращает анонимную функцию, а вторая () играет роль немедленного выполнения

Реализовать add(1)(2)(3) для вывода 6

Преимущества затворов

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

Недостатки закрытия

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

Утечка памяти Js:

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

Неожиданная глобальная переменная, ссылка js на необъявленную переменную создает свою ссылку на самый высокий глобальный объект
console.log
Закрытие
утечки DOM, мы обычно будем использовать DOM. Мы будем использовать ссылки на переменные для их кэширования в текущей среде.
забытые таймеры

Механизм сборки мусора Js:

Жизненный цикл памяти JS:

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

js механизм сборки мусора:

Механизм автоматической сборки мусора заключается в том, чтобы найти те значения, которые больше не используются, а затем освободить место в памяти, занимаемое ими. Сборщик мусора выполняет свободную операцию через равные промежутки времени.
js чаще всего используется для определения того, какие объекты больше не используются с помощью алгоритма очистки меток.В приведенном выше примере a = null на самом деле является операцией освобождения ссылки, так что исходное соответствующее значение a теряет свою ссылку и покидает среде выполнения. , это значение будет найдено и освобождено при следующем выполнении сборщиком мусора операции. Таким образом, разыменование в нужное время — важный способ повысить производительность страницы.

пометить как очищенный

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

подсчет ссылок

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

Разница между Ajax, fetch, Axios:

Шаги по использованию ajax

Создать объект XmlHttpRequest
Вызовите метод open, чтобы установить базовую информацию о запросе.
Установите данные для отправки, отправьте запрос
Зарегистрируйте функцию обратного вызова слушателя
Получить возвращаемое значение и обновить страницу

Но что здесь представляет код состояния readyState? Вот такая запись:
0: Не инициализирован, но экземпляр XHR создан.
1: вызывается функция open()
2: Функция send() была вызвана, но ответа от сервера еще не получено
3: Принятие данных, возвращаемых сервером
4: Завершите ответ

Традиционным значением Ajax является XMLHttpRequest (XHR), самая ранняя технология отправки внутренних запросов, принадлежащая нативному js. В основе лежит использование объекта XMLHttoRequest. Если между несколькими запросами существует последовательная связь, будет ад обратных вызовов. .

Преимущества: частичное обновление, встроенная поддержка, плагин не требуется.
Недостаток: может нарушить функцию возврата браузера, что приведет к аду обратного вызова.
2. Jquery ajax представляет собой инкапсуляцию нативного XHR, а также добавляет поддержку JSONP.
Достоинства: много
Недостаток: все еще не решает проблему ада обратных вызовов.
3. Fetch — заменитель ajax, появившийся в ES6, использует объект promise в ES6, структура кода проще ajax, а параметры аналогичны Jquery ajax, но fetch — это не дальнейшая инкапсуляция ajax, а собственный js, без использования объекта XHR
Достоинства: Синтаксис лаконичен и прост для понимания. Основанный на реализации промиса, он поддерживает async/await. Более низкоуровневый, богатый API, отделенный от XHR, является новой реализацией в спецификации ES.
Недостатки: сообщать об ошибках только для сетевых запросов, 400 500 запросов будут считаться успешными. По умолчанию файлы cookie отсутствуют, и необходимо добавить элементы конфигурации. Контроль времени ожидания не поддерживается. Ход выполнения запроса не может быть отслежен.
4. Axios — это http-клиент на основе промисов для браузеров и node.js, который по сути представляет собой инкапсуляцию XHR, но реализован на основе промисов и соответствует последним спецификациям ES.
Преимущества: создание XHR из браузера, поддержка API-интерфейса обещания, поддержка браузера для предотвращения CSRF (подделка межсайтовых запросов), предоставление интерфейса параллельного запроса, создание http-запроса из node.js, перехват запроса и ответа, преобразование данных запроса и ответа, автоматическое преобразование JSON-данные.

Перекрестный домен JS:

Причины междоменного: междоменное вызвано политикой браузера о том же происхождении, которая относится к интерфейсному адресу запроса страницы, который должен находиться в том же домене (то есть с тем же именем домена, портом и протоколом), что и URL-адрес страницы. Интерфейс под доменным именем незаконно вызывается веб-страницей под другим доменным именем, что является ограничением безопасности, наложенным браузером на js.

Обычно у бэкэнда есть два способа решения междоменной проблемы:
JSONP:
Используя функцию, заключающуюся в том, что тег скрипта может быть междоменным, функция текущего скрипта может быть напрямую вызвана в междоменном скрипте, то есть путем динамического создания скрипта и последующего запроса URL-адреса с параметрами для достижения кросс-доменного -доменное общение. Как получить данные по доменам через JSONP в jQuery?
Первый способ — установить для параметра dataType значение «jsonp» в функции ajax:
Второй метод заключается в использовании getJSON для достижения, просто добавьте адресcallback=?Параметры могут быть:

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

<script type="text/javascript" src="http://abc.com/js.php?t=1234" ></script>

Конечно, это нужно делать через document.createElement.

CORS
Сервер устанавливает заголовок ответа http вAccess-Control-Allow-Originценность.

Вопросы о том, как файлы cookie переносятся в междоменных запросах:
Установив withCredentials: true , при отправке Ajax информация о файлах cookie будет включена в заголовок запроса.
Сторона сервера разрешает перенос файлов cookie, установив Access-Control-Allow-Credentials = true в заголовке ответа.
Когда Access-Control-Allow-Origin:"" и Access-Control-Allow-Credentials", "true" установлены одновременно, Access-Control-Allow-Origin не может быть установлен в "*", а может быть только установить определенное доменное имя.

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

<?php
//加头部解决跨域问题
header('Access-Control-Allow-Origin: *');

Как использовать внешний интерфейс для достижения междоменного доступа?

Форвардный прокси (forward) означает сервер, расположенный между клиентом и сервером-источником (origin server), сервер пересылает запрос и возвращает полученный контент клиенту.

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

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

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

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

простое сравнение
Относительно просто использовать методы прямого прокси, такие как charles, и нужно освоить относительно немного знаний. Однако его настраиваемость относительно слаба, и он подходит только для небольших и средних проектов.
Обратный прокси-сервер с использованием nginx относительно сложен и требует знания базовой конфигурации nginx. Однако он обладает широкими возможностями настройки и поддерживает регулярное сопоставление URL-адресов, настройку приоритетов и т. д. Он подходит для сложных проектов.

document.domain + iframe cross-domain: обе страницы вынуждены устанавливать document.domain в качестве базового основного домена через js, который реализует один и тот же домен.

location.hash + междоменный iframe: a хочет общаться с междоменным b через промежуточную страницу c. Для трех страниц для передачи значений между разными доменами используется location.hash iframe, а для связи между одними и теми же доменами используется прямой js-доступ.

window.name + iframe cross-domain: атрибут src iframe переносится из внешнего домена в локальный домен, а междоменные данные передаются из внешнего домена в локальный домен через window.name iframe. .

Глубокая копия и мелкая копия:

Наиболее фундаментальное различие между глубоким копированием и поверхностным копированием заключается в том, действительно ли получается копия объекта, а не ссылка.
Глубокое копирование и мелкое копирование предназначены только для ссылочных типов данных, таких как Object и Array.

Неглубокая копия - копируются только данные базового типа, а на данные ссылочного типа также будут ссылаться после копирования, мы называем эту копию "(поверхностная копия) неглубокая копия", другими словами, неглубокая копия указывает только на скопированную копию. объект в исходном адресе изменен, соответственно изменится и объект, скопированный из мелкой копии.
Глубокая копия — в компьютере открывается новый адрес памяти для хранения скопированного объекта. Если исходный объект изменится, скопированный объект не изменится.

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

JSON.parse(JSON.stringify())

Принцип: используйте JSON.stringify для преобразования объекта в строку JSON, а затем используйте JSON.parse() для анализа строки в объект.Один за другим генерируется новый объект, и объект открывает новый стек для достижения глубокого копирования. Хотя этот метод может обеспечить глубокое копирование массивов или объектов, он не может обрабатывать функции. 2. Рукописный рекурсивный метод Рекурсивный метод реализует принцип глубокого клонирования: просматривайте объекты и массивы до тех пор, пока они не станут всеми базовыми типами данных, а затем копируйте их, что является глубоким копированием.

Синхронный и асинхронный в Js:

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

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

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

Макрозадача Js и микрозадача и цикл событий:

Задачи в js делятся на макро-задачи и микро-задачи.Когда задача приостановлена, js-движок разделит все задачи на эти две очереди в соответствии с этой категорией.Сначала выполняются задачи в основном потоке, а после завершения выполнения , она будет выполнена.Все задачи в очереди микрозадач, а затем вынуть первую макрозадачу в очереди макрозадач, выполнить в порядке основной задачи потока и всех задач в очереди микрозадач , а затем выньте все задачи из очереди микрозадач и выполните их последовательно, затем Затем возьмите задачу макроса в очередь задач макроса, выполните задачу основного потока и выполните все ее микрозадачи и так далее, пока все очереди задач пусты.
В среде браузера:
Задачи макросов обычно включают в себя: setTimeout, setInterval, requestAnimationFrame.
Микрозадачи обычно включают в себя: process.nextTick, Promise.then catch finally
Цикл событий в Js:
Сначала выполните макрозадачу. После выполнения, если есть исполняемые микрозадачи, выполните все микрозадачи и запустите следующую макрозадачу. Если нет, выполните следующую макрозадачу напрямую, пока все задачи не будут выполнены.
пример: Во-первых, браузер выполняет js для входа в первую задачу макроса и входит в основной поток и напрямую печатает console.log('1')
Когда встречается setTimeout, он распространяется на задачу макроса Event Queue.
Найдите process.nextTick и добавьте его в очередь событий микрозадачи.
Когда встречается промис, новый промис выполняется напрямую, и вывод console.log('7');
Затем выполнение распределяется по очереди событий микрозадачи.
Заканчивается первый раунд выполнения макрозадачи и начинается выполнение микрозадачи Print 6,8
После выполнения первого раунда микрозадач выполняется второй раунд макрособытий и выполняется setTimeout.
Сначала выполните макрозадачу основного потока, затем выполните микрозадачу, напечатайте «2,4,3,5»
Весь код, всего два цикла событий, полный вывод 1, 7, 6, 8, 2, 4, 3, 5,
Порядок выполнения макрозадач и микрозадач отличается в среде браузера и в среде node.js.

Делегирование событий в Js:

Делегирование событий — это использование всплывающей подсказки событий для управления всеми событиями определенного типа путем указания только одного обработчика событий.
Принцип делегирования событий: Делегирование событий реализуется с помощью всплытия событий, которое означает, что событие начинается с самого глубокого узла, а затем постепенно распространяется вверх. Например, на странице есть такое дерево узлов div>ul>li>a.Например, добавим событие клика в самый внутренний a, тогда это событие будет выполняться слой за слоем, в порядке выполнения a>li >ul>div, есть такой механизм, затем мы добавляем событие click в самый внешний div, затем, когда внутренние ul, li и a вызывают событие click, они будут всплывать на самый внешний div, так что все они сработают , Это делегирование событий, когда их родители делегируют выполнение событий от их имени.
Применение делегирования событий:
Нажмите на другой li, чтобы отобразить его содержимое
Традиционные методы и методы делегирования событий
Есть много операций DOM традиционным способом, каждый раз, когда вы нажимаете на li, вы должны пройти все события li.
Делегирование события может управлять только текущим домом.

Механизм событий браузера

Три этапа распространения события: захват, целевой объект, всплытие.

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

Вызов stopPropagation на любом этапе остановит распространение этого события.

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

Метод привязки событий Js:

Включено в html-теги

2. на+"событие"
Но если вы хотите выполнить несколько функций одним щелчком мыши, этот метод привязки не может быть выполнен: из-за одного и того же события произойдет перезапись при выполнении нескольких функций.
3. element.addEventListener (имя события, функция, всплытие/захват)
Вышеупомянутые две функции fA() и fB() будут выполняться без перезаписи.
Первый — это тип события, префикс on не требуется, но к имени события необходимо добавить « »;
Второй параметр — это функция, которая будет вызываться при возникновении этого события;
Третий — логическое значение true или false (по умолчанию — false).
Ложный код обрабатывается всплывающим потоком событий, и обычно используется false.
true означает, что код обрабатывается в потоке захвата событий, что не обязательно является устаревшим.

Стек выполнения Js

Контекст выполнения Js: Контекст выполнения — это абстрактная концепция JavaScript в анализируемой среде и среде выполнения. Любой код, запускаемый JavaScript, выполняется в контексте выполнения. Контекст выполнения включает три цикла: создание — выполнение — уничтожение и фокус на ссылке создания.
Шаг создания (функция вызывается, но не выполняется) делает три вещи

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

Стек выполнения JsМеханизм JavaScript, созданный для управления стеком выполнения контекста выполнения, стек в принципе можно рассматривать для выполнения структуры стека хранения вызовов функций после выполнения.
Есть три контекста выполнения в JS

Глобальным контекстом выполнения по умолчанию является объект окна в браузерах, и это относится к нему в нестрогом режиме.
Контекст выполнения функции, JS-функции создают контекст при каждом вызове.
Eval контекст выполнения, функция eval создаст собственный контекст, который здесь не обсуждается.

Рабочий процесс стека выполнения Js
1 Движок JavaScript является однопоточным, и весь код ставится в очередь на выполнение. 2. Сначала выполняется глобальный код: сначала создается глобальный контекст выполнения, а затем контекст выполнения помещается в стек выполнения. 3. Всякий раз, когда функция выполняется, контекст выполнения функции создается, а затем помещается в верхнюю часть стека выполнения.После выполнения функции контекст выполнения выходит из нижней части и ожидает сборки мусора. 4. Браузер js всегда обращается к контексту выполнения в верхней части стека выполнения. 5. Есть только один глобальный контекст, он извлекает стек при закрытии браузера

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

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

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

Адрес памяти, используемый процессом, может ограничивать объем использования (например, ресторан в поезде, максимальное количество людей может войти, если он заполнен, вам нужно подождать у двери, пока кто-нибудь не выйдет) - "семафор"

Метод Js, чтобы определить, что переменная является массивом:

Instanceof object instanceof constructor

alert(a instanceof Array); // true，

Тип переменной instanceof возвращает логическое значение
Оператор instanceof используется для определения того, существует ли объект, на который указывает свойство прототипа конструктора, в цепочке прототипов другого объекта, подлежащего обнаружению.
Основной принцип реализации instanceof заключается в том, что прототип переменной справа находится в цепочке прототипов переменной слева. Поэтому instanceof будет проходить по цепочке прототипов левой переменной в процессе поиска, пока не найдет прототип правой переменной.Если поиск не удался, он вернет false.
2. arr.__proto__===Array.Prototypeв__proto__Свойство экземпляра объекта, указывающее на прототип объекта.
Прототип — это свойство конструктора, указывающее на прототип конструктора.
3. arr.constructor===ArrayКонструктор — это атрибут прототипа экземпляра, указывающий на конструктор экземпляра.
4. Object.prototype.toString().call(arr)Где возвращаемое значение представляет собой строку «[Object Array]»
5. Array.isArray(arr)Новый метод в ES6, возвращающий true или false

Метод дедупликации массива Js:

Array.filter() + indexOf

2. Используйте for...of + include()3. Двойной цикл 4. Array.sort() затем сравнивает соседние элементы на равенство, тем самым исключая дубликаты. 5. for...of + Object использует характеристики, что свойства объектов не могут быть одинаковыми для дедупликации6. Новый Set() в ES6Массивы деимпортируются либо с помощью for...of + Object, либо с помощью нового метода ES6 Set(). По результатам выполнения эффективность for...of + Object должна быть наибольшей (только в результатах расчета текущей величины).

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

Основная идея Js anti-shake: когда событие запускается постоянно, обработчик события будет выполняться только один раз, если событие не запускается снова в течение определенного периода времени.Если событие запускается снова до установленного времени прибывает, задержка начнется снова.Основная идея регулирования в JS состоит в том, чтобы указать ограничение по времени, в течение которого функция обратного вызова, запускающая событие, может быть выполнена только один раз.Если функция обратного вызова запускается несколько раз в течение ограничения времени, она сработает только один раз.

HTML-часть:

Классификация тегов HTML:

Особенности блочных элементов:

Общие элементы блочного уровня:

Особенности встроенных элементов:

Общие встроенные элементы:

Новые функции H5 (часто используемые):

Новые элементы HTML5:

cookie sessionStorage localStorage разница:

Код состояния HTTP:

Метод внешней оптимизации:

Изящная деградация и прогрессивное улучшение:

Разница между сообщением и получением:

В чем разница между http и https?

Поток обработки кэширования в протоколе HTTP:

Что происходит после ввода URL-адреса:

Процесс рендеринга в браузере:

Постройте DOM-дерево:

Построить дерево правил CSSOM

Постройте дерево визуализации:

макет дерева рендеринга:

визуализировать краску дерева:

Переставить (макет) и перекрасить (перекрасить):

Состав http-сообщения:

Каковы преимущества использования длинных HTTP-соединений:

Особенности длинного подключения:

Особенности коротких соединений:

Как протокол TLS/SSL обеспечивает информационную безопасность:

Базовый процесс протокола SSL/TLS

Различия между протоколами HTTP 1.0, 1.1, 2.0:

Протокол веб-сокета:

Раздел CSS:

css3 добавлено:

Две боксовые модели css

Центрирование по вертикали:

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

переходить, преобразовывать и переводить

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

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

Несколько методов флоатинга:

Что такое селекторы CSS и их приоритет:

Основной селектор:

Расширенный селектор:

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

Что такое БФК:

Разница между встроенным блоком, встроенным и блочным:

Разница между px, em, rem, %, vw, vh, vm в этих единицах

гибкий макет:

Разница между гибкой версткой и адаптивной версткой:

Как реализовать трехколоночный макет:

JS-часть:

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

ES6 новый

1. Добавлены команды объявления let и const, Let означает переменные, а const означает константы.

2. Строка шаблона

3. Методы расширения, связанные с функциями

4. Объектные методы расширения

5. для цикла

6.импорт и экспорт

7. Деструктивное назначение

8.установить структуру данных

9.структура данных карты

10. Оператор спреда Оператор спреда (...)

объект обещания

Процесс создания новой функции

Разница между вызовом, применением и привязкой в ​​ES5

Различия между модульностью ES6 и CommonJS

Что такое модульность js?

Перезвони:

Цепочка прототипов JS:

Есть несколько способов реализовать наследование в Js:

Закрытие:

Утечка памяти Js:

Механизм сборки мусора Js:

Жизненный цикл памяти JS:

js механизм сборки мусора:

пометить как очищенный

подсчет ссылок

Разница между Ajax, fetch, Axios:

Перекрестный домен JS:

Разница между вызовом, применением и привязкой в ES5