проиллюстрировать:
Это [Meituan Mianjing] подытожено другом. Это социальное собеседование по набору персонала. Ha base Beijing друг уполномочил отправить его, чтобы поделиться с вами ~
одна сторона:
1. Реализуйте глубокую копию (учитывайте типы, оптимизацию вызовов циклов, общедоступные оптимизированные ссылки и т. д.).
function clone(target, map = new WeakMap()) {
// 克隆原始类型
if (!isObject(target)) {
return target;
}
// 初始化
const type = getType(target);
let cloneTarget;
if (deepTag.includes(type)) {
cloneTarget = getInit(target, type);
}
// 防止循环引用
if (map.get(target)) {
return map.get(target);
}
map.set(target, cloneTarget);
// 克隆set
if (type === setTag) {
target.forEach(value => {
cloneTarget.add(clone(value,map));
});
return cloneTarget;
}
// 克隆map
if (type === mapTag) {
target.forEach((value, key) => {
cloneTarget.set(key, clone(value,map));
});
return cloneTarget;
}
// 克隆对象和数组
const keys = type === arrayTag ? undefined : Object.keys(target);
forEach(keys || target, (value, key) => {
if (keys) {
key = value;
}
cloneTarget[key] = clone(target[key], map);
});
return cloneTarget;
}
function getInit(target) {
const Ctor = target.constructor;
return new Ctor();
}
1.1 js хранилище данных (куча, стек)
1.2 Глубокое копирование и мелкое копирование
1.3 Как оценить массив, почему не typeof
1.4 Как решить циклическую ссылку, разница между картой и weakMap
1.5 Зачем использовать foreach? В чем разница между for inи for of?
2. Что происходит после URL?
Прежде чем говорить, спросите интервьюера о деталях или обзоре.
3. Почему [JavaScript] блокирует рендеринг? Будет ли CSS блокировать рендеринг?
До загрузки js браузер не может распознать конкретную операцию js. js может управлять DOM. Если интерфейс отображается при изменении атрибутов элемента, могут возникнуть неожиданные результаты, что приведет к путанице при отображении. Поэтому браузер устанавливает готовый рендеринг GUI. Он взаимоисключающий с потоком js. Когда js выполняется, поток GUI будет приостановлен и выполнен, когда он простаивает.
Парсинг DOM и парсинг CSS — это два параллельных потока, поэтому загрузка CSS не будет блокировать парсинг DOM.
Но дерево рендеринга зависит от дерева dom и дерева cssom, поэтому загрузка css заблокирует рендеринг dom.
4. Давайте поговорим о механизме цикла событий браузера, в чем разница между узлом и механизмом цикла узла?
5. Какая работа была выполнена с узлом в [проекте] и как вы справлялись с большим объемом работы с журналами?
Большие данные (буферизованная очередь)?
6. Какую проблему решает архитектурное решение апплета и как оно взаимодействует с нативным?
Jsbridge, спросил jsbridge - это реализация, как сохранить время?
7. С какими проблемами безопасности вы столкнулись во время разработки и как вы их решили?
8. Как решается междоменная проблема в [проекте]?
9. Как защищен https? Как захватывать пакеты во время разработки и каков принцип захвата пакетов
атака «человек посередине»
10. Как в сборке мусора js управляется объект, возвращаемый внутренней функцией на верхний уровень?
11. В чем принцип работы метавьюпорта
Роль мета-тега области просмотра заключается в том, чтобы сделать ширину текущей области просмотра равной ширине устройства, не позволяя пользователю изменять масштаб вручную.
Принцип области просмотра: Мобильные браузеры обычно отображают страницы в виртуальном окне, шире экрана мобильного устройства.Это виртуальное окно является областью просмотра; цель состоит в том, чтобы нормально отображать веб-страницы, которые не были адаптированы для мобильного терминала, чтобы их можно было просмотреть. полностью отображается пользователю;
Разобрать:
Viewport: буквально означает окно просмотра, используемое в мобильной веб-разработке. Указывает, что ширина браузера устройства виртуализирована в определенное значение (или вычислено), что способствует в основном согласованному эффекту отображения мобильных веб-сайтов на разных устройствах. Мобильная версия браузера Safari недавно представила метатег области просмотра, позволяющий веб-разработчикам контролировать размер и масштаб окна просмотра, и другие мобильные браузеры также в основном его поддерживают.
В мобильных браузерах есть два вида областей просмотра: одна — видимая область просмотра (то есть то, что мы называем размером устройства), а другая — область просмотра (ширина веб-страницы).
Например: если наш экран имеет размер 320 пикселей * 480 пикселей (iPhone 4), предположим, что в браузере ширина экрана 320 пикселей может отображать контент шириной 980 пикселей. Тогда ширина 320 пикселей — это ширина видимого окна просмотра, а ширина 980 пикселей, которые могут быть отображены, — это ширина окна просмотра.Чтобы отобразить больше контента, большинство браузеров расширяют собственное окно просмотра.Простое понимание состоит в том, что исходная ширина экрана в 320 пикселей может вместить контент размером 980 пикселей или даже шире (пропорционально уменьшить веб-страницу).
Значение свойства видового экрана
- width задает ширину области просмотра макета, положительное целое число или строку «width-device».
- Initial-scale Установите начальное значение масштаба страницы в виде числа с десятичными знаками.
- Minimum-scale позволяет использовать минимальное значение масштабирования в виде числа с десятичными знаками.
- максимальный масштаб позволяет максимальное значение масштабирования пользователя в виде числа с десятичными знаками
- height задает высоту вьюпорта лейаута, это свойство нам не важно и редко используется
- масштабируемый пользователем Разрешить ли пользователю масштабирование, значение «нет» или «да», нет означает, что не разрешено, да означает, что эти атрибуты могут использоваться одновременно, или они могут использоваться по отдельности или в комбинации. Если одновременно используются несколько атрибутов, разделяйте их запятыми Просто открыть.
12. гибкий макет, гибкие свойства
13. отзывчивость vue
14. vue3.0
Вторая сторона:
1. проектКратко
Визуальная конструкция
Целевые пользователи
nocode
2. проектТрудность, как ее решить?
Сложность 1, исходная схема проектирования, технический выбор, ремонтопригодность
Сложность 2, обработка через апплет
Сложность 3, непрерывная оптимизация производительности, оптимизация от 3,5 с до секунд
3. Что делает оптимизация производительности?
1. Техническая спецификация + спецификация разработки (пропустить некоторые стратегии оптимизации через ограничения спецификации)
2. Анализ инструмента
3. Оптимизация изображения, оптимизация длинного списка, предварительный рендеринг, скелетный экран, функции апплета,
Оптимизация сетевого уровня (параллельный запрос данных, предварительное разрешение DNS, стратегия кэширования, http2.0)
4. Каковы показатели эффективности
Следуйте модели Google RAIL
FP, FCP, время белого экрана, время загрузки вверху страницы
5. Как реализован пререндеринг?
6. Стратегия кэширования? Последующее [проектное] планирование
7. Алгоритмические вопросы
Подсчитайте наиболее часто встречающиеся буквы в строке
function findMaxDuplicateChar(str) {
if(str.length == 1) {
return str;
}
var charObj = {};
for(var i = 0; i < str.length; i++) {
if(!charObj[str.charAt(i)]) {
charObj[str.charAt(i)] = 1;
} else {
charObj[str.charAt(i)] += 1;
}
}
var maxChar = '',
maxValue = 1;
for(var k in charObj) {
if(charObj[k] >= maxValue) {
maxChar = k;
maxValue = charObj[k];
}
}
return maxChar + '：' + maxValue;
}
Три стороны:
1. проектКратко
Визуальная конструкция
2. проектКак решаются трудности?
3. По сравнению с конкурирующими продуктами, что вы делаете хорошо, а что нужно улучшить?
4. Как разработать систему мониторинга
5. проектменеджмент, спрос, качество
6.проблема алгоритма: распечатать матрицу по часовой стрелке
Введите матрицу и напечатайте каждое число по часовой стрелке снаружи внутрь.Например, если вы введете следующую матрицу 4 X 4: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 распечатайте Числа 1,2 ,3,4,8,12,16,15,14,13,9,5,6,7,11,10.
идеи
1. Выберите точку с координатами (0,0), (1,1)... как (начало,начало), в качестве начальной координаты, и начальную координату следующего круга (начало+1,начало+ 1);
2. Условием для принятия решения о вводе следующего круга (т. е. завершена ли печать) является rows>start2 && cols>start2;
3. Координаты левого верхнего угла круга печати (начало, начало), а координаты нижнего правого угла (колс-начало-1, ряды-начало-1)
4. По координатам левого верхнего угла и правого нижнего угла окружности определить точки, которые необходимо вывести для «слева направо», «сверху вниз», «справа налево» и «снизу налево». верх".
function printMatrix(matrix) {
if (matrix == null || matrix.length == 0) {
return;
}
var rows = matrix.length;
var cols = matrix[0].length;
var start = 0;
var result = [];
while (cols > start * 2 && rows > start * 2) {
var endX = cols - 1 - start;
var endY = rows - 1 - start;
//从左到右打印一行
for (var i = start; i <= endX; i++) {
result.push(matrix[start][i]);
}
//从上到下打印一行
if (start < endY) {
for (var i = start + 1; i <= endY; i++) {
result.push(matrix[i][endX]);
}
}
//从右到左打印一行
if (start < endX && start < endY) {
for (var i = endX - 1; i >= start; i--) {
result.push(matrix[endY][i]);
}
}
//从下到上打印一行
if (start < endX && start < endY - 1) {
for (var i = endY - 1; i >= start + 1; i--) {
result.push(matrix[i][start]);
}
}
start++;
}
return result
}
Четыре стороны:
1. Краткое описание [проекта], ваши обвинения в [проекте], в чем ваша основная работа
Визуальная конструкция
2. Показатели производительности, как рассчитывается время белого экрана и какие статистические методы существуют в отрасли
Как проводить анализ производительности, каковы показатели анализа и разбираетесь ли вы в показателях эффективности в отрасли?
3. Расскажите о сборке мусора в js
4. Сталкивались ли вы с утечками памяти в [Project]?
5. Какие стратегии оптимизации производительности используются
6. ССР расскажи об этом подробно
Зачем нужно делать два пакета, в чем проблемы ssr и как их избежать?
7. Характеристики http2.0, почему http2.0 не получил полного продвижения в настоящее время и какие проблемы, по вашему мнению, существуют?
8. В [проекте], который вы только что упомянули, можете ли вы уточнить изоморфную схему апплета?
9. Каков принцип реализации CDN и как его оптимизировать?
наконец:
Это интервью моего друга из четырех раундов интервью Meituan. Спасибо его щедрости за то, что он позволил мне опубликовать его.
Напоследок хочу сказать, что все в процессе подготовки к интервью также находят много фронтальных вопросов, но они относительно тривиальны, или нет ссылки на ответ, наша команда разработала фронтальные вопросы для небольших программ, Amway посмотрите еще раз , вызовСбор вопросов о дистальных отделах лица, wx можно искать. Во избежание гармонии я не буду выкладывать фотографии~Специальные вопросы для полного веб-интервью
Я надеюсь, что маленькие партнеры, которые находятся на пути к интервью, смогут получить предложение, которое затронет ваше сердце.