предисловие
Я разобрался с некоторыми необходимыми вопросами для интервью для front-end инженеров.Процент собеседования очень высок.Я считаю, что мои друзья могут успешно найти работу, которую они хотят, когда они ищут работу или меняют работу.
Html
1. Какова роль DOCTYPE? Как отличить стандартный режим от беспорядочного режима? Что они имеют в виду?
Что делает DOCTYPE, так это сообщает браузеру, какую версию спецификации HTML использовать для отображения документа. Когда DOCTYPE не существует или имеет неправильный формат, HTML-документ будет анализировать документ в неразборчивом режиме. Стандартный режим работает в соответствии с самыми высокими стандартами, поддерживаемыми браузером, а страницы в неразборчивом режиме отображаются в более спокойной обратной совместимости.
H5 не основан на SGML и поэтому не требует ссылки на DTD, но требует DOCTYPE для стандартизации поведения браузера. HTML4.0 основан на SGML, поэтому необходимо обратиться к DTD, чтобы сообщить браузеру тип документа, используемый документом.
2. В чем разница между использованием link и @import при импорте стилей на страницу?
1. Ссылка — это тег HTML. Помимо загрузки стилей CSS, он также может загружать RSS, а @import предоставляется CSS и может использоваться только для загрузки CSS.
2. Когда страница загружается, загруженный стиль CSS с использованием тега ссылки будет загружен одновременно, а CSS, на который ссылается @import, будет ждать загрузки страницы перед загрузкой.
3. @import обеспечивается CSS2.1 и может быть распознан только IE5 и выше, тогда как ссылка является HTML-тегом, и нет проблем с совместимостью.
3. Какие новые возможности есть у H5?
1. Ярлыки с лучшей семантикой, такие как раздел, статья, заголовок, навигация, нижний колонтитул.
2. Мультимедийные элементы аудио и видео
3. Функция рисования холста и два метода рисования SVG
4. Информация о географическом местоположении, обработка событий мобильного терминала
5. Клиентское хранилище localStorage и sectionStorage
6. Оптимизированный для анимации запросAnimationFrame
7. WebWorker открывает независимый поток, работающий одновременно, чтобы сократить время рендеринга.
8. Запрос WebSocket, аналогичный протоколу HTTP, для междоменной связи.
4. В чем сходство и различие между localStorage и sectionStorge в HTML5 и файлах cookie?
Идентичные: оба хранятся на стороне клиента браузера и имеют одинаковое происхождение.
разные: 1. Емкость хранилища: LocalStorage и sessionStorage: данные хранилища могут достигать 5 МБ, а данные хранилища файлов cookie очень малы, обычно 4 КБ. Файл cookie будет отправлен пользователю вместе с HTTP-запросом, то есть файл cookie передается туда-сюда между браузером и сервером, при этом localStorage и sessionStorage не будут отправлять данные на сервер, а только сохранят их локально
2. Срок действия данных отличается: файл cookie всегда действителен в течение установленного срока действия файла cookie. А localStorage действует всегда, даже если окно или браузер закрыть, данные все равно сохраняются долго. SessionStorage действителен только до закрытия окна браузера, после закрытия он теряется.
3. Различные области действия: файлы cookie используются всеми окнами одного и того же происхождения. LocalStorage совместно используется всеми окнами одного и того же источника, а sessionStorage не используется совместно разными браузерами, даже на одной странице.
5. В чем разница между элементами уровня строки и элементами уровня блока?
Элементы уровня строки не занимают одну строку, и их ширина и высота не могут быть установлены. Высота растягивается на область содержимого. Элементы уровня строки могут быть только элементами уровня строки, а не элементами уровня блока. Заполнение может быть установлено, но параметры поля сверху и снизу недействительны.
Элементы уровня блока занимают одну строку, и можно установить ширину и высоту. Высота разделена внутренними элементами. Элементы уровня блока могут быть элементами уровня блока или элементами уровня строки. Маржа и отступы могут быть установлены.
6. В чем разница между Px, em и rem?
Px - абсолютное значение пикселя, большинство элементов можно установить, если не установить, он унаследует значение пикселя родительского элемента.
Эм - относительная единица. Он устанавливается с базовым значением родительского элемента текущего элемента.
бэр - относительная единица. Он основан на базовом значении пикселя HTML-элементов 1rem и часто используется для решения проблемы адаптации между ПК и мобильными терминалами.
7. Кратко опишите разницу между src и href?
src используется для замены текущего элемента. href должен установить связь между текущим элементом и внешними ресурсами.
src указывает на внешний ресурс, и указанный контент будет загружен и встроен в расположение текущего тега. Когда ресурс src будет запрошен, он будет загружен и применен к документу. Например, тег скрипта iframe img и т. д.
Когда браузер анализирует элемент, он приостанавливает загрузку и обработку других ресурсов и не будет обрабатывать другие элементы, пока ресурсы не будут загружены, скомпилированы и выполнены. Вот почему сценарий должен быть размещен внизу.
Тег href указывает на расположение сетевого ресурса и устанавливает связь между текущим элементом и внешними ресурсами. А когда ресурс скачается, браузер его скачает параллельно и не остановит обработку текущего документа. Поэтому рекомендуется загружать метод ссылки экземпляра CSS.
CSS
1. Ввести стандартную блочную модель CSS? Чем это отличается от более низкой версии боксовой модели IE?
Стандартная блочная модель: ширина = ширина области содержимого (контента) + отступы + граница.
Модель странной коробки IE: ширина = ширина содержимого (ширина + отступ + граница)
2. Как CSS настраивает эти две блочные модели?
Задается свойством box-sizing
box-sizing: content-box — это стандартная модель коробки
box-sizing: border-box — странная блочная модель IE
3. Как JS получает ширину и высоту, соответствующие блочной модели?
Dom.style.width/height Получить ширину и высоту элемента напрямую (можно получить только встроенные стили)
Dom.currentStyle.width/height IE уникален для получения стиля ширины и высоты
Window.getComputedStyle(dom).width/heihgt Совместимый метод для получения стиля ширины и высоты
Dom.getBoundingClientRect().width/height //Положение вычисляемого элемента относительно окна просмотра имеет 8 значений слева вверху справа внизу x y ширина высота
4. Каков принцип BFC? (правила рендеринга BFC)
1. Перекрытие происходит по вертикали элементов BFC.
2. Область BFC не будет перекрываться с рамкой плавающего элемента
3. BFC — это независимый контейнер на странице, внешние элементы не будут влиять на внутренние элементы, а внутренние элементы не будут влиять на внешние элементы.
4. Плавающие элементы также будут участвовать в расчете при расчете высоты БТЭ.
5. BFC может предотвратить закрытие элементов плавающими элементами.
5. Как создать BFC?
плавающее значение не равно none
перелив не виден
Значение position не является статическим или относительным
display inline-block или table-cell или flex
6. Каковы распространенные сценарии использования BFC?
1. Решить проблему перекрывающихся полей
2. BFC не перекрывается с элементами float
3. Очистите поплавок (родительский элемент рассчитает высоту плавающего элемента)
7. Реализация трехколоночного макета CSS?
1. Плавающие элементы, использующие поплавок, должны располагаться над неплавающими элементами.
2. Используйте абсолютное позиционирование для достижения
3. Используйте модель гибкого эластичного ящика для достижения
4. Используйте макет таблицы для достижения родительского элемента установлен макет таблицы, а макет дочернего элемента установлен на таблицу-ячейку
5. Используйте сетку, используйте grid-template-rows, чтобы установить высоту, используйте grid-template-columns, чтобы установить количество столбцов.
6. Используйте inline-block вместе с calc для создания трехколоночного макета.
7. Двухстворчатая компоновка
8. Макет Святого Грааля
8. Как вы понимаете высоту строки?
Высота строки относится к высоте строки текста, в частности к расстоянию между базовыми линиями двух строк текста. Высота и высота строки, которые работают в CSS, не определяют атрибут высоты, и их окончательная производительность должна соответствовать высоте строки.
Однострочный текст центрируется по вертикали: просто установите высоту и высоту строки равными
Многострочный текст центрирован по вертикали: если вы не знаете ширину и высоту, вы можете использовать отступы, чтобы они были одинаковыми вверх и вниз.
1. Родительский элемент настроен на отображение: таблица, а дочерний элемент настроен на отображение: табличная ячейка, вертикальное выравнивание: среднее
2. Установите высоту и высоту строки родительского элемента равными, а для дочернего элемента установите отображение: встроенный блок, выравнивание по вертикали: посередине и высота строки: 16 пикселей.
3. Родительский элемент имеет высоту, устанавливающую относительное позиционирование, а дочерний элемент устанавливает абсолютное позиционирование элемента, чтобы сделать его вертикально центрированным top: 50%, margin-top: -xxpx;
9. Как сделать текст поддержки Chrome меньше 12px?
P{font-size:10px; -webkit-transform: scale(0.8);}
10. Как сделать так, чтобы высота элемента менялась вместе с его шириной, а высота всегда равнялась половине ширины?
1, установите свойство ширины элемента, а затем используйте JS, чтобы динамически установить ширину (но нужно время, чтобы прослушать изменения в элементах)
2. Элемент не устанавливает высоту, только ширину и отступы: 25% 0. В это время необходимо установить родительский элемент;
注意：: заполнение, значение поля устанавливается относительно его родительского элемента.
11. Как добиться вертикального и горизонтального центрирования?
Вы можете обратиться к этой статье, чтобы узнать, что написано более подробно, а рассмотрение является более полным.
16 способов центрирования по горизонтали и вертикали
12. Сколько способов очистки поплавков вы знаете?
1. Добавить пустой div к родительскому элементу через clear:both
2. Установите высоту родительского элемента
3. Родительский элемент использует overflow: hidden/auto для запуска BFC.
4. Пусть родительский элемент тоже плавает
5. Установите для родительского элемента display:table layout
13. Как убрать невидимый пробел непосредственно в элементе li?
1. Напишите все ли в одной строке
2. Используйте поплавок
3. Установите размер шрифта: 0;
14. Когда display:inline-block покажет пробел?
1. При наличии пробела непосредственно в элементе решение: убрать пробел
2. Когда значение маржи существует, решение: установить значение маржи на отрицательное значение.
3. Если размер шрифта не равен 0, решение: установить размер шрифта: 0;
15. Когда использовать фоновые изображения и когда использовать img?
1. Заполнитель: изображение img является заполнителем, это тег html, если размер не установлен, он будет отображаться в соответствии с размером изображения.
background-image не является заполнителем, это просто свойство css
2. Работает ли? Фоновое изображение можно только просматривать, и только фоновое положение, фоновое вложение, фоновое повторение, фоновый размер и другие свойства могут быть установлены для работы с изображением.
img — это объект документа, которым можно манипулировать. Например, изменение пути к img src может привести к изменению изображения или перемещению его положения, удалению его из документа и т. д. Так что используйте background-img, если это декоративное изображение, и используйте img, если оно стилистически уместно.
3. Порядок загрузки другой background-image загружается после загрузки структуры страницы, а img — это тег страницы, который будет загружаться при загрузке структуры.Если изображение img большое, структура после долгого времени загрузки будет заблокирована, поэтому фактическая загрузка заказ будет загружать img, затем загружать фоновое изображение
16. гибкий макет
Один раз и для всех получить флажок Flex
17. Часто используемые примеси языков препроцессора
Вы можете выбрать язык препроцессора в соответствии с вашими предпочтениями, обычно scss, sass, less, stylus и т. д.
Ниже приведены некоторые примеси scss, которые я использовал в процессе разработки, я надеюсь дать вам ссылку.
// position定位相关
@mixin position($type: absolute,
$left: null,
$right: null,
$top: null,
$bottom: null) {
position: $type;
@if ($left !=null && $left !='') {
left: $left;
}
@if ($right !=null && $right !='') {
right: $right;
}
@if ($top !=null && $top !='') {
top: $top;
}
@if ($bottom !=null && $bottom !='') {
bottom: $bottom;
}
}
// 单行隐藏
@mixin ellipsis($line) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
text-overflow: ellipsis;
}
// 多行隐藏
@mixin ellipsis-one {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/*弹性盒子居中（传入null不设置该属性）*/
@mixin flex-center($direction:row, $justify:center, $align:center, $flex-wrap: null) {
display: flex;
@if ($direction != null) {
flex-direction: $direction;
}
@if ($justify != null) {
justify-content: $justify;
}
@if ($align != null) {
align-items: $align;
}
@if ($flex-wrap != null) {
flex-wrap: $flex-wrap;
}
// 行高
@mixin line-height($height:30px, $line-height:30px) {
@if ($height != null) {
height: $height;
}
@if ($line-height != null) {
line-height: $line-height;
}
// 清除浮动
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
JS
1. В чем разница между let, const и var?
var объявляет, что переменные можно объявлять повторно, а let нельзя повторять
var не ограничен уровнем блока, объявление будет продвигаться, в то время как let ограничен уровнем блока и работает только на уровне блока
var будет сопоставляться с окном (будет висеть свойство), а let не сопоставляется с окном
var может обращаться к переменным над объявлением, в то время как let имеет временную мертвую зону, и доступ к переменным над объявлением сообщит об ошибке
Вы должны присвоить значение после объявления const, иначе будет сообщено об ошибке
const определяет неизменяемую величину, при изменении которой будет сообщено об ошибке.
Const, как и let, не сопоставляется с окном, поддерживает область на уровне блоков и обращается к переменным выше объявления, сообщит об ошибке.
2. Скажите, почему происходит переполнение памяти при использовании рекурсии?
Рекурсия потребляет много памяти, потому что она должна сохранять много кадров вызовов одновременно, потому что функции, которые могут быть сохранены в стеке, ограничены.Как только слишком много функций сохранено и не освобождено, проблема взрыва стека произойдет.
Решение: можно решить с помощью хвостовой рекурсии
3. Что вы думаете о цикле событий?
Цикл событий — это механизм выполнения событий в JavaScript.Все мы знаем, что JS является однопоточным, и время выполнения асинхронных задач больше, чем у синхронных задач, что связано с существованием цикла событий.
Поскольку в JS есть макрозадачи и микрозадачи, эти две соответственно поддерживают очередь, которая выполняется с использованием стратегии «первым пришел — первым вышел», а приоритет макрозадач выше, чем у микрозадач.
Общие макрозадачи: script, setTimeout, setInterval, ввод-вывод, события взаимодействия с пользовательским интерфейсом, postMessage, MessageChannel, setImmediate (среда Node.js).
Общие микрозадачи: Promise.then, MutationObserver, process.nextTick (среда Node.js).
Порядок выполнения задания следующий: 1. Выньте выполнение задачи из заголовка задачи макроса и сначала выполните задачу макроса;
2. Если в процессе выполнения встречается микрозадача, она будет добавлена в очередь микрозадачи (для выполнения дождаться освобождения стека выполнения);
3. После выполнения макрозадачи, есть ли задачи в очереди микрозадач, если есть, выйти и выполнить их одну за другой до завершения выполнения;
4. Рендеринг GUI при необходимости;
Это порядок выполнения цикла событий.
4. Принцип и профилактика Xss и CSRF?
1,
XSS, KROSS Site Script, China Translation — кросс-станционная скриптовая атака, ее исходная аббревиатура — CSS, но для того, чтобы различать каскадные таблицы стилей, в области безопасности она называется XSS.
Атака XSS относится к методу атаки, при котором злоумышленник внедряет вредоносный исполняемый код на веб-сайт и вмешивается в веб-страницу клиента с помощью вредоносных сценариев, чтобы контролировать пользователей или получать личные данные пользователей, когда пользователи просматривают веб-страницы.
XSS в основном делится на 3 типа (непостоянный, постоянный, основанный на DOM).
1. Непостоянный тип в основном возникает из-за того, что злоумышленник внедряет вредоносный код на веб-сайт, например, внедряет скрипт в URL-адрес или внедряет скрипт, который может получить информацию о пользователе, чтобы достичь цели атаки.
Обычно такая атака является разовой, вредоносный скрипт не будет записан в базу данных, так что, условно говоря, вред не очень большой.
2. Вредоносный код, введенный постоянными пользователями, будет храниться на стороне сервера, когда браузер запросит данные, скрипт будет загружен обратно с сервера и выполнен. Эта XSS-атака очень стабильна и атакует многих пользователей.
Более распространенный сценарий заключается в том, что злоумышленник пишет статью или комментарий, содержащий вредоносный код JavaScript, в сообществе или на форуме. После публикации статьи или комментария все пользователи, получившие доступ к статье или комментарию, выполнят это в своих браузерах. Код JavaScript.
3. Атака на основе DOM происходит на стороне клиента, и злоумышленник злонамеренно изменяет структуру DOM.
Защита: 1. Экранирование символа для всего, что вводит пользователь,Никогда не доверяйте пользовательскому вводу2. Используйте httpOnly, чтобы предотвратить захват файлов cookie.
2,
Атака CSRF заключается в том, что злоумышленник использует файл cookie жертвы, чтобы обмануть доверие сервера, и может подделывать запросы от имени жертвы и отправлять их на атакуемый сервер без ведома жертвы, чтобы выполнить защиту разрешений без авторизации.
Соблюдайте условия: пользователь вошел в систему, сайт имеет уязвимость в системе безопасности.
Защита: 1. Используйте токен для проверки.Каждый раз, когда отправляется запрос, необходимо проверять правильность значения токена, что может помешать злоумышленникам запрашивать атаки. 2. Проверка реферера путем проверки реферера, чтобы определить, является ли запрос законным источником. 3. Установите SameSite, вы можете установить для атрибута SameSite значение Cookie. Этот атрибут указывает, что файлы cookie не отправляются с междоменными запросами, что может значительно уменьшить атаки CSRF, но в настоящее время этот атрибут совместим не со всеми браузерами.
5. Как взаимодействуют передняя и задняя части?
1. Ajax-связь под тем же источником
2. Websocket не ограничен политикой одного и того же происхождения
2. CORS поддерживает междоменную связь, а также связь с одним и тем же источником.
6. Несколько способов междоменной связи?
1. JSONP
Принцип: используйте асинхронную загрузку тегов сценария. Внешний и внутренний интерфейс согласовывают имя функции обратного вызова, а серверная часть возвращает объект данных, содержащийся в имени функции. Требуется внутреннее сотрудничество. JSONP прост в использовании и имеет хорошую совместимость, но он ограничен в получении запросов.
2. документ.домен
Этот метод можно использовать только при совпадении доменных имен второго уровня, например, для этого метода подходят x.test.com и y.test.com. Вам нужно только добавить document.domain = 'test.com' на страницу, чтобы указать, что доменные имена второго уровня одинаковы для достижения междоменного
3. iframe и location.hash
Принцип: страница не обновляется при изменении хэша, и операция обратного вызова может быть выполнена путем изменения значения хэша для реализации передачи данных.
4. сообщение
Этот метод часто используется для получения данных сторонних страниц, встроенных в страницу. Одна страница отправляет сообщение, а другая страница определяет источник и получает сообщение, что реализуется методом postMessage и методом window.onmessage.
5. Веб-сокет
Принцип: не ограничен политикой одинакового происхождения
6. КОРС
Принцип: когда Access-Control-Allow-Origin включен на внутреннем сервере, CORS может быть запущен, и связь может выполняться в определенном домене.
7. Прокси-сервер
Принцип: используйте сервер в качестве стороннего прокси для передачи запроса, принятия возвращенных данных и передачи их дальше.
7. Какие есть решения по оптимизации производительности?
Возьмите картинку, чтобы увидеть, если вы хотите увидеть, вы также можете перейти к этому буклетуПринцип и практика оптимизации производительности интерфейса
8. Каковы основные особенности протокола HTTP?
Просто и быстро: URI каждого ресурса фиксирован, и его относительно просто обрабатывать в протоколе HTTP.
Гибкость: тип данных заголовочной части в HTTP, передача разных типов данных может осуществляться через HTTP-протокол
Нет соединения: соединение будет разорвано по очереди и не останется подключенным
Без сохранения состояния: клиент и сервер имеют два идентификатора. HTTP помогает установить соединение, а затем отключается после завершения задачи. При следующей передаче все еще необходимо установить соединение.
9. Каковы компоненты HTTP-сообщения?
Сообщение запроса: строка запроса, заголовок запроса, пустая строка, тело запроса
Ответное сообщение: строка состояния, заголовок ответа, пустая строка, тело ответа.
10. В чем разница между запросами POST и GET?
GET безвреден при откате браузера, в то время как POST отправляется снова
URL-адрес, сгенерированный GET, можно добавить в закладки, но POST нельзя.
Запросы GET будут активно кэшироваться браузером, в то время как POST не будет, если активно не установлено
GET может выполнять только кодировку URL, тогда как POST поддерживает несколько кодировок.
Параметры запроса GET полностью сохраняются в истории браузера, а параметры POST — нет.
Запросы GET имеют ограниченную длину параметров, передаваемых в URL-адресе, в то время как POST не имеет ограничений.
GET может принимать только символы ASCII, а POST не имеет ограничений.
GET менее безопасен, чем POST, потому что параметры отображаются непосредственно в URL-адресе, поэтому он небезопасен.
GET-параметры передаются через URL-адрес, а POST помещается в тело запроса.
11. Общие коды состояния HTTP?
1XX: Индикация информации — указывает, что информация принята, продолжить обработку
2xx: Успех - указывает на то, что информация была успешно возвращена
200 OK客户端请求成功
206 Partial Content：客户端发送了一个带RangeGET请求，服务器响应完成
3XX: перенаправление -- указывает, что адрес ресурса изменился.
301 永久重定向 所有请求的页面已经转移之新的URL
302 所请求的页面已经临时转移至新的URL
304请求已经发出，但是为满足要求而不需要进行请求即可完成
4XX: Ошибка запроса — указывает на то, что запрос клиента допустил ошибку.
401 用户未登录或者为授权
403 Forbidden 对请求的页面的访问被禁止
404 Not Found 请求的资源不存在
5XX: ошибка на стороне сервера — указывает, что сервер ремонтируется или сломан.
500：服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503：请求未完成，服务器临时过载或当机，一段时间内可恢复正常
12. Каков механизм кэширования http?
HTTP-кеширование — наиболее знакомый механизм кэширования в нашей повседневной разработке. Кроме того, он делится на надежный кэш и кэш согласования. Более высокий приоритет имеет надежный кеш, а кеш согласования будет использоваться только в случае сбоя сильного попадания в кеш.
Код состояния возврата: 200 от xxxx.
1. expires, механизм реализации этого заключается в том, что expires - это метка времени. Далее, если мы попытаемся снова запросить ресурсы с сервера, браузер сначала сравнит местное время и метку времени expires. Если местное время меньше, чем время истечения срока действия, установленное expires , затем перейдите непосредственно к кешу, чтобы получить ресурс.
Тогда проблема очевидна.Это очень зависит от местного времени.Если пользователь изменит местное время, механизм кэширования выйдет из строя.
2. Cache-control, в Cache-Control мы обычно контролируем срок действия ресурсов через max-age. max-age — это не отметка времени, а длина времени, например max-age=33433000; в этом случае только этот запрос действителен в течение этого периода времени. А cache-control имеет более высокий приоритет и обратно совместим.
Возвращаемый код состояния: 304 Not Modified.
1. Last-Modified и If-Modified-Since
Работа: Когда сервер получает запрошенный If-Modified-Since, он сравнивает это время с последним временем изменения файла сервера.Если он изменится, он вернет полный ответ, иначе он вернет 304, и будет нет Last в заголовке ответа.-Измененное поле.
Но есть и недостатки:
1、我们如果对资源进行了编辑，但是内容并未修改，而修改时间却改变了，那么下一次请求时需要重新响应，但是返回的数据却并未改变。
2、如果我们修改文件的时间很短（s以内），由于 If-Modified-Since 只能检查到以秒为最小计量单位的时间差，那么这个他的Last-modified并未修改，导致请求的资源反而出错。
2. Etag — это уникальный идентификатор, генерируемый сервером для каждого ресурса. Этот идентификатор генерируется на основе содержимого файла. Поскольку содержимое файлов отличается, соответствующие им Etags различны.
Поэтому в каждом запросе нужно только сравнить, изменился ли Etag. Etag имеет более высокий приоритет, и если оба существуют одновременно, Etag используется первым.
13. Расскажите о своем понимании цепочки прототипов?
В каждом объекте есть свойство __proto__, и в свойстве __proto__ есть функция-конструктор, и внутри функции есть прототип, и это значение совпадает со свойством __proto__. Итак, есть такое отношение:
Так что же происходит с цепочкой прототипов?
Цепочка прототипов — это когда несколько объектов проходят __proto__ подключены. Когда в текущем элементе нет функции или метода, он будет искать цепочку прототипов, пока не достигнет вершины.
Вы можете понять эту картину
14. Принцип instanceOf?
Принцип: в основном судят по цепочке прототипов
// instanceof 原理实现
function myInstanceof (left, right) {
let prototype = right.prototype
let left = left.__proto__
while (true) {
if (left === null || right === null) {
return false
}
if (prototype === left) {
return true
}
left = left.__proto__
}
}
15. Как работает новый оператор?
Тетралогия нового строительства: 1. Создайте объект obj
2. Ссылка на прототип
3. Привяжите это
4. Вернуть объект
function create () {
let obj = {}
let Con = [].shift.call(arguments)
obj.__proto__ = Con.prototype
let result = Con.apply(obj, arguments)
return result instanceof Object ? result : obj
}
可以思考下这道题：new关键字的问题（return 1后会是什么情况）？
16. Сколько способов наследования вы знаете?
1. Наследование с помощью конструкторов
Принцип: укажите this конструктора родительского класса на экземпляр конструктора дочернего класса.
Недостатки: Унаследованный подкласс не имеет свойств и методов, унаследованных от прототипа родительского элемента, и не реализует реального наследования, а лишь реализует частичное наследование.
2. Реализовать наследование с помощью цепочки прототипов (решить проблему наследования от родительского элемента к методу)
Принцип: прототип конструктора подкласса связан с объектом экземпляра родительского класса для реализации наследования цепочки прототипов.
Недостаток: объекты-прототипы являются общими.Когда объект-экземпляр, созданный конструктором подкласса, изменяет свойства объекта-прототипа, свойства другого объекта-экземпляра, наследующего подкласс, будут соответственно изменены. Причина в том, что объект-прототип, выполняемый подклассом, созданным подклассом, имеет один и тот же адрес.
3. Комбинированный метод Вышеуказанные два метода объединены (решение проблемы громкой связи)
Недостатки: объект-прототип конструктора подкласса не имеет собственного конструктора, поэтому конструктор объекта-прототипа родительского класса будет найден в сети, поэтому конструктор подкласса будет указывать на конструктор родительского класса, а конструктор родительского класса вызывается дважды.
function Parent (name) {
this.name = name;
this.color = ['red', 'blue'];
}
Parent.prototype.sayName = function () {
console.log(this.name);
}
function Son (name, age) {
Parent.call(this, name);
this.age = age;
}
Son.prototype = new Parent();
Son.prototype.sayAge = function () {
console.log(this.age);
}
let son = new Son('liming', 20);
let son2 = new Son('saner', 22);
console.log(son.name) // liming
console.log(son.sayAge()) // 20
console.log(Son.constructor === Parent.constructor) // true
4. Оптимизация комбинированного наследования (решение двух вышеуказанных проблем)
function Parent (name) {
this.name = name;
this.color = [1, 2];
}
Parent.prototype.sayName = function () {
console.log(this.name);
}
function Son (age) {
Parent.call(this, name);
this.age = age;
}
Son.prototype = Object.create(Parent.prototype); // 通过添加中间桥梁实现
Son.prototype.constructor = Son; // 将自己的构造函数指回自己
Son.prototype.sayAge = function () {
console.log(this.age);
}
let son = new Son('liming', 20);
let son2 = new Son('saner', 22);
console.log(son.constructor); // function Son() {....}
5. Наследие Святого Грааля
function inherit(target, origin) {
function F() {};
F.prototype = origin.prototype;
target.prototype = new F();
target.prototype.constructor = target;
target.prototype.uber = origin.prototype;
}
17. В чем разница между Call и Apply?
То же самое: оба изменяют это, чтобы указать на
Отличие: список параметров другой, call — это ввод переменной, apply — ввод массива
18. Это указывает на проблему?
1. Для того, чтобы функция вызывалась напрямую, независимо от того, где она выполняется, это должно указывать на окно.
2. При выполнении функции есть вызывающий объект, поэтому тот, кто вызывает это, указывает на кого
3. Через новый метод this всегда привязывается к вновь созданному объекту, и смысл this никак не может быть изменен.
4. При вызове и применении измените this на point, это указывает на значение первого переданного параметра.
5. Когда стрелочная функция выполняется, это ближайшая обычная функция, которая оборачивает стрелочную функцию.
19, закрытие какой принцип? Преимущества и недостатки?
Функция A содержит функцию B, а функция B ссылается на переменные функции A, тогда функция B называется замыканием.
Или: замыкания — это функции, которые могут читать переменные внутри других функций.
Смысл замыкания в том, чтобы позволить нам косвенно обращаться к переменным внутри функции.
Во-первых, переменная внутри функции может быть прочитана, и эта переменная не будет переработана.
Другой - инкапсулировать частные свойства и частные методы объекта.
Потребляет память и может вызвать переполнение памяти.
Классическая проблема закрытия:
for (var i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i)
}, 1000)
}
Вывод приведенного выше кода
由于setTimeouts是个异步函数，所以会先把循环全部执行完毕,最后才会打印输出6个6
Как решить
第一种方法 使用立即执行函数解决
for (var i = 1; i <= 5; i++) {
(function(j) {
setTimeout(function() {
console.log(j);
}, 1000)
} (i));
}
第二种方法 使用let的块级作用域解决
for (let i = 1; i <= 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000)
}
第三种方法 使用setTimeout的第三个参数，这个参数会被当成 timer 函数的参数传入
for (var i = 1; i <= 5; i++) {
setTimeout(function (i) {
console.log(i);
}, 1000, i)
}
20. Как сервер реализует длительное соединение с клиентом (как идентифицировать клиента)?
Протокол HTTP принимает режим "запрос-ответ". Когда используется обычный режим, то есть режим без поддержания активности, каждый запрос/ответ клиент и сервер должны повторно устанавливать соединение и отключаться сразу после завершения ( HTTP — это неподдерживающий режим (протокол подключения).
При использовании режима поддержания активности для постоянных подключений функция поддержания активности делает соединение между клиентом и сервером постоянным.При последующем запросе к серверу уведомление о подтверждении активности позволяет избежать установления или повторного установления соединения.
21. Механизм всплытия и захвата событий?
Vue
1. Функции-ловушки жизненного цикла (функции, которые запускаются в определенный момент)
Каждый экземпляр Vue при создании проходит ряд процессов инициализации — например, ему необходимо настроить прослушиватели данных, скомпилировать шаблоны, смонтировать экземпляр в DOM и обновить DOM при изменении данных и т. д. В то же время во время этого процесса также запускаются некоторые функции, называемые перехватчиками жизненного цикла.
Как показано на фиг. Созданный подходит для отправки запросов.
Элемент dom был смонтирован на смонтированной сцене, и этим элементом можно манипулировать.
Обновленная функция может выполнять ряд операций на основе обновления.
beforeDestroy можно использовать для удаления событий, таймеров и т. д., которые в противном случае могли бы вызвать утечку памяти.
уничтожить выполняет операцию уничтожения компонента.Если есть дочерний компонент, он также будет уничтожен рекурсивно, и, наконец, родительский компонент будет уничтожен.
Есть также два уникальных жизненных цикла поддержки активности, а именно активация и деактивация. Компоненты, обернутые поддержкой активности, не будут уничтожены во время переключения, а будут кэшированы в памяти и деактивированы. При попадании в кэш-рендеринг выполняется активированная функция. .
2. В чем разница между v-show и v-if?
v-show заключается в переключении атрибута отображения для достижения эффекта отображения и скрытия. Это означает, что в начале будет загружаться v-show, который имеет относительно высокие начальные накладные расходы на рендеринг, но после рендеринга ему не нужно уничтожать компоненты, поэтому он больше подходит для переключения сцен с высокой частотой.
v-if является ленивым, если сначала оно ложно, компонент не будет смонтирован, а компонент рендеринга не будет смонтирован до тех пор, пока условие не станет истинным. Кроме того, переключение вызовет разрушение/установку компонентов, а затраты на переключение относительно велики, что подходит для сценариев, которые не часто переключаются. Конечно, этот ленивый рендеринг также может уменьшить первоначальные накладные расходы на рендеринг страницы.
3. В чем разница между вычислением и просмотром?
computed常用于计算值的场景
计算属性是基于它们的响应式依赖进行缓存的，所以当值没发生改变时时不会执行的
还可以使用setter函数来处理一些逻辑
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
watch用来观察和响应 Vue 实例上的数据变动，实时对数据监听并处理一些复杂的逻辑操作
无缓存性，页面重新渲染时值不变化也会执行
Обычное использование мониторинга:
watch: {
// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
//e: {
// f: {
// g: 5
// }
//}
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
}
4. Как динамически связать класс и стиль?
1. Привязать класс
Используйте объект для привязки:<div v-bind:class="{ active: isActive }"></div>
Использовать несколько привязок данных:<div v-bind:class="[activeClass, errorClass]"></div>
2. Стиль привязки
использовать объект для привязки<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
Связать несколько с помощью массива<div v-bind:style="[baseStyles, overridingStyles]"></div>
5. Какова функция ключа?
Чтобы дать Vue подсказку, чтобы он мог отслеживать идентификатор каждого узла и, таким образом, повторно использовать и переупорядочивать существующие элементы, вам необходимо предоставить каждому элементу уникальное ключевое свойство. Для того, чтобы быстро найти элемент в разл.
6. Какова функция компонента поддержки активности?
Если вам нужно сохранить состояние некоторых компонентов, чтобы предотвратить многократную визуализацию при переключении компонентов, вы можете использовать компонент поддержания активности, чтобы обернуть компоненты, которые необходимо сохранить.
Компоненты, обернутые с помощью keep-alive, не будут уничтожены при переключении, а кэшируются в памяти и выполняют деактивированную функцию хука.
7. Сколько существует способов взаимодействия компонентов?
1. Родительские и дочерние компоненты
2. Компоненты, не являющиеся родительско-дочерними
1. Используйте реквизиты для передачи данных дочерним компонентам, а дочерние компоненты передают данные родительским компонентам через генерацию триггерных событий.
2. Родительский компонент вызывает метод дочернего компонента через ref
3. Связь между родительским и дочерним компонентами данных реализована через синтаксис .sync.
1. Параметр предоставления позволяет нам указать данные/методы, которые мы хотим предоставить компонентам-потомкам, использовать внедрение внедрения, а подкомпоненты можно использовать, приняв ввод
2. Решение шины событий состоит в том, чтобы смонтировать шину шины на Vue.prototype и использовать события emit и on шины для завершения.
3. Используйте vuex для связи между компонентами.
8. Почему данные в компоненте — это функция, а корневой компонент — это объект?
Когда компоненты используются повторно, все экземпляры компонентов будут совместно использовать данные.Если данные являются объектами, это приведет к тому, что компонент изменит данные и повлияет на все другие компоненты, поэтому вам нужно записать данные как функцию и вызвать функцию каждый раз, когда он используется.Данные. Экземпляр нового Vue не будет использоваться повторно, поэтому проблем со ссылками на объекты нет.
9. Реализация двусторонней привязки во Vue?
принцип:
unction observe(obj) {
// 判断类型
if (!obj || typeof obj !== 'object') {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
function defineReactive(obj, key, val) {
observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
// get函数
get: function reactiveGetter() {
console.log('get')
return val
},
// set函数
set: function reactiveSetter(newVal) {
console.log('set')
val = newVal
}
})
}
10. В чем разница между миксинами и миксинами?
Миксин используется для глобальных миксинов и влияет на каждый экземпляр компонента, обычно плагины инициализируются таким образом.
Предполагается, что миксины распространяют повторно используемые функции в компонентах Vue. Если в нескольких компонентах есть одна и та же бизнес-логика, эту же логику можно вырезать и смешать с кодом с помощью примесей, но обратите внимание на некоторые правила слияния и т. д.
11. Что делает функция nextTick?
nextTick позволяет нам выполнить отложенный обратный вызов после окончания следующего цикла обновления DOM, чтобы получить обновленный DOM.
Когда мы оперируем ref в смонтированном, мы можем выполнить его в nextTick.
// DOM 还未更新
this.nextTick(function () {
// DOM 已经更新
this.$refs.$el.xxx
})
12. Каковы преимущества и недостатки одностраничного и многостраничного?
13. Какое решение по оптимизации для Vue?
1、区分使用v-if和v-show的使用
2、区分computed和watch的使用
3、v-for的使用时必须加上key值。
4、事件，定时器的销毁操作
5、图片资源的懒加载（vue插件）
6、路由的懒加载
7、第三方插件的按需引入如Echarts
8、组件的异步加载
9、服务端渲染
10、使用alias来简化路径查找
11、loader配置使用exclude来快速查找文件
14. Что такое VNode?
Виртуальный DOM на самом деле представляет собой дерево, основанное на объектах JavaScript (узлах VNode), и использует атрибуты объектов для описания узлов, фактически это просто абстракция реального DOM. Наконец, это дерево можно сопоставить с реальной средой с помощью ряда операций.
15. Как установить прокси-сервер в Vue?
После vue-cli 3.0 в корневом каталоге создается новый файл vue.config.js для настройки соответствующей конфигурации, которую необходимо изменить.
Настройки прокси:
devServer: {
port: 8080,
open: true,
proxy: {
'/api/login': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/api': '/api/4356'
}
}
}
}
Git
1. Что эквивалентно операции Git pull?
git pull эквивалентен git fetch + git merge
Git fetch загружает последний контент удаленного хоста на локальный, и пользователь после проверки решает, следует ли слиться с работающей локальной веткой.
И git pull должен вытащить последний контент удаленного хоста и слить его напрямую, то есть: git pull = git fetch + git merge, что может вызвать конфликты и их необходимо разрешать вручную.
2. В чем разница между git merge и git rebase?
Слияние Git означает, что git автоматически выполнит трехстороннее слияние на основе фиксации общего предка двух ветвей и последней фиксации двух ветвей, а затем создаст новую фиксацию с измененным содержимым в слиянии. И слияние последней фиксации находится в объединенной ветке.
Если вы хотите, чтобы мастер объединил тестовую ветку, используйте git merge test на мастере.
git rebase, rebase воспроизводит историю другой ветки на текущей ветке, история коммитов линейна. По сути, это линеаризованный автоматический выбор вишни, который объединяет две ветки в одну.
Если вы хотите объединить тестовую ветку с мастером, используйте git rebase master на тесте
Лично считаю, что это хорошая статьяРазница между git merge и git rebase
3. Как использовать git commit --amend?
После отправки git commit -m 'description' обнаруживается проблема с текстом описания -m. Если вы хотите переписать его, то есть вы хотите отменить последнее действие отправки и отправить его снова, вы можете использовать эту операцию.
4. операция отката сброса git?
Команда сброса указывает текущую ветвь на другое место и при необходимости изменяет рабочий каталог и индекс. Также используется для копирования файлов из хранилища истории в индекс без изменения рабочего каталога.
Если опция не указана, текущая ветвь указывает на эту фиксацию. При использовании параметра --hard рабочий каталог также обновляется, а при использовании параметра --soft он остается неизменным.
5. Посмотреть историю коммитов git?
Команда git log может отображать всю информацию о подтвержденных версиях.
git reflog может просматривать все записи операций всех ветвей (включая удаленные записи коммитов и операции сброса)
6. Процесс отправки Git?
1. Когда локальный файл изменен, используйте git add file, чтобы поместить файл в промежуточную область.
2. git commit создает снимок промежуточной области и отправляет его в хранилище.
3. git push синхронизирует код локального хранилища с удаленным хранилищем.
4. git reset -- files используется для отмены последних файлов git add.Вы также можете использовать git reset для отмены всех файлов промежуточной области. --soft не отменяет код рабочей области, --hard отменяет код рабочей области.
5. git checkout -- files Копирует файлы из промежуточной области в рабочий каталог, чтобы отменить локальные изменения.
Linux
1. Убить процесс?
1、lsof -i tcp:端口号 查看当前进程的信息
kill pid 杀掉某个pid的进程服务
2、ps -ef | grep 8099
kill -9 PID 强行杀掉某个pid的进程服务
3、ps -ef | grep server.js
查找server.js的进程号
4、开启一个守护进程
pm2 start app.js --env production --name test
2. Операция переименования файлов?
mv можно использовать для изменения одной операции переименования файла mv file1 file2 Изменить file1 на file2
mv также имеет функцию перемещения файлов
mv b sm/ 将文件（夹）b 移动到当前目录下的sm目录下
mv (-f如果目标存在直接强行覆盖 -b移动时为目标创建一个备份 -i目标存在会交互提醒是否要覆盖) 源文件 目标文件
mv b sm/c 将文件（夹）b移动到当前目录下的sm目录下并重命名为c
переименовать пакет изменить имя файла переименовать тест zhangsan test?Изменить тестовый* файл на zhangsan*
3. Сжатие и распаковка файлов?
tar -czvf test.tar ./* Упаковать файлы в текущем файле в файл test.tar
tar -xzvf test.tar Разархивировать упакованные файлы в test.tar в исходное место
4. ls -l /proc/70681 Проверить, в какой папке находится текущая служба PID.
5. ps -a Используйте команду PS для запроса процесса
6. ps (-e выбирает все процессы -f показывает полный список -a показывает процесс, выбранный тем же TTY -x и не содержит управляющего TTY)
7. nohup npm run dev и разрешить внешним серверам игнорировать ожидающие сигналы
8. Запустите фоновую службу: nohup node app.js и фоновая операция ---- запустите процесс фоновой службы, и служба выключения не остановится.
9. Запустите службу переднего плана: nohup node app.js — откройте службу переднего плана и остановите ее, когда она будет выключена.
Ч лицо
Это вопросы, которые я получаю чаще всего. Ну, стандартного ответа у меня нет, могу только ссылку дать.
1. Почему выбирают нашу компанию?
2. Как вы думаете, в чем ваше преимущество перед другими?
3. Каков ваш карьерный план?
4. Как ты обычно учишься?
5. Почему вы хотите изучать интерфейс?
6. Как вы понимаете позицию front-end инженера?
личный вопрос
1. Какой технологический стек обычно используется отделом разработки?
2. Будет ли компания проводить мероприятия по обмену и обмену технологиями?
3. Какова структура и кадровый состав технической команды компании?
4. Каково направление бизнеса компании?
5. Как вы думаете, в чем сила вашей компании?
наконец
Если вы считаете, что статья хороша, вы можете поставить лайк, чтобы мотивировать меня двигаться дальше, а если у вас есть какие-либо вопросы, вы также можете общаться в области комментариев. Поправки приветствуются, если есть ошибки.