Портал:
Годовое предварительное интервью, посвященное борьбе с монстрами и обновлению дороги (1)
Годовое предварительное интервью, посвященное борьбе с монстрами и обновлению дороги (2)
Годовое предварительное интервью, посвященное борьбе с монстрами и обновлению дороги (3)
Самое впечатляющее и незабываемое интервью с DXY, поэтому подробно распишу отдельным разделом.
DXY
Компания, в которую я хочу пойти больше всего, участвовала в их встрече по обмену технологиями, и я давно слышал технологическую атмосферу. Не ограничиваясь выполнением коммерческих проектов, но будет уделять энергию оптимизации процессов и повышению эффективности, разработке инструментов с открытым исходным кодом или рефакторингу старых проектов и т. д.
Когда я спросил о рабочем процессе отдела, первый интервьюер сказал фразу: после определения техотбора, как его написать.
Не это ли вершина программиста? !
Весь процесс длился почти 3 часа Это было интервью, которое я узнал больше всего, и это было также худшее насилие, которое я когда-либо испытывал.
письменный экзамен
Во-первых, письменный тест длится полчаса, есть несколько регулярных тем, охватывающих основные типы данных, функции массива дедупликации, решения по оптимизации Dom, что такое встроенные элементы, роль меток (это очень интересно) и как найти селекторы CSS (справа налево); приоритет селектора css; асинхронный процесс setTimeout; указатель функции this.
Есть также некоторые вопросы, на которые люди не совсем уверены в ответе. Среди неквалифицированных моментов — обычные объявления, поток выполнения мгновенных функций, приоритет операторов и приоритет селекторов псевдоклассов CSS.
Перечислите неопределенные темы
<!--关于正则 -->
正则声明的正确选项
<!--console输出结果是什么，考察操作符优先级-->
var a = 1,b =2;
console.log(a+++b)
<!--console输出结果是什么，考察即时函数的执行流程-->
var result = (function(){
return 1;
},function(){
return "2"
})()
console.log(typeof result)
<!--关于css选择器优先级排序-->
id class 标签选择器 属性值选择器 伪类选择器 通配符选择器 继承选择（大概是这几类的排序）
Заполнив вопрос, проверьте его еще раз, затем передайте в hr и дождитесь уведомления.
В ожидании внезапно появляется лучшее решение для оптимизации создания DOM.
Тема такая:
<!--对下列方法进行优化-->
var nodeI,m;
var data = [] //这里的data是一组真实数据
for(var i = 0,m = data.length ; i<m ; i++){
nodeI = document.creatElement("li");
nodeI.noteText = data[i];
var con = document.getElementById("container");
con.appendChild(nodeI);
}
Я некоторое время думал об этом, когда писал его, и, наконец, просто извлек переменные контейнера-контейнера как глобальные, так что мне не нужно зацикливаться для создания переменной.
Но потом я подумал, что мне следует использовать атрибут innerHTML, чтобы добавить его напрямую со строкой, что является наиболее эффективным, и браузеру нужно изменить порядок элементов только один раз, вместо того, чтобы повторно отображать страницу каждый раз, когда она зацикливается.
Подумав, вошел интервьюер.
Первый
Бессердечный старший брат, которому нечего было сказать в течение всего процесса, очень серьезно рассматривал принесенное мной резюме и письменные контрольные вопросы.
В первом предложении мне сказали, что вы неправильно написали базовый тип данных, такой базовый вопрос
Я подумал про себя, что не стану на колени по этому поводу. Возьмите его и присмотритесь, есть пять типовstring,null,number,boolean,undefinedВерно. Интервьюер сказал, что естьobject,иNullпринадлежитobjectиз.
Я подумал, что то, что он сказал, было неправильным, поэтому я проверил это на месте, и результаты показали, что то, что я написал, должно быть правильным.
После этого он начал указывать на несколько ответов, которые я написал, и спросил, как я думаю.
Если не получается, я говорю, что не уверен, и он не сказал мне, какой правильный ответ, прав я или нет. Это всегда было спокойное выражение.
Закончив тему, я начал хотеть показать написанный мной проект, достать данные и гифки на свой телефон.Он невнимательно посмотрел, а потом сказал да, понял.
Тогда я спросил, делал ли я h5, в чем разница между ним и ПК.
Я сказал, что не делал полный проект, h5 в основном используется на мобильных телефонах, и события кликов не совпадают, кроме того, требования к производительности страницы относительно высоки.
Судя по его реакции, мой ответ его не удовлетворил.
Позже меня спросили, выполнял ли я когда-нибудь полный рабочий процесс с нуля, чтобы настроить, разработать продукты, упаковать проекты и опубликовать их в Интернете.
Честно говоря, нет, потому что проект компании не требует строительных лесов и инструментов для упаковки. Я использовал webpack в своих проектах и знаю некоторые методы настройки и упаковки, но у меня нет опыта публикации проектов. (Оглядываясь назад, он должен был спросить, в чем разница между конфигурацией среды разработки и производственной среды)
Он сказал, хорошо, понял, а затем спросил меня, есть ли у меня какие-либо вопросы, чтобы задать ему
Это предложение обычно является признаком того, что вы хотите закончить интервью. Я спросил об их требованиях к должности, а также об их технологическом стеке. Интервьюер терпеливо отвечал на эти вопросы, и только в это время он почувствовал себя человеком методичным, малоразговорчивым, но очень прагматичным.
Я чувствую, что после прочтения резюме и написанных тестовых вопросов у меня уже есть предубеждение в сердце и ощущение, что уровня недостаточно, поэтому конец очень быстрый
Он также прямо сказал, что нехватка участников в их группе может не дотягивать до моего уровня. Подожду еще немного, он свяжется, если есть желающие из других групп.
Потом вышел.
Первый терпит неудачу, и ключевые проблемы сортируются следующим образом.
- Чем H5 отличается от обычного ПК
- Полный процесс от конфигурации 0 до онлайн-релиза
- Планирование собственного технического направления в ближайший год
- Взгляды на передовую индустрию
Не спрашивать о моем проекте, не спрашивать о процессе решения проблем, не задавать технические вопросы, кроме письменных.
две стороны
Второй интервьюер, имевший кое-какие знания раньше и обращавший внимание на свои наггетсы, был старшим фронтендом, который пришел с компьютером, улыбаясь от начала до конца, и был парнем из Вэньчжоу. Это очень приятно. тайно@Сян СюэчанДа ладно, я не знаю, узнает ли он, хахаха
слишком молодой слишком простой. Путь моей скептической жизни начинается
Прежде всего, я сделал краткое представление о себе. В представлении о себе я быстро воспользовался возможностью, чтобы рассказать о проектах, которые я сделал, технических моментах, которые я использовал, и некоторых интересных небольших демонстрациях, которые были все, что я сделал. т успеть показать в интервью.
Он внимательно слушал, и я забыл, есть ли у него какие-то комментарии. Как и у предыдущего интервьюера, не было особого выражения. Может быть, это потому, что я не очень интересуюсь проектами JQ.
Потом я вернулся к письменным тестовым вопросам, и я заранее сказал, что должно быть много ошибок, и был вопрос, который я позже придумал для лучшего плана оптимизации.
1. Я описываю свое предложение
<!--对下列方法进行优化-->
var nodeI,m;
var data = [] //这里的data是一组真实数据
var html = "";
var con = document.getElementById("container");
for(var i = 0,m = data.length ; i<m ; i++){
html += "<li>"+data[i]+"</li>"
}
con.innerHTML = html;
Вопрос 1: Почему это лучше.
Я сказал, что только добавление контента на страницу на последнем шаге снижает количество переформатирований и перерисовок браузера.
Он сразу спросил 2: Что такое reflow и redraw?
Я только что видел эту концепцию два дня назад и говорил о своем собственном понимании. Reflow — необходимость повторного анализа размера элемента страницы, redraw — изменение стиля элемента
Вопрос 3: При каких обстоятельствах это вызовет перекомпоновку и перерисовку?
Я говорю, когда макет страницы изменяется или перерисовывается.
Вопрос 4: Можно поконкретнее?
Я не получил ответ, который он хотел в то время, поэтому я повторил его снова. Он должен спросить, как макет был изменен.
стандартный ответ:
- Добавить или удалить видимые элементы DOM
- изменение позиции элемента
- изменение размера элемента
- Содержимое элемента изменяется (например: текст заменяется другим изображением другого размера)
- Инициализация рендеринга страницы (этого нельзя избежать)
- Изменение размера окна браузера
Вопрос 5: Считаются ли перестановкой отображение и скрытие элементов v-show?
Я говорю окончательный. Мой ответ должен быть правильным, но он должен надеяться, что я смогу ответить на предложение «добавление или удаление видимых элементов dom — это перестановка», v-show — это свойство css, которое считается перестановкой
Затем в основном стали проходить письменные вопросы теста один за другим и расширять на основе исходных вопросов.
2. Асинхронное выполнение setTimeout
Оригинальное название выглядит следующим образом
<!--执行结果是什么-->
var a = 2;
setTimeout(function(){
a--;
});
a++
console.log(a);
Задача относительно проста, и конечный результат равен 3.
извращенный
Вопрос 1: Что, если внешний a++ зациклится миллион раз, в каком порядке?
А, все так же, setTimeout отстает
Вопрос 2: Почему это происходит?
(Стандартный ответ: синхронизация блокирует процесс.)
Это немного бессмысленный ответ. На меня повлияла статья, которую я недавно прочитал, и в ней подчеркивалась разница между синхронным асинхронным и блокирующим неблокирующим. Асинхронный должен сообщить вам, когда выполнение завершено, а синхронный - ждать вам завершить выполнение; блокировка заключается в том, что браузер запрашивал, завершено ли оно или нет. Я не знаю, о чем говорю, и, думаю, он тоже не знает, о чем я говорю - -)
Вопрос 3: Вы знаете промис?Я написал объект промиса, смешал метод setTimeout и попросил оценить порядок вывода
Знаю немного, видел раньше похожую тему, но давно не помню, ошибся
Вопрос 4: Почему это происходит?
Насколько я понимаю, я вкратце рассказал о механизме событийного цикла
Для получения дополнительной информации, пожалуйста, обратитесь к этим двум статьям:
На этот раз досконально изучите механизм выполнения JavaScript.
Подробное объяснение механизма цикла событий JavaScript
Вопрос 6: Я дам вам просьбу написать. Существует окно поиска для поиска в реальном времени, поиск в реальном времени не запускается при непрерывном вводе, а результаты поиска отображаются, когда пользователь останавливается более чем на 1 с.
Компьютер качается, дай постучать.
Это я ошарашен
Однако на самом деле это требование не должно быть неписаным, в этом методе также используется сделанная ранее оптимизация навигации, если событие не выполняется в течение заданного времени, используйте clearTimeout для очистки таймера. Но в то время мой мозг застрял в отметке времени, и я не думал об этом.
Правильное написание
var time = null;
input.addEventListener("input",()=>{
cleartimeout(time);
time = setTimeout(()=>{
seach();
})
})
Старший сказал, что если это только начало, если вы можете ответить на него, вы можете продолжать задавать абстрактные вопросы, но я не ответил на первый шаг.
Слезы текут~~~~
3. Понимание этого
Исходный вопрос состоит в том, чтобы выбрать правильный метод вызова, который также относительно прост.
var opt = {
name:"Amy",
say:function(){return this.name}
}
начало расширения
Вопрос 1: Как понять это в функции
указатель на объект, вызывающий функцию
Вопрос 2: Как насчет this функции стрелки
Лоб. Не изменяйте эту точку везде, где внешняя часть функции указывает на
Вопрос 3: А как насчет функции setTimeout?
указать на глобальное
Вопрос 4: я добавляю один к вышесказанномуname2:this.nameвыводить что?
undefined.. (точнее, результаты вывода различаются в зависимости от среды выполнения. Здесь это указывает на глобальную, а имя окна в браузере действительно существует, обычно это пустая строка)
Что, если я изменю метод say на этот
say:function(){
setTimeout(function(){return this.name})
}
Вопрос 5: Измените его на это
say:function(){
setTimeout(()=>{return this.name})
}
Я могу только сказать, что я должен быть уверенным, хотя я и понимаю это, но у меня нет уверенности в том, чтобы спрашивать потом, поэтому я не осмеливаюсь сказать это.
Я забыл, что я сказал о последних двух вопросах, правильный ответundefined, потому что контекст функции является глобальным, когда выполняется say()
4. Междоменный
Первоначальное название — написать несколько междоменных решений.
Я написал cors,jsonp,window.name
Вопрос 1: Как реализован jsonp
Я говорю импортировать через тег скрипта
Вопрос 2: Почему его можно использовать таким образом и как возвращаются данные?
Я сказал, что тег script может получить доступ к CDN через домены.
Стандартный ответ: JSONP состоит из двух частей: функции обратного вызова и данных. Функция обратного вызова — это функция, которая должна вызываться на странице, когда приходит ответ. Имя callback-функции обычно указывается в запросе. Данные — это данные JSON, переданные в функцию обратного вызова.
Вопрос 3: Ограничения window.name
Только в том же окне размером 2м
Вопрос 3: Знаете ли вы разницу между localstorge и sessiontorge?
Локальный означает, что закрытое окно все еще будет существовать, а данные будут храниться постоянно.Если кеш браузера не будет очищен, сеанс будет очищен при закрытии окна.
Q4: Связан ли localstorge с доменными именами?
При условии одного и того же браузера, локальные могут использоваться совместно под одним и тем же доменным именем и портом, но разные страницы не могут совместно использовать данные сеанса. (Примечание: если это тот же источник и принадлежит iframe под окном, сеанс также является общим)
4. О Вью
Сначала задайте несколько основных вопросов о Vue.
Расширение начинается
Вопрос 1: Как вы думаете, какие преимущества есть у Vue по сравнению с JQ?
Я сказал, что обслуживание более удобно, а то, как данные отображают страницу, отделяет логику от страницы и более эффективно.
Он не казался удовлетворенным и спросил снова.
Я говорю, что есть два самых больших преимущества: одно — двустороннее связывание, а другое — компонентное. Он кивнул и продолжил спрашивать:
Вопрос 2: Каков принцип двусторонней привязки Vue
Я говорю, что при изменении свойств поля ввода на самом деле вызываетсяdefinePropertyМетоды get и set (более профессионально называемые wacher) изменяют значение связанного элемента в методе.
Вопрос 3: Знаете ли вы о виртуальном доме?
знаю.. не знаю много
Вопрос 4: Почему data не возвращает данные объекта напрямую при записи, а возвращает результат в виде функции?
ну.... не понял
Q56789: Ах, я уже сказал, что не понимаю, так что я не знаю, что он задает на следующий вопрос...
Но он начал рассказывать мне, как работает виртуальный дом, а потом время от времени задавал несколько вопросов, как вы думаете, как он это сделал? Если да, то как бы вы этого добились?
Подкинув мне вопрос на полпути, виртуальный ДОМ определяет, что код был выполнен, а затем вставляет его в настоящий Дом. Позвольте мне проверить информацию, он идет в ванную.
Некоторое время я ничего не находил, а потом он вернулся и объяснил мне.
Это, вероятно, означает, что есть асинхронный механизм, аналогичный setTimeout во Vue, после выполнения всех синхронных процессов эта асинхронная операция выполняется как признак окончания этого процесса.
Как и в случае с a++ 10 000 раз, setTimeout все еще выполняется в конце.
э... не знаю
6. О нативном js
Вопрос 1: Как реализовать метод find для поиска элементов?
Я никогда не видел темы такого типа, поэтому некоторое время думал об этом, а затем сказал обход...
Вопрос 2: Он сказал, что обход дочерних узлов может проходить только через один уровень Что насчет дочерних узлов дочерних узлов?
Продолжайте говорить слабая курица, рекурсия...
Вопрос 3: Есть ли более эффективный способ замены обхода?
Я не знаю. .
Он долго руководил мной, прежде чем сказал, что есть метод с именем querySelector().Знаете ли вы?Я сказал, что знаю, я видел его, но никогда не понимал его.
Он начал мне говорить, что это самое эффективное, я спросил почему, а он сказал, что из-за того, что нижний слой написан не на js, я этого не понял и выразил удивление. Однако я тихо сетовал в душе, почему вы не хотите, чтобы я написал метод! Вы не можете сделать это так!
ps: Я проверил это позже и обнаружил, что то, что он сказал, было неправильным.Производительность этого метода все еще не так хороша, как нативный getElementById js, но по сравнению с jq он все же намного быстрее, поэтому я специально протестировал его.
//测试代码
console.time('$(".item")');
for (var i = 0; i < 10000; i++) {
$(".item");
}
console.timeEnd('$(".item")');
//$(".item"): 56.569091796875ms
console.time('querySelectorAll');
for (var i = 0; i < 10000; i++) {
document.querySelectorAll(".item");
}
console.timeEnd('querySelectorAll');
//querySelectorAll: 1781ms
console.time('getElementsByClassName');
for (var i = 0; i < 10000; i++) {
document.getElementsByClassName("item");
}
console.timeEnd('getElementsByClassName');
//getElementsByClassName: 54ms
7. О css:
1. Как задать центрирование по вертикали для встроенных элементов и элементов блочного уровня?Приведите три способа
Я сказал четыре способа:
- Часто используемое абсолютное позиционирование
- Flex layout, но я не могу вспомнить имя свойства гибкого макета
- Также дисплей настроен на таблицу
- Используйте преобразование или маржу, чтобы вернуться на 50%
2. Какие есть способы очистить поплавок
Сказал как очистить, так и переполнить: скрытые два метода
3. Разница между nth-of-child и nth-of-type
nth-of-child: первая позиция поиска nth-of-type: сначала найти элемент
4. Как добиться, чтобы при наличии пробела между двумя элементами перейти к другому элементу и оставить его отображаться
Я сказал, что этого можно добиться с помощью анимации css3.
Он спросил, есть ли другой способ
Я не ответил, даже его объяснение не помогло мне понять, как установить свойство отображения другого элемента после наведения на один элемент? ? Можно ли это сделать без js?
5. Как реализовать треугольник, почему возникает такое явление?
Установите ширину и высоту элемента равными 0, затем оставьте только одну сторону границы и сделайте остальные три стороны прозрачными. Нарисуйте картинку, чтобы объяснить, почему.
6. Как установить тень на треугольник
Я сказал использовать в фильтре свойство drop-shadow.Он спросил зачем и что еще делать.Я подумал и сказал,что я могу сразу написать треугольник и поставить его под ним,или я могу написать прямоугольник и потом повернуть Это.
Что касается css, я думаю, что ответ в порядке, включая более поздние отзывы о том, что я хорошо разбираюсь в css. Однако это также может быть связано с тем, что интервьюер слишком ленив, чтобы расширяться в конце.
8. Наконец-то спросили, как вы обычно учитесь
Я говорю смотреть видео, читать книги
В: Какую книгу ты читаешь?
Я сказал, что недавно прочитал об искусстве программирования dom и объектной ориентации js.
Он тут же спросил: каковы пути наследования?
Я говорил о двух, которые понял, а в книге, которую я читал, написано о дюжине способов наследования
В: Ты знаешь класс?
я говорю знаю некоторые
В: Отличается ли она от функции-конструктора?
Есть разница, его атрибуты неисчислимы
На эту часть следует ответить не очень хорошо, я не использовал ее, но я бегло просматривал документ раньше, и считается, что я мало что сделал, потому что я брал интервью в течение длительного времени.
Интервью окончено.
Суммировать
Выше запись вопросов.Некоторые вопросы очень простые, и длина вопроса не выписана по одному, некоторые вопросы действительно выходят за рамки понимания, и я не знаю, что он спрашивает. Он может повторять свои исходные слова только с помощью кратковременной памяти, и он очень бессилен забыть.
Продвинутая точка зрения на внешний интерфейс заключается в том, что вы должны не только знать, как его использовать, но и знать, почему вы хотите его использовать.
Наконец он спросил меня, не хочу ли я еще что-нибудь спросить у него. Я по глупости спросил, как моя игра, и он сказал, что она средняя, ни хорошая, ни плохая.
На самом деле, я хотел бы спросить его, как вы учитесь и какие советы он может дать для моего развития.
В то время я был немного в отчаянии, когда меня спросили, и я просто хотел знать, есть ли у меня драма.
технический директор
Так как это было уже нерабочее время, директор задал 2 вопроса
1. Почему ваша компания до сих пор использует JQ (На данный момент я единственный в отделе, кто пишет фронтенд на полную ставку, а рефакторить проект некому!)
2. Каковы, по вашему мнению, ваши технические преимущества?
Я могу только попытаться выразить свою способность к обучению, в конце концов, рабочее время невелико, а результаты собеседования не очень хорошие, и это не соответствует их технологическому стеку.
Однако 90% вопросов на собеседовании – это результаты моей учебы после работы, если ограничиваться бизнесом компании, многие новые понятия будут мне недоступны.
В конце концов, это результат ожидания уведомления. Можно только сказать, что это место, где можно говорить о силе, независимо от ваших трудовых лет, независимо от вашей личности, и никто не хочет понимать ваш потенциал.Очень реалистичная проблема соотношения затрат и результатов зависит только от вас. это создает ценность для них сейчас.
Но это не имеет значения, я многого добился, продолжай усердно работать, эй~