предисловие
Нельзя пропустить два последних интервью и статьи, связанные с уходом в отставку.
Собеседование в этом году прошло относительно гладко: я взял интервью у пяти компаний (Kujiale, Pinduoduo, Byte, Didi и Ant), и все они прошли успешно.
В статье я не только перечислю вопросы интервью, но и дам некоторые предложения по ответам на вопросы.Мои личные возможности ограничены, и я не могу гарантировать, что мои ответы будут правильными.Надеюсь меня поправят, если будут ошибки.
байт
одна сторона
Расскажите о кешировании браузера
Кэш браузера делится наСильный кеша такжеСогласовать кеш, сильный кеш будет получать данные непосредственно из браузера, а согласованный кеш сначала посетит сервер, чтобы узнать, не истек ли срок действия кеша, а затем решит, следует ли получать данные из браузера.
Поля, управляющие сильным кэшированием: Expires и Cache-Control, Expires и Cache-Control.
Поля, управляющие кэшем согласования: Last-Modified/If-Modified-Since и Etag/If-None-Match, где Etag/If-None-Match имеет более высокий приоритет, чем Last-Modified/If-Modified-Since.
Разница между файлом cookie и сеансом
Сессия — это структура данных, сохраняемая на сервере для отслеживания статуса пользователя, эти данные могут храниться в кластерах, базах данных и файлах; Cookie — это механизм сохранения клиентом информации о пользователе, который используется для записи некоторой информации о пользователе, а также способ реализации сеанса.
Видеть:В чем разница между COOKIE и SESSION?
Как браузер выполняет функцию сеанса.
На самом деле, это исследование того, как http обрабатывает безгражданство, что можно увидеть в деталях.В чем разница между COOKIE и SESSION?внутри ответа.
Объяснение: csrf и xss
XSS: Злоумышленники вставляют вредоносный код сценария на веб-страницу.Когда пользователь просматривает страницу, код сценария, встроенный в сеть, будет выполняться, тем самым достигая цели злонамеренной атаки на пользователя.
CSRF: Атака CSRF заключается в том, что злоумышленник использует файл cookie жертвы, чтобы обмануть доверие сервера, и может подделать запросы от имени жертвы и отправить их на атакуемый сервер без ведома жертвы, чтобы выполнить авторизацию без авторизации. под защитой.
Видеть:Вопросы на собеседовании по безопасности переднего плана
как предотвратить csrf и xss
Видеть:Вопросы на собеседовании по безопасности переднего плана
Что такое междоменные решения?
Обычно используются: jsonp, CORS, nginx proxy, всего их около девяти, которые можно посмотреть:Принципы реализации девяти междоменных методов (полная версия)
CORS - как сделать?
Сервер может установить Access-Control-Allow-Origin для включения CORS.
Есть ли разница между Get и POST для CORS?
На самом деле, я хочу исследовать, когда будетПредполетный запрос (запрос опции).
Понять процесс HTTPS?
Рекомендуемые волныГлубокое понимание того, как работает HTTPS
Как webpack оптимизирует производительность
Оптимизация производительности webpack в основном учитывает объем упаковки и скорость упаковки.
Для анализа объемаwebpack-bundle-analyzerПлагин для анализа скорости:speed-measure-webpack-pluginплагин.
Бутылка для оптимизации скорости упаковки Jun's:Поиграйте с webpack и сделайте упаковку на 90% быстрее.
Разница между модулем es и commonjs
Часто задаваемые вопросы, исследуйте разницу между модулями ES6 и модулями CommonJS. Ключевые моменты: 1. Первое — это ссылка на значение, а второе — его копия. 2. Первый выводит интерфейс во время компиляции, а второй загружает во время выполнения.
рекомендуемая статья:Модульность интерфейса: CommonJS, AMD, CMD, ES6.
Как сделать динамическую загрузку в реакции
React.lazy, помимо динамической загрузки через webpack:import()а такжеensure.require
В чем принцип динамической загрузки, то есть код, скомпилированный вебпаком
Справедливости ради, есть два способа динамической загрузки webpack:import()а такжеrequire.ensure, но принцип их реализации одинаков.
Я думаю, что смысл этого вопроса в том, чтобы динамически создавать теги сценария и передаватьjsonpзапроситьchunk, рекомендуемые статьи:Как webpack реализует динамический импорт
Письменные тестовые вопросы: Структура страницы включает в себя верхний колонтитул (всегда вверху), основное содержание и нижний колонтитул.Нижний колонтитул всегда внизу страницы (а не внизу окна), то есть когда высоты содержимого недостаточно, нижний колонтитул тоже должен быть внизу страницы.
Регулярные вопросы, которые исследуют базовый макет
Письменный вопрос: выполнение процесса написания новых
Процесс выполнения new примерно таков:
-
создать объект
-
поставить объект _proto_указатель на прототип конструктора
-
использовать этот объект как this конструктора
-
Верните этот объект.
function myNew(Con, ...args) {
let obj = Object.create(Con.prototype)
let result = Con.apply(obj, args)
return typeof result === 'object' ? result : obj
}
Письменный вопрос: напишите функцию, которая обрабатывает возможную точность сложения, например 0,1 + 0,2 = 0,3.
Идея: существует проблема с базовой обработкой чисел с плавающей запятой, поэтому цель состоит в том, чтобы найти способ преобразовать все числа с плавающей запятой в целые числа для обработки, умножить на кратное (A), а затем сложить и разделить на это кратное (A), это кратное должно быть кратным наименьшему из двух чисел, например 0,1 + 0,02, затем его следует одновременно умножить на 100, чтобы получить 10 + 2, а затем разделить значение на 100.
1000000000 + 1000000000 позволяет возвращать строки для обработки больших чисел
Проблема больших чисел решается с помощью строк, которые добавляются сзади к началу, а затем решают проблему переноса.
две стороны
чат проект
Проект в основном спрашивает:
- Трудности проекта и пути их решения
- Каковы основные моменты проекта?
Напишите процесс наследования es6
Я думаю, что этот вопрос очень хороший, и очень важно изучить основные навыки.
// 这个是要实现的方法
createClass = fun(sons, super) {
// TODO
return fn;
}
// 这是个 es6 的一个例子,要实现 extends 的功能。
class Man extends Human {
cons (args) {
super(args)
// xxxxx
}
speak() {
console.log('')
}
}
Напишите решение умножения больших чисел. Передать две строки, вернуть строку
function multi(str1, str2) {
}
Этот вопрос похож на односторонний подход, за исключением того, что перенос не обязательно равен 1.
Три стороны
чат проект
Напишите функцию стабилизации
Вопросы по алгоритму:Ли ТСО's-talent.com/problems/no…
подраздел
Bytes печально известен множеством вопросов по алгоритмам, по сути, со всех сторон есть вопросы по алгоритмам и вопросы по программированию, поэтому вам следует уделять больше внимания умению программировать.
С рациональной стороны это относительно условно, а со второй и третьей сторон, поскольку они руководители групп и люди более высокого уровня, они спрашивают меньше технических подробностей и сосредотачиваются на рассмотрении каких-то технических решений и вопросов проекта.
Диди
одна сторона
принцип веб-пакета
Грубо:
- Параметры инициализации: чтение и объединение параметров из файлов конфигурации и операторов оболочки для получения окончательных параметров;
- Начать компиляцию: Инициализируйте объект Compiler с параметрами, полученными на предыдущем шаге, загрузите все настроенные плагины и выполните метод запуска объекта, чтобы начать компиляцию;
- Определить запись: найти все файлы записи в соответствии с записью в конфигурации;
- Скомпилируйте модуль: начиная с файла записи, вызовите все настроенные загрузчики для преобразования модуля, затем найдите модули, от которых зависит модуль, а затем повторите этот шаг, пока все файлы, зависящие от записи, не будут обработаны на этом шаге;
- Завершение компиляции модуля: После перевода всех модулей с помощью Loader на шаге 4 получается финальное содержимое каждого модуля после перевода и зависимости между ними;
- Выходные ресурсы: в соответствии с зависимостями между записями и модулями соберите фрагменты, содержащие несколько модулей, один за другим, а затем преобразуйте каждый фрагмент в отдельный файл и добавьте его в список выходных данных.Этот шаг — последний шанс изменить выходное содержимое. ;
- Вывод завершен: после определения содержимого вывода определите путь вывода и имя файла в соответствии с конфигурацией и запишите содержимое файла в файловую систему.
В приведенном выше процессе Webpack будет транслировать определенное событие в определенный момент времени, подключаемый модуль будет выполнять определенную логику после прослушивания интересующего события, а подключаемый модуль может вызывать API, предоставленный Webpack, для изменения текущего результат вебпака.
вавилонский принцип
Процесс перевода babel делится на три этапа:разбор, преобразование, генерация, взяв в качестве примера перевод кода ES6 в код ES5, конкретный процесс перевода babel выглядит следующим образом:
- Ввод кода ES6
- Babylon анализирует, чтобы получить AST
- Плагин использует babel-traverse для обхода и преобразования дерева AST, чтобы получить новое дерево AST.
- Сгенерируйте код ES5 из дерева AST с помощью Babel-генератора
Понимание виртуального DOM
Говорить о виртуальном доме и его ценности от длительной истории реагирования
Как сделать проект в оптимизации производительности
Это связано с моим проектом.
Вы написали загрузчик или плагин для веб-пакетов?
Расскажите мне о написанном вами плагине babel
две стороны
Принцип редукции
В чем разница между управлением состоянием и режимом публикации-подписки в редукции
Redux на самом деле является публикацией и подпиской, но Redux может сделать данные предсказуемыми и иметь обратную силу.
Принцип реакции-редукции, как он связан с реакцией
Есть только два основных компонента react-redux, Provider и connect.Provider хранит данные, хранящиеся в Redux, в контексте, получает данные из контекста через соединение и передает их компоненту, обернутому соединением, через реквизиты.
Вы понимаете принцип мультитерминала?
Я не знаю, я не понял.
Связь между http и tcp
Может ли TCP установить несколько соединений?
Я думаю, что хочу спросить конвейер HTTP, я забыл, что это называется так.
Объясните, почему существует три рукопожатия и четыре волны
Вы когда-нибудь писали плагин для Babel? за что? Как написать плагин для Babel
Я написал несколько простых плагинов для Babel и описал, как плагин Babel, который наша компания использует для создания документации из кода, делает это.
Вы знаете, как преобразовать его в AST?
Я предполагаю, что это связано с лексическим анализом и грамматическим анализом.
Вы изучали среду выполнения React?
планирование карьеры.
Три стороны
Введение в проект
Расскажите нам о сложности вашего проекта и способах ее решения
Мы долго говорили об этом, и мы также говорили о том, как обращаться с некоторыми большими объемами данных.
Сколько у вас библиотек бизнес-компонентов и какие компоненты
Как устроен компонент разрешений
Будешь узлом?
Я сказал, что буду только CRUD, будет пункт экспресс, затем начал беспорядочный обстрел знания еды.
Поделитесь своим пониманием промежуточного программного обеспечения
Как обеспечить стабильность внутренних сервисов и как выполнить аварийное восстановление
Я чувствую, что это выходит за рамки рекомендаций, и я в принципе никогда этого не делал.К счастью, я поговорил с однокурсниками по бэкенду о том, как они делают аварийное восстановление, и я до сих пор помню два момента.
- Развертывание нескольких серверов
- Даунгрейд обрабатывается, сервис зависает, и он берется из кеша.
Как сделать запросы к базе данных быстрее
- показатель
- Если данных слишком много, вы можете разделить таблицу и разделить ее на несколько баз данных.
Для чего используется база данных?
mysql
зачем использовать mysql
Что вы надеетесь Didi может предложить вам?
Этот вопрос на самом деле довольно распространенный, можно хорошо подготовиться и запомнить ответ.
В конце концов интервьюер спросил меня, не хочу ли я что-нибудь у него спросить, и я сказал «нет», потому что уже много спрашивал раньше. Однако он все же представил мне, что их бизнес по-прежнему очень хорош, третий в группе, а также получил производительность A-level, в компании много технических осадков, кросс-энд, веб-IDE и т. д.
В это время я почувствовал, что могу пройти, и мне казалось, что меня тянет к этому, и я хихикал.
четыре стороны
Расскажите о трудностях проекта и способах их решения.
Обсудите трудности вместе
Какие технические преимущества у вас есть?
Над какой технологией вы работаете в последнее время?
планирование карьеры
Вы когда-нибудь занимались мобильным бизнесом?
Что вы надеетесь Didi может предложить вам?
Как организовать время, когда дела идут тяжело?
подраздел
Позиция, с которой я сталкиваюсь, скорее всего, вернется к созданию некоторых мультитерминальных приложений, поэтому она будет включать в себя множество вещей, связанных с веб-пакетом и астом, поэтому я задал много этих вопросов, я чувствую, что эта группа все еще очень хорошо, и может сделать много технических вещей.
Муравей
одна сторона
Скажи мне, что сделал Могуцзе
Разговор о любых технических осадках
В дополнение к redux mbox dva вы использовали другое управление состоянием?
Принцип крючков
Вы видели проект, связанный с крючками?
Что вы ожидаете от муравьев, или техническое планирование, что вы хотите сделать
По какому принципу работают подобные хуки в vue3
две стороны
Говорить о проекте, сложность проекта, а что вы сделали
Зачем в проект внедряют ТС
Разница между два и редукс
Карьерный рост, планы на этот год
Как об обновлении компонента сообщается всем, кто его использует.
Если вы разрешите вашему дизайн-проекту автоматически разрабатывать обновления компонентов, и это безопасно, как бы вы проектировали?
Три стороны
Я говорил о проекте на протяжении всего процесса, потому что он не фронтенд, поэтому я не спрашивал никаких знаний о фронтенде, в основном говорил о бизнесе, чтобы увидеть мое понимание бизнеса, а также как некоторые идеи.
-
Трудности проекта
-
Как с этим бороться
-
Как можно улучшить проект
-
Как бизнес-сторона получает обратную связь, то есть какая польза от этой штуки?
подраздел
С одной стороны, интервьюер спросил много такого, чего я вообще не знал, то, что я знаю, может быть более случайным, и я не могу их запомнить. Во всяком случае, я глубоко чувствую, что широта и глубина знаний в интервью намного превосходят мои, и они в принципе не на том же уровне.
Две и три стороны уже являются большими парнями P9, поэтому я не стал задавать слишком много технических деталей, все они посвящены изучению некоторых технических решений и проектов.
Интервью с муравьями на самом деле довольно сложное, вопросы не из разряда однозначных ответов, они в основном основаны на вашем обычном накоплении и опыте.
наконец
После последнего интервью между Pinduoduo и Kujiale многие спрашивали меня, сколько лет я работал, как я учился и есть ли у вас какие-то навыки после стольких интервью?
Во-первых, я работаю уже почти два года и закончил обучение в июле 2018 года.
Что касается вопроса о том, как подготовиться к собеседованию, моя стратегия состоит в том, чтобы поставить себязнать вещи и вещи, которые обычно используются, старайтесь, чтобы интервьюер не спрашивал вас. Если вы чего-то не знаете, вы можете сказать интервьюеру нет, если вы мало знаете, то интервьюер не будет задавать соответствующие вопросы. Если вы даже не знаете вещи, которые вы часто используете, то вряд ли у вас будет глубокое понимание тех, которые обычно не используются.
Например, я могу больше писать react, участвовать в разработке библиотек компонентов и писать больше webpack. Поэтому, когда я готовлюсь, я стараюсь максимально подготовить эти знания.Люди, которые меня знают, знают, что я провел много исследований по реакции, и я написал статьи о принципах и оптимизации производительности, поэтому, если я тестирую реакцию, Я в принципе не беспокоюсь. К vue, мобильному терминалу, апплету, ноде и т. д. я был в принципе не готов, когда спрашивал, говорил, что просто разбираюсь и реального боевого опыта не имею.
Наконец, я Тао Венг, фронтендер, который любит думать, ожидая вашего внимания.
Если вы ищете работу в последнее время, вы можете связаться со мной.Ниже мой официальный аккаунт.