Трехлетний опыт предварительного собеседования в «Горькой зиме»

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

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

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

Я забыл, как долго готовиться, нынешняя компания на самом деле не работает сверхурочно, но я остаюсь на ночь до восьми или девяти часов, чтобы прочитать книгу и написать вопросы.Я также закончил читать предложение острие меча, которое я всегда хотел увидеть раньше, и если я не понимаю, я буду следить за этим и открыть его снова Аккаунт LeetCode в Китае, отмахнулся от 10% вопросов и достиг уровня, когда я понятия не имел о алгоритм в начале, и я уже не боялся алгоритма и знал с чего начать.Многие компании не предъявляют таких высоких требований к алгоритмам собеседования, особенно front-end, но и будьте более требовательны к себе.

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

css

1. Трехколоночный макет

float
bfc (set middle area overflow is hidden)
position: absolute
Двухстворчатая компоновка
flex
table

2. Центрировать по вертикали

Я лично чувствую, что это много вопросов, и я обычно отвечаю на следующее:

line-height: heightМеня спросили, равно ли значение значению, заданному высотой. Я не ответил на это хорошо. Я вернулся, проверил его и обнаружил, что это связано с блочной моделью. Нужно вычислить высоту.
absolute + transformЗачем использовать transform для центрирования (почему бы не использовать marginLeft/Top), это проблема перерисовки и перекомпоновки.
flex + align-items: centerЯ узнаю о flex-контейнере и каждом свойстве css элемента flex, а также напишу несколько небольших демонстраций.

3. Блочная модель

4. BFC

концепция
Как вызвать
как подать заявку

5. Препроцессор CSS

Общие ответы Переменные / вложенность / автоматические префиксы / условные операторы / циклические операторы

Я всегда восхищался тщательным исследованием CSS, проведенным Чжаном Синьсюем, но в целом CSS не очень глубок, и внимание отрасли к CSS недостаточно, включая меня самого, я не вкладываю много времени и энергии в CSS. , если есть более глубокое понимание конечно лучше.

JS

1. Прототип

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

закрытие/сфера/это указывает на
реализовать наследование
класс реализации es5
es5 реализует новые

2. var let const

Let/const также имеет продвижение объявления переменных, но не инициализирует выделенную память. Переменная имеет три операции: объявление (относится к верхней части области видимости), инициализация (назначение значения по умолчанию), назначение (продолжение назначения).

varОбъявление переменной продвигается в начале, затем инициализируется как неопределенное и присваивается этой строке при выполнении кода.
letВ начале продвигается объявление переменной, а затем память выделяется без инициализации, код выполняется до этой строки инициализации, а затем продолжает оперировать переменной, присваивая ей значение. Поскольку выделенная память не инициализирована, будет сообщено об ошибке, которая является временной мертвой зоной.
constЭто только объявление и инициализация, а не операция присваивания, поэтому неизменяемая.

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

3. Выполняйте обещания

Когда я встретил tx, меня попросили реализовать промисы вручную, потому что я немного читал исходный код bluebird, так что меня это устраивало. Позвольте мне остановиться, когда я на полпути к написанию.Я обычно объясняю, пока пишу, и я сначала настрою фреймворк, например

class Promise {
    constructor(executor) {
        // 设置属性 status value resolveCbs rejectCbs
    }
    then(onResolved, onRejected) {}
    catch (cb) {
        return this.then(null, cb)
    }
}

Затем заполняйте его медленно, что заставит вас почувствовать, что у вас есть идея и вы понимаете синтаксис промисов.

4. Цепочка обещаний

Напримерpromises = []Реализация должна выполнять следующую задачу после предыдущего асинхронного завершения. Я написал два варианта:

// 1.
const template = Promise.resolve();
promises.forEach((p) => {
    template = template.then(p)
})
// 2. 使用 await

Лично я чувствую, что много спрашивал о промисах и async/await, включая более популярные вопросы о порядке печати и проблеме перехвата исключений.

5. Реализовать привязку

6. Реализовать систему событий eventEmitter

Как и в случае с классом promise, сначала создайте структуру:

class EventEmitter {
    constructor() {
        this.events = {}
    }
    emit (eventName, args) {}
    on (eventName, callback) {}
    off (eventName, callback?) {}
}

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

7. Рукописный прокси / объект.defineProperty

8. Делегация событий

9. Event Loop

Выполнение JS является однопоточным и основано на цикле событий. Цикл событий примерно разделен на следующие этапы:

(1) Все задачи синхронизации выполняются в основном потоке, образуя стек выполнения.

(2) В дополнение к основному потоку существует также «очередь задач». Как только асинхронная задача имеет запущенный результат, событие помещается в «очередь задач».

(3) Как только все задачи синхронизации в «стеке выполнения» будут выполнены, система прочитает «очередь задач», чтобы увидеть, какие события в ней находятся. Затем соответствующие асинхронные задачи завершают состояние ожидания, входят в стек выполнения и начинают выполнение.

(4) Основной поток продолжает повторять третий шаг выше.

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

10. Webpack

Разница между плагином загрузчика, меня немного удивило, когда сначала спросили, а функции разных функций спрашивали вместе.
tree-shakingкак это работает
code splittingКакой плагин вы используете
Как улучшить скорость артефактов webpack
- использоватьDllPluginПредварительно скомпилированные модули ресурсов
- использоватьHappypackУскорение сборки кода

Я написал много небольших проектов, поэтому я много раз настраивал веб-пакет, от версии 2 до версии 4, но обычно веб-пакет не требует многого.

11. Повышение производительности интерфейса

Как правило, я отвечу на ответ в следующих аспектах, которые обычно распространяются на проблемы с сетью и кэшированием:

сервер:

использовать cdn
Уменьшите возврат ненужных данных
использовать gzip
кеш (etag/expires...)

содержание:

Уменьшить HTTP-запросы (css-спрайты / встроенное изображение)
Разные ресурсы размещаются под разными доменами (http1.1)
Ленивая загрузка/отложенное выполнение (загрузка сразу, отложенное выполнение [до DOMContentLoaded] отложить)/предварительная загрузка (preload)
- async
- defer, это логическое свойство задается для информирования браузера о том, что сценарий запустится после завершения синтаксического анализа документа.DOMContentLoadedВыполняется перед событием.
Оптимизированная структура HTML
Сжатые ресурсы

css:

in head
Меньше слоев (раньше меня спрашивали, существенно ли влияет большее или меньшее количество слоев на производительность. На самом деле я не проводил такого исследования, поэтому мне все еще не хватает выводов, а не процесса)

js:

before
Уменьшить доступ к dom (может ли код JS, размещенный в теле, получить доступ к тегу body)

webpack:

встряхивание дерева удаляет неиспользуемый код
Извлечь общедоступные пакеты, были заданы вопросы
Раздельные модули, загрузка по запросу
Оптимизируйте изображения, используйте base64 вместо маленьких изображений
file name with hash (etag)

12. Vue

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

Взаимодействие компонентов родитель-потомок
Жизненный цикл
Ответ данных (перехват данных) Реализация ответа данных состоит из двух частей:наблюдатель (наблюдатель)а такжеКоллектор зависимости (DEP)Его ядроdefinePropertyЭтот метод, который переопределяет свойствоgetа такжеsetспособ завершения изменения данных мониторинга. Как правило, требуется знание набора принципов работы от синтаксического анализа до сбора зависимостей и уведомления. Я примерно понимаю это, и я читал исходный код, но я все еще не объяснил это внятно, к сожалению, это не очень хорошо работало.
виртуальный дом, дом diff
nextTick

JS определенно является ключевой частью расследования.Что касается объектов и наследования, вам нужно только прочитать повышение и написать несколько демонстраций, чтобы освоить детали.Я читал Ruan Yifeng, написанный для es6.Начало работы с ECMAScript 6Для Vue можно сначала освоить контент официального сайта, а потом почитать какие-нибудь блоги или сразу перейти к исходному коду.

HTTP

1. перекрестный домен

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

2. HTTP-сообщение

请求行 + 头部信息 + 空白行 + bodyКогда меня спросили о значении пустых строк, я всегда думал, что это чисто для обозначения конца заголовков, но интервьюер сказал, что это не только эта функция, я прочитал ее позже.HTTP 权威指南ни нашел,Stack OverflowТоже не нашел. . . Надеюсь, кто-то знает и может сказать мне. Но не исключено, что я ослышался в названии, ведь это телефонное интервью.

3. cookie session

Обычно спрашивают о разнице между ними, и разница между sessionStorage, localStorage, cookie расширяется.

4. Весь процесс от ввода URL до загрузки страницы

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

Кэш делится на сильный кеш и кеш протокола.В общем случае будет задана производительность 304, а разница между 301 и 302 будет расширена.Я расскажу о разнице 307.
трехстороннее рукопожатие
Как работает HTTPS
Как работают CDN и как очищаются кеши.
Шаги для рендеринга в браузере
Перерисовка концепций оплавления и передовой опыт. Я всегда знал, что вместо margin нужно использовать transform, но когда меня спросили о принципе, я не очень понял, я проверил данные, и это GPU-ускорение для элементов translate3d.
Вопрос о блокировке будет задан потому, что JS является однопоточным, что распространяется на такие свойства, как асинхронная отсрочка.
Что такое коды состояния?Мы разрабатываем интерфейс строго в соответствии со спецификацией restful, поэтому я всегда думаю, что этот вопрос очень простой, но его задавали много раз. Помню письменный тест Кутутиао, буду использовать по 2хх(200, 201, 204, 206) 3хх(301, 302, 304, 307) 4хх(400, 401, 403, 405) 5хх(500, 502, 504) для классификации я иногда пишу рельсы, поэтому я знаком с соответствующими существительнымиОпубликуйте список кодов состояния рельсов
Процесс разрешения DNS

5. хсс, ксрф

xss-инъекция атаки
- побег
csrf (cross site request forgery)
- Запросы Get не имеют побочных эффектов
- cookie httponly
- cors (происхождение не *)

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

6. sse( server sent event)

Поскольку я написал подключаемый модуль, связанный с sse, меня спросили, как использовать иEventSource API.

Я чувствую, что интерфейс не очень требователен с точки зрения сети и безопасности.Меня никогда не спрашивали о HTTP2 или долгосрочных соединениях.Я видел серверную часть на Маймае раньше, и меня попросили получить доступ к адресу из браузера. , из сетевого протокола tcp/ip. Если говорить об операционной системе, управлении памятью, управлении процессами и файлами, а затем о балансировке нагрузки, алгоритме ограничения тока, распределенных транзакциях, внешний интерфейс действительно намного проще по сравнению с ним, но больше запасов знаний, безусловно, полезно.

алгоритм

Алгоритм тест в целом не сложный, но в основном каждое собеседование будет тестироваться.Я помню тестирование по темам алгоритма:

Иерархический обход бинарного дерева (это единственный вопрос в предложении, самый простой 😂 )
Найти самую длинную и наиболее повторяющуюся подстроку в строке

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

Git

Основная операция
git rebase vs git merge
- git merge
  - Запишите действие слияния. Много раз это действие слияния является спамом.
  - Не будет изменять исходный идентификатор коммита
  - Конфликты разрешаются только один раз
  - Ветка выглядит неаккуратно, но можно посмотреть порядок слияния
  - Записывает фактическую ситуацию коммита, включая детали каждой ветки.
- git rebase
  - Изменить местоположение текущей ветки
  - Получите более чистую историю проекта
  - Каждый коммит должен разрешать конфликты
  - Изменить все идентификаторы фиксации
Я много чего не ответил, когда отвечал. Это резюме позже. Я глубоко открыл для себя необходимость ежедневного резюме. Я всегда чувствовал, что понимаю его, и когда я резюмировал его, я обнаружил, что некоторые моменты все еще неясны.
Изменить сообщение фиксации

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

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

Что касается того, почему название «Горькая зима» заключено в двойные кавычки, я думаю, что объяснение «Горькой зимы» заключается в индивидуальном, а не в общем воздействии на окружающую среду. Я чувствую, что каждой компании не хватает людей. После того, как я повесил трубку goose factory, HR показал мне оценку интервью и помог мне проголосовать за другие отделы, но я связался со мной во время поездки, и я уже принял предложение и больше не встречался.

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

Это первый блог, который я пишу, и я получил некоторое внимание. Я просто хотел написать один, потому что я читал несколько фейсбуков на juejin. На самом деле, у меня нет привычки вести блог, поэтому те, кто обращает внимание, могут быть уволены. . . . Приветствуется обмен некоторыми передовыми технологиями.