Интервью с фронтенд-инженером обязательно (постоянно обновляется)

Краткое содержание интервью первое:Сводка вопросов интервью по расширенному интерфейсу Big Factory 2018 г.
Расширенное интервью:[Раз в две недели] Резюме вопросов и ответов на высокочастотных собеседованиях перед началом работы

css-контент

Адаптивный макет

Сравнение трех текущих основных прекомпиляторов

Препроцессор CSS разработан с использованием специального языка программирования, а затем компилируется в обычные файлы CSS для использования в проекте;
Сделайте ваши CSS более лаконичными, адаптируемыми, более читаемыми, легкими для обслуживания и многих других преимуществ.

Разница между less, sass и stylus

1. Переменные:
- Переменные объявления Sass должны начинаться с «$», за которым следует имя переменной и значение переменной, а имя переменной и значение переменной должны быть разделены двоеточием:.
- Переменные объявления меньшего размера начинаются с «@», а остальные эквивалентны Sass.
- Ограничений на объявление переменных в Stylus нет, точка с запятой в конце не обязательна, но между именем переменной и ее значением должен стоять «знак равенства».
2.объем:
- Sass: Худший из трех — нет концепции глобальных переменных. Это означает, что вы должны быть осторожны при определении переменных с одинаковыми именами в Sass.
- Минус: последняя обновленная переменная действительна и будет применяться ко всем ссылкам!
- Stylus: метод обработки Sass такой же, как и у Stylus.Когда значение переменной выводится, оно вычисляется в соответствии с самым последним определением, и каждая ссылка на самое последнее определение действительна;
3. Вложение:
- «Вложенность селекторов» трех прекомпиляторов css не имеет различий в использовании, даже тег &, который ссылается на родительский селектор, одинаков.
4. Наследование:
- Наследование Sass и Stylus очень похоже, они могут наследовать все стили одного селектора другому селектору. Начните с «@extend», за которым следует унаследованный селектор. Метод наследования Stylus исходит от Sass, и они абсолютно одинаковы.
- Меньше также «уникально» использует псевдоклассы для описания отношений наследования;
5. Импорт @Импорт:
- Интерполяция переменных в Sass возможна только при импорте с использованием выражения url():
```
$device: mobile;
@import url(styles.#{$device}.css);
```
- Интерполяция в строках возможна в Less:
```
@device: mobile;
@import "styles.@{device}.css";
```
- В Stylus интерполяция здесь не работает, но ее можно реализовать с помощью его функции конкатенации строк:
```
device = "mobile"
@import "styles." + device + ".css"
```
Суммировать
- 1. Sass и Less имеют строгую грамматику, а Stylus относительно бесплатен. Поскольку Less больше похож на CSS, его может быть легче изучить.
- 2. Sass и Compass, Stylus и Nib — хорошие друзья.
- 3. И Sass, и Stylus имеют языковую логическую обработку: условия, циклы и т. д., в то время как Less необходимо имитировать эти функции с помощью ключевых слов, таких как When, В этом отношении Less не так хорош, как Sass и Stylus.
- 4. Less уступает Sass и Stylus по богатству и возможностям.Если бы не введение Less в Bootstrap, он мог бы не так широко использоваться, как сейчас (по моему скромному мнению).

Разница и выбор между ссылкой и @import

<style type="text/css">
	@import url(CSS文件路径地址);
</style>
<link href="CSSurl路径" rel="stylesheet" type="text/css" /

Link имеет много функций, может определять RSS, определять Rel и другие функции, а @import можно использовать только для загрузки css;
Когда ссылка анализируется, страница синхронно загружает указанный CSS, а CSS, на который ссылается @import, не загружается до тех пор, пока страница не будет загружена;
@import требует использования IE5 или выше;
ссылка может быть импортирована динамически с помощью js, но не @import;

Вертикально центрированный макет

Первая классическая компоновка CSS — макет с вертикальным центрированием

Примеры расширенных возможностей css3

Какой контент или API были добавлены в h5 и какие из них вы использовали?

Проблема с границей 1 пикселя

Что такое БФК

что такое БФС

Английское объяснение BFC: контекст форматирования блока. Китайское значение: контекст форматирования на уровне блока;
Контекст форматирования означает: область рендеринга на странице имеет свой собственный набор правил рендеринга, которые определяют, как расположены ее дочерние элементы, а также отношения и роль с другими одноуровневыми элементами.
БЭК имеет следующие характеристики
- Внутренние ящики будут располагаться один за другим в вертикальном направлении, начиная сверху;
- Вертикальное расстояние коробки определяется полем. Поля двух соседних блоков, принадлежащих одному и тому же BFC, схлопнутся;
- Левый проход поля поля каждого элемента касается левой стороны поля границы содержащего блока. Это верно даже для плавающих элементов;
- Область BFC не будет перекрываться с плавающей рамкой;
- При расчете высоты BFC в расчете также участвуют плавающие дочерние элементы;
- Текстовый слой не будет закрыт плавающим слоем.

Свойство css, создающее эффект BFC

значения float, отличные от none;
значение переполнения, отличное от видимого (скрытое, автоматическое, прокрутка);
дисплей (ячейка таблицы, заголовок таблицы, встроенный блок, гибкий, встроенный гибкий);
Значение позиции (абсолютное, фиксированное). Элементы с этими значениями атрибутов автоматически создают BFC;

Роль BFC

Один из самых больших эффектов BFC заключается в том, что на странице есть независимый изолированный контейнер, и расположение элементов внутри контейнера и элементов вне контейнера не будет влиять друг на друга.
- Устранить перекрытие верхнего поля; в обоих перекрывающихся полях включена функция bfc;
- Решите коллапс высоты, вызванный плаванием, коробка контейнера открывается bfc;
- Обтекание текстом решить картинку, картинка слева div, справа от текстового контейнера p, p-открытие контейнера bfc;

основы js

Разница между for...in и for...of

for...in
- 1. Цикл — это индексный индекс, представляющий собой число строкового типа;
- 2. Порядок обхода может не соответствовать внутреннему порядку фактического массива;
- 3. Использование for in будет проходить по всем перечисляемым свойствам массива, включая прототип и пользовательские свойства массива;
- Таким образом, for in больше подходит для перебора объектов, не используйте for in для перебора массивов.
Рекомендуется использовать for...in при переборе свойств объекта и for...of при обходе массива;
Цикл for...in — это ключ, а цикл for…of — это значение;
Обратите внимание, что for...of — это новая функция, представленная в ES6. Исправлены недостатки for...in, появившиеся в ES5;
for...of не может перебирать обычные объекты, его нужно использовать вместе с Object.keys();

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

Способ введения сценария:

html static», в dom вставляется только строка строки, не говоря уже о js, представленном в строке, поэтому вы не можете использовать этот метод для вставки скрипта! ! !

2. Время загрузки каждого файла js (временная последовательность тегов script, вставленных в документ)

Например: 1.js зависит от 2.js, 2.js зависит от 3.js, фактический порядок загрузки: 1.js, 2.js, 3.js.
Примечание. Порядок, в котором выполняются фактические модули, следующий: 3.js, 2.js и 1.js. Итак, загрузка файла, запуск файла после загрузки и запуск модуля — это три вещи, не путайте.

3. Время выполнения файлового модуля

// 1.js 中的代码
require([], functionA() {
    // 主要逻辑代码
})

загрузка файла:<script src='1.js'>Нода вставляется в дом, после чего скачивается файл 1.js;
Работа загруженного файла: После загрузки файла 1.js выполнить код в 1.js, то есть выполнить функцию require()! ! !
Работа модуля: требуется функция обратного вызова, выше основной логический код, где работает функция functionA! ! !
Порядок загрузки/запуска файла: 1.js, 2.js, 3.js;
Порядок запуска модуля: 3.js, 2.js, 1.js;

веб-пакет против requirejs

Когда webpack управляет модулями, нет необходимости инкапсулировать слой таких вещей, как requireJS, как показано ниже.

define(['jquery'], function(jquery){})

Он реализует модульность внешнего кода, улучшает возможность повторного использования кода и обеспечивает функцию кэширования общего модуля.
- Благодаря упаковке разные страницы загружают javascript и общий javascript своих собственных модулей по отдельности, в то время как requireJS упаковывает все файлы javascript в один файл, так что общие модули JS среди нескольких страниц сайта не могут кэшироваться.
- Webpack вводит точку разделения и блок кода.Точка разделения определяет все зависимые модули, которые вместе образуют блок кода, так что страница может ссылаться на блок кода.

Основной кадр ВУЭ

Как реализован алгоритм сравнения в vue2?

Ссылаться на:Не позволяйте виртуальному DOM и DOM-diff становиться для вас камнем преткновения
При изменении данных метод set вызовет Dep.notify, чтобы уведомить всех Наблюдателей подписчиков, а подписчик вызовет patch, чтобы исправить реальный DOM и обновить соответствующее представление.

процесс сравнения

Функция исправления получает два параметра oldVnode и Vnode, представляющие новый узел и предыдущий старый узел соответственно.
- Определите, заслуживают ли сравнения два узла, и выполните patchVnode, если их стоит сравнивать;
- Если сравнивать не стоит, замените oldVnode на Vnode;
patchVnode: когда мы определяем, что два узла заслуживают сравнения, мы указываем метод patchVnode для двух узлов;
- Найдите соответствующий реальный дом, называемый el;
- Определить, указывают ли Vnode и oldVnode на один и тот же объект, и если да, то вернуться напрямую;
- Если они оба имеют текстовые узлы и не равны, то установите текстовый узел el на текстовый узел Vnode;
- Если у oldVnode есть дочерние элементы, а у Vnode нет, удалите дочерние элементы el;
- Если у oldVnode нет дочерних узлов, а у Vnode есть, добавьте дочерние узлы Vnode в el после того, как они станут реальными;
- Если у обоих есть дочерние узлы, выполните функцию updateChildren для сравнения дочерних узлов, этот шаг очень важен;
схема функции updateChildren

Теперь сравните oldS, oldE, S и E с sameVnode соответственно. Существует четыре метода сравнения. Когда два из них могут совпасть, соответствующий узел в реальном DOM будет перемещен в соответствующую позицию Vnode. Это предложение немного сбивает с толку. , Например:
- Если oldS и E совпадают, то первый узел реального домена будет перемещен в конец;
- Если oldE и S совпадают, то последний узел в реальном доме переместится вперед, а два указателя на совпадение переместятся в середину;
- Если ни одно из четырех совпадений не было успешным, то проходим по oldChild, и S сопоставляет их одно за другим. Если совпадение успешное, переместите успешный узел на передний план в реальном DOM. Если он по-прежнему неудачен, вставьте узел, соответствующий S в Go в соответствующую позицию oldS в dom, а указатели oldS и S перемещаются в середину.

vue двусторонняя привязка данных

Vue.js использует метод захвата данных в сочетании с режимом издатель-подписчик, перехватывает установщик и получатель каждого свойства через Object.defineProperty(), публикует сообщения подписчикам при изменении данных и запускает соответствующий обратный вызов мониторинга.
Шаг 1: Требуется рекурсивный обход объекта данных наблюдения, включая атрибуты объектов вложенных атрибутов, а также сеттеры и геттеры. В этом случае присвоение значения этому объекту вызовет установщик, после чего вы сможете отслеживать изменения данных;
Второй шаг: скомпилируйте и проанализируйте инструкции шаблона, замените переменные в шаблоне данными, затем инициализируйте представление страницы рендеринга, привяжите функцию обновления к узлу, соответствующему каждой инструкции, и добавьте подписчиков для мониторинга данных. изменения, получать уведомления, обновлять вид;
Шаг 3: Подписчик Watcher — это мост между Observer и Compile, главное:
- 1. Добавьте себя к подписчику свойства (dep), когда вы создаете свой экземпляр
- 2. Он должен иметь сам метод update()
- 3. Когда свойство изменяет уведомление dep.notice(), оно может вызвать свой собственный метод update() и вызвать связанный обратный вызов в компиляции, после чего оно будет успешным.
Шаг 4: MVVM действует как точка входа для привязки данных, интегрирует Observer, Compile и Watcher, отслеживает изменения данных собственной модели через Observer, анализирует и компилирует инструкции шаблона через Compile и, наконец, использует Watcher для установки соединения между Observer и Compile. Коммуникационный мост для достижения изменения данных -> обновление представления, изменение взаимодействия просмотра (ввод) -> эффект двусторонней привязки изменения модели данных.

Спросите подробности

На основе привязки данных vue, если данные в data изменяются 1000 раз в секунду, будет ли каждое изменение отображаться на странице?

Процесс выполнения жизненного цикла vue

Сначала создайте экземпляр vue, Vue();
При создании экземпляра Vue выполняется функция init(), а в процессе инициализации сначала вызывается функция beforeCreate.
Перед созданием данных данные в данных контролируются, а Vue внутренние события инициализируются. Детали следующим образом:
- законченное наблюдение за данными;
- Завершена работа со свойствами и методами;
- Завершен обратный вызов события watch/event;
- Однако атрибут $el невидим, если в это время DOM не смонтирован;
Перед beforeMount завершается компиляция шаблона. Данные в объекте данных и шаблон, написанный в синтаксисе vue, скомпилированы в html, но скомпилированный html еще не был отображен на странице в это время;
- 1. Если внутри экземпляра есть атрибут шаблона, используйте внутренний напрямую, а затем вызовите функцию рендеринга для рендеринга.
- 2. Если внутри экземпляра шаблон не найден, вызывается внешний html ("эл" вариант (опция)). Свойство шаблона внутри экземпляра имеет приоритет над внешним. функция рендеринга > свойство шаблона > внешний html;
- 3. Если не устраивают первые два, то выкидывать ошибку.
Mounted ранее выполнял функцию рендеринга и монтировал визуализированный контент в узел DOM. mount — функция-ловушка, которая срабатывает после монтирования html на странице, когда смонтированное выполнение завершено, считается, что весь экземпляр завершил процесс, за весь процесс экземпляра смонтированный выполняется только один раз;
beforeUpdate: когда данные изменяются, будет вызываться функция beforeUpdate, затем выполняется виртуальный DOM, и, наконец, обновленное обновление завершается;
beforeDestory — функция-ловушка перед уничтожением экземпляра, которая уничтожает всех наблюдателей, подкомпоненты и прослушиватели событий;
Функция ловушки, выполняемая уничтоженным экземпляром, уничтожается;

Суммировать

beforeCreate: некоторые параметры инициализируются, если есть одинаковые параметры, параметры объединяются и выполняется beforeCreate, объекты el и data не определены и не инициализированы;
created : Initialize Inject , Provide , props , method , data , вычисляемые и наблюдающие, выполняющие created , данные доступны, el еще нет;
beforeMount : проверьте, есть ли атрибут el, если он существует, выполните операцию рендеринга dom и выполните beforeMount; $el и данные инициализируются, но dom все еще является виртуальным узлом, и соответствующие данные в dom не были заменены;
Mounted : создайте экземпляр Watcher, визуализируйте dom и выполните mount , экземпляр vue смонтирован, и соответствующие данные в dom успешно отрендерены;
beforeUpdate : после рендеринга dom, после выполнения смонтированного хука, когда данные обновляются, выполнить beforeUpdate ;
updated : проверьте текущий список наблюдателей, чтобы узнать, есть ли наблюдатель, который в данный момент обновляет данные, и если да, выполните update ;
beforeDestroy : проверить, был ли он удален, если он был удален, вернуться напрямую, в противном случае выполнить beforeDestroy ;
уничтожено: Удалить все следы себя;

Компиляция шаблона Vue.js

Ссылаться на:Говоря о принципе Vue2

const ast = parse(template.trim(), options) // 构建抽象语法树
optimize(ast, options) // 优化
const code = generate(ast, options) // 生成代码
return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
}

можно разделить на три части
- Преобразование шаблонов в абстрактные синтаксические деревья;
- Оптимизировать абстрактное синтаксическое дерево;
- Генерировать код из абстрактного синтаксического дерева;
что именно сделал
- Первая часть на самом деле представляет собой множество закономерностей.Для сопоставления левых и правых открытых и закрытых тегов и набора атрибутов через форму стека стек постоянно извлекается в стек для сопоставления и замены родительского узла, и наконец, создается объект, включающий дочерние элементы, дочерние элементы и дочерние объекты.
- Вторая часть основана на первой части, находит некоторые статические узлы и помечает их в соответствии с типом узла;
- Третья часть — генерация кода функции рендеринга.
Короче говоря, он сначала преобразуется в дерево AST, а затем результирующая функция рендеринга возвращает VNode (виртуальный DOM-узел Vue);
отвечать:
- Сначала шаблон компилируется в синтаксическое дерево AST (абстрактное синтаксическое дерево — это древовидное представление абстрактной синтаксической структуры исходного кода) с помощью компилятора компиляции. compile — это возвращаемое значение createCompiler, которое используется для создания компилятора. Кроме того, компиляция также отвечает за слияние опций.
- Затем AST выполнит генерацию (процесс преобразования синтаксического дерева AST в строку функции рендеринга), чтобы получить функцию рендеринга. имя тега, дочерний узел, текст и т. д. Подождите);

Общий поток данных для представлений

На уровне компонента vue выполнит новый Watcher;
Новый Watcher сначала будет иметь операцию оценки, ее оценка заключается в выполнении функции, эта функция будет выполнять рендеринг, который может иметь операцию компиляции шаблона в функцию рендеринга, затем генерировать vnode (виртуальный дом), а затем преобразовать виртуальный дом, примененный к представлению;
Среди них, когда виртуальный дом применяется к представлению (diff будет обсуждаться позже), выражение в нем должно быть оценено (например, {{message}}, мы обязательно получим его значение и отрендерим), это вызовет соответствующая операция геттера для завершения сбора зависимостей;
Когда данные изменяются, он уведомляет Watcher на уровне компонентов, а затем оценивает повторный сбор зависимостей и повторную визуализацию представления;

Разница между вычислениями и часами Vue

вычисляется для вычисления нового свойства и монтирования свойства в vm (экземпляр Vue), в то время как watch предназначен для мониторинга данных, которые уже существуют и были смонтированы в vm, поэтому watch также может отслеживать изменение вычисляемого вычисляемого свойства (другие включают данные , реквизит)
Суть вычисляемого — это ленивый оценочный наблюдатель, обладающий способностью кеширования.Только при изменении зависимости и первом обращении к вычисляемому свойству будет вычислено новое значение, а watch вызывает функцию выполнения при изменении данных.
С точки зрения сценариев использования, вычисление применяется к одним данным, на которые влияют несколько данных, а наблюдение применяется к одним данным, влияющим на несколько данных;

Принцип вычисления заключается в том, как он связан с вычисляемыми данными.

необходимо учитывать
- как установить связь с другими атрибутами;
- После изменения имущества, как уведомить рассчитать пересчет имущества;
При инициализации данных Object.defineProperty будет использоваться для захвата всех данных свойств;
Инициализируйте вычисляемое, оно будет проходить по всем вычисляемым и вызывать функцию initComputed для каждого вычисляемого свойства, чтобы сгенерировать экземпляр наблюдателя;
Сбор зависимостей будет выполняться в экземпляре наблюдателя;
При вычислении:
- Назначит текущий экземпляр наблюдателя Dep.target;
- Выполнение метода вычисления геттера атрибута;
- Когда расчетные атрибуты для чтения, он заставит эти соответствующие методы рассчитаны свойства Gotter. Когда определяется, что атрибут рассчитывается зависимым, рассчитывает свойство корреляции, будут ли зависимости создавать как наблюдение за расчетом атрибута, добавленного к сообщению в подписчике DEP, эти свойства рассчитываются в наблюдателе.
По завершении присваивает Dep.target значение null и возвращает результат функции оценки.

Семь взаимодействий между компонентами vue

1.props и $эмит
- Родительский компонент передает данные дочернему компоненту через пропсы, а дочерний компонент передает данные родительскому компоненту через события запуска $emit.
2. Функция привязки $attrs и $listeners
- Если у родительского компонента A есть дочерний компонент B, а у компонента B есть компонент C под компонентом B, что, если компонент A хочет передать данные компоненту C? Если вы продолжите использовать описанный выше метод, он станет очень сложным и не будет способствовать обслуживанию; Vue 2.4 начал предоставлять $attrs и $listeners для решения этой проблемы, позволяя компонентам A передавать сообщения компоненту C.
3. Центральная шина событий Шина событий
- Создайте новый объект шины событий Vue, затем инициируйте событие через bus.$emit и прослушивайте инициированное событие через bus.$on.
4. Внедрение зависимостей: предоставление и внедрение
- Родительский компонент предоставляет переменную через провайдера, а затем дочерний компонент использует инъекцию для внедрения переменной.
- Независимо от того, насколько глубоким является дочерний компонент, до тех пор, пока вызывается inject, данные в провайдере могут быть внедрены. Вместо того, чтобы ограничиваться только получением данных из свойств свойства текущего родительского компонента, можно вызывать дочерние компоненты, если они находятся в пределах жизненного цикла родительского компонента.
```
// 父组件
name: "Parent",
provide: {
for: "demo"
},
components:{
childOne
}
// 子组件
name: "childOne",
inject: ['for'],
data() {
return {
  demo: this.for
}
},
components: {
childtwo
}
```
5.v-model
- Когда родительский компонент передает значение дочернему компоненту через v-model, он автоматически передает атрибут value prop, и значение, связанное v-model, автоматически изменяется в дочернем компоненте через this.$emit('input', вал)
Подтекстовая котировка: REF и $ REFS
7. Отец цепь и индекс Sub: $ родитель и $ дети
8. Борадкаст и рассылка в vue1
- Этот метод предусмотрен в vue1.0, но не в vue2.0, но многие программы с открытым исходным кодом сами инкапсулируют этот метод, например min ui, element ui и iview.
9.vuex

Шаблоны проектирования, используемые для связи между компонентами?

Пока нет ответа~~~~ (вопрос из телефонного интервью Али)

принцип vuex

Ссылаться на:Deepen Vuex принцип (на)
Ссылаться на:Анализ исходного кода Vuex

Состояние vuex реализуется с помощью отзывчивых данных vue.

// 使用 this.$store.getters.xxx 获取 xxx 属性时，实际上是获取的store._vm.data.$$state 对象上的同名属性
get state () {
	return this._vm._data.$$state
}
// 处理state 和 getter的核心函数resetStoreVM(this, state)
store._vm = new Vue({
	data: {
	  $$state: state
	}
})
// 由于vue的data是响应式的，所以，$$state也是响应式的，那么当我们 在一个组件实例中 对state.xxx进行 更新时，基于vue的data的响应式机制，所有相关组件的state.xxx的值都会自动更新，UI自然也会自动更新

Геттер реализован с помощью вычисляемого свойства Vue.

// wrappedGetters方法
const computed = {};
// 处理getters
forEachValue(wrappedGetters, (fn, key) => {
    computed[key] = () => fn(store) // 将getter存储在computed上
    //this.$store.getters.XXX的时候获取的是store._vm.XXX
    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key], 
      enumerable: true
    })
})

Идея его дизайна точно такая же, как у центральной шины событий Vue. Реализация центральной шины событий заключается в простом создании нового объекта vue и использовании характеристик объекта vue (испускание и включение) в качестве коммуникационного моста для других компонентов для обеспечения связи и обмена данными между компонентами!

Разница между режимом хеширования и режимом истории в Vue-router

В URL-адресе режима хеша всегда есть знак #. Мы используем этот режим по умолчанию в разработке. Итак, когда использовать режим истории? Если пользователь рассматривает спецификацию URL-адреса, то необходимо использовать режим истории, потому что режим истории не имеет знака #, это обычный URL-адрес, подходящий для продвижения.
Конечно, его функции также различаются. Например, когда мы разрабатываем приложение, есть страница обмена, затем эта общая страница создается с помощью vue или react. Мы делимся этой страницей со сторонним приложением. URL-адрес в некоторых Приложения не могут иметь знак #, поэтому, если вы хотите удалить знак #, вы должны использовать режим истории, но есть еще одна проблема с использованием режима истории.Вам необходимо сотрудничать с бэк-энд человеком и позвольте ему настроить перенаправление URL-адресов apache или nginx, и все будет в порядке для перенаправления на маршрут вашей домашней страницы.
Хэш-режим маршрутизации фактически использует окно для наблюдения за событием onhashchange, то есть, если хеш-значение (значение после #) в вашем URL-адресе изменяется, внешний интерфейс может отслеживать и выполнять некоторые ответы (сделать что-то), в таким образом, даже если внешний интерфейс не инициирует http-запрос, он может найти блок кода соответствующей страницы и загрузить его по запросу.
pushState и replaceState, роль этих двух артефактов заключается в замене URL-адреса без обновления страницы, точно так же, как при продаже собачьего мяса, http не запрашивает ресурсы по пути сервера, после обновления он выставит этот не- существующая «Овечья голова», показывающая 404. Это требует некоторых ухищрений на стороне сервера для перенаправления запросов о несуществующем пути к файлу входа (index.html).

пользовательский компонент

Ссылаться на:Vue — о пользовательских компонентах
secondDemoComponent.js

index.js: файл index.js помогает нам зарегистрировать все пользовательские компоненты через Vue.component и, наконец, экспортирует объект, содержащий метод установки для Vue.use().

Единый импорт

import global from './components/global/index.js'
Vue.use(global)

компьютерная сеть

Классификация кодов состояния http? Что такое без гражданства?

http без гражданства
- Состояние клиента не сохраняется на сервере, и клиент каждый раз должен приносить свое состояние для запроса к серверу;
- Каждый запрос независим, и не связаны напрямую с и
Классификация кодов состояния
- 1ХХ обозначает информацию, указывающую на то, что информация получена и ее обработка продолжается;
- 2XX Success — Указывает, что запрос успешно получен;
- перенаправление 3XX, указывающее, что запрос необходимо выполнить для дальнейших операций;
- ошибка клиента 4XX, запрос юридически неверен или запрос не может быть выполнен;
- 5XX ошибка на стороне сервера, серверу не удалось выполнить законный запрос;
- Пример:
  - 200 — запрос выполнен успешно;
  - 302: перенаправление;
  - 304: Страница не изменялась с момента последнего запроса;
  - 400: ошибка синтаксиса запроса клиента;
  - 401: проблема с разрешением;
  - 403 сервер принимает запрос, но отказывается предоставлять услугу;
  - 404, запрошенный ресурс не существует;
  - внутренняя ошибка сервера 500;

Разница между http 1.1 и http 2

HTTP/2 использует двоичный формат вместо текстового формата
- По сравнению с текстовыми протоколами, такими как HTTP/1.x, бинарные протоколы более эффективны для синтаксического анализа, более компактны «по сети» и, что наиболее важно, имеют меньше ошибок.
HTTP/2 полностью мультиплексирован, а не упорядочен и блокируется — параллелизм возможен только при одном соединении.
- HTTP/1.x имеет проблему, называемую блокировкой заголовка строки, что означает, что более эффективно отправлять только один запрос за раз для соединения, и он будет замедляться, если их слишком много. HTTP/1.1 пытался использовать конвейерную обработку для решения этой проблемы, но эффект неидеален (большой объем данных или медленный ответ будут мешать запросу за ним).Кроме того, из-за сетевой среды (посредника) И сервер не может поддерживать конвейер очень хорошо, что затрудняет развертывание. И мультиплексирование (Multiplexing) может очень хорошо решить эти проблемы, потому что оно может обрабатывать запрос и ответ нескольких сообщений одновременно, даже одно сообщение может смешиваться с другим в процессе передачи. Таким образом, клиенту нужно только одно соединение для загрузки страницы.
HTTP/2 снижает накладные расходы, используя сжатие заголовков
- HTTP2 сжимает заголовок через gzip и сжимает, а затем отправляет, при этом клиент и сервер одновременно ведут таблицу информации о заголовке, и все поля записываются в эту таблицу, так что при каждой последующей передаче требуется только передать идентификатор индекса в таблице.Идентификатор индекса может знать значение заголовка
HTTP/2 позволяет серверу активно «проталкивать» ответы в кеш клиента.
- HTTP2 поддерживает упреждающую отправку контента клиентам без запроса разрешения со стороны клиента.

Разница между запросами post и get

основная разница

Приложение: когда атрибут метода формы установлен на публикацию, отправляется запрос на публикацию, а остальные являются запросами на получение (без учета AJAX);
Метод передачи параметров: запрос get отправляет параметры запроса через URL-адрес, запрос post отправляет параметры запроса через тело запроса;
Безопасность: запрос на получение отправляет параметры запроса напрямую через URL-адрес, и параметры видны в адресной строке, что не очень безопасно; запрос на публикацию отправляет параметры запроса через тело запроса, и параметры невидимы в адресной строке. , что относительно безопасно;
Ограничение размера: запрос на получение отправляет параметры запроса непосредственно через URL-адрес, а длина URL-адреса ограничена 255 байтами, поэтому запрос на получение не может отправлять слишком много параметров, а запрос на отправку отправляет параметры через тело запроса. , а длина не ограничена.
- Длина данных, отправляемых методом Get, не ограничена, но сам браузер IE имеет ограничение максимальной длины на длину URL-адреса адресной строки (5.7 Примечание: у браузера есть ограничение на заголовок запроса, оно не может превышать много~~~): 2048 символов.

Расширенное отличие

Суть GET — «получить», а суть POST — «дать». Содержимое GET может кэшироваться браузерами, а данные POST — нет.
1. get генерирует TCP-пакет, один из которых является заголовком запроса, а другой — телом запроса, post генерирует два TCP-пакета;
2. В одном запросе get завершается за один раз, а post необходимо отправить информацию дважды в некоторых браузерах (кроме Firefox), поэтому get работает быстрее и эффективнее, чем post.

Что такое кроссдоменность и каковы методы и принципы решения кроссдоменности?

1. Различные источники являются междоменными
2. Политика того же происхождения — это политика безопасности браузера.
3. Протокол, доменное имя и номер порта точно такие же, что означает одно и то же происхождение.Пока есть одно отличие, оно междоменное.
4. Особый случай: Ajax может анализировать строки только при оценке доменного имени, в результате чего (localhost и 127.0.0.1) в его представлении также является междоменным запросом.
5. Способ решения кроссдоменности обычно использует cors и jsonp
6.JSONP
- 1. JSONP — это навык, а не новая технология
- 2. Использование тега атрибута scirpt src не ограничено междоменными характеристиками
- 3. Решите междоменное:
  - 1. Сторона браузера: динамически генерируйте теги сценария, заранее определяйте функцию обратного вызова и добавляйте атрибут src в нужное время, чтобы указать запрошенный адрес.
  - 2. Серверная сторона: фон получает функцию обратного вызова, включает данные в дескриптор, вызываемый функцией обратного вызова, и возвращает их вместе.
  - 3. Только поддержка запроса на получение

function jsonp({url,params,callback}){
  return new Promise((resolve,reject)=>{
    // 创建srcipt
    let script = document.createElement("script")
    window[callback] = function(data){
      resolve(data)
      document.body.removeChild(script)
    }
    // 参数重新格式化
    params = {...params,callback} // wd=b&callback=show
    let arrs = []
    for(let key in params){
      arrs.push(`${key}=${params[key]}`)
    }
    // 后台获取数据的接口拼接上参数
    script.src = `${url}?${arrs.join('&')}`
    // srcipt插入
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'Iloveyou' },
  callback: 'show'
}).then(data=>{
  console.log(databufen)
})

7.CORS
- 1. На стороне браузера делать нечего;
- 2. Установите заголовок ответа на стороне сервера: Access-Control-Allow-Origin
- 3.cors — это технология, которая, по сути, позволяет движку ajax разрешать междоменные
- 4. Поддерживаются как запросы на получение, так и отправку

Почему кросс-домены могут решать междоменные задачи? // СДЕЛАТЬ

Это связано с запросом опции, отправленным в первый раз;
При междоменном браузере перехватит Ajax-запрос и добавит Origin в http-заголовок.

проблема с браузером

кеш браузера

Front-end оптимизация: введение в технологию кэширования браузера

Клиент два хранилища

Разница между использованием sessionStorage и localStorage

Жизненный цикл:
- Жизненный цикл localStorage (локальное хранилище)постоянный, что означает, что информация localStorage будет храниться вечно, если пользователь явно не очистит ее в пользовательском интерфейсе, предоставляемом браузером.
- Жизненный цикл sessionStorage (хранилище сеансов)текущее окно или вкладка, после закрытия окна или вкладки все данные, хранящиеся в sessionStorage, будут очищены.
Разные области: разные браузеры не могут обмениваться информацией в localStorage или sessionStorage.
Разные страницы одного и того же браузера могут совместно использовать одно и то же localStorage (страницы принадлежат к одному доменному имени и протоколу, хосту и порту);
- Информацию SessionStorage нельзя использовать для разных страниц или вкладок.
- LocalStorage может читать/изменять одни и те же данные localStorage по тому же протоколу, тому же имени хоста и тому же порту.
- SessionStorage немного более строгий, чем localStorage, помимо протокола, имени хоста и порта, он также должен находиться в том же окне (то есть на вкладке браузера).
Размер хранилища: размер данных хранилища localStorage и sessionStorage обычно составляет: 5 МБ;
Место хранения: и localStorage, и sessionStorage хранятся на стороне клиента и не взаимодействуют с сервером.
Тип содержимого хранилища: localStorage и sessionStorage могут хранить только строковые типы.Для сложных объектов для их обработки можно использовать stringify и parse объектов JSON, предоставляемых ECMAScript;
Способ получения: localStorage: window.localStorage;sessionStorage: window.sessionStorage;
Сценарий приложения: localStoragese: обычно используется для долгосрочного входа в систему (+ чтобы определить, вошел ли пользователь в систему), подходит для долгосрочного хранения данных локально; sessionStorage: одноразовый вход для конфиденциальных учетных записей.

Каковы критерии, используемые для выбора localStorage и cookie?

Это должно быть связано с сервером.
Файл cookie передается по умолчанию каждый раз, когда отправляется запрос, но он не передается, когда вещь существует в локальном хранилище, поэтому ее необходимо записать;

Почему жизненный цикл сеанса только в одном сеансе?

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

Разница между хранилищем файлов cookie и хранилищем в веб-хранилище

Как продукты новой эры, localStorage и sessionStorage имеют большие преимущества по сравнению с куки-файлами старой эпохи. Есть три преимущества:
- Во-первых, это объем данных, которые можно сохранить.Файлы cookie могут хранить максимум 4 КБ данных, в то время как localStorage и sessionStorage могут хранить максимум 5 МБ.Текущие стандарты, поддерживаемые основными браузерами, одинаковы;
- Во-вторых, с точки зрения функции файлы cookie могут хранить данные только типа String. В прошлом для локального хранения пользовательских данных данные необходимо было объединить в строку, а затем сохранить в файле cookie. данные.Сначала взять весь объект cookie.To(String объект), потом разбить по правилам сплайсинга, а потом получить нужные данные, очень хлопотно получить доступ! localStorage и sessionStorage не только поддерживают традиционный тип String, но и хранят в нем объекты json, что значительно упрощает доступ к данным.Преимущества json повторяться не буду, localStorage и sessionStorage, несомненно, более современные;
- В-третьих, куки-файлы необходимы.Функция куки-файлов заключается во взаимодействии с сервером и существует как часть спецификации http, в то время как веб-хранилище предназначено только для локального «хранилища»;
- В-четвертых, на семантическом уровне синтаксис localStorage и sessionStorage более элегантный и простой.
```
//cookie的操作
设置cookie: document.cookie = 'key=value';
获取cookie: document.cookie;
删除cookie: document.cookie = "key=value;max-age=0";
设置max-age存储期限: document.cookie = "key=value;max-age=1000"; // 1000秒

//web storage操作
保存数据 setItem(key,value)
读取数据 getItem(key)
删除单个数据 removeItem(key)
清空全部数据 clearItem()
获取数据索引 key(index)
```

ядро браузера? и общие проблемы совместимости браузера

ядро браузера
- Trident (ядро IE): представлен IE, IE6, IE7, IE8 (Trident 4.0), IE9 (Trident 5.0), IE10 (Trident 6.0).
- Gecko (ядро Firefox): Браузер с ядром Gecko по-прежнему используется большинством пользователей Firefox (Firefox), поэтому его иногда называют ядром Firefox.
- webkit (ядро Safari, прототип ядра Chrome, с открытым исходным кодом): это собственное ядро Apple и ядро, используемое браузером Apple Safari. Apple Safari также работает.
- presto (ядро до Opera) (устарело): ядро, используемое Opera 12.17 и более ранними версиями, больше не поддерживается и не рекомендуется. Теперь Opera перешла на ядро Google Chrome Blink.

Распространенные проблемы совместимости браузера

Проблемы совместимости в HTML

Внешний патч по умолчанию и внутренний патч вкладок разных браузеров разные;
- Сценарий: Напишите несколько случайных тегов. Без контроля стиля поля и отступы будут совершенно другими.
- Решение: сначала удалите стиль по умолчанию *{margin:0;padding:0;};
После того, как метка атрибута блока является плавающей, если есть горизонтальное поле, это поле больше, чем настройка в IE6 (то есть ошибка двойного поля);
- Сценарий. Распространенным признаком является то, что последний блок в IE6 перемещается на следующую строку;
- Решение: добавьте display:inline; в элемент управления стилем метки float, чтобы преобразовать его во встроенный атрибут.
z-индекс недействителен в IE6
- Сценарий: z-индекс родительского элемента элемента установлен равным 1, тогда z-индекс его дочернего элемента будет недопустимым, а его уровень унаследует настройку родительского элемента, вызывая некоторые ошибки настройки уровня;
- Причина: z-index работает небольшое помещение, которое является атрибутом позиции элемента, чтобы быть относительным, абсолютным или фиксированным.
- Решение: 1. Изменить позицию: относительно позиции: абсолютная 2. Убрать плавающую позицию 3. Добавить атрибут позиции к плавающему элементу (такой как относительная, абсолютная и т.д.).
При написании стиля тега a написанный стиль не имеет никакого эффекта, фактически перезаписывается только написанный стиль.
- Правильный порядок тегов должен быть: ссылка/посещение/наведение/активность
24-битные изображения png, не совместимые с прозрачным дном в ie6
- Решение: Используйте прозрачные изображения png, но следует отметить, что 24-битные изображения PNG не поддерживаются в IE6.Есть два решения:
  - Используйте 8-битные изображения PNG;
  - Подготовьте специальный набор изображений для IE6

проблемы совместимости js в разных браузерах

Совместимость мониторинга событий;
- IE не поддерживает addEventListener;
- Решение: используйте attachEvent для IE

var addHandler = function(el, type, handler, args) {
    if (el.addEventListener) {
        el.addEventListener(type, handler, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, handler);
    } else {
        el['on' + type] = handler;
    }
};
var removeHandler = function(el, type, handler, args) {
    if (el.removeEventListener) {
        el.removeEventListener(type, handler, false);
    } else if (el.detachEvent) {
        el.detachEvent('on' + type, handler);
    } else {
        el['on' + type] = null;
    }
};

Совместим с event.target, элементом DOM, вызвавшим событие.
- IE6789 не поддерживает event.target;
- Решение: Event.Scretement;

// 以下为兼容写法
target = event.target || event.srcElement;

Предотвратить совместимость системы по умолчанию
- IE6789 не поддерживает event.preventDefault;

// 以下为兼容写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

Совместимость для предотвращения всплытия событий
- IE6789 не поддерживает event.stopPropagation;

// 以下为兼容写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = false);

деловая проблема

360 поисковых изображений, таких как макет потока водопада

Ленивая загрузка изображения

Высокоэффективный метод: getBoundingClientRect() напрямую получает расстояние от элемента до вершины.
Причина: Нам часто нужно разместить много картинок на странице, производительность - большая проблема, а загрузка всех картинок за один раз обычно занимает много времени, поэтому это хорошее решение для загрузки, когда нужен предварительный просмотр.
Идея: Когда картинка появится в видимой области браузера, передать ей url картинки, а картинку тоже можно создать в это время, а картинку завернуть в контейнер, например li или div , а URL-адрес изображения помещается в пользовательский атрибут data-src его контейнера;
Обработать:
- Добавьте настраиваемый атрибут к элементу тега img, например data-src, а реальный src будет пустым;
- Оценивается, что расстояние между изображением и верхней частью страницы меньше расстояния прокрутки браузера плюс высота видимой области, то есть оно загружается, когда появляется в видимой области;
```
// h = window.innerHeight——可视区域高度
// s = document.documentElement.scrollTop || document.body.scrollTop——滚动距离;
// getTop(imgs[i]）通过getBoundingClientRect()获取当前图片距离顶端的高度
if (h + s > getTop(imgs[i]) && !imgs[i].getAttribute('src'))
```
- загрузить изображениеimgs[i].src = imgs[i].getAttribute('data-src');
- Наконец, назначьте функцию прокрутки страницы элементу window.onload и выполните операцию после загрузки всех элементов, это очень важный шаг!
```
window.onload = window.onscroll = function () {
	 // 懒加载的函数
 lazyLoad(imgs);
}
```

Проблемы, возникшие в проекте

Проблема использования get in ajax

Вопрос 1. Кэш: когда URL-адрес, доступный каждый раз, один и тот же, клиент напрямую считывает содержимое в локальном кеше, даже если фоновые данные изменяются, передний план не изменится;
- Решение: в ? Свяжите num=[случайное число Math.random()] или num=[timestamp new Date().getTime()], '1.php?username="May"&'+num (здесь нет имени переменной, Избегайте конфликтов с фоновыми параметрами)

оптимизация производительности

Спрайт
Сокращение операций с домом: прокси событий, фрагмент;
Сжать js и css, html;

Основные проблемы с фреймворком

Разница между vue, react и angular

Изучите шаблоны angular и технологию привязки данных;
Изучите компонентизацию реакции и технологию виртуального DOM;
При небольшом размере эффективность работы высока, кодирование простое и подходит для разработки ПК/мобильных терминалов;
Он фокусируется только на самом пользовательском интерфейсе и может легко вводить плагины vue и другие проекты разработки сторонних библиотек;

Вопросы по программированию (видеоинтервью ByteDance)

Первый вопрос: определите класс Queue, первый вызов может выводить 1 каждые 1000 секунд, а второй вызов может выводить 2 каждые 2000 секунд... Наконец, вы можете вызвать run();

new Queue()
.task(() => {
    console.log(1)
}, 1000) .task(() => {
console.log(2)
}, 2000) .task(() => {
console.log(3)
}, 3000) .run()

Второй вопрос: определите функцию, функцию суммирования, которую можно вызывать бесчисленное количество раз, и вызовите valueOf в конце, чтобы отобразить окончательный результат суммирования;

sum(1)(2)(3)(4).valueOf()

Вопрос 3: Первый шаг - это Promise+axios для реализации параллельных запросов, после написания требуется реализовывать по 5 параллельных запросов каждый раз на этой основе (нет ~~~);

//  Promise+axios实现并发请求
// 实现并发5次请求

// 第一个答案
function getRequest(){
    return axios.get(url)
};
function postrequest(){
    return axios.post(url)
};
axios.all([getRequest(),postrequest()])
.then()

Краткое изложение недавнего интервью, некоторые из них были заданы во время интервью, а некоторые, вероятно, будут заданы при чтении статьи. У одних есть ответы, у других ответов нет.Есть две причины отсутствия ответов: одна — общая проблема, и я надеюсь, что смогу подробно разобраться с ответом на более высоком уровне, когда у меня будет время; еще не решен. , но мы изучим и дадим ответы после завершения интервью, и вы особенно можете дать ответы или идеи на эти вопросы в сообщении.

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

Например: принцип реализации new или instanceof? Второй вопрос: пожалуйста, напишите новый или instanceof; другой пример, разница между файлом cookie и сеансом, второй вопрос: с точки зрения сервера, в чем разница между файлом cookie и сеансом? Затем: почему сеанс действителен только для одного сеанса, это поле сервера? Или что с сервером? Опять же, понимаете ли вы взаимодействие компонентов vue? Второй вопрос: какие шаблоны проектирования используются для взаимодействия этих компонентов? Наконец, вы использовали npm и пряжу? Второй вопрос: как вы разрешаете зависимости версий пакетов npm? Каков принцип package-lock?

Что я хочу сказать, так это то, что вещи, которые можно представить словами, очень просты, но если вы хотите углубиться в суть, то нет никакого результата~~~ Великая цель всего этого - сделать запись, вы можете взять посмотрите на это, прежде чем идти наверх в интервью~~~ Инженеры находятся на работе, вы всегда должны поддерживать капитал, который вы можете оставить, знайте это и знайте, почему! Кроме того, вы должны подготовиться к собеседованию, по крайней мере, за неделю~~~~