Как подготовиться к собеседованию Front End (начальный уровень - средний уровень)

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

Часть 1. Подготовка к работе

1. Описание работы

Прежде чем подавать заявку на вакансию, вы должны прочитать описание должности word by word

Давайте возьмем один JD от Amazon Front End Software Development Engineer. Давайте пропустим часть Описание, сначала рассмотрим базовую квалификацию (это способ быстро отфильтровать подходящую для вас вакансию).

BASIC QUALIFICATIONS
· Bachelor's degree in Computer Science or related field (or 4+ additional years work experience)
· 3+ years relevant professional development experience
· Computer Science fundamentals in data structures, algorithm design, and problem solving
· Experience in developing rich applications with HTML, CSS, JavaScript
· Experience in developing front-end software, with deep experience in one or more relevant front-end frameworks (React, Angular, etc.)

Исходя из этих основных требований, мы можем сказать:

1. Они предпочитают образование в области информатики, но не обязательно. Если вы пришли из учебного лагеря или самостоятельно учились, вам нужно доказать, что вы уже занимались программированием раньше.
2. Они предпочитают опыт работы более 3 лет, но следует попробовать и 1-2 года. Вы можете добавить свой опыт стажировки или доказать, что вы узнаете больше в более коротком опыте.
3. Хорошо, теперь мы знаем, что они будут задавать вам вопросы о структурах данных и алгоритмах. Вы должны потратить время на его подготовку.
4. Вы должны знать хотя бы один фреймворк Front End. Лучше всего использовать их в работе или в проекте. По крайней мере, вы должны создать что-то с помощью одного из фреймворков Front End (Angular, React, Vue, Ember, PReact и т. Д.)

· Domain of ReactJS, NodeJs or a modern front end framework
· Advanced CSS skills
· Experience building complex software systems that have been successfully delivered to customers
· Knowledge of professional software engineering practices & best practices for the full software development life cycle, including coding standards, code reviews, source control management, build processes, testing, and operations
· Ability to take a project from scoping requirements through actual launch of the project
· Experience in communicating with users, other technical teams, and management to collect requirements, describe software product features, and technical designs.
· Experience improving web latency in complex large scale deployments.
· Ability to convert a design document into a working user interface with no loss in fidelity
· Strong customer focus, ownership, urgency and drive

2. Анализ бизнеса / компании

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

3. Подготовка стека переднего плана

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

• Реагировать, CSS3
• Развертывание

4. Самовведение / Сопроводительное письмо / Резюме / Портфолио

Улучшайте свои материалы на основе результатов анализа JD.

Часть 2: Подготовка к вопросам техники

1. Макет CSS и блочная модель

(1) Макет CSS

ex. 3 columns layout, left and right will be 300px, middle auto
(1) .left, .right{width: 300px;}
    .left { flow: left}
    .right { flow: right}
(2) .parent { display: flex;}
    .left, .right{width: 300px;}
    .middle { flex: 1; }
(3) .parent { display: table; width: 100% }
    .parent div { display: table-cell}
    .left, .right{width: 300px;}
(4) .parent { display: grid; width: 100%; 
              grid-template-rows: 100px;
              grid-template-columns: 300px auto 300px 
             }
(5) .parent { display: relative}
    .left, .right{width: 300px; position: absolute}
    .left {left:0;}
    .right {right:0}
    .middle { left: 300px; right:300px}

(2) Коробка модальная

box-sizing: content-box/border-box;

(3) BFC (Контекст форматирования блока)

• Что особенного для BFC?

1. vertical margin collapse. 
2. independent container won't effect others.
3. flow elements height will be counted

• Как создать BFC?

1. overflow auto/hidden
2. flow not none
3. position not static/relative
4. display table/inline-block

2. Dom Event и цепочка прототипов

(1) Дом-событие

DOM0: element.onclick = function(){}
DOM2: element.addEventLisener('click', function(){})
DOM3: element.addEventLisener('keyup', function(){})

• Захват события:

window -> document -> html -> body -> ... -> target

• Событие buble up

target -> ... -> current target -> ... -> window

• API событий:

e.preventDefault()
e.stopPropagation()
e.stopImmediatePropagation()
e.currentTarget
e.target

• индивидуальное мероприятие

var newEvent = new Event('custome');
element.addEventListener('custome', function(){})
element.dispatchEvent(newEvent);

(2) прототипы

• Способы создания объекта

var o1 = { name: 'o1' };
var o2 = new Object({name: 'o2' });
var M = function(){ this.name='o3' };
var o3 = new M();
var P = { name: 'o4' };
var o4 = Object.create(P);

Instanceof и цепочка прототипов

o3 instanceof M // true
o3 instanceof Object // true
M.prototype.constructor === M
o3.__proto__ === M.prototype
M.prototype.__proto === Object.prototype
M.__proto__ === Function.prototype

3. ООП

// declare a class
function Animal(){
 this.name = 'name';
}
// ES 6
Class Animal2{
 constructor(){
  this.name = name;
 }
}
// instance
console.log(new Animal(), new Animal2());

Класс наследования

// method 1:
function Parent1() {
 this.name = 'parent1';
}
function Child1(){
 Parent1.call(this);
 this.type='child1';
}
Child1.protoype = Parent1.prototype;
console.log(new Child1())
// method 2:
function Parent2() {
 this.name = 'parent2';
}
function Child2(){
 Parent2.call(this);
 this.type='child2';
}
Child2.protoype = Object.create(Parent2.prototype);
Child2.prototype.constructor = Parent2;

4. Безопасность ИП

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

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

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

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

5. Алгоритм

Эту часть вам нужно подготовить самостоятельно. Обратите внимание на следующие часто задаваемые вопросы:

• Сортировка
• Стек, очередь, связанный список
• Рекурсия
• Польская нотация, PN (необязательно)

2 + 3 * (5–1) => + 2 * 3–5 1

Обратная польская запись, RPN

2 + 3 * (5–1) => 2 3 5 1 — * +

6. Метод рендеринга

(1) Что такое DOCTYPE?

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

（2） Браузерные методы визуализации

HTML - ›HTML Parser -› Dom Tree- ›Attachment -› Render Tree ‹-› Layout

Таблицы стилей - ›CSS Parser -› Правила стилей- ›Вложение-› Дерево рендеринга - ›Рисование -› Отображение

(3) Оплавление и перекраска

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

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

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

Подробнее о том, как работает браузер

7. JS и производительность

Js является однопоточным, он будет запускать задачи синхронизации, а затем задачи асинхронности:

console.log(1);
setTimeout(function(){console.log(2)}, 0 );
console.log(3);
// output 1 3 2
for(var i = 0; i < 4; i++) {
 setTimeout(function (){
   console.log(i)
 }, 0);
};
// output 4 4 4 4

Что такое цикл событий?

Как улучшить производительность FE?

• Сжать файлы и объединить файлы, уменьшить HTTP-запрос
• Асинхронная загрузка (отложенная и асинхронная)
• Браузер кеширован

Истекает, Cache-Control

Last-Modified, If-Modified-Since, Etag, If-None-Match

• CDN
• Предварительная выборка DNS

// method 1: 
<meta http-equiv="x-dns-prefetch-control" content="on">
// method 2: 
<link rel="dns-prefetch" href="host_name_to_prefetch.com">

8. Монитор ошибок

(1) Методы отлова ошибок

• попробуй поймать
• window.onerror
• object.onerror
• performance.getEntries
• Событие ошибки

window.addEventListener('error', function(){}, true)

9. Протоколы HTTP и Интернет-связь.

(1) Протоколы HTTP

Что такое сообщение-запрос?

• Строка запроса (метод запроса, адрес, версия протокола, например GET /images/logo.png HTTP1.1)
• Заголовок (например, Accept-Language: en, Host, Connection)
• Пустая строка
• Необязательное тело сообщения

Что такое ответное сообщение?

• Строка состояния (протокол / версия, код состояния)
• Заголовок
• Пустая строка
• Тело ответа

Что такое методы запроса?

• ПОЛУЧАТЬ
• ПОЧТА
• ПОЛОЖИЛ
• УДАЛЯТЬ
• ГОЛОВА
• ОПЦИИ / ПОДКЛЮЧЕНИЕ / ТРАССИРОВКА

Различия между POST и GET

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

Коды статуса HTTP?

• 1xx Информационные ответы.
• 2xx Успех.

200 ОК, 206 частичное содержимое

• 3xx перенаправление.

301 перемещено постоянно, 302 найдено / перемещено временно, 304 не изменено / используется в кэше

• 4xx Ошибки клиента.

400 неверный запрос, 401 неавторизованный, 403 Запрещенный, 404 не найденный

• 5xx Ошибки сервера

500 Внутренняя ошибка сервера, 503 сервер недоступен

Что такое http Keep-Alive / Постоянное соединение?

В HTTP / 0.9 и 1.0 соединение закрывается после одной пары запрос / ответ. В HTTP / 1.1 был введен механизм keep-alive, при котором соединение можно было повторно использовать для более чем одного запроса.

Еще вопросы по протоколам http.

(2) интернет-общение

Что такое политика одинакового происхождения?

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

По соображениям безопасности браузеры ограничивают HTTP-запросы из разных источников, инициируемые из скриптов.

Как FE взаимодействует с BE?

• Аякс
• WebSocket
• CORS

Метод запроса с разных источников?

• JSONP
• Хэш
• postMessage
• WebSocket
• CORS

Часть 3: Подготовка к вопросам поведения

1. Мягкие навыки

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

Подумать о:

• Что я делал раньше? (Я разработал ….)
• Каков результат (дать количественную оценку)? (Я потратил 3 недели на то, чтобы закончить XXX, количество пользователей увеличилось на 15%)
• Какие технологии я использовал? (Я использовал холст, vml + svg)
• С каким вызовом я столкнулся? (Когда я попытался, я нашел XXX)
• Какую проблему я решил? (После исследования я использовал XXX на XXX)
• Какое самое большое достижение? (Компания впервые использовала алгоритм XXX)
• Что я выучил? (Деловое понимание. Узнай больше о)

2. Карьерный план

• какова моя цель?
• какова краткосрочная цель?
• какова долгосрочная цель?
• какой план?

Часть 4: Полезные ссылки

Вот несколько полезных ссылок из Интернета:

1. Вопросы на собеседовании с фронтенд-разработчиком

2. CareerCup