Два года фронтенд-опыта, месяц личного общения и резюме

интервью

предисловие

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

Судя по содержанию интервью в этом месяце, большинство интервьюеров будут задавать вопросы, основанные на содержании вашего резюме. Я написал это в своем резюмеReact,Vue,Typescriptи小程序, поэтому интервьюер спросит о содержании этих частей. Кроме того, я не указал это в своем резюмеWebpackиNode, так что интервьюер не спрашивал многоWebpackиNodeсвязанный контент.

лицо по классификации

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

  • JavaScript
  • CSS
  • общие знания
  • Vue
  • React
  • Webpack
  • Typescript
  • Браузер и Интернет
  • Апплеты
  • Посмотрите на код и скажите результат
  • Отрывной код и алгоритмы
  • открытый вопрос

Ниже приведены все вопросы, с которыми я столкнулся в процессе собеседования, для справки. Следующие вопросы могут быть решены на 70% на 80%, и нет никаких проблем с тем, чтобы попасть на собеседование.

JavaScript

  • Разница между Картой и Набором, разница между Картой и Объектом
  • Какова функция фильтра, каждого и плоского массива
  • Каковы новые возможности es6
  • Расскажите о своем понимании промисов
  • В чем разница между all и расой Promise
  • Отличие стрелочных функций от обычных функций
  • Разница между let, var и const? Что делать, если вы хотите, чтобы свойства объектов, определенных константой, также не изменялись?
  • Разница между кучей и стеком
  • Принцип закрытия
  • Принцип реализации instanceof
  • Принцип реализации нового
  • Какие существуют типы данных? Как узнать, являются ли данные массивом
  • Каков принцип JQuery, реализующий цепочку вызовов?
  • Познакомить со смыслом и сценариями использования прототипа, цепочки прототипов, области действия и цепочки областей действия соответственно.

CSS

общие знания

Vue

  • Разница между вычислением и просмотром
  • Могут ли часы прослушивать вычисленные свойства?
  • Отзывчивый принцип vue
  • жизненный цикл
  • Могу ли я получить дом сразу после того, как смонтированный получит данные?
  • принцип nextTick
  • Почему нельзя использовать несколько узлов заголовков в шаблоне vue (шаблоне)?
  • Почему vuex проектирует мутацию и действие одновременно? Можно ли просто спроектировать один?
  • В чем разница между vue2 и vue3 в привязке данных?
  • Vue монтирует и размонтирует порядок выполнения хука жизненного цикла родительско-дочернего компонента
  • Схема оптимизации Vue (эквивалентно тому, как писать читаемый, простой в обслуживании и высокопроизводительный код Vue)
  • Принцип keep-alive, в чем проблема с его использованием? Как решить?

React

  • является ли setState синхронным или асинхронным
  • Принцип реализации волокна
  • Какие два нативных API используются для планирования времени волокна (requestAnimationFrame и requestIdleCallback???)
  • Как реализуются синтетические события React
  • На что следует обратить внимание при использовании Redux
  • Что делать, если Redux не возвращает новые данные
  • Как Redux распределяет данные? принцип подключения?
  • какая сцена вызывает повторный рендеринг
  • setState возвращает ту же ссылку, будет ли выполняться рендеринг?
  • Как использовать useEffect? Когда будет выполнен возврат useEffect? Каков принцип использованияEffect?
  • Разница между useMemo и useCallback, каков принцип их реализации?
  • Как useEffect, useMemo и useCallback выполняют сбор зависимостей
  • Каковы преимущества и недостатки React Hooks
  • Каков принцип реализации контекста? Как сделать сбор зависимостей?
  • Жизненный цикл реакции
  • Разница между PureComponent и Компонентом
  • Если значение ключа не задано в цикле карты, как оно изменится с четырех узлов A B C D на три узла B C D
  • В чем разница между событиями привязки React dom и собственными событиями
  • Принцип реализации хуков

Webpack

  • Почему webpack медленно упаковывается? Почему vite быстрее, чем webpack? Что мне делать, если я хочу улучшить скорость веб-пакета?

  • Расскажите о процессе компиляции и упаковки webpack

  • Расскажите мне о своем понимании древовидной тряски, можете ли вы использовать древовидную тряску как для CommonJS, так и для ESM?

  • Разница между плагином и laoder в веб-пакете, время их выполнения и часто используемые плагины и загрузчики

  • Какова роль css-загрузчика? Работает без css-loader?

Typescript

  • Каковы преимущества и недостатки Typescript по сравнению с JavaScript?

  • const func = (a, b) => a + b; Typescript должен быть написан, а параметры a и b должны быть одного типа, как числа, так и строки

  • Реализовать возвращаемый тип

  • Реализовать DeepReadOnly

  • Создайте новый тип на основе существующего типа: удалите свойство ширины из типа

    interface A {
  content: string;
  width: number;
  height: number;
}

Браузер и Интернет

  • Знакомство с EventLoop
  • Почему в EventLoop одновременно существуют две очереди макрозадач и микрозадач? Можете ли вы разработать один? Когда фрагмент кода выполняется, как программа различает макрозадачи и микрозадачи?
  • утечка памяти
  • Внедрить http-кэширование
    • Дополнение: какие поля используются для сильного кэширования? Какие поля используются для кэша согласования?
    • Последующие действия: каковы значения атрибутов таких полей, как cache-control, expires и etag?
    • Последующие действия: в какой части запроса хранятся эти поля?
    • Последующие действия: в чем разница между полями времени последнего изменения и срока действия?
    • Последующие действия: могут ли сосуществовать режимы «последняя модификация» и «истечение срока действия»?
    • Дополнение: если вы не хотите, чтобы ресурс использовал кеш, как вам спроектировать http-кеш?
    • Продолжение: разница между отсутствием кеша и отсутствием хранилища в управлении кешем
  • Знакомство с макрозадачами и микрозадачами
    • [исследование] В чем разница между макрозадачами и микрозадачами
    • Последующие действия: что такое макрозадачи? Что такое микрозадачи?
    • Последующие действия: в чем разница между макрозадачами и микрозадачами? Зачем проектировать две очереди для макрозадач и микрозадач? Не получится ли использовать очередь задач? Зачем?
    • Дополнение: вы только что сказали, что нужно идентифицировать микрозадачи и макрозадачи на основе API, так как же полноценный браузер программ различает макрозадачи и микрозадачи?
  • Приоритет микрозадач
  • Как понять, что тег script — это макрозадача
  • Разница между http1.1 и http2
  • Разница между onload и DOMContentLoaded
  • requestAnimationFrame
  • Процесс, с помощью которого браузер загружает страницу
  • Почему тег скрипта должен располагаться внизу?
  • Разница между отсрочкой и асинхронностью, а также время их загрузки и выполнения
  • Модель событий DOM. Сценарии использования для захвата событий и всплывающих сообщений о событиях
  • Процесс от ввода URL до отображения страницы
  • Как спроектировать кеш css, js и других файлов
  • 204, 304, 404, 504
  • Опишите политику одного и того же происхождения, кросс-доменные и их решения
  • Концепция и защита xss и csrf
  • Разница между sessionStorage, localstorage и файлами cookie? Откройте две веб-страницы в одной и той же системе, совместно используется ли sessionStorage двух веб-страниц?
  • Разница между http и https? Почему https относительно безопасен? Принцип шифрования HTTPS?
  • Шаги трехстороннего рукопожатия TCP и четырехсторонней волны

Апплеты

Посмотрите на код и скажите результат

  • EventLoop

    setTimeout(function() {
	console.log(1);
}, 0);
new Promise(function executor(resolve) {
  	console.log(2);
  	for (var i = 0; i < 10000; i++) {
    		resolve();
  	}
  	console.log(3);
}).then(function() {
  	console.log(4);
});
console.log(5);

  • Закрытие. Произнесите результат, а затем используйте Promise и async, чтобы переписать его так, чтобы он печатал число каждые 1 с.

    function print(n){
    for(var i = 0;i <n;i++){
        setTimeout(console.log, 1000, i);
    }
}
print(10);

  • сфера

    var a = 20;


function bar() {
  console.log(a);
}


function foo(fn) {
  var a = 10;
  fn();
}


foo(bar);

  • сфера

    function bar() {
  var a = 20;
  return function() {
    console.log(a);
  }
}


var foo = bar();
var a = 10;
foo();  // 20

  • сфера

    var a = 20;


function bar() {
  console.log(a)
  var a = 10;
  console.log(n)
}
bar()

  • EventLoop

    const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve(5);
  console.log(2);
}).then((res) => {
  console.log(res);
})


promise.then(() => {
  console.log(3);
})


console.log(4)


setTimeout(() => {
  console.log(6)
})

  • EventLoop

    async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}


async function async2() {
  console.log('async2 start');
}


console.log('script start');


setTimeout(function() {
  console.log('setTimeout');
}, 0);


async1();


new Promise(function(resolve) {
  console.log('promise1');
  resolve();
}).then(function() {
  console.log('promise2');
}).then(function() {
  console.log('promise3');
});


console.log('script end');

  • Сеть прототипов

    function foo() {

}

const bar = new foo()

console.log(bar.__proto__)
console.log(bar.__proto__.__proto__)
console.log(bar.__proto__.__proto__.__proto__)
console.log(bar.__proto__.__proto__.__proto__.__proto__)
console.log(foo.prototype)
console.log(foo.prototype.prototype)
console.log(foo.prototype.prototype.prototype)

Отрывной код и алгоритмы

  • рукописная быстрая сортировка
  • рукописная глубокая копия
  • Ручной троттлинг и стабилизация
  • рукописный вызов / подать заявку
  • Рукописный Promise.all / Promise.race / Promise.allSettled
  • Вручную ограничить количество одновременных
  • сопоставление рукописных скобок
  • Алгоритм рукописного красного конверта (обратите внимание на сбалансированное распределение и точность вычисления с плавающей запятой)
  • Дедупликация массива
  • Сортируйте сначала нечетные числа, а затем четные. Требует временной сложности O(n). Пространственная сложность O (1) (не может использовать сращивание)
  • Массив в древовидную структуру
  • Разобрать все части URL
  • Реализуйте функцию сравнения, чтобы сравнить, являются ли два объекта одинаковыми.
  • Спиральная матрица
  • добавление больших чисел
  • Найдите самое часто встречающееся английское слово
  • Обратный порядок узлов (обратный порядок узлов 10000 li под узлом ul с ul.id=list. Учитывайте производительность.)
  • Реализуйте функцию для вычисления "1+12-31+100-93"
  • Проверить, есть ли в связанном списке цикл
  • Рукописное использованиеReducer
  • Использование рукописного ввода DidMount
  • Рукописное useDidUpdate, имитация componentDidUpdate
  • использование почеркаПредыдущий
  • подниматься по лестнице
  • удалить узел в односвязном списке
  • карри
  • тире в верхний регистр
  • Тысячи делят
  • Используйте es5 для реализации ключевого слова let в es6.

открытый вопрос

  • Реализация компоновки Antd Grid

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

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

  • Каковы оптимизации для длинных списков? Как создать виртуальный список

  • Как перехватываются и сообщаются закопанные точки?

  • Как реализовать отчет о незакрытых данных

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

  • Какую работу по оптимизации производительности вы проделали?

  • Реализовать многоуровневое меню с переменными уровнями меню

  • Как отслеживать и устранять утечки памяти

  • Смоделируйте функцию сна в Java

  • Реализовать метод сращивания массива (говоря идеи)

  • Метод перехода со страницы A на страницу B и перенос операций, выполненных на странице B, на страницу A.

  • Как Sentry реализует мониторинг ошибок

  • Можно ли нарисовать GIF на холсте? Если можно, расскажите, как вы это реализовали.

  • Если бы вас попросили построить проект, какие технические решения вы бы использовали для объединения?

  • Как сделать технический отбор?

  • Реализовать ленивую загрузку изображения вручную

    1. Загрузите изображение до указанной высоты

    2. Подумайте о перекомпоновке и перерисовке

    3. Учитывайте производительность

    4. Сначала загрузите миниатюру, а затем загрузите полное изображение.

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

  • Написать функцию, передать промис и число n, промис в n(s) не возвращает результат, напрямую отклонить

  • Вы знаете ССР?

  • Расскажите о моментах, на которые следует обратить внимание в глубоком тексте

  • Предположения о направлении фронтенд-разработки

  • Как разработать фреймворк, подобный elementui, который можно выпускать в одном пакете или в нескольких пакетах.

  • Если бы вас попросили разработать единую тестовую среду, как бы вы ее разработали?

  • Как реализовать ленивую загрузку модулей? Как работает синтаксис импорта

  • Как разработать схему единого входа?

  • Какие шаблоны проектирования вы использовали? Расскажите об их сценариях использования и кейсах применения? Какие преимущества, по вашему мнению, принесло вам использование шаблонов проектирования?

  • При переходе со страницы А на страницу Б и последующем возврате на страницу А, как сохранить страницу А в предыдущем состоянии

  • Знать Vue3 и React18

  • Разница между Nginx и прокси промежуточного программного обеспечения узла

  • Какую проблему в основном решает промежуточное ПО Node?

  • Расскажите мне о самом полезном проекте, над которым вы когда-либо работали. Опишите функции, которые выполняет система, цели и проблемы, которые может решить система?

  • Что вы думаете о массовом присутствии любого в Typescript? Какие мысли и действия будут у вас перед лицом такой сцены?

Суммировать

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

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

Второй шаг – пройтись. Читать фейсбук онлайн нужно в больших количествах, чем ближе фейсбук, тем он полезнее. Уделяйте больше внимания технологиям, написанным в резюме и используемым в проекте, и больше внимания уделяйте знанию нативного JS, технических фреймворков, конструкции и упаковки, оптимизации производительности.Для CSS и HTML интервьюер задает относительно небольшой диапазон , и все могут быть заданы.На самом деле, я столкнулся со всеми темами CSS, с которыми я столкнулся, и все они записаны в статье.

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

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

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

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

【Хвост】Как выбрать предложение

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

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

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

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

  • Основные справочные показатели: отрасль, компания, должность, часовая заработная плата.

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

  • Я встречал много детской обуви.Когда они только закончили учебу, они выбирали предложения в зависимости от заработной платы.Когда темп работы слишком высок, а рабочее давление слишком велико, они впадают в неуверенность в себе и самоотречение, и то проведите такую ​​переоценку ценностей на себе.Пытка: Я живу, чтобы зарабатывать деньги?

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

Категории