Весна всегда лучшее время для поиска работы, однако под влиянием эпидемии в этом году поиск работы превратился в кризис, поэтому предполагается, что сохранение работы - это самое главное. Если вы в настоящее время находитесь на пути к поиску работы, это оригинальное, составленное вручную интервью обязательно вам поможет.
В интервью мы должны отвечать интервьюеру кратким и лаконичным языком, и мы не можем говорить намного больше.Если вы не понимаете смысл определенного вопроса интервью, вы можете перейти к учебнику для поиска более подробные ответы.
Как фронтенд-интервьюер я брал интервью у бесчисленного количества фронтенд-разработчиков, от стажеров до Baidu T7.
Основы интерфейса
Как понять контекст выполнения
Контекст выполнения JavaScript (контекст) в основном относится к абстрактному понятию среды выполнения кода. Существует три типа контекстов выполнения:
- глобальный контекст выполнения
- контекст выполнения функции
- eval контекст выполнения
Каждый фрагмент js-кода выполняется, и сначала создается контекст.
Как понять цепочку областей видимости
Передовые знания: перед выполнением кода js создается контекст, который включает в себя переменные, цепочки областей видимости и это.
Простое понимание состоит в том, что процесс поиска переменных из текущей среды в родительскую слой за слоем называется цепочкой области видимости.
var name = '前端未来';
function hello(){
console.log(name);
}
Объяснение: Когда мы печатаем имя в функции hello, она сначала будет искать в области приветствия, и если оно не будет найдено, оно перейдет к родительской области действия приветствия, чтобы найти его.
Как понять цепочку прототипов
Каждая функция имеет свойство прототипа, и каждая функцияэкземпляр объектаУ всех есть свойство __proto__, и это свойство указывает на прототип функции, когда мы обращаемсяэкземпляр объектаКогда свойство или метод сначала будет искаться из собственного конструктора, если нет, то он будет искаться в прототипе через __proto__ Этот процесс поиска называется цепочкой прототипов. (аналогично цепочке области видимости)
// 定义动物 - 父类
function Animal(){
this.age = 10;
this.say = function(){
return 'hello tom';
}
}
// 定义猫 - 子类
function Cat(){
this.name = 'tom';
}
// 通过原型继承动物类
Cat.prototype = new Animal()
// 实例化一个cat对象
var cat = new Cat();
// 打印返回true
cat.__proto__ === Cat.prototype
// 打印age，会先查找cat，再查找Animal
console.log(cat.age)
На скриншоте видно, что экземпляр объекта cat __proto__ указывает на Animal.Когда у cat нет возраста, он будет искать прототип через __proto__.Если прототипа все еще нет, он продолжит поиск на Object.
что такое закрытие
Простое понимание состоит в том, что функции вложены в функции. Все мы знаем, что локальные переменные нам недоступны, но через замыкания мы можем.
// 正常访问
var lan = 'zh';
function hello(){
var name = '前端未来';
}
console.log(name)//很明显'undefined'
// 换成闭包
function hello(){
var name = '前端未来';
return function demo(){
console.log(name)//打印：前端未来
}
}
Приведенные выше основные вопросы для собеседования тесно связаны между собой: если вы понимаете один из них, то сможете понять и остальные.
Какие существуют способы наследования
- прототипное наследование
- Конструктивное наследование
- наследование экземпляра
- вызов/применение наследования (составное наследование)
- ES6 использует класс, расширяющий наследование
Что такое глубокая/поверхностная копия и как ее реализовать
Типы данных JS — это соответственно базовые типы данных и ссылочные типы данных.Базовый тип данных хранит значение, а ссылочный тип хранит ссылочный адрес (этот указатель). Поверхностные копии совместно используют ссылочный адрес, а глубокие копии создают новые адреса памяти.
Метод поверхностного копирования
- прямое копирование объекта
- Object.assign
глубокая копия
- JSON.stringify в строку, а затем JSON.parse
- глубокий рекурсивный обход
Как точно определить, является ли объект массивом
Ответ, который хочет получить интервьюер: Object.prototype.toString.call([]) возвращает «[массив объектов]»
расширенный ответ
- [].slice (оценка способности)
- [] instanceof Array (оценка типа)
- [].__proto__ === Array.prototype
- Array.isArray([]) имеет проблему совместимости
Массивы также являются ссылочными типами, и объект по-прежнему возвращается через typeof.
Каковы общие методы массива
Это много, и об этом очень быстро говорить. Я в основном проверяю, сколько вы можете знать. Кроме того, чтобы перейти к следующему вопросу, разница между срезом и сращиванием
- добавить в конце push
- удалить в конце поп
- удалить заголовок сдвига
- добавлен заголовок unshift
- слияние массивов concat
- элементы массива join соединяются соединителем
- обратный массив
- сортировка массива
- map/forEach/filter/indexOf/includes/slice/splice
Срез означает перехват, срез(начало,конец) не изменяет исходный массив, а возвращает новый массив.
splice означает удаление, splice(start, length, item) изменит исходный массив, удалит несколько элементов из определенной позиции и вставит новые элементы.
Каковы общие API для создания и модификации узлов DOM
создать узел
- createElement
- createTextNode
- createDocumentFragment (временный узел)
изменить узел
- appendChild
parent.appendChild(child) - insertBefore
parentNode.insertBefore(newNode,refNode); - removeChild
parent.removeChild(node) - replaceChild
Каковы методы очистки поплавков в CSS
- Родительский элемент задает высоту и растягивается вручную
- Добавьте пустую метку в конце плавающего элемента, установите clear:both
- Родительский элемент устанавливает overflow:hidden
- Добавлять псевдоклассы к родительским элементам: after и zoom
Приоритет селектора CSS
!import > Встроенные стили > Селекторы идентификаторов > Класс/атрибут/псевдокласс > Элемент/связь
CSS реализует трехколоночную компоновку (левая и правая фиксированная ширина, средняя адаптивная)
- Плавающая CSS
Первый float:left, второй float:right, третий устанавливает margin-left и margin-right
- абсолютное позиционирование
Первый позиционируется слева, второй позиционируется справа, а третий устанавливает margin-left и margin-right.
- гибкий макет
.left{
width:200px;
或者
flex:0 0 200px;
}
.right{
width:200px;
或者
flex:0 0 200px;
}
.center{
flex:1;
}
- Макет Али Грааля (игнорируется)
Расскажите о гибкой верстке
flex — это гибкий макет, включающий flex-контейнер и flex-элемент.
Часто используемые свойства включают flex-direction, flex-wrap, justify-content, align-items.
Выровнять по центру по горизонтали-content:center Центрировать горизонтальные концы по ширине-содержимому:пробел-между Выровнять элементы по центру по вертикали: по центру
Расскажите о коробочной модели.
Блочная модель включает в себя: содержимое, отступы, границы, поля.
Блочная модель делится на: блочную модель IE и стандартную блочную модель w3c.
Ширина блочной модели IE включает отступы и границы, а ширина блочной модели w3c — это ширина содержимого.
В чем разница между анимацией перехода и анимацией
Хотя все они могут создавать анимационные эффекты, переход в основном создает простые эффекты перехода, в то время как анимация может создавать сложные анимационные эффекты, которые сильно различаются по синтаксису и использованию.
Адаптивное решение H5
В скорости сети можно найти много H5 адаптивных решений.Я лично рекомендую метод, который мне очень нравится, то есть rem.rem это относительная единица, которая настраивается исходя из значения font-size html.
Обычно за ориентир берем 750. В шапку вложим js-скрипт для получения размера разрешения веб-страницы мобильного телефона и разделим его на 375. Для удобства расчетов будем считать, что 1rem = 100px при 750 пикселях; поэтому нам нужно умножить на 375 после деления 50.
Функция и отличие call/apply/bind
Они оба могут изменить область действия функции.
- call/apply может выполнить функцию напрямую, но bind не выполнит ее немедленно
- Функции call/apply похожи, обе могут изменить указатель и выполнить функцию, разница в том, что параметры передаются по-разному, call требует один параметр, а apply передает параметры через массив.
Разница между наблюдателем и подписчиком публикации
Все они относятся к шаблону Observer, но имеют разные реализации. По сравнению с наблюдателем, публикация-подписка имеет на один диспетчерский центр больше, и издатель публикует сообщения подписчику через диспетчерский центр. В шаблоне наблюдателя цель и наблюдатель зависят друг от друга.Наблюдатель подписывается на целевую тему и уведомляет соответствующего наблюдателя, когда цель изменяется.
Вы можете обратиться к другой моей статье в публичном аккаунте.
Процесс парсинга и рендеринга страницы в браузере
- Разобрать HTML, сгенерировать DOM-дерево
- Разобрать CSS, сгенерировать дерево CSSOM
- Свяжите дерево DOM с деревом CSSOM для создания дерева рендеринга.
- Дерево рендеринга макета (Layout/reflow), отвечающее за расчет размера и положения каждого элемента
- Отрисовка дерева рендеринга (краска), отрисовка информации о пикселях страницы
- Отправляйте пиксели в GPU для отображения на странице. (Отображать)
Разговор о цикле событий
Среди них вам необходимо понимать несколько концепций: стек вызовов, синхронные/асинхронные задачи, макрозадачи/микрозадачи.
Сам JavaScript является однопоточным, то есть он может выполнять только одно действие за раз.Задачи JS включают синхронные задачи и асинхронные задачи.Когда встречается функция выполнения, она будет помещена встек вызововПри входе (первый пришел, последний вышел) при обнаружении асинхронной задачи, такой как setTimeout/setInterval, она будет помещена в очередь сообщений, а после завершения выполнения задачи основного потока асинхронная задача в очереди сообщений будет выполняться обратно, в нем еще есть асинхронные задачи, которые будут продолжать ставиться в очередь сообщений, и так далее, образуя цикл событий.
Асинхронные задачи:
- setTimeout
- setInterval
Асинхронные задачи делятся на макрозадачи и микрозадачи, а промисы относятся к микрозадачам.
В чем разница между GET и POST
- размер
- Передача GET обычно составляет 2K-8K, IE ограничена 2K, а POST не имеет ограничений по размеру.
- Аспекты безопасности
- GET передается в виде простого текста через URL-адрес, а POST передается в теле, что по своей сути небезопасно, поскольку HTTP передается в виде простого текста.
- записи браузера
- GET-запросы регистрируются браузером, POST-запросы не регистрируются.
- браузер назад
- GET безвреден, POST отправит снова
- Избранное браузера
- GET можно добавить в закладки, POST нельзя
- кеш браузера
- GET можно кэшировать, POST нет
- Кодирование
- GET кодируется по URL-адресу, POST поддерживает несколько кодировок
- TCP-пакеты
- GET выдает один пакет, POST выдает 2 пакета
- Как пользоваться (обычно говоря)
- GET в основном извлекает данные, POST в основном отправляет и сохраняет данные
Разговор об анти-тряске и троттлинге
Ожидается, что защита от сотрясений и дросселирование не будут запускать запрос несколько раз одновременно. Общие сценарии используются в событиях поиска и прокрутки веб-страницы.
разница:
В основном антишейк срабатывает только один раз за указанное время, при повторном вызове время будет пересчитано.
Дросселирование в основном срабатывает только один раз в фиксированный период времени. Например, он срабатывает каждую 1 секунду.
Как дедуплицировать массив
- ES6 Установить дедупликацию
- Используйте ключ объекта для дедупликации
- Два слоя циклов сравниваются один за другим для создания нового массива.
- индекс дедупликации
- sort sort, а затем сравните до и после однослойного цикла
Как сортируются массивы
- Сортировка массива
- Пузырьковая сортировка (двухслойный цикл, обмен два на два)
//冒泡排序
function bubbleSort ( data ) {
var temp = 0;
for ( var i = data.length ; i > 0 ; i -- ){
for( var j = 0 ; j < i - 1 ; j++){
if( data[j] > data[j + 1] ){
temp = data[j];
data[j] = data [j+1];
data[j+1] = temp;
}
}
}
return data;
}
- сортировка выбором
//选择排序
function selectionSort( data ) {
for( var i = 0; i< data.length ; i++){
var min = data[i];
var temp;
var index = i;
for( var j = i + 1; j< data.length; j++){
if( data[j] < min ){
min = data[j];
index = j;
}
}
temp = data[i];
data[i] = min;
data[index]= temp;
}
return data;
}
- Сортировка вставками
//插入排序
function insertionSort( data ) {
var len = data.length;
for (var i = 1; i < len; i++) {
var key = data[i];
var j = i - 1;
while ( j >= 0 && data[j] > key) {
data[j + 1] = data[j];
j--;
}
data[j + 1] = key;
}
return data;
}
Расскажите об общих шаблонах проектирования и выберите один из них для анализа сценариев.
- одноэлементный шаблон
- заводской узор
- Шаблон наблюдателя
- режим адаптера
Запускайте обновления представления в Vue с помощью шаблона наблюдателя. Vue2.x перехватывает данные данных через Object.defineProperty, запускает установщик при изменении данных, установщик использует подписчика для уведомления о сообщении, а уведомление вызывает наблюдателя для обновления представления.
Когда набор внешних интерфейсов подключен к различным внутренним службам, деконструкция данных будет противоречивой.В это время можно использовать режим адаптера для совместимости с различными внутренними интерфейсами, чтобы он мог подключаться к передним -конец с унифицированной деконструкцией данных.
Разговор о... из
for...of — это синтаксис, введенный в ES2015, который может перемещаться по массивам, массивам, подобным массивам, а также Map/set/strings и т. д.
- Итерация массива
for (const number of [1,2,5]) { }
- Итерация в виде массива
for (const number of arguments) { }
- Итерация строки
const message = 'hello';
for (const character of message) { }
- итерация карты
const map = new Map();
map.set("name", '前端未来');
map.set("author", '河畔一角');
for(const item of map){ }
// 或者
for(const [key,val] of map){ }
- Установить итерацию
const names = new Set(['Tom', 'Jack', 'Lily']);
for (let name of names) { }
for...of очень гибкий, и есть другие примеры, которые я не буду здесь перечислять.
Общие методы атаки на интерфейсе
- XSS-атака
- CSRF-атака
- SQL-инъекция
- внедрение html-скрипта
Принцип и схема атаки здесь подробно описываться не будут.
Какие междоменные решения есть во фронтенде?
- Междоменный JSONP (по сути вызов JS)
- CORS (настройки фона)
- Обратный прокси Nginx (настройка работы и обслуживания)
Междоменное ограничение — это ограничение безопасности, установленное браузером.Это должен быть тот же протокол, то же имя домена и тот же порт, иначе он будет заблокирован браузером.
Кроссдоменные решения используются редко, я не буду их перечислять
План плановой оптимизации внешнего интерфейса веб-сайта
Стратегия оптимизации: уменьшите количество запросов, уменьшите размер ресурса, улучшите скорость отклика и загрузки, оптимизируйте время загрузки ресурса и оптимизируйте метод загрузки.
- Слияние, сжатие, обфускация файлов html/css/js (реализовано webpack, уменьшение размера ресурсов)
- Nginx включает Gzip для дальнейшего сжатия ресурсов (уменьшения размера ресурсов).
- Ресурсы изображений ускоряются с помощью CDN (улучшает скорость загрузки)
- Квалифицированные значки выполняют обработку base64 (уменьшают размер ресурса)
- Таблица стилей размещается в начале, а JS в конце (JS однопоточный, что будет блокировать страницу; метод загрузки ресурсов)
- Установите кеш (надежный кеш и кеш согласования для повышения скорости загрузки)
- Добавьте атрибут rel к ссылке или src и установите предварительную выборку или предварительную загрузку для предварительной загрузки ресурсов. (время загрузки)
- Если используется библиотека компонентов пользовательского интерфейса, используйте загрузку по запросу (уменьшите размер ресурса).
- Проекты SPA, маршрутизация по запросу через импорт или запрос (уменьшение размера ресурса)
- Рендеринг на стороне сервера SSR, ускорение рендеринга первого экрана, способствующее SEO
- Страница использует каркасный экран для повышения скорости загрузки главной страницы (улучшить скорость загрузки)
- Используйте форматы изображений JPEG 2000, JPEG XR и WebP для замены существующих форматов jpeg и png, что очень эффективно, когда на странице много изображений.
- Использовать ленивую загрузку изображений — lazyload
Выше приведена основная статья.Если вы считаете, что она очень полезна, вы можете подписаться на мой общедоступный аккаунт в WeChat: в будущем переднего плана я продолжу готовить для вас статьи о фреймворке.
Также приглашаю добавить мой личный WeChat: SunnyBoySoft
В этой статье используетсяmdniceнабор текста