Сводка по набору в школу на 2018 год

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

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

обработать

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

Само введение

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

Затем интервьюер может спросить:

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

Что ж, прелюдия почти закончена, теперь давайте начнем сосредотачиваться на основах.

Резюме очков знаний

HTML

• Новые возможности HTML5, семантика
• Режим стандартов браузера и режим причуд
• Разница между хтмл и хтмл
• Преимущества использования данных
• метатег
• canvas
• Устаревшие HTML-теги
• Ошибка IE6 и некоторые позиционные ошибки
• css js размещение где и зачем
• Что такое прогрессивный рендеринг
• язык шаблонов html
• Принцип мета-вьюпорта

CSS

• коробочная модель, размер коробки
• Новые возможности CSS3, псевдоклассы, псевдоэлементы, якорные псевдоклассы
• Как реализовать скрытые страницы в CSS
• Как добиться горизонтального центрирования и вертикального центрирования.
• Говорите о положении, показывайте
• Пожалуйста, объясните, что делает *{box-sizing:border-box;} и в чем преимущества его использования.
• Проблемы и решения, вызванные плавающими элементами? Абсолютное позиционирование и относительное позиционирование, отображаемое значение после плавающего элемента
• Разница между ссылкой и импортом @import css
• Объясните flexbox css3 и применимые сценарии.
• Разница между встроенным и встроенным блоком
• Какие элементы являются элементами уровня блока, а какие элементами уровня строки, и каковы характеристики каждого из них.
• Макет сетки
• Роль сервировки стола
• Каковы способы достижения двухколоночного макета?
• css dpi
• Вы знаете разницу между атрибутом и свойством?
• Проблема с макетом CSS? Как реализовать трехколоночный макет в CSS? Что, если середина адаптивная?
• Как реализовать потоковую верстку, как реализовать адаптивную верстку
• мобильная раскладка
• Реализовать макет с тремя колонками (макет Святого Грааля, макет с двойным летающим крылом, гибкий макет)
• Принцип очистки поплавка
• Перелив: Какие недостатки скрыли?
• Относится ли процент заполнения к родительской ширине или к собственной ширине
• Анимация CSS3, разница между переходом и анимацией, свойства анимации, ускорение и имитация гравитации
• Как вращать изображения в CSS 3 (преобразование: поворот)
• sass less
• Что вы знаете о мобильной разработке? (Отзывчивый дизайн, Zepto; @media, область просмотра, платформа оценки регулярных выражений JavaScript.)
• Что такое bfc и как создать bfc? Решить какую проблему?
• Единицы длины в CSS (px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)
• Каков приоритет селекторов CSS?
• Спрайт
• svg
• Каков принцип медиазапроса?
• CSS загружается асинхронно? Где это проявляется?
• Каковы распространенные проблемы совместимости браузеров? Общие методы взлома
• Слияние маржи
• Объясните разницу между двойным двоеточием и одинарным двоеточием в "::before" и ":after"

JS

• Каковы основные типы js? Какие бывают ссылочные типы? Разница между null и undefined.
• Как узнать, имеет ли переменная тип Array? Как узнать, имеет ли переменная числовой тип? (больше, чем один)
• Является ли Object ссылочным типом? В чем разница между ссылочными типами и примитивными типами? Какой из них находится в куче, а какой в ​​стеке?
• JS общий API-интерфейс работы с домом
• Объясните всплывающие сообщения о событиях и захват событий
• Делегирование событий (рукописный пример), всплытие и захват событий, как предотвратить всплытие? Как организовать события по умолчанию?
• Понимание замыканий? Когда происходит закрытие? Как реализовать замыкания? Каковы плюсы и минусы закрытия?
• Что использует сцены? В чем разница между ЭТО в C, Java? Как изменить это значение?
• звоните, обращайтесь, связывайтесь
• Показать прототип и неявный прототип, нарисованная от руки цепочка прототипов, что такое цепочка прототипов? Почему прототипы цепей
• Несколько способов создания объектов
• Множество способов, преимуществ и недостатков реализации наследования
• Что именно делает новый объект
• Рукописный Ajax, XMLHttpRequest
• переменное продвижение
• Пример типичного варианта использования анонимной функции
• Укажите разницу между хост-объектами JS и нативными объектами. Почему не рекомендуется расширять встроенные объекты JS? Что такое встроенные объекты и встроенные функции?
• Разница между атрибутом и свойством
• Разница между загрузкой документа и событиями документа DOMContentLoaded
• === и == , [] === [], undefined === undefined,[] == [], undefined == undefined
• Какие значения может получить typeof?
• Что такое «use strict», плюсы и минусы
• Какова область действия функции? Каковы возможности js?
• Как JS реализует перегрузку и полиморфизм
• Обычно используемый массив API, строковый API
• Собственная привязка событий (кросс-браузер), разница между dom0 и dom2?
• Учитывая элемент, получить его координаты относительно окна просмотра
• Как реализовать ленивую загрузку прокрутки изображения
• Каковы методы строкового типа js? Как использовать функции регулярных выражений?
• глубокая копия
• Напишите общую функцию прослушивания событий
• Установка и получение файлов cookie в Интернете
• Порядок выполнения setTimeout и обещания
• Что такое модель потока событий в JavaScript?
• объект навигатора, местоположение и история
• js механизм сборки мусора
• Причины и сценарии утечек памяти
• Несколько способов привязки событий DOM
• Разница между target и currentTarget в событиях DOM
• Разница между typeof и instanceof, принцип instanceof
• js анимация и css3 анимация сравнение
• Обратный отсчет JavaScript (setTimeout)
• js обрабатывает исключения
• JS дизайн шаблонов знают те
• Реализация карусели и разработка карусельного компонента, процесс карусели из 10 000 картинок
• Принцип работы и механизм вебсокета.
• Что происходит, когда палец касается сенсорного экрана?
• Что такое каррирование функций? И каковы применения JS API для реализации каррирования функций? (Некоторое понимание каррирования функций, а также его применения в функциональном программировании, наконец, говорит о том, что метод сокращения связывания функции и массива в JS использует каррирование функций.)
• Отладка JS-кода

ES6

• Говорить о обещании
• Вы знаете все возможности ES6? Если вы столкнетесь с чем-то и не знаете, ES6 это или ES5, как вы это отличите?
• В чем разница между наследованием в es6 и наследованием в es5
• обещание инкапсулирует ajax
• Преимущества let const
• Что такое генератор es6, принцип реализации async/await
• Разница между ES6 и модульной спецификацией commonjs узла
• Стрелочная функция, и это

компьютерная сеть

• Каковы важные части заголовка протокола HTTP, код состояния HTTP
• Как сделать ввод сетевого URL для вывода?
• Почему оптимизация производительности должна снижать количество посещений HTTP?
• Процесс и принцип HTTP-запроса
• Сколько рукопожатий и волн у https (да, https)? Принцип https.
• Сколько раз http машет и пожимает руку? Китайское название TLS? На каком сетевом уровне находится TLS?
• Характеристики TCP-соединения, как обеспечить безопасность и надежность TCP-соединения?
• Почему для TCP-соединения требуется трехстороннее рукопожатие, а не двустороннее?
• Почему tcp пожимает руку три раза и машет четыре раза?
• Трехстороннее рукопожатие TCP и четырехстороннее отрисовка волны (нарисуйте и напишите значение ack и seq на месте)?
• Разница между tcp и udp
• В чем разница между get и post? При каких обстоятельствах он используется?
• Разница между http2 и http1?
• websocket
• что такое поток tcp и что такое поток http
• Как Babel компилирует код es6 в es5
• Постоянные соединения и конвейеризация http2
• Разрешение доменного имени — tcp или udp.
• Дивергенция доменов и конвергенция доменов
• Куда помещается файл при публикации файла?
• Что в заголовке отклика HTTP?

Браузер связан

• Междоменный, почему JS ограничивает междоменный
• Фронтальная безопасность: xss, csrf...
• Как браузер загружает страницу? Какое решение для блокировки скриптов скриптов? В чем разница между отсрочкой и асинхронностью?
• Надежный кеш браузера и кеш согласования
• Что такое глобальные переменные браузера?
• Сколько ресурсов браузер может загрузить с доменного имени одновременно
• Загрузка по запросу, критерии оценки элементов для разных страниц
• Использование и отличие веб-хранилища, файлов cookie, локальных настроек и т. д.
• ядро браузера
• Как реализовать механизм кэширования? (из кэша 200, в кэш в etag и далее в)
• Разговор о понимании и разнице между 200 и 304
• Что такое предварительная загрузка и ленивая загрузка
• Сколько состояний может иметь экземпляр XMLHttpRequest?
• Принцип разрешения DNS, как найти сервер после ввода URL
• Как сервер узнает о вас?
• процесс рендеринга в браузере
• некоторые проблемы совместимости с ie
• session
• Перетащите реализацию
• Разобрать части URL

Инжиниринг

• Что-нибудь связано с WebPack, Gulp, Grunt? Сравнение.
• Как настроить файл записи веб-пакета и как разделить несколько записей.
• Разница между загрузчиком webpack и плагинами
• Конкретное использование gulp.
• Понимание фронтенд-инжиниринга, как самостоятельно упаковать файл, например, код, написанный на ES5 и ES6, в JS-файле, как компилировать и быть совместимым с ними

модульный

• Вы знаете что-нибудь об AMD, CMD, CommonJS?
• Почему модульный? Как должен быть написан код, когда он не используется и при использовании RequireJs?
• Расскажите, какие существуют модульные библиотеки, и вы когда-нибудь разбирались в истории модульной разработки?
• Давайте поговорим о сценариях применения синхронной и асинхронной модульности соответственно и поговорим о принципе реализации асинхронной модульности AMD?
• Как заменить весь синтаксис требуемого модуля в проекте на синтаксис импорта ES6?
• Каков порядок загрузки модулей при использовании модульной загрузки? Если вы не знаете, как вы думаете, какой порядок должен быть основан на имеющихся у вас знаниях?

Рамка

• Какие фреймворки вы использовали?
• Какая связь между zepto и jquery, есть ли какая-то связь?
• Как в исходниках jquery реализован селектор, почему объект, полученный с помощью $, оформлен в виде массива и какова цель такой конструкции
• Как jquery связывает события, есть несколько типов и отличий
• Что такое MVVM, MVC, MVP
• Принцип двусторонней привязки данных Vue и Angular
• Vue, Angular связь между компонентами и принципы маршрутизации
• Жизненный цикл реакции и vue
• Виртуальный алгоритм dom и diff для реакции и vue
• Наблюдатель Vue, наблюдатель, компиляция
• Для какого бизнеса используются реакции и угловые? Разница между производительностью и уровнем MVC
• В чем разница между объектом jQuery и элементом JS
• Как реализованы объекты jQuery
• Помимо того, что jQuery инкапсулирует некоторые методы, что еще стоит изучить и использовать?
• Что делает jQuery $('xxx')
• Расскажите, как реализована система сетки bootstrap.

Nodejs

• Вы знаете что-нибудь о nodejs?
• Какая связь между Express и koa и в чем разница?
• Для какого бизнеса подходит nodejs?
• В чем разница между nodejs и php, java
• В чем разница между потоком и буфером в Nodejs?
• Как решается проблема асинхронности узла?
• Как узел достигает высокой параллелизма?
• Расскажите о принципе цикла событий Nodejs.

структура данных

• Базовые структуры данных: (массивы, очереди, связанные списки, кучи, бинарные деревья, хеш-таблицы и т. д.)
• 8 алгоритмов сортировки, принципов и применимых сценариев и сложности
• Подскажите, как максимально реализовать последовательность Фибоначчи?

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

• Каково использование cdn? Когда он используется?
• Оптимизация страницы браузера?
• Как оптимизировать производительность манипуляций с DOM
• Каковы SEO-решения для одностраничных приложений?
• В чем причина медленного отображения первого экрана одностраничного приложения? Каково решение?

разное

• регулярное выражение
• Преимущества и недостатки внешнего рендеринга и внутреннего рендеринга
• Четыре характеристики базы данных, что такое атомарность, связь между таблицами
• Какой, по вашему мнению, должна быть фронтенд-система?
• Статический ресурс подключается к сети, и в нем есть различные ресурсные зависимости.Как обеспечить плавный выход в сеть?
• Если бы вас попросили реализовать внешний шаблонизатор, что бы вы сделали?
• Знаете о потоковых запросах?
• SEO
• В чем разница между mysql и mongodb?
• Объяснение спокойного метода
• Знание баз данных, знание операционных систем
• клик имеет задержку 300 мс на ios, почему и как это исправить
• Адаптация мобильного терминала, настройка rem+media query/meta header
• Мобильные жесты и события;
• Понимание кодировки unicode, utf8, gbk, решение проблем с искаженными символами

Три и четыре часто задаваемых открытых вопроса

• Какие книги вы читали? Какую книгу ты читаешь в последнее время?
• Какой фреймворк вы использовали? Вы видели код фреймворка?
• Вы когда-нибудь изучали шаблоны проектирования?
• Давайте поговорим о режиме наблюдателя! Можете ли вы написать это?
• Какая ваша самая сильная сторона? Как насчет вашей самой большой слабости?
• Какой самый безумный поступок ты делал в колледже?
• Чем вы занимаетесь помимо ведения блога?
• Теперь ваш начальник дал вам задание и попросил выполнить его за одну неделю, но после изучения требований выяснилось, что на выполнение потребуется 3 недели Что вам делать?
• Front-end технологии, которые обычно касаются
• Как спланировать свою карьеру
• Были ли у вас проблемы во время проекта? Как это решить?
• Что вы исследуете в последнее время?
• Пожалуйста, укажите профессиональную область, которой вы больше всего увлечены и в которой хорошо разбираетесь, и представьте план обучения.
• Расскажите, пожалуйста, о самом впечатляющем проекте, в котором вы участвовали, и почему? И представить свою роль и роль в проекте.

HR сторона

• Почему вы хотите изучать интерфейс?
• Как вы обычно изучали интерфейс? Каков результат?
• Как вы думаете, какой ваш лучший проект?
• Что вас восхищает в окружающих вас людях, чему вы можете научиться? Почему ты не такой, как они?
• Какая проблема у вашего коллеги, которую вы не можете принять?
• Что больше всего напрягает?
• Лучший проект, который вы сделали со своими одноклассниками?
• Что ваши друзья обычно говорят о вас?
• Какая рабочая атмосфера вам нравится
• Как относиться к сверхурочной работе
• Есть ли объект
• Преднамеренный город
• другие предложения
• Зачем тебя признавать?
• Три вещи, на которые уходит больше всего времени в колледже
• Что ты делаешь на выходных?
• планирование будущей карьеры

предложение

1. Не показывайте, что вы хотите начать бизнес во время собеседования. Постучать по доске.

2. Если вы никогда не видели исходный код, рекомендуется начать с исходного кода, такого как jQuery и zepto, Позже вы сможете понять идеи исходного кода и реализацию общих функций Vue и React.

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

наконец

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

Да, люди вокруг тебя такие сильные, продолжай учиться. [сжимая кулак]