Обмен интервью: два года опыта работы успешно прошли собеседование с Али P6

предисловие

Эта статья в основном рассказывает вам о моем опыте прохождения собеседований и опыте, в надежде помочь студентам, которые ищут работу. Позвольте мне кратко рассказать о моей личной ситуации перед собеседованием: я официально присоединился к Hikvision Digital Technology Co., Ltd. в июле 2017 года и использовал стек технологий Vue.js.

Длина моего письма может быть немного длинной, если вы хотите увидеть только успешные интервью, пожалуйста, перейдите прямо изALI Enterprise Intelligent Division (одна сторона)Начинайте, все меня простите.

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

Vue CLI 3 в сочетании с Lerna для разработки фреймворка пользовательского интерфейса
Введение в использование набора инструментов Cz — стандартные инструкции по коммитам Git
Вы действительно понимаете $nextTick?
Реализовать простой MVVM на основе Vue
2019 передняя дорога (полная галантереи)(рекомендуется при трещинах в стенах)

Об Али

Привет всем, мы недавно созданное BU Alibaba. В веб-интерфейсе еще много вакансий. Возможность редкая. Я надеюсь, что студенты, которые ищут работу, могут прийти и попробовать:

В настоящее время веб-интерфейс срочно нуждается в P6 и P7 (многие BU Ali набирают только P7).
Новый БУ, в который ты заходишь, это старик😂😂😂
Большая часть системы передовых технологий должна быть переработана вместе, и можно изучить больше нового контента.
В основном отвечает за разработку ПК, клиента, приложения DingTalk E и апплета Alipay (я вообще не знаю апплета, не волнуйтесь 😂😂😂)
Стек технологий — это React (если вы используете стек технологий Vue, не волнуйтесь, потому что я тоже 😂😂😂)
В других BU может быть пять раундов интервью, но у нас только четыре раунда интервью.

Это действительно редкая возможность. Если вы хотите узнать больше о нашем BU и найти моих внутренних коллег, добавьте меня в DingTalk или WeChat (просто попросите меня понять или рассказать о технологиях, ахаха): 18768107826

резюме

Мое резюме — это простая копия MD, которая примерно включает следующие части:

основная информация
профессиональный навык
рабочий стаж
Опыт стажировки (по желанию)
Опыт проекта

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

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

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

Знание встроенного C, JavaScript, Node.js
Знаком с фреймворком Vue.js

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

Совет: моя прикреплена здесьРезюме интервьюДля справки. Спасибо jsliang за статью2019 Серия интервью - Резюме, вы также можете ссылаться на эту статью при составлении резюме.

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

опрос

После составления резюме я проголосовал примерно за четыре компании: Youzan, Didi, 51 Credit Card и Ali. Среди них есть Зан со второй стороны, Диди с одной стороны, 51 кредитная карта с одной стороны, два отдела Али с одной стороны и один отдел успешно прошел собеседование. Опыт многих интервьюеров может быть таким же, как у меня, постоянно обобщающим и улучшающим после неоднократных неудач интервью, и, наконец, получающим идеальное Предложение.

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

Вот несколько комментариев, которые я сделал в процессе интервью:

Сохраняйте спокойствие. Это нормально, если вы не можете ответить на первый вопрос. Интервьюер не пропустит вас, потому что вы не можете ответить на первый вопрос.
Не отгадывайте вопросы, которых не знаете.Часто интервьюер роет для вас яму, надеясь, что вы догадаетесь не в том направлении.Вы должны ответить, если не знаете.
Не говорите слишком много контента, который не имеет ничего общего с текущими вопросами интервью, старайтесь отвечать на любые вопросы, которые вам задают, если только интервьюер не поручит вам отклониться от вашего мышления.
Если вы не понимаете вопросы интервью, вы можете попытаться спросить у интервьюера: Вы спрашиваете о ххх?
Для некоторых задач вы должны сначала уточнить их заранее (например, цепочка областей действия, цепочка наследования и прототипов и т. д.).
Если технология, заданная интервьюером, использовалась в некоторых сценариях или была замечена в других сценариях, ее можно объяснить в сочетании с этими сценариями (дайте интервьюеру понять, что вы не только понимаете ее, но и будете ее хорошо использовать).
Если это стек технологий Vue, я надеюсь углубиться в исходный код или, по крайней мере, понять анализ исходного кода других людей.
Если вы берете интервью у Али, обязательно подготовьте перед собеседованием такой вопрос: Как вы думаете, в чем вы лучше всего разбираетесь?
Интервью должно быть искренним, а не оппортунистическим
Отношение к интервью должно быть скромным

Далее я дам вопросы интервью и некоторые ответы, которые я понимаю в последовательности интервью:

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

Нравится (одна сторона)

Расскажите о селекторах CSS и приоритете этих селекторов.

!important
встроенные стили (1000)
Селектор идентификатора (0100)
селектор класса/селектор свойства/селектор псевдокласса (0010)
Селектор элементов/селектор псевдоэлементов (0001)
селектор отношений/селектор подстановочных знаков (0000)

Вы знаете, что такое БФС?

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

Что такое БФК

BFC расшифровывается как Block Formatting Context. BFC — это концепция в спецификации W3C CSS 2.1, которая определяет, как элемент позиционирует свое содержимое, а также его отношения и взаимодействие с другими элементами Когда дело доходит до визуального макета, контекст форматирования блока обеспечивает среду, в которой размещаются элементы HTML. по определенным правилам. Элементы в одном контексте не влияют на макет в других контекстах. Например, плавающий элемент образует BFC.Подэлементы внутри плавающего элемента в основном зависят от плавающего элемента, и два плавающих элемента не влияют друг на друга. Это несколько похоже на значение BFC как независимой административной единицы. Можно сказать, что BFC — это область действия, и он понимается как самостоятельный контейнер, и расположение коробки в этом контейнере не имеет ничего общего с коробкой вне контейнера.

Условия, запускающие BFC

корневой элемент или другой элемент, содержащий его
плавающий элемент (элементfloatнетnone)
Абсолютно позиционированные элементы (элементы сpositionдляabsoluteилиfixed)
встроенный блок (элементы имеютdisplay: inline-block)
ячейки таблицы (элементы имеютdisplay: table-cell, свойства ячейки таблицы HTML по умолчанию)
заголовок таблицы (элемент имеетdisplay: table-caption, атрибут заголовка таблицы HTML по умолчанию)
имеютoverflowИ ценность неvisibleблочный элемент
Флексбокс (flexилиinline-flex)
display: flow-root
column-span: all

Правила ограничения BFC

Ящики внутри будут расположены один за другим в вертикальном направлении (можно рассматривать как обычный поток в BFC)
BFC в том же элементе взаимодействия, Margis перекрываются
Левая маржинальная коробка для каждого элемента, в контакте с блочной коробкой блока контейнера слева (слева направо для форматирования или наоборот), поэтому даже если есть плавающее
BFC — это изолированный и независимый контейнер на странице, дочерние элементы внутри контейнера не будут влиять на внешние элементы, и наоборот
При расчете высоты БТЭ учитывайте все элементы, содержащиеся в БТЭ, даже плавающие элементы также участвуют в расчете
Плавающая область не накладывается на BFC

Проблемы, которые может решить BFC

Проблема перекрытия вертикальных полей
удалить поплавок
Самоприменимая двухколоночная компоновка (float + overflow)

Вы знаете коробочную модель?

включатьобласть содержимого,область заполнения,пограничная зонаа такжеМаржа области.

box-sizing: content-box(блочная модель W3C): ширина и высота элемента представлены в видесодержаниеразмер.box-sizing: border-box(блочная модель IE): ширина и высота элемента представлены в видесодержимое + отступ + границаразмер. Фон простирается до внешнего края границы.

IE5.x и IE6 используют нестандартную блочную модель в специальном режиме, и эти браузерыwidthимущество несодержаниеширина, носодержание,набивкаа такжеРамкасумма ширин.

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

Совет: интервьюер попросит несколько вариантов ответа на этот вопрос.

DOM-структура

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

использовать`float + margin`выполнить

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  margin-left: 200px;
  background-color: red;
}

использовать`calc`Рассчитать ширину

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  width: calc(100% - 200px);
  float: right;
  background-color: red;
}

использовать`float + overflow`выполнить

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  overflow: hidden;
  background-color: red;
}

использовать`flex`выполнить

Не лучший ответ здесь, его следует использоватьflex-basisболее разумный

.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: blue;
}

.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  overflow: hidden;
  background-color: red;
}

Знаете ли вы о междоменном, что вообще может привести к междоменному?

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

Междоменное поведение

Те же ограничения политики происхождения, соображения безопасности
Несовместимый протокол, IP и порт — все это междоменное поведение.

JSONP

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

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

Недостатки: JSONP может инициировать только запросы GET.

Как реализовать JSONP

Вот несколько ссылок:

сегмент fault.com/ah/119000001…

Казначей Сюй.GitHub.IO/2016/12/02/…

Блог Woohoo.cn на.com/IO VE C/afraid/531…

Проблемы с безопасностью JSONP

CSRF-атака

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

Решение: проверьте источник вызова (Referer) JSONP, и сервер определит, является ли Referer белым списком или развертывает случайный токен для защиты.

XSS-уязвимость

Уязвимости XSS, вызванные неточным типом контента, представьте, что JSONP — это ваш запросhttp://youdomain.com?callback=douniwan, затем вернутьсяdouniwan({ data }), то если запросhttp://youdomain.com?callback=<script>alert(1)</script>не возвращайся<script>alert(1)</script>({ data })Так ли это, если Content-Type строго не определен ( Content-Type: application/json ), плюс нет фильтрацииcallbackПараметр, когда html анализируется напрямую, является голым XSS.

Решение: строго определите Content-Type: application/json, а затем строго отфильтруйтеcallbackПосле параметра и ограничения длины (экранирование символов, например, от до >) и т. д. возвращаемое содержимое скрипта будет иметь текстовый формат, и скрипт не будет выполняться.

Сервер был взломан и вернул строку вредоносного кода

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

CORS (обмен средствами между доменами)

Совет: если вы ответите CORS, междоменное решение, интервьюер обязательно попросит вас внедрить CORS для заголовка ответа Access-Control-Allow-Origin.

Что такое КОРС

CORS (совместное использование ресурсов из разных источников) позволяет браузерам отправлять запросы XMLHttpRequest к серверам из разных источников для преодоления проблем с разными источниками. Для этого требуется поддержка как браузера, так и сервера.

Сторона браузера автоматически добавит поле источника в заголовок запроса, чтобы указать источник текущего запроса.
На стороне сервера необходимо установить Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Origin и другие поля заголовка ответа, а также указать разрешенные методы, заголовки, происхождение и другую информацию. .
Запросы делятся на простые запросы и непростые запросы. Непростые запросы сначала выполняют предварительную проверку с помощью метода OPTION, чтобы узнать, разрешен ли текущий междоменный запрос.

простой запрос

Метод запроса является одним из трех методов:

HEAD
GET
POST

Информация заголовка HTTP-запроса не превышает следующих полей:

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type: ограничено тремя значениями application/x-www-form-urlencoded, multipart/form-data, text/plain

Информация заголовка ответа бэкэнда:

Access-Control-Allow-Origin: это поле обязательно для заполнения. Его значением является либо значение поля Origin на момент запроса, либо символ *, указывающий, что принимаются запросы на любое доменное имя.
Access-Control-Allow-Credentials: Это поле является необязательным. Его значение является логическим значением, указывающим, разрешать ли отправку файлов cookie.
Access-Control-Expose-Headers: Это поле является необязательным. При выполнении запроса CORS метод getResponseHeader() объекта XMLHttpRequest может получить только 6 основных полей: Cache-Control, Content-Language, Content-Type, Expires, Last-Modified и Pragma. Если вы хотите получить другие поля, вы должны указать их в Access-Control-Expose-Headers.

не простой запрос

Непростой запрос — это запрос, который имеет особые требования к серверу, такие как метод запроса PUT или DELETE, или тип поля Content-Type — application/json. Для запросов CORS, которые не являются простыми запросами, перед формальным общением будет добавлен запрос HTTP-запроса, который называется предварительным запросом.

Access-Control-Request-Method: это поле необходимо для перечисления методов HTTP, которые будут использоваться в CORS-запросе браузера.В приведенном выше примере используется PUT.
Access-Control-Request-Headers: это поле представляет собой строку с разделителями-запятыми, которая определяет дополнительные поля заголовков, которые будут отправлены запросами CORS браузера.Приведенный выше пример — X-Custom-Header.

Если браузер отклоняет запрос «предварительной проверки», он вернет обычный HTTP-ответ, но без каких-либо полей заголовка, связанных с CORS. В это время браузер решит, что сервер не согласен с предварительным запросом, и, таким образом, вызовет ошибку, которая перехватывается функцией обратного вызова onerror объекта XMLHttpRequest.

Сравнение JSONP и CORS

JSONP поддерживает только запросы GET, CORS поддерживает все типы HTTP-запросов.
Преимущество JSONP в том, что он поддерживает старые браузеры и может запрашивать данные с веб-сайтов, которые не поддерживают CORS.

Другие междоменные решения

Обратный прокси Nginx
postMessage
document.domain

В чем разница между HTTP2 и HTTP1

По сравнению с HTTP1.0 оптимизация HTTP1.1:

Обработка кэша: дополнительные теги Entity, If-Unmodified-Since, If-Match, If-None-Match и другая информация кэша (HTTP1.0 If-Modified-Since, Expires)
Оптимизация пропускной способности и использование интернет-соединений
Управление уведомлениями об ошибках
Обработка заголовка хоста
Длинное соединение: Соединение: поддержка активности включена по умолчанию в HTTP1.1, что в определенной степени компенсирует тот недостаток, что HTTP1.0 должен создавать соединение для каждого запроса.

По сравнению с HTTP1.1 оптимизация HTTP2:

HTTP2 поддерживает бинарную передачу (удобную и надежную в реализации), HTTP1.x — строковую передачу.
HTTP2 поддерживает мультиплексирование
HTTP2 использует алгоритм сжатия HPACK для сжатия заголовка, уменьшая размер передачи.
Сервер поддержки HTTP2

можешь рассказать о кеше

Совет. Если вы столкнулись с ямами кеша или эффективно использовали кеш, вы можете объяснить свои сценарии использования. Если вы не обратили внимание на проблему с кешем, то можете также попытаться объяснить тесно связанную с нами конструкцию Webpack (хеш-значение имени статического ресурса будет меняться каждый раз при его сборке), которая на самом деле связана с кеш. Заинтересованные студенты могут проверить блог Чжан Юньлуна.Как разработать и внедрить интерфейсный код в крупной компании?.

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

Сильный кеш

Expires(HTTP1.0): значение Expires — это время истечения срока действия данных, возвращаемых сервером. Когда запрошенное время меньше возвращаемого, кэшированные данные используются напрямую. Однако, поскольку между временем сервера и временем клиента может быть ошибка, это также приведет к ошибке попадания в кэш. С другой стороны, Expires является продуктом HTTP1.0, поэтому большинство из них вместо этого используют Cache-Control.

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

Pragma(HTTP1.0): Унаследованное поле в HTTP 1.0. Если значение равно "no-cache", кеш проверяется принудительно, а прагма отключает кеш. Если для Expires определено время, которое еще не истекло, поле Pragma будет имеют более высокий приоритет. Ответ сервера добавляет «Pragma»: «no-cache», и браузер ведет себя как обновление (F5).

Cache-Control(HTTP1.1): Есть много атрибутов, и разные атрибуты представляют разные значения:

частный: клиент может кэшировать
общедоступный: и клиенты, и прокси-серверы могут кэшировать
max-age=t: кешированный контент истечет через t секунд
no-cache: для проверки кэшированных данных требуется согласование кеша.
no-store: весь контент не будет кэшироваться

Обратите внимание, что многие люди ошибочно принимают директиву no-cache за отсутствие кэширования. Это неточно. No-cache означает, что его можно кэшировать, но каждый раз, когда вы его используете, вы должны запрашивать сервер, чтобы проверить, доступен ли кэш. no-store — не кэшировать содержимое. Если в поле заголовка Cache-Control указана директива max-age, директива max-age будет обрабатываться вместо поля заголовка Expires. Проявление попадания в сильный кеш: браузер Firefox показывает серый код состояния 200. Код состояния браузера Chrome — 200 (из кеша диска) или 200 OK (из кеша памяти).

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

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

Last-Modified: когда сервер отвечает на запрос, он сообщает браузеру время последней модификации ресурса.

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

Если он действительно изменен: то начать передачу ответа целиком, сервер возвращает: 200 OK
Если не модифицировано: то просто передать заголовок ответа, сервер возвращает: 304 Not Modified

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

Если он не был изменен: начните «продолжать» для передачи файла, сервер вернет: 200 OK
Если файл изменен: не передавать, сервер возвращает: 412 Precondition failed

Разница между ними в том, что один загружается только после модификации, а другой загружается без модификации. Если на сервере ресурс изменен, но его фактическое содержимое вообще не изменилось, вся сущность будет возвращена клиенту (даже если в кэше клиента есть точно такой же ресурс), потому что время последнего изменения не совпадает. . Чтобы решить эту проблему, в HTTP1.1 был представлен Etag.

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

If-Match: Условный запрос, несущий ETag ресурса в предыдущем запросе, сервер оценивает, есть ли в файле новая модификация в соответствии с этим полем

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

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

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

Напишите URL в адресной строке браузера, нажмите Enter и браузер обнаружит, что этот файл есть в кеше, не нужно продолжать запрос, идите сразу в кеш, чтобы получить его (быстрее всего)
F5 - сказать браузеру, не поленитесь, зайдите на сервер, чтобы посмотреть, не истек ли срок действия файла. Так что браузер смело отправляет запрос с If-Modify-since
Ctrl+F5 указывает браузеру сначала удалить файл из вашего кеша, а затем перейти к серверу, чтобы запросить полный файл ресурсов. Так клиент завершает операцию принудительного обновления

Сцена кэша

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

Для некоторых ресурсов, которые не нужно кэшировать, можно использовать Cache-control: no-store , указав, что ресурс не нужно кэшировать.
Для часто меняющихся ресурсов можно использовать Cache-Control:no-cache совместно с ETag, указывающим, что ресурс был закэширован, но каждый раз присылается запрос, чтобы узнать, обновляется ли ресурс
Для файлов кода обычно используйте Cache-Control: max-age=31536000 и используйте его с кешем политик, а затем отпечатайте файл.Как только имя файла изменится, новый файл будет загружен немедленно.

Не подскажете, какие есть решения по оптимизации загрузки первого экрана?

Совет: Если вы делали подобные оптимизации, возможно, вы сможете ответить на них лучше.Те, кто не делал подобных оптимизаций, могут сосредоточиться на ленивой загрузке (конечно, интервьюер спросил меня о проблемах конфигурации ленивой загрузки Webpack). В то же время мне интересно, внимательно ли учащиеся, использующие стек технологий Vue, наблюдали за атрибутом rel тега ссылки в html-файле, созданном Vue CLI 3.

Отложенная загрузка маршрутизации Vue-Router (обрезка кода с помощью Webpack)
Используйте ускорение CDN для извлечения общих библиотек от поставщиков
Gzip-сжатие Nginx
Асинхронные компоненты Vue
Рендеринг на стороне сервера SSR
Если вы используете некоторые библиотеки пользовательского интерфейса, используйте загрузку по запросу.
Webpack включает сжатие gzip
Если первый экран является страницей входа в систему, его можно превратить в несколько записей.
Обработка файла кеша Service Worker
Используйте атрибут rel тега ссылки, чтобы установить предварительную выборку (этот ресурс будет использоваться в будущей навигации или функции, но порядок загрузки этого ресурса относительно низкий, предварительная выборка обычно используется для ускорения следующей навигации), предварительная загрузка (предварительная загрузка Увеличится вес порядка загрузки ресурсов, чтобы ключевые данные загружались заранее, а скорость открытия страницы оптимизировалась)

Как настроить псевдонимы путей на стороне узла (аналогично настройке псевдонимов в Webpack)

глобальная переменная
переменная среды
ВЗЛОМИТЕ себя с помощью символа @, указывающего на определенный путь
HACK requireметод

Ссылаться на

Этот вопрос все еще подключен к ссылке

сегмент fault.com/ah/119000001…

Чар Сиу Бао.net/2017/09/03/…

Ууху. Call.com/question/26…

Расскажите о своем понимании цепочки областей видимости

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

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

Функции жизненного цикла
Объявление переменных и функций
Объект Activetion (AO), переменный объект (VO)

Жизненный цикл функции:

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

Объявление переменных и функций: если имя переменной и имя функции совпадают при их объявлении, объявление функции имеет приоритет.

Объект Activetion (AO), переменный объект (VO):

АО: Активный объект
VO: Переменный объект

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

переменная (var, объявление переменной);
Объявление функции (FunctionDeclaration, сокращенно FD);
параметры функции

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

все локальные переменные функции
все именованные параметры функции
Набор параметров для функции
функция this указывает на

Цепочка областей:

Когда код создается в среде, создается цепочка областей видимости объектов переменных, чтобы гарантировать переменные и функции, имеющие доступ к среде выполнения. Первым объектом в области всегда является переменный объект (VO) среды, в которой в данный момент выполняется код. Если это стадия выполнения функции, ее объект активации (АО) используется как первый объект цепочки областей видимости, второй объект является контекстом выполнения АО вышестоящей функции, а следующий объект аналогичен.

В «JavaScript углубленный объект переменной», когда найдена переменная, вы найдете в текущем объекте переменных контекста. Если вы не найдены, переменная контекста будет выполняться от родителя (родительский уровень на лексической основе Уровень). Объект найден, который всегда нашел глобальный объект переменных контекста, который является глобальным объектом. Это называется цепью области с помощью связанного списка, состоящего из множества переменных объектов, которые выполняют контекст.

тебе известно`null`а также`undefined`есть ли разница

Что делают замыкания

Принципы отзывчивости Vue

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

Если вы не очень понятны в принципе отзывчивости, вы можете проверить статью, которую я написал раньшеПростая реализация MVVM/перехвата данных на основе Vue.

Вы знаете о цикле событий?

Совет: Вероятность задать этот вопрос довольно высока, здесь интервьюер спросил меня, в чем разница между Event Loop на стороне браузера и на стороне Node. Если вы хотите узнать больше о механизме цикла событий на стороне браузера, вы можете прочитать мою предыдущую статью.Вы действительно понимаете поток движка $nextTick/JS и механизм триггера событий/цикла событий?.

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

Задачи макроса: скрипт (основной блок кода),setTimeout,setInterval,setImmediate, ввод-вывод, рендеринг пользовательского интерфейса
Микрозадачи:process.nextTick(Нодейс),Promise,Object.observe,MutationObserver

В чем разница между циклом событий в Node.js и циклом событий в браузере

   ┌───────────────────────┐
┌─>│        timers         │<————— 执行 setTimeout()、setInterval() 的回调
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
│  │     pending callbacks │<————— 执行由上一个 Tick 延迟下来的 I/O 回调（待完善，可忽略）
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
│  │     idle, prepare     │<————— 内部调用（可忽略）
│  └──────────┬────────────┘     
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
|             |                   ┌───────────────┐
│  ┌──────────┴────────────┐      │   incoming:   │ - (执行几乎所有的回调，除了 close callbacks、timers、setImmediate)
│  │         poll          │<─────┤  connections, │ 
│  └──────────┬────────────┘      │   data, etc.  │ 
│             |                   |               | 
|             |                   └───────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
|  ┌──────────┴────────────┐      
│  │        check          │<————— setImmediate() 的回调将会在这个阶段执行
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
└──┤    close callbacks    │<————— socket.on('close', ...)
   └───────────────────────┘

Задачи макросов в Node.js делятся на несколько типов и помещаются в разные очереди задач. Разные очереди задач также имеют разную последовательность выполнения, и микрозадачи помещаются в конец каждой очереди задач:

setTimeout/setIntervalОтносится к типу таймеров;
setImmediateОтносится к чековому типу;
Событие закрытия сокета имеет тип закрытых обратных вызовов;
Все остальные макрозадачи относятся к типу poll.
process.nextTickПо сути это микрозадача, но она выполняется раньше всех остальных микрозадач;
Время выполнения всех микрозадач переключается между различными типами макрозадач.
idle/prepare предназначен только для внутренних вызовов, мы можем его игнорировать.
ожидающие обратные вызовы менее распространены, и мы можем их игнорировать.

Как избежать перекомпоновки и перерисовки

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

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

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

Разобрать HTML, сгенерировать DOM-дерево
Разобрать CSS, сгенерировать дерево CSSOM
Объедините дерево DOM и дерево CSSOM для создания дерева рендеринга.
Макет (перекомпоновка): согласно сгенерированному дереву рендеринга выполните перекомпоновку (макет), чтобы получить геометрическую информацию (положение, размер) узла.
Рисование (перерисовка): получение абсолютных пикселей узла в соответствии с геометрической информацией, полученной из дерева рендеринга и перекомпоновки.
Отображение: отправка пикселей на графический процессор для отображения на странице. (На этом этапе на самом деле много контента. Например, несколько слоев синтеза будут объединены в один слой на графическом процессоре и отображены на странице. Принцип аппаратного ускорения css3 заключается в создании нового слоя синтеза. Мы тут не развернуть, а возможности будут позже. буду писать в блог)

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

Когда происходит перекомпоновка:

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

Когда происходит перерисовка (перерисовка должна вызывать перерисовку):

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

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

clientWidth,clientHeight,clientTop,clientLeft
offsetWidth,offsetHeight,offsetTop,offsetLeft
scrollWidth,scrollHeight,scrollTop,scrollLeft
width,height
getComputedStyle()
getBoundingClientRect()

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

Как избежать срабатывания перекомпоновки и перерисовки

CSS:

Избегайте использования макетов таблиц.
По возможности меняйте классы в самом конце дерева DOM.
Избегайте установки нескольких слоев встроенных стилей.
Применение анимационных эффектов кpositionсобственностьabsoluteилиfixedна элементе
Избегайте использования выражений CSS (например:calc())
CSS3 аппаратное ускорение (ускорение ГПУ)

JavaScript:

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

Вам нравится (две стороны)

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

Письменные экзаменационные вопросы

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

объем
Цепочка прототипов (например, свойства экземпляра совпадают со свойствами прототипа, вы можете продолжить доступ к свойствам прототипа после удаления свойств экземпляра)
Порядок печати макрозадач и микрозадач
Array.prototype.mapвторой параметр

Вопросы и ответы по проекту

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

Где развернуты серверы для ваших продуктов?
Как вы реализовали компонент Tooltip, можете ли вы написать, как использовать этот компонент (какая проблема...)
Я знаю некоторые из ваших разработок Haikang, и я знаю, что ваша продукция продается наборами...

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

Раздел алгоритмов

1 блок, 4 блока, 5 блоков, найдите минимальное количество монет в общем количестве n блоков

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

1, 1, 2, 3, 5, 8... Вычислить значение n-го числа (последовательность Фибоначчи)

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

резюме

Я все еще очень благодарен за опыт этого интервью на месте, дайте мне знать, что если я не буду достаточно жестким, я буду пассивным, куда бы я ни пошел. Преимущество собеседований не только в том, чтобы проверить, насколько вы способны, но и в том, чтобы обнаружить собственные недостатки и постоянно их восполнять. Поэтому я снова взялся за «Введение в алгоритмы», отложенное ранее, и создал презентационный документ по изучению алгоритмов.I-Algorithms, Я надеюсь, что некоторые теоретические знания "Введения в алгоритмы" могут быть упрощены, так что изучение алгоритмов каждым может стать более систематическим, всесторонним и простым. Я также надеюсь, что благодаря этому изучению алгоритмические интервью станут более удобными. Я надеюсь, что заинтересованные студенты могутstarодин раз.

Капать (одна сторона)

Какие проблемы безопасности вы знаете и как их избежать

Совет: здесь я кратко объясню Vue во Vue.v-htmlЗащита от XSS-атак.

XSS (межсайтовый скриптинг)

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

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

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

Атаки XSS можно разделить на 3 категории: отражающие (непостоянные), хранимые (постоянные) и основанные на DOM.

Светоотражающий

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

const http = require('http');
function handleReequest(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
    res.write('<script>alert("反射型 XSS 攻击")</script>');
    res.end();
}

const server = new http.Server();
server.listen(8001, '127.0.0.1');
server.on('request', handleReequest);

тип хранения

Сохраненный XSS «хранит» введенные пользователем данные на стороне сервера, и когда браузер запрашивает данные, скрипт загружается обратно с сервера и выполняется. Эта XSS-атака очень стабильна. Более распространенный сценарий: злоумышленник пишет статью или комментарий, содержащий вредоносный код JavaScript, в сообществе или на форуме. После публикации статьи или комментария все пользователи, получившие доступ к статье или комментарию, выполнят это в своих браузерах. Код JavaScript:

// 例如在评论中输入以下留言
// 如果请求这段留言的时候服务端不做转义处理，请求之后页面会执行这段恶意代码
<script>alert('xss 攻击')</script>

DOM на основе

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

<h2>XSS: </h2>
<input type="text" id="input">
<button id="btn">Submit</button>
<div id="div"></div>
<script>
    const input = document.getElementById('input');
    const btn = document.getElementById('btn');
    const div = document.getElementById('div');

    let val;
     
    input.addEventListener('change', (e) => {
        val = e.target.value;
    }, false);

    btn.addEventListener('click', () => {
        div.innerHTML = `<a href=${val}>testLink</a>`
    }, false);
</script>

После нажатия кнопки «Отправить» на текущей странице будет вставлена ссылка с адресом ввода пользователя. Если пользователь конструирует следующее при вводе:

'' onclick=alert(/xss/)

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

<a href onlick="alert(/xss/)">testLink</a>

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

Предотвращение XSS-атак

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

входная проверка: Не доверяйте никакому вводу пользователя. Любой ввод пользователя проверяется, фильтруется и экранируется. Создайте белый список доверенных символов и тегов HTML, а также отфильтруйте или закодируйте символы или теги, которых нет в белом списке. В защите XSS проверка ввода обычно заключается в проверке того, содержат ли данные, вводимые пользователем, специальные символы, такие как , и если да, фильтрация или кодирование специальных символов, что также называется фильтром XSS. В некоторых интерфейсных фреймворках будет decodingMap, который используется для кодирования или фильтрации специальных символов или тегов, содержащихся в пользовательском вводе, таких как , script, для предотвращения XSS-атак:

// vuejs 中的 decodingMap
// 在 vuejs 中，如果输入带 script 标签的内容，会直接过滤掉
const decodingMap = {
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&amp;': '&',
  '&#10;': '\n'
}

Проверка вывода: Будут проблемы с вводом пользователя, будут проблемы с выводом сервера. Вообще говоря, помимо вывода форматированного текста, когда переменная выводится на HTML-страницу, для защиты от XSS-атак можно использовать кодирование или экранирование. Например, используйте sanitize-html, чтобы регулярно фильтровать выводимый контент и затем выводить его на страницу.

CSRF/XSRF (подделка межсайтовых запросов)

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

Cookie

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

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

Браузеры хранят файлы cookie двух типов:

Сеансовый файл cookie (сеансовый файл cookie): сеансовый файл cookie — это самый простой файл cookie. Для него не нужно указывать время истечения срока действия (Expires) или период действия (Max-Age). Он действителен только в течение периода сеанса. После закрытия браузера , он будет автоматически удален.
Постоянный файл cookie (постоянный файл cookie): в отличие от файла cookie сеанса, постоянный файл cookie может указывать определенное время истечения срока действия (Expires) или период действия (Max-Age).

res.setHeader('Set-Cookie', ['mycookie=222', 'test=3333; expires=Sat, 21 Jul 2018 00:00:00 GMT;']);

Приведенный выше код создает два файла cookie: mycookie и test, первый из которых является файлом cookie сеанса, а второй — постоянным файлом cookie.

CSRF-атака

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

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

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

Предотвращение CSRF-атак

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

Referer Check: в соответствии с протоколом HTTP в заголовке HTTP есть поле Referer, в котором записан исходный адрес HTTP-запроса. С помощью Referer Check можно проверить, исходит ли запрос из законного «источника».

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

Знакомство с Graphql

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

Что такое графкл

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

Абстракция модели данных описывается типом
Логика получения данных из интерфейса описана Schema

Зачем использовать Graphql:

Большое количество интерфейсов и высокие затраты на обслуживание
Высокая стоимость расширения интерфейса
Формат данных ответа интерфейса непредсказуем
Уменьшите количество запросов на бесполезные данные, получайте их по запросу
Строгие ограничения типов (формат данных API определяется интерфейсом, а не сервером)

Тип (абстракция модели данных)

Тип можно просто разделить на два типа, один называется Scalar Type (скалярный тип), а другой называется Object Type (тип объекта):

Тип скаляра: встроенные скаляры включают String, Int, Float, Boolean, Enum.
Тип объекта: тип интерфейса, похожий на TypeScript.
Модификатор типа: используется, чтобы указать, требуется ли это, и т. д.

Схема

Определяет тип полей, структуру данных и описывает правила запроса данных интерфейса

Запрос (запрос, тип операции)

Типы запросов: запрос, изменение и подписка.

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

Резольвер (разрешающая функция)

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

Разговор о Вью`$nextTick`Принцип реализации

Совет: если интервьюируемый использует стек Vue, то$nextTickПринцип заключается в частом вопросе, и интервьюер может задавать больше вопросов, таких как цикл событий браузера, микро- и макрозадачи, цикл событий Node.js, асинхронное обновление DOM (отклик данных для цикла изменяется 1000 раз). почему представление обновляется только один раз),$nextTickПроблемы с исторической версией и т. д.

Если это не очень понятно, вы можете проверить статью, которую я написал ранее.Вы действительно понимаете $nextTick?.

Принципы отзывчивости Vue

Разговор о понимании замыканий

Принцип реализации JSONP

БФК в CSS

Как добиться центрирования

Центрировано по горизонтали

Если это встроенный элемент, установите его в родительский элементtext-align:centerДля достижения горизонтального центрирования встроенных элементов
Если это элемент блочного уровня, элемент устанавливаетmargin:0 autoВот и все (элемент должен иметь фиксированную ширину)
Если это элемент уровня блока, установите для родительского элемента гибкий макет, а для дочернего элемента —margin:0 autoВот и все (дочерние элементы не должны иметь фиксированную ширину)
Используя макет версии flex 2012, вы можете легко добиться горизонтального центрирования, а дочерние элементы устанавливаются следующим образом:

// flex容器
<div class="box"> 
 // flex项目
 <div class="box-center">
 </div>
</div>


.box {
  width: 200px;
  height: 200px;
  display: flex;
  // 使内部的flex项目水平居中
  justify-content: center;
  background-color: pink;
}

/* .box-center {
  width: 50%;
  background-color: greenyellow;
} */

Использование абсолютного позиционирования и новых свойств CSS3transform(Это свойство также связано с аппаратным ускорением графического процессора и фиксированным позиционированием.)

.box {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: pink;
}

.box-center {
  position: absolute;
  left:50%;
  // width: 50%;
  height: 100%;
  // 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
  // translate(x,y)	定义 2D 转换。
  // translateX(x)	定义转换，只是用 X 轴的值。
  // translateY(y)	定义转换，只是用 Y 轴的值。
  // left: 50% 先整体向父容器的左侧偏移50%，此时是不能居中的，因为元素本身有大小
  // 接着使用transform使用百分比向左偏移本身的宽度的一半实现水平居中（这里的百分比以元素本身的宽高为基准）
  transform:translate(-50%,0);
  background-color: greenyellow;
}

Используйте абсолютное позиционирование иmargin-left(фиксированная ширина элемента)

.box {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: pink;
}

.box-center {
  position: absolute;
  left:50%;
  height: 100%;
  // 类似于transform
  // width: 50%;
  // margin-left: -25%;
  width: 100px;
  margin-left: -50px;
  background-color: greenyellow;
}

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

Если элемент представляет собой одну строку текста, его можно установитьline-heightравно высоте родительского элемента
Если это элемент уровня блока, установите для родительского элемента гибкий макет, а для дочернего элемента —margin: auto 0Вот и все (дочерние элементы не должны иметь фиксированную ширину)
Если элемент является встроенным элементом уровня блока, основная идея состоит в том, чтобы использоватьdisplay: inline-block, vertical-align: middleи псевдоэлемент для центрирования блока контента в контейнере:

.box {
  height: 100px;
}

.box::after, .box-center{
  display:inline-block;
  vertical-align:middle;
}
.box::after{
  content:'';
  height:100%;
}

Центральный элемент имеет переменную высоту

доступныйvertical-alignАтрибуты(vertical-alignЭто вступит в силу только в том случае, если родительским слоем является td или th, для других элементов уровня блока, таких как div, p и т. д., значение по умолчанию не поддерживается), чтобы использоватьvertical-align, нам нужно установить родительский элементdisplay:table, дочерний элементdisplay:table-cell;vertical-align:middle:

.box {
  height: 100px;
  display: table;
}

 .box-center{
    display: table-cell;
    vertical-align:middle;
}

Доступный во Flex 2012, это будущее макета CSS. Flexbox — это новое свойство CSS3, предназначенное для решения распространенных проблем макета, таких как вертикальное центрирование:

.box {
  height: 100px;
  display: flex;
  align-items: center;
}

Преимущества: Ширина и высота блока содержимого произвольны, а переполнение элегантно. Может использоваться в более сложных и продвинутых методах компоновки. Недостатки: IE8/IE9 не поддерживает, требует префиксов поставщиков браузера, и могут быть некоторые проблемы в рендеринге.

доступныйtransformУстановите относительное позиционирование родительского элемента:

.box {
  height: 100px;
  position: relative;
  background-color: pink;
}

.box-center {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  background-color: greenyellow;
}

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

Высота центрированного элемента фиксирована

Задайте относительное позиционирование родительского элемента, а дочерний элемент будет иметь следующие стили CSS:


.box {
  position:relative;
  height: 100px;
  background-color: pink;
}

.box-center{
  position:absolute;
  top:50%;
  // 注意不能使用百分比
  // margin的百分比计算是相对于父容器的width来计算的，甚至包括margin-top和margin-bottom
  height: 50px;
  margin-top: -25px;
}

Задайте относительное позиционирование родительского элемента, а дочерний элемент будет иметь следующие стили CSS:

.box {
  position:relative;
  width: 200px;
  height: 200px;
  background-color: pink;
}

.box-center{
  position:absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 100px;
  background-color: greenyellow;
}

Центрируется по горизонтали и вертикали

Макет Flex (элементы дочерних элементов блока)

.box {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: pink;
}

.box-center{
  margin: auto;
  background-color: greenyellow;
}

Макет Flex.

.box {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: pink;
  justify-content: center;
  align-items: center;
}

.box-center{
  background-color: greenyellow;
}

Реализация абсолютного позиционирования (фиксированные ширина и высота элементов позиционирования)

.box {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: pink;
}

.box-center{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}

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

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

Если вы не очень хорошо знаете Flex, вы можете прочитать статью Ruan Yifeng.Учебное пособие по гибкому макету: синтаксис. Интервьюер спросил, значит, помимо Flex вы знаете, что такое Grid? Из-за этой проблемы совместимости я не изучал должным образом эту статью, которую можно просмотреть Ruan YifengУчебник сетки Grid CSS.

`bind`реализация исходного кода

Совет: здесь я отвечаю, используя функцию currying plusapplyилиcallМожет достичьbind, интервьюер спросил некоторые конкретные детали реализации.

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

Function.prototype.myCall = function (obj) {
  obj.fn = this
  let args = [...arguments].splice(1)
  let result = obj.fn(...args)
  delete obj.fn
  return result
}

Function.prototype.myApply = function (obj) {
  obj.fn = this
  let args = arguments[1]
  let result
  if (args) {
    result = obj.fn(...args)
  } else {
    result = obj.fn()
  }

  delete obj.fn

  return result
}

Function.prototype.myBind = function (obj) {
  let context = obj || window
  let _this = this
  let _args = [...arguments].splice(1)

  return function () {
    let args = arguments
    // 产生副作用
    // return obj.fn(..._args, ...args)
    return _this.apply(context, [..._args, ...args])
  }
}

function myFun (argumentA, argumentB) {
  console.log(this.value)
  console.log(argumentA)
  console.log(argumentB)
  return this.value
}

let obj = {
  value: 'ziyi2'
}
console.log(myFun.myCall(obj, 11, 22))
console.log(myFun.myApply(obj, [11, 22]))
console.log(myFun.myBind(obj, 33)(11, 22))

Разница между псевдоклассами и псевдоэлементами

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

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

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

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

разница

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

Спецификация CSS3 требует использования двойных двоеточий (::) для представления псевдоэлементов, чтобы отличать псевдоэлементы от псевдоклассов.Например, такие псевдоэлементы, как ::before и ::after, используют двойные двоеточия (::) , :hover и :active и т. д. псевдоклассы используют одно двоеточие (:). За исключением некоторых браузеров ниже IE8, большинство браузеров поддерживают метод представления псевдоэлементов с двойным двоеточием (::).

резюме

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

51 кредитная карта (одна сторона)

Разговор о потоке событий DOM

Как реализовать наследование в ES5

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

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

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

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

Дебунс и дроссель

Совет: интервьюер спросил только о конкретном сценарии использования, а не о принципе реализации.

Простое устранение дребезга

function debounce (fn, wait = 1000) {
  let timeOutId

  return function () {
    let context = this

    if (timeOutId) {
      clearTimeout(timeOutId)
    }

    timeOutId = setTimeout(() => {
      fn.apply(context, arguments)
    }, wait)
  }
}

Отказ с немедленным параметром

function debounceImmediate (fn, wait = 1000, immediate) {
  let timeOutId, context, args

  const later = (immediate) => setTimeout(() => {
    if (!immediate) {
      fn.apply(context, args)
      timeOutId = context = args = null
    }
  }, wait)

  return function () {
    if (!timeOutId) {
      timeOutId = later(true)

      if (immediate) {
        fn.apply(this, arguments)
      }

      context = this
      args = arguments
    } else {
      clearTimeout(timeOutId)
      timeOutId = later(false)
    }
  }
}

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

function throttle (fn, wait) {
  let timeoutId = null
  return function () {
    let context = this
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        fn.apply(context, arguments)
        timeoutId = null
      }, wait)
    }
  }
}

Вычислительный принцип реализации в Vue

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

Принцип реализации часов

Категория часов:

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

смотреть процесс реализации:

Инициализация часов происходит после инициализации данных (данные в это время прошлиObject.definePropertyустановлен на отзывчивый)
Ключ часов будет считывать значение в Наблюдателе, то есть немедленно выполнять get для получения значения (таким образом, реализация ключа, соответствующего данным, запускает метод получения для реализации коллекции зависимостей часов). если естьimmediateсвойство, затем немедленно выполните функцию обратного вызова, соответствующую часам
Когда ключ, соответствующий данным, изменяется, запускайте пользовательские часы, чтобы реализовать выполнение функции обратного вызова часов.

Как работает вычисление

Свойства вычисляемых данных динамически монтируются в экземпляре vm, что отличается от объявления обычных реактивных данных в data.
Установите вычисляемый геттер. Если функция, соответствующая вычисляемому, выполняется, поскольку функция будет считывать значение свойства данных, она вызовет функцию получения значения свойства данных. Во время этого процесса выполнения отношения сбора зависимостей между вычисленными и данными могут обрабатываться.
Когда значение вычисляется в первый раз, будет выполнена функция-геттер, соответствующая свойству vm.computed (вычисляемая функция, указанная пользователем, если геттер не установлен, текущей указанной функции будет назначен геттер вычисляемого свойства), и будет выполнена указанная выше коллекция зависимостей.
Если значение вычисляемого свойства зависит от других значений вычисляемого свойства, текущая цель будет временно храниться в стеке, и сначала будет выполняться сбор зависимостей других значений вычисляемого свойства. стек выходит и продолжает текущую вычисляемую коллекцию зависимостей

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

из-заthis.firstNameа такжеthis.lastName(Выше приведен официальный пример Vue) Все переменные являются адаптивными, поэтому их геттеры будут активированы. Согласно нашему предыдущему анализу, они добавят свою зависимость к вычисляемому в данный момент наблюдателю.Dep.targetЭто вычисляемый наблюдатель. Конкретные шаги таковы:

Свойство data инициализирует геттер-сеттер
вычисляемая инициализация вычисляемого свойства, предоставленная функция будет использоваться как свойствоvm.fullNameдобытчик
при первом приобретенииfullNameDep начинает зависеть от коллекции при вычислении значения свойства
При выполнении метода получения сообщений, если Dep находится в состоянии сбора зависимостей, определяется, чтоfirstNameа такжеlastNameдляfullNameзависимости и построить зависимости
когдаfirstNameилиlastNameКогда происходит изменение, в зависимости от зависимостей, триггерfullNameперерасчет
Обновление представления не запускается, если вычисленное значение не изменилось

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

Почему вычисляемые вычисляемые значения могут зависеть от другого вычисляемого вычисляемого значения?

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

Я надеюсь, что кто-то здесь может объяснить больше.

Какие периодические функции (`beforeCreated`а также`created`что ты делал между

)

инициализацияdata,props,computed,watcher,provide. Конкретное местонахождение официального исходного кодаsrc/core/instance/init.js:

callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

резюме

Интервью с 51 Credit Cards на самом деле довольно подробное. Я спросил о некоторых реализациях базового исходного кода Vue. В целом, я чувствую, что мой ответ в порядке, но интервьюер сказал: вам следует обратиться к Али...

Сектор Али неизвестен (одна сторона)

Расскажите о принципе реализации Webpack

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

Надеюсь, мои одноклассники ответят на этот вопрос.

Какие есть решения для оптимизации первого экрана

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

Что касается ленивой загрузки, здесь рекомендуется очень хорошая статья:Разделение кода Webpack Dafa.

Механизм загрузки Node.js (`require`а также`module.exports`)

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

Как вы думаете, в чем вы лучше всего

Совет: Этот вопрос - большая яма. Здесь я отвечу прямо, что я ни в чем не силен. Очевидно, что интервьюер не будет недоволен этим ответом. Всем рекомендуется перед собеседованием подумать о том, в чем они хороши.

Разница между React и Vue

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

Я надеюсь, что студенты, знакомые с React и Vue одновременно, смогут дополнить этот вопрос.

Как выбрать React, Vue и JQuery в каких сценариях

Надеюсь, мои одноклассники ответят на этот вопрос.

Принципы отзывчивости Vue

При каких обстоятельствах будет блокироваться рендеринг DOM

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

Надеюсь, мои одноклассники ответят на этот вопрос.

Что такое асинхронные функции

Совет: ответы на макро-задачи и микро-задачи.

Разговор о MVVM, в чем разница с MVC

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

Здесь я рекомендую статьи Nuggets, которые я написал ранееИстория эволюции реализации простого шаблона проектирования MVVM/MV* на основе Vue, в начале основное внимание уделялось объяснению эволюции и различий MVC, MVP и MVVM.

Технологический отдел Alibaba CBU (одна сторона)

Расскажите о том, на что z-index нужно обратить внимание

Совет: я действительно забыл об этом, поэтому просто скажите, что это можно сделать только в том же контексте стека.z-indexСравнение значений, связь с абсолютным позиционированием,z-indexЗначение не нужно задавать слишком большим, необходимо только уточнить иерархическую взаимосвязь. Интервьюер спросилz-indexценность иbackgroundОтношения охвата, а также вопрос об элементе абсолютного позиционирования и критерии прихода сзади. Интервьюер также спросил, каково значение z-index по умолчанию,0а такжеautoЕсть ли разница? Он действительно мало используется для CSS, поэтому ответ на этот вопрос не очень хорош.

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

Вот статья Чжан СиньсюйГлубокое понимание контекста наложения и порядка наложения в CSS..

Поскольку здесь дается ответ о позиционировании, интервьюер спрашивает, относительно чего позиционируется элемент с фиксированным позиционированием? Будет ли относительное позиционирование отличаться от обычного потока документов? Абсолютное позиционирование относительно какого элемента?

Вы знакомы с анимацией CSS3?

Совет: Аппаратное ускорение анимации CSS3? Проблемы производительности с анимацией CSS3 (перерисовка и перекомпоновка, вам нужно вырваться из обычного потока документов)? В то время я не знал ответа, но он очень редко используется.Если вы знакомы с анимацией перехода Vue, можете ли вы рассказать об анимации перехода?

Вы сделали какую визуализацию

Совет: Мой ответ: считается ли карта? Библиотека компонентов Vue, предназначенная для карт на основе OpenLayers.

Для визуализации, я надеюсь, студенты могут добавить больше.

Как вы думаете, в чем вы лучше всего?

Совет: этот вопрос просто копает яму для людей.

Flex реализует двухколоночный макет

Вот простая реализация (на самом деле она должна использоватьсяflex-basisАтрибуты):

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: blue;
}

.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  overflow: hidden;
  background-color: red;
}

Особенности ES6/ES7/ES8

Разговор о потоке событий DOM

Советы: интервьюер спрашивает, в чем преимущества делегирования событий (не менее двух и более),target/currentTarget/relateTargetконкретная цель.

Как вы думаете, вы когда-нибудь делали что-то, что ускоряло процесс или улучшало его? Приведите пример

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

резюме

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

Подразделение корпоративной аналитики Alibaba (одна сторона)

Event Loop

Разница между загрузчиком Webpack и плагинами

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

Надеюсь, мои одноклассники ответят на этот вопрос.

Что делает код состояния HTTP 206?

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

Каковы функции компонентов высшего порядка React

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

Надеюсь, мои одноклассники ответят на этот вопрос.

Разница между React и Vue

Какова роль сервисного работника

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

Надеюсь, мои одноклассники ответят на этот вопрос.

перекрестный домен

Как быть с загруженным бинарным файлом

Совет: Знайте только, что информация о загруженном заголовкеapplication/x-www-form-urlencoded, данные загружаемого файла также могут быть перехвачены, например, информация загруженного файла может быть зашифрована.

Надеюсь, мои одноклассники ответят на этот вопрос.

Принципы отзывчивости Vue

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

резюме

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

Подразделение корпоративной разведки Alibaba (вторая сторона)

Принцип реализации вычисляемого

Весь принцип реализации Vue

Совет: в то время интервьюер задал забавный вопрос: что делает Vue, начиная с написания файла .vue и заканчивая рендерингом DOM на странице. Тогда я не понял, что интервьюер спрашивал о vue-loader? Процесс рендеринга дерева DOM? Я предварительно переспросил интервьюера несколько раз, прежде чем понял, что интервьюер хочет знать весь процесс реализации исходного кода Vue.

Если вы хотите понять весь черновой процесс реализации исходного кода Vue, вы можете прочитать статью, написанную ранее.Краткое введение в механизм работы простого MVVM/Vue на основе Vue.

коммуникация

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

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

заголовок кадра	номер кадра	нагрузка на раму	проверка кадра	конец кадра
2 Byte	1 Byte	N Byte	1 Byte	1 Byte

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

Как надстройки Chrome блокируют рекламу

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

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

Как проверить, что две переменные равны

Совет: Здесь есть базовые и ссылочные типы.Object.isпринцип реализации. Это был первый вопрос, который мне задал интервьюер, тогда я прямо ответил, что не знаю, и чувствовал, что буду холоден в будущем.

Как работают часы

Почему данные Vue часто меняются, но обновляются только один раз

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

Vue выполняет обновления DOM асинхронно. Как только будут обнаружены изменения данных, Vue откроет очередь и буферизует все изменения данных, которые происходят в том же цикле событий. Если один и тот же наблюдатель запускается несколько раз, он будет помещен в очередь только один раз. Эта дедупликация во время буферизации важна, чтобы избежать ненужных вычислений и манипуляций с DOM. Затем, в следующем цикле событий «тик», Vue очищает очередь и выполняет фактическую (дедублированную) работу. Vue внутренне пытается использовать натив для асинхронных очередейPromise.thenа такжеMessageChannel, если среда выполнения не поддерживает его, вместо него будет использоваться setTimeout(fn, 0).

Кроме того, оwaitingпеременная, это очень важный флаг, он гарантируетflushSchedulerQueueОбратные вызовы (выполняемые в $nextTick) разрешено размещатьcallbacksоднажды.

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

Сейчас такая ситуация,mountedкогдаtestЗначение будет повторяться ++1000 раз. Каждый раз, когда ++ срабатывает в соответствии с ответомsetter->Dep->Watcher->update->run. Если в это время представление не обновляется асинхронно, то ++ будет напрямую манипулировать DOM для обновления представления каждый раз, что очень сильно влияет на производительность. Таким образом, Vue реализует очередь очереди и выполняет работу наблюдателя в очереди равномерно в следующем такте (или на этапе микрозадачи текущего такта). При этом Watcher с одним и тем же id не будут добавляться в очередь повторно, поэтому 1000 запусков Watcher выполняться не будут. Наконец, обновление представления только напрямую изменит 0 DOM тестовой пары на 1000. Гарантируется, что действие по обновлению DOM операции представления вызывается на следующем тике (или этапе микрозадачи текущего тика) после выполнения текущего стека, что значительно оптимизирует производительность.

исполнительный листupdate -> queueWatcher -> 维护观察者队列（重复id的Watcher处理） -> waiting标志位处理（保证需要更新DOM或者Watcher视图更新的方法flushSchedulerQueue只会被推入异步执行的$nextTick回调数组一次） -> 处理$nextTick（在为微任务或者宏任务中异步更新DOM）->

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

Поскольку обновление представления VUE на основе данных является асинхронным, то есть при изменении данных представление не будет обновляться немедленно, а будет обновляться единообразно после завершения всех изменений данных в том же цикле событий. После изменения данных в том же цикле событий DOM завершает обновление и немедленно выполняется.nextTick(callback)обратный звонок внутри.

Vue, как и React, изменяет DOM асинхронно. Он запишет ваши операции над домом в очередь и выполнит операцию сравнения, последняя операция перезапишет предыдущую, а затем обновит дом.

Event Loop

Что еще вы можете использовать для макета, кроме Flex?

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

Абсолютное позиционирование, фиксированное позиционирование и z-индекс

Совет: Спасибо интервьюеру из технического отдела CBU.

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

После добавления к элементуabsoluteилиfloatЭто как добавить элементdisplay:block
absoluteЭлемент покрывает элемент в обычном потоке документов (без z-индекса, естественное покрытие)
Может уменьшить накладные расходы на перерисовку и перекомпоновку (например,absolute+ top:-9999em,илиabsolute + visibility:hidden, поместите эффект анимации наabsoluteэлемент)

Введение атрибута

static, По умолчанию. Элемент, позиция которого установлена как статическая, всегда будет находиться в позиции, заданной потоком документа.
inherit, который указывает, что значение свойства position должно быть унаследовано от родительского элемента. Но любая версия Internet Explorer (включая IE8) не поддерживает значение свойства «наследовать».
fixed, который генерирует абсолютно позиционированные элементы. По умолчанию может располагаться в указанных координатах относительно окна браузера. Положение элемента задается свойствами «слева», «сверху», «справа» и «снизу». Элемент остается в этом положении независимо от того, прокручивается окно или нет. но когда элемент-предок имеетtransformЕсли атрибут не равен none, координаты указываются относительно элемента-предка, а не окна браузера.
absolute, который создает абсолютно позиционированный элемент, позиционированный относительно ближайшего предка элемента. Положение этого элемента можно указать с помощью свойств «слева», «сверху», «справа» и «снизу».
relative, который создает элемент с относительным позиционированием, расположенный относительно начальной позиции элемента в документе. Используйте свойства «left», «top», «right» и «bottom», чтобы установить смещение этого элемента относительно его собственного положения.

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

Абсолютное позиционирование относительно начала содержащего блока:

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

Вопросы и ответы:

Начальная позиция позиционируемого элемента — это отступ родительского блока (не на границе, если не используется отрицательное значение, он будет в отступе)
Поле позиционированного элемента все еще работает
Свойство фона будет отображаться на границе
Z-индекс имеет каскадный уровень, и необходимо учитывать каскадный приоритет того же каскадного контекста.
Отрицательный z-индекс не будет переопределять цвет фона содержащего блока (но если есть контент, он будет переопределен содержимым содержащего блока)
Элемент влияет на значение Z-Index — это элемент позиционирования и поле FLEX.
Позиционированный элемент выше, нормальный элемент потока ниже, позиционированный элемент будет наложен поверх нормального элемента потока, если только не задан отрицательный z-индекс.
Корневой элемент страницы html рождается с контекстом стека, который называется «корневой контекст стека».

резюме

На этот раз интервьюер задал мне первый вопросObject.isЯ не ответил, но интервьюер, очевидно, не отказывал интервьюируемому, потому что он сначала плохо ответил. Если вы не можете ответить на первый вопрос во время интервью, не паникуйте, сохраняйте хороший настрой и хорошо отвечайте на следующий вопрос. У многих студентов могут быть вопросы, и кажется, что есть еще несколько вопросов, на которые нет ответа, но, возможно, пока на один вопрос дан очень хороший ответ, он все еще может компенсировать эти оставшиеся без ответа вопросы (здесь интервьюер сказал в то время что процесс реализации исходного кода Vue я сказал. Ответ более ясен, и ни один собеседник не ответил на него более четко, чем я).

Подразделение корпоративной аналитики Alibaba (сторона лидера)

Третья сторона - интервью с Лидером в прямом эфире. Меня особенно беспокоило появление второй стороны похвалы, и я внезапно дал вам алгоритмическую проблему. Это действительно мои худшие моменты. Поскольку я был немного виноватым, я спросил своего старшего брата в Али (старший брат, возможно, тоже занимается вербовкой, и я обвинил меня в том, что не попросил его о рекомендациях ...), он сказал, что самое главное в сцене заключается в подготовке содержания резюме, интервью. Интервьюер обычно задает вопросы на основе своего резюме, а также сказал, что, когда он брал интервью у Али в то время, он попросил его нарисовать некоторые диаграммы иерархии фреймворка (меня это не заботило в время, но интервьюер попросил меня нарисовать диаграмму иерархии фреймворка на основе одного из проектов). Во время интервью Лидера присутствовали два интервьюера и один HR.

Лидер (1) Интервью

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

Лидер (2) Интервью

Я отвечала на свой проектный опыт, когда вошли Лидер II и HR. После того, как я ответила Лидеру I, Лидер II начал встречаться со мной. Лидер II спросил меня о двух проектах. Первым проектом, о котором я спросил, был внутрикорпоративный инструмент, который я создал сам, и он спросил, какие измеримые данные об использовании платформы людьми внутри компании. Я ответил, что в то время, потому что лидер считал это ненужным, он не занимался статистикой данных, а сообщил ему какие-то реальные данные в базе данных. Затем он спросил, как считать PV и UV (я имел наглость спросить его, что такое PV и UV)? Как считать, если посещенная страница не может выйти PV? Осуществляет ли страница какой-либо мониторинг поведения? Как бороться с избыточной посещаемостью страницы? Я изложил некоторые свои мысли.

Потом спросил меня о втором проекте (Low Code связаны), я ответил на техническую систему данного проекта, от того, что было сделано в прошлом, в какой степени это сейчас, и то, что должно быть сделано в будущем, я объяснил все тщательно. Лидер 2 спросил меня, если бы я мог думать о том, что делать в будущем, и дал мне 5 минут (в течение этого периода, он продолжал листать мое резюме). Тогда я сделал вид, что думать об этом в течение 5 минут. На самом деле, мой разум был пустым. В то время я как раз думал о том, что делать в будущем. Тогда Leader II был очень внимателен. Он сказал, что вы можете нарисовать картину на стене (вы можете написать на стене), и я обратил грубо. Leader II спросил меня, если я мог бы сделать уровень кадров схему этого проекта, и я я бы просто нарисовал картину ... в конце концов лидер 2 прямо сказал , что то , что вы сделали слишком низкий, это (Low Code) уже технология два года назад здесь ... (я до сих пор объяснить, где я Я Прошло всего два года с тех пор отдел начал использовать Vue. в течение этих двух лет система технология была быстро осаждая и развивается. Прежде чем я ушел, я уже задуманы и реализованы некоторые решения Low кода для стека технологий Вью. Студенты которые заинтересованы в этой области могут также связаться со мной.)

Лидер 2 весьма прикольный, он сказал, что если Low Code действительно сделан, то во фронтенде делать нечего, так зачем ты идешь? Вслед за этим вопросом он также спросил меня, как должен развиваться фронтенд в будущем? Какие точки можно будет задействовать во фронтенде в будущем? Я ответил на какой-то Graphql, визуализацию и т.д., и еще я дал очень смешной ответ, я сказал, что с точки зрения прошлой разработки фронтенд должен захватить ресурсы бэкенда, а бэкенд должен ограничить наши вещи, чтобы интерфейс тоже мог это сделать, и пусть интерфейс делает это более раскрепощающе. Лидер 2 тут же возразил, что это стоит делать, а не делать ради возможности сделать, что меня напугало... Потом Лидер 2 также подробно объяснил мне, на что он надеется в будущем развитии , Отвечая, я все еще думал, что Лидер II был довольно дружелюбным в то время.

HR-интервью

После того, как Лидер 2 закончил вопрос, HR задал мне следующие вопросы:

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

Затем Лидер задал небольшой вопрос по HR:

Каковы ваши будущие планы относительно вашей карьеры

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

резюме

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

Ali Enterprise Intelligence Division (HR-сторона)

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

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

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

резюме

Вам все еще нужно хорошо подготовиться к собеседованию с HR, особенно некоторые вопросы легко выкопать, например, почему вы ушли из текущей компании (конечно, вы не должны жаловаться на плохие вещи в текущей компании, вы должны выразить ваши мысли больше Чтобы найти лучшие возможности для развития, некоторые из ваших собственных реалистичных факторов, таких как для меня, компания, в которую я подаю заявку, находится ближе к моему дому, или моя работа достигла периода замешательства, и я хочу выпрыгнуть из период растерянности и т. д.), вы Что одно вы считаете наиболее удовлетворительным (если вы скажете что-то простое, HR подумает, что ваша работоспособность не сильна), каковы ваши общие методы решения проблем (HR, конечно также хочет изучить вашу способность решать проблемы. Если вы скажете что-то вроде Baidu, HR, конечно, подумает, что ваша способность решать проблемы не сильна), какова ваша ожидаемая зарплата (если вам не нравится эта компания, можно ожидать и выше, если вам очень нравится эта компания) Процесс собеседования очень приятный, и прибавка около 30%, а процесс собеседования вообще около 20%).

Ссылки

Vue CLI 3 в сочетании с Lerna для разработки фреймворка пользовательского интерфейса
Введение в использование набора инструментов Cz — стандартные инструкции по коммитам Git
Вы действительно понимаете $nextTick?
Реализовать простой MVVM на основе Vue
2019 передняя дорога (полная галантереи)(рекомендуется при трещинах в стенах)

предисловие

Об Али

резюме

опрос

Нравится (одна сторона)

Расскажите о селекторах CSS и приоритете этих селекторов.

Вы знаете, что такое БФС?

Что такое БФК

Условия, запускающие BFC

Правила ограничения BFC

Проблемы, которые может решить BFC

Вы знаете коробочную модель?

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

использоватьfloat + marginвыполнить

использоватьcalcРассчитать ширину

использоватьfloat + overflowвыполнить

использоватьflexвыполнить

Знаете ли вы о междоменном, что вообще может привести к междоменному?

Междоменное поведение

JSONP

Как реализовать JSONP

Проблемы с безопасностью JSONP

CSRF-атака

XSS-уязвимость

Сервер был взломан и вернул строку вредоносного кода

CORS (обмен средствами между доменами)

Что такое КОРС

простой запрос

не простой запрос

Сравнение JSONP и CORS

Другие междоменные решения

В чем разница между HTTP2 и HTTP1

можешь рассказать о кеше

Сильный кеш

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

Сцена кэша

Не подскажете, какие есть решения по оптимизации загрузки первого экрана?

Как настроить псевдонимы путей на стороне узла (аналогично настройке псевдонимов в Webpack)

Ссылаться на

Расскажите о своем понимании цепочки областей видимости

тебе известноnullа такжеundefinedесть ли разница

Что делают замыкания

Принципы отзывчивости Vue

Вы знаете о цикле событий?

Как избежать перекомпоновки и перерисовки

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

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

Как избежать срабатывания перекомпоновки и перерисовки

Вам нравится (две стороны)

Письменные экзаменационные вопросы

Вопросы и ответы по проекту

Раздел алгоритмов

резюме

Капать (одна сторона)

Какие проблемы безопасности вы знаете и как их избежать

XSS (межсайтовый скриптинг)

Светоотражающий

тип хранения

DOM на основе

Предотвращение XSS-атак

CSRF/XSRF (подделка межсайтовых запросов)

Cookie

CSRF-атака

Предотвращение CSRF-атак

Знакомство с Graphql

Что такое графкл

Зачем использовать Graphql:

Тип (абстракция модели данных)

Схема

Запрос (запрос, тип операции)

Резольвер (разрешающая функция)

Разговор о Вью$nextTickПринцип реализации

Принципы отзывчивости Vue

Разговор о понимании замыканий

Принцип реализации JSONP

БФК в CSS

Как добиться центрирования

Центрировано по горизонтали

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

Центральный элемент имеет переменную высоту

использовать`float + margin`выполнить

использовать`calc`Рассчитать ширину

использовать`float + overflow`выполнить

использовать`flex`выполнить

тебе известно`null`а также`undefined`есть ли разница

Разговор о Вью`$nextTick`Принцип реализации

`bind`реализация исходного кода

Какие периодические функции (`beforeCreated`а также`created`что ты делал между

Механизм загрузки Node.js (`require`а также`module.exports`)