Вопросы на фронтенд-интервью в начале 2020 года

опрос

предисловие

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

Я прошел собеседование по поводу разработки интерфейса, и подготовительная работа заключалась в обзоре vue, js и es6. Потом я начал собеседование.Честно говоря, ощущение после первого собеседования было: "Неужели фронтенд-собеседование такое сложное? Оно в рай? Я маленький фронтенд и спросил меня, не слишком ли алгоритм ?" На фронтенде довольно много всего, на собеседовании больше полумесяца практически не задавали повторных вопросов. Это также одна из причин, почему я пробую менталитет воды. Думая о том, чтобы быть более многогранным, зная большинство вопросов интервью, а затем целенаправленно их анализируя, последующие интервью должны быть лучше. Однако. . .

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

Рамка

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

vue

  1. Рассказать о принципе реализации двусторонней привязки данных Vue (на самом деле в этом году задавали вопросы редко, но некоторые интервьюеры компаний все равно будут спрашивать)

    Используйте Object.definerProperty для перехвата установщиков и геттеров свойств каждых данных.При изменении данных он публикует сообщение сборщику зависимостей и уведомляет наблюдателя о выполнении функции обратного вызова для достижения эффекта обновления представления. (Тем не менее, есть некоторые болевые точки при использовании Object.definerProperty для реализации мониторинга. Например, ① изменение нижнего индекса массива не может быть отслежено, поэтому при удалении или вставке массива нельзя ответить на изменение массива. в режиме реального времени; ② Можно отслеживать только свойства объекта. Когда глубина объекта относительно велика, вы можете перемещаться только по каждому свойству для осуществления мониторинга. Прокси, используемый vue3.0, полностью избегает этих болевых точек Object.definerProperty метод)

  2. Как передать значения между компонентами в vue

    props,emit,vuex, параметры маршрутизации, передача параметров через локальное хранилище,vue-bus(автобус событий),$refs,$children,$parent

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

    В строгом режиме свойства в объекте состояния в vuex не могут быть изменены по желанию, но при использовании v-model при обработке формы пользователи могут изменять данные по своему желанию, если свойства в состоянии в vuex напрямую привязаны к v- модель выдаст ошибку.Решение

  4. Разница между режимом истории и режимом хеширования в vue-router

  5. Расскажите о жизненном цикле Vue (кстати, при ответе, какая функция хука какую функцию реализует)

    beforeCreate: Инициализировать событие для наблюдения за данными.

    created:data данные привязаны.

    beforeMount: виртуальный DOM заменяет реальный DOM.

    Mounted: монтирует элемент DOM на страницу.

    beforeUpdate: перед обновлением данных.

    обновлено: после завершения обновления данных.

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

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

  6. Роль маршрутизации отложенной загрузки

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

  7. пользовательская директива

  8. Миксин

  9. Порядок выполнения жизненного цикла родительско-дочернего компонента

  10. Как предотвратить взаимодействие стилей между компонентами друг с другом

    Добавить атрибут области действия в тег стиля

  11. Разбираемся с виртуальным домом, рассказываем о принципе реализации

  12. Вы использовали аксиомы? Как axios настраивает перехватчик?

  13. Как отслеживать изменения массива в vue?

    Object.definerProperty не может захватывать и отслеживать массивы и объекты, поэтому в версиях ниже vue3.0 (за исключением 3.0) мониторинг массивов напрямую переписывает общие операции с массивами, такие как push, shift и т. д.

  14. Разговор о сохранении жизни

  15. хук маршрутизации vue-router

  16. Разница между vue и реагированием

Апплет WeChat

  1. Расскажите о жизненном цикле апплета WeChat
  2. Принцип реализации апплета WeChat
  3. Пользовательские компоненты для мини-программ WeChat
  4. С какими ямами вы столкнулись в мини-программах WeChat и как вы их в итоге решили?
  5. Есть ли способ для апплета WeChat перейти к другим программам?

JS

  1. Каковы операции вставки узлов?
  2. Как решить кроссдоменность (если упоминается jsonp, то общий интервьюер будет задавать вопросы: принцип реализации jsonp)
  3. Разница между typeOf и instanceOf
  4. Как отличить объект от массива
  5. Принцип реализации глубокого копирования и поверхностного копирования, и зачем нужно глубокое копирование
  6. Расскажите о своем понимании замыканий (когда дело доходит до замыканий, вы обычно спрашиваете об анти-шейке и троттлинге. Некоторые интервьюеры будут спрашивать напрямую, а некоторые интервьюеры будут говорить пробный сценарий, позволяя вам ответить, каким методом решать.)
  7. Расскажите о своем понимании цепочки прототипов
  8. Пузырь и поймать
  9. Реализовать обещание с помощью js
  10. Реализовать новый метод с помощью js
  11. Принцип реализации вебсокета
  12. Принцип прямой трансляции
  13. Разница между почтовым запросом и запросом на получение
  14. Разница между localStorage, sessionStorage и cookier
  15. Кратко опишите процесс ajax
  16. Какие есть типы данных js?
  17. Разговор о прототипе js

css

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

  1. Как центрировать блок по горизонтали и вертикали
  2. Какие макеты в css

ES6

  1. Какова роль функции стрелки?
  2. Принцип роли и реализации обещания
  3. Разница между асинхронным и обещанием
  4. Разница между let, const и var

    var имеет продвижение объявления переменных, var не имеет области действия в {}, а имена переменных, определенные var, могут повторяться. И эти let и const ограничены

  5. Разница между картой и forEach

    И map, и forEach могут выполнять задачу обхода массива. Однако map вернет новый массив той же длины, что и исходный массив, а forEech не имеет возвращаемого значения.

алгоритм

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

  1. Есть 16 бутылок с водой, одна из которых ядовитая.Мыши умрут, выпив каплю ядовитой воды через час.Чтобы узнать, какая бутылка воды ядовитая сразу через час, сколько мышей потребуется хотя бы?
  2. 25 лошадей, найдите 3 самых быстрых лошади, но трасс всего 5, и только 5 лошадей можно ранжировать по скорости за заезд, так сколько же гонок требуется хотя бы?
  3. Используйте пузырьковую сортировку для сортировки массива в порядке возрастания

разное

  1. Какие оптимизации производительности были сделаны
  2. мобильный адаптивный
  3. Разница между http и https (отдельные интервьюеры спросят принцип)
  4. Нужна ли нормализация кода?
  5. Разница между шаблоном публикации подписчика и шаблоном наблюдателя
  6. Напишите пожалуйста весь процесс от "ввода доменного имени в браузере" до "полной загрузки статических ресурсов страницы"
  7. Разница между кучей и стеком
  8. Преимущества вебпака (некоторые будут просить конкретную конфигурацию, например, меня спрашивали, как настроить sass для парсинга в css)
  9. Процесс от начала до конца проекта вашей компании
  10. Вы понимаете архитектуру проекта?
  11. Каковы новые возможности HTML5?

HR-интервью

Для меня самое сложное — это не техническая сторона. Это HR-интервью. Технического интервью достаточно, чтобы сказать все, что вы знаете, но HR немного перегружен, когда отвечает, и я чувствую, что в каждом вопросе есть ямка. Я не могу сказать правду, и я не могу что-то сказать мило. Т_Т. Например, причина ухода — головная боль.На самом деле всем известно, что большинство причин ухода — это то, что деньги не дают на месте. Но всегда избегайте разговоров о деньгах при ответе.

  1. зачем уходить
  2. Кто твой кумир? Почему?
  3. Что для вас самое приятное?
  4. Что вы считаете своей самой большой неудачей?
  5. Что вы делаете, когда у вас плохое настроение?

Эпилог

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

Некоторые интервьюеры задают один вопрос, а затем переходят к другому, но другие будут спрашивать ваш ответ до тех пор, пока вы не сможете на него ответить. Например: расскажите о своем понимании модели MVVM. Как реализовать модель MVVM в Vue. Как Object реализует привязку данных объектов. . . . . . У разных интервьюеров разная направленность: некоторые интервьюеры придают большое значение основам и задают много базовых вопросов по js, некоторые интервьюеры придают большое значение фреймворку и задают много вопросов о принципах реализации фреймворка, а другие уделяют больше внимания к архитектуре проекта.

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

Категории