Моя предварительная подготовка к собеседованию на 2021 год

Я составил интеллект-карту фронтенд-интервью и поместил ее в конец статьи, так как картинка слишком большая, рекомендуется ее скачать и просмотреть.

В этой статье представлена общая идея собеседования и некоторые базовые знания, которые надеются принести вам некоторую помощь и помочь вам найти хорошую работу, которую вы хотите.

Представьтесь (только для справки)

Обратите внимание (преодолейте нервозность, говорите медленно, смотрите прямо на интервьюера)

Добрый день, интервьюер, меня зовут **, сегодня я претендую на должность фронтенд-инженера в вашей компании. Я занимаюсь front-end разработкой более двух лет, у меня более X лет опыта разработки Vue и один год опыта разработки React, в моей прошлой компании я в основном занимался разработкой страниц H5, бэкграунда. системы управления и гибридные приложения. Обычно мне нравится посещать некоторые технические сообщества, чтобы обогатить свои технологии, такие как Sifu, Nuggets и т. д., и я также самостоятельно разработал личный веб-сайт блога, чтобы записывать результаты своей работы и опыт обучения. У меня относительно мягкий характер, и я более общителен в общении с коллегами и друзьями, мне нравится полностью посвящать себя разработке кода на работе, и я всегда серьезно и ответственно отношусь к работе. Интервьюер, это мое введение, спасибо.

Введение в конкретный проект

Этот раздел будет задавать с высокой вероятностью, обратите внимание на формулировку языка, вы не сделали адекватных приготовлений, не паниковали бы, это чувство безопасности для себя.Пример:

XXAPP

Описание проекта: XXAPP — это многофункциональное программное обеспечение для частного банковского обслуживания, которое в основном имеет такие функции, как операции со счетами, переводы и денежные переводы, покупка и продажа сертификатов депозитных продуктов, пополнение и снятие средств и т. д. Оно использует собственный встроенный метод веб-просмотра.messageHandlers[fn].postMessage(data)метод.Androidиспользоватьwindow.AndroidWebView[fn] (data)

Основные моменты и трудности проекта: после истечения времени входа в систему вы продолжите возвращаться на исходную рабочую страницу после повторного входа в систему.

ххх банковский проект

ххх торговый центр

xxx система управления фоном

xxx

HTML, CSS связанные

Новые возможности и семантика html5

Семантические теги: заголовок, навигация, основная статья, раздел в сторону, нижний колонтитул.

语义化意味着顾名思义，HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 
header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。
语义化的优点有:
代码结构清晰，易于阅读，利于开发和维护
方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

Механизм рендеринга браузера, перерисовка, перекомпоновка

Процесс создания веб-страницы:

HTMLанализируется парсером HTML вDOMДерево
cssанализируется парсером css вCSSOM Дерево
комбинироватьDOMдерево иCSSOMдерево, сгенерировать дерево рендеринга (Render Tree)
создать макет (flow), то есть плоское соединение всех узлов всех деревьев рендеринга
нарисуй схему(paint)на экране

Реаранжировка (также называемая перекомпоновкой):когдаDOMизменения влияют на геометрическую информацию элемента (DOMположение и размер объекта), браузеру необходимо пересчитать геометрические свойства элемента, чтобы поместить его в правильное положение в интерфейсе, этот процесс называется перекомпоновкой. вызывать:

Добавить или удалить видимые элементы DOM
Изменения размера элемента - поля, отступы, границы, ширина и высота

Перерисовать:Когда внешний вид элемента изменяется без изменения макета, процесс перерисовки внешнего вида элемента называется перерисовкой. вызывать:

изменить элементcolor、background、box-shadowРавные атрибуты

Предложения по оптимизации перестановки:

Отдельные операции чтения и записи
Модификация стилей
Кэш нужно модифицироватьDOMэлемент
только изменитьposition：absoluteилиfixedэлемент, мало влияет на другие элементы
начинается анимацияGPUускорить,translateиспользовать3DРазнообразие

transformбез перерисовки, без перекомпоновки Потому чтоtransformОн относится к синтетическому признаку, и синтетический признак осуществляется.transition/animateПри анимации создается составной слой. Это позволяет визуализировать анимированные элементы в отдельном слое. Когда содержимое элемента не изменилось, перерисовывать не нужно. Браузер создает кадры анимации путем рекомпозиции.

css блочная модель

всеHTMLЭлементы можно увидеть в виде блоков в CSS,"box model"Этот термин используется при проектировании и выкладке.CSSБлочная модель — это, по сути, коробка, которая инкапсулирует окружающую среду.HTMLэлемент, который включает в себя: поля, границы, отступы и фактическое содержимое. Блочная модель позволяет размещать элементы в пространстве между другими элементами и границами окружающих элементов.

приоритет стиля css

!important>style>id>class

Что такое БФК? Каковы правила компоновки для BFC? Как создать БФУ? Приложение БФС?

BFCдаBlock Formatting Context Аббревиатура контекста форматирования блока.BFCЭто концепция макета CSS, среда, в которой элементы внутри не влияют на элементы снаружи. Правила компоновки: блок — это объект и основная единица макета CSS, а страница состоит из нескольких блоков. Тип элемента и свойство display определяют тип Box. Различные типы ящиков будут участвовать в разныхFormatting Context. Создать: плавающий элементdisplay：inline-block position:absoluteПрименение: 1. Точки принадлежат разнымBFCможет предотвратитьmarginПерекрытие 2. Очистить внутренний плавающий элемент 3. Адаптивный макет с несколькими столбцами

DOM, BOM объекты

BOM（Browser Object Model）Относится к объектной модели браузера, к которой можно получить доступ и управлять ею в окне браузера. Используя BOM, разработчики могут перемещать окна, изменять текст в строке состояния и выполнять другие действия, не связанные напрямую с содержимым страницы. СделатьJavaScriptВозможность «разговаривать» с браузером.DOM （Document Object Model）относится к объектной модели документа, через которую можно получить доступHTMLВсе элементы документа.DOM даW3C(Консорциум всемирной паутины).DOMдоступ определенHTMLа также XMLСтандарты документации: «Объектная модель документа W3C (DOM) — это независимый от платформы и языка интерфейс, который позволяет программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документа».W3C DOMСтандарт разделен на 3 разные части:

основнойDOM- Стандартная модель для любого структурированного документа
XML DOM- Стандартная модель для XML-документов
HTML DOM- Стандартная модель для HTML-документов

что XML DOM?XML DOMОпределяет объекты и атрибуты всех XML-элементов, а также методы доступа к ним. Что такое HTML DOM? HTML DOM определяет объекты и свойства всех элементов HTML, а также методы доступа к ним.

связанные с JS

типы данных js, typeof, instanceof, преобразование типов

string、number、boolean、null、undefined、object(function、array)、symbol(ES10 BigInt)
typeofВ основном используется для определения типа данных. Возвращаемое значениеstring、boolean、number、function、object、undefined。
instanceofЭкземпляр, который определяет, кто является объектом.
nullпредставляет собой пустой объектundefinedПредставляет переменную, которая была объявлена в области видимости, но ей не присвоено значение.

Закрытие (высокая частота)

Замыкание — это функция, которая имеет доступ к переменной в области действия другой функции — Advanced JavaScript Programming

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

Даже если функция выполняется за пределами текущей лексической области видимости — «JavaScript, которого вы не знаете».

Использование закрытия:
1. Возможность доступа к лексической области, в которой была определена функция (предотвращает ее повторное использование)
2. частная переменная
3. Объем ложного блока
4. Создать модуль
Недостатки замыканий: переменные функции всегда будут храниться в памяти, а слишком большое количество замыканий может привести к утечкам памяти

Прототип, цепочка прототипов (высокая частота)

прототип:присущий объекту__proto__свойство, которое указывает на объектprototypeСвойства прототипа.

Цепь прототипа:Когда мы получаем доступ к свойству объекта, если свойство не существует в объекте, то оно обращается к своему объекту-прототипу, чтобы найти это свойство, а у объекта-прототипа будет свой собственный прототип, поэтому мы продолжаем его искать. это концепция цепочки прототипов. Конец цепочки прототипов обычноObject.prototypeВот почему наш вновь созданный объект можно использоватьtoString()и другие причины.

Функции: JavaScriptОбъекты передаются по ссылке, и каждая новая объектная сущность, которую мы создаем, не имеет собственной копии прототипа. Когда мы изменяем прототип, связанные с ним объекты также наследуют изменения.

это указывает на новое ключевое слово

thisОбъект — это атрибут в контексте выполнения, указывающий на объект, для которого в последний раз вызывался метод.thisравныйwindow, и когда функция вызывается как объект, это равно этому объекту. В реальном развитии,this О наведении можно судить по четырем режимам вызова.

Вызов функции, когда функция не является свойством объекта, она вызывается непосредственно как функция,thisУказывает на глобальный объект.
вызов метода, если функция вызывается как метод объекта,thisуказывает на этот объект.
вызов конструктора,thisуказать на этоnewНедавно созданный объект.
Четвертыйapply 、 call 和 bind В режиме вызова все три метода могут отображать указатель this указанной вызывающей функции.applyПолученный параметр представляет собой массив,callпринимает список аргументов, ``bind方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this指向除了使用новый ` будет изменен, в противном случае он не будет изменен.

new

Сначала создал новый пустой объект
Установите прототип, установите прототип объекта в прототип функцииprototypeобъект.
Пусть функцияthisУкажите на этот объект, выполните код конструктора (добавьте свойства к этому новому объекту)
Определить тип возвращаемого значения функции, если это тип значения, вернуть созданный объект. Если это ссылочный тип, возвращается объект этого ссылочного типа.

Объем, цепочка объемов, переменный подъем

作用域Отвечает за сбор и обслуживание набора запросов, состоящего из всех объявленных идентификаторов (переменных), и за соблюдение очень строгого набора правил, определяющих доступ к этим идентификаторам при выполнении кода в данный момент. (глобальная область, область действия, область действия блока). Цепочка областей видимости состоит в том, чтобы искать переменную слой за слоем из текущей области видимости, пока глобальная область видимости не будет найдена и все еще не найдена, она сдастся. Эта послойная связь作用域链.

Наследование (включая ES6), многократные методы наследования

(1) Первый原型链的方式来实现继承, но недостатком этого метода реализации является то, что когда он содержит данные ссылочного типа, они будут общими для всех объектов экземпляра, что легко может вызвать путаницу при модификации. Также нельзя передавать параметры супертипу при создании подтипа.

(2) Второй способ заключается в использовании借用构造函数Этот метод реализуется путем вызова конструктора супертипа в функции подтипа.Этот метод устраняет недостаток, заключающийся в невозможности передачи параметров в супертип, но одна проблема заключается в том, что он не может реализовать метод функции.Есть нет способа получить доступ к подтипу метода, определенному прототипом супертипа.

(3) Третий способ组合继承, наследование композиции — это способ объединить цепочку прототипов и заимствованные конструкторы. Наследование свойств типа достигается за счет заимствования функции-конструктора, а наследование методов достигается путем установки прототипа подтипа в экземпляр супертипа. Этот метод решает проблему, когда два вышеуказанных режима используются по отдельности, но поскольку мы используем экземпляр супертипа в качестве прототипа подтипа, конструктор супертипа вызывается дважды, в результате чего получается прототип подтипа. много ненужных атрибутов.

(4) Четвертый способ原型式继承, Основная идея прототипного наследования заключается в создании нового объекта на основе существующего объекта.Принцип реализации заключается в передаче объекта в функцию, а затем возврате объекта, прототипом которого является этот объект. Идея этого наследования заключается не в создании нового типа, а в реализации простого наследования объекта.Метод Object.create(), определенный в ES5, является реализацией прототипного наследования. Недостаток тот же, что и у прототипа цепным способом.

(5) Пятый способ寄生式继承, идея паразитического наследования заключается в создании функции, которая инкапсулирует процесс наследования, передавая объект, затем копируя копию объекта, затем расширяя объект и, наконец, возвращая объект. Этот процесс расширения можно понимать как своего рода наследование. Преимущество этого типа наследования заключается в реализации наследования для простого объекта, если объект не является нашим пользовательским типом. Недостатком является невозможность повторного использования функций.

(6) Шестой способ寄生式组合继承, недостатком композиционного наследования является то, что экземпляр супертипа используется в качестве прототипа подтипа, что приводит к добавлению ненужных свойств прототипа. Паразитическое композиционное наследование использует копию прототипа супертипа в качестве прототипа подтипа, что позволяет избежать создания ненужных свойств.

EventLoop

JSОн однопоточный. Чтобы предотвратить слишком долгую блокировку следующего кода при выполнении функции, синхронный код сначала помещается в стек выполнения, выполняется последовательно, а асинхронный код помещается в асинхронный код. Асинхронная очередь делится на очередь макрозадач и очередь микрозадач, поскольку время выполнения очереди макрозадач больше, поэтому очередь микрозадач имеет приоритет над очередью макрозадач. Представитель очереди микрозадач,Promise.then,MutationObserver, задача макросаsetImmediate setTimeout setInterval

родной аякс

ajaxЭто асинхронный метод связи, который получает данные с сервера и достигает эффекта частичного обновления страницы. Обработать:

СоздайтеXMLHttpRequestобъект;
передачаopenМетод передает три параметра Метод запроса(GET/POST)、url、同步异步(true/false);
мониторonreadystatechangeсобытие, когдаreadystateВозвращает, когда равно 4responseText;
Вызовите метод отправки для передачи параметров.

Всплывание событий, захват (делегат)

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

event.stopPropagation()или метод под т.е.event.cancelBubble = true;// останавливаем всплытие события

ES6

Новый тип символа представляет собой уникальное значение, которое используется для определения уникального имени атрибута объекта;
Все const / quices используются для объявления переменных, которые не повторяются, с объемами уровня блока. Есть временная мертвая зона, то есть нет изменений в переменных. (Const обычно используется для объявления постоянной);
Деструктуризация и присвоение переменных (в том числе массивов, объектов, строк, чисел и логических значений, параметров функций), остаточных операторов (...остальные);
строка шаблона (${data});
оператор спреда(массив, объект);;
функция стрелки;
Установить и сопоставить структуры данных;
Proxy/Reflect;
Promise;
асинхронная функция;
Class;
Синтаксис модуля (импорт/экспорт).

Vue

Кратко опишите MVVM.

MVVMдаModel-View-ViewModelСокращенное название,MVCсерединаControllerэволюционировать вViewModel。ModelСлои представляют модель данных,Viewпредставляет компонент пользовательского интерфейса,ViewModelдаViewа такжеModelLayer Bridge, данные будут привязаны кviewModelслоя и автоматически отображать данные на странице, а также уведомлять об изменении представленияviewModelДанные обновления слоя.

Расскажите о своем понимании жизненного цикла vue?

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

create阶段: экземпляр vue созданbeforeCreate: Перед созданием данные в данных и методах не были инициализированы в это времяcreated: Создано, в данных есть значение, не смонтировано
mount阶段: экземпляр vue монтируется на реальный узел DOM.beforeMount: Вы можете инициировать запрос сервера для перехода к даннымmounted: Дом можно оперировать в это время
update阶段: Когда данные данных в экземпляре vue изменяются, инициируйте повторную визуализацию компонента.beforeUpdate updated
destroy阶段: экземпляр vue уничтоженbeforeDestroy: Перед уничтожением экземпляра некоторые методы в это время могут быть уничтожены вручную.destroyed

`computed与watch`

смотреть монитор недвижимостиЭто объект, ключ — это свойство, за которым необходимо наблюдать, а значение — это соответствующая функция обратного вызова, которая в основном используется для отслеживания изменений некоторых конкретных данных, чтобы выполнять определенные операции бизнес-логики, отслеживать изменения свойств и необходимость выполнять асинхронное выполнение при изменении данных или для дорогостоящих операций

вычисляемые свойстваРезультат имущества кэшируется, когдаcomputedКогда свойства, от которых зависит функция, не изменились, результат будет считан из кеша при вызове текущей функции. Он будет пересчитан, если не изменятся зависимые реактивные свойства, в основном используемые в качестве свойствcomputedфункции должны использоватьreturnвернуть окончательный результатcomputedБолее эффективно, используйте первым

сцены, которые будут использоваться computed: используется, когда на атрибут влияют несколько атрибутов, например: функция расчета продуктов корзины покупок.watch: используется, когда одна часть данных влияет на несколько частей данных, например: данные поиска

Роль ключа в v-for

keyФункция в основном состоит в том, чтобы более эффективно сравнить, является ли каждый узел в виртуальной DOM одним и тем же узлом;
Vue在patchКлюч является необходимым условием в процессе определения того, являются ли два узла одним и тем же узлом.При рендеринге набора списков ключ часто является уникальным идентификатором, поэтому, если ключ не определен,VueМожно только считать, что два сравниваемых узла одинаковы, даже если это не так, что приводит к частым обновлениям элементов, делая весьpatchПроцесс относительно неэффективен и влияет на производительность;
Как видно из исходного кода, когда Vue оценивает, являются ли два узла одинаковыми, он в основном оценивает их ключ и тип элемента, поэтому, если ключ не установлен, его значение равноundefined, вы всегда можете подумать, что это две одинаковые ноды и могут делать только операции обновления, что приводит к большому количеству операций обновления dom, что явно не желательно.

Как общаться с компонентами vue

Взаимодействие компонентов родитель-потомок

родитель -> ребенокprops, ребенок -> родитель$on、$emit` 获取父子组件实例 $родитель,$ children Ref 获取实例的方式调用组件的属性或者方法 Provide, inject` официально не рекомендуются, но обычно используются при написании библиотек компонентов

Взаимодействие компонентов родственного компонента

Event BusРеализовать межкомпонентную коммуникациюVue.prototype.$bus = new Vue() Vuex

Взаимодействие компонентов между уровнями

$attrs、$listeners Provide、inject

Общие команды

v-if: определить, следует ли скрывать;
v-for: цикл данных;
v-bind:class: привязать свойство;
v-model: реализовать двустороннюю привязку

Принцип реализации двусторонней привязки

когдаVueКогда экземпляр создан, Vue просматривает свойства параметра данных, используяObject.definePropertyПревратите их в геттеры/сеттеры и отслеживайте зависимости внутри, уведомляя об изменениях при доступе к свойствам и их изменении. У каждого экземпляра компонента есть соответствующий экземпляр программы-наблюдателя, который записывает свойство как зависимость во время процесса рендеринга компонента, а затем уведомляет наблюдателя о необходимости пересчета при вызове установщика зависимости, тем самым вызывая обновление связанных с ним компонентов.

Есть ли реализация v-модели и как она работает?

vueДвусторонняя привязка является директивойv-model, вы можете привязать динамическое значение к представлению, и изменения в представлении могут изменить значение.v-modelсинтаксический сахар, по умолчанию эквивалентный:value和@input.
использоватьv-modelЭто может уменьшить количество громоздкого кода обработки событий, повысить эффективность разработки, а также улучшить читаемость кода.
Обычно используется на элементах формыv-model
Собственный элемент формы можно использовать напрямуюv-model, если вы хотите использовать его в пользовательском компоненте, вам нужно привязать значение в компоненте и обработать событие ввода
Я сделал тест, и вывод содержитv-modelОбнаружено, что функция рендеринга компонента шаблона будет преобразована в привязку атрибута значения и прослушивателя событий, а соответствующая операция обновления переменной будет выполнена в функции обратного вызова события, что показывает, что магия на самом деле делается компилятором vue.

Реализация nextTick

nextTickдаVueглобальныйAPI, в следующий разDOMВыполнение отложенного обратного вызова после завершения цикла обновления, используемого после изменения данных.$nextTick, вы можете получить обновленнуюDOM;
Vue выполняется асинхронно при обновлении DOM. Пока изменение данных обнаружено,VueБудет открыта 1 очередь, и все изменения данных, происходящие в одном и том же цикле событий, будут буферизированы. если то же самоеwatcherЗапущенный несколько раз, он будет помещен в очередь только один раз. Эта дедупликация во время буферизации важна для избежания ненужных вычислений иDOMОперация очень важна.nextTickМетод добавит функцию обратного вызова в очередь, чтобы гарантировать, что функция вызывается после завершения предыдущей операции DOM;
Например, когда я что-то делаю, я использую nextTick, передаю функцию обратного вызова и выполняю в ней операции dom;
У меня тоже есть простое пониманиеnextTickреализована, она будет вcallbacksДобавьте функцию, которую мы передали, а затем используйтеtimerFuncАсинхронный звонок им, будет предпочтительным асинхронным режимомPromise. Это заставляет меня понять, почему вы можетеnextTickвидеть вdomРезультат операции.

Понимание vnode, процесса компиляции и патча

vnode 虚拟DOM节点 创建：
export function Vnode (){
    return {
        tag:'div',
        children: 'span',
        attr:'',
        text:'你好!'
    }
}

Весь процесс после нового Vue

initProxy: Прокси области, который перехватывает данные, к которым обращаются другие компоненты внутри компонента.
initLifecycle：建立父子组件关系，在当前组件实例上添加一些属性和生命周期标识。 Такие как[Math Processing Error]parent,parent,refs,$children,_isMountedЖдать.
initEvents: добавить слушателя к событию, переданному родительским компонентом, который создает событие и прослушивает, а дочерний компонент создает событие, а дочерний компонент прослушивает
initRender: объявить [Math Processing Error] слоты и слоты и createElement() и т. д.
initInjections: вставка данных, инициализация вставки, обычно используется для более глубокой связи между компонентами.
initState: важно) data-responsive: инициализированное состояние. Резюме инициализации многих параметров: данные, методы, реквизиты, вычисляемые и наблюдаемые.
initProvide: Обеспечивает вставку данных.

Мышление: зачем сначала вводить, а потом предоставлять? ?

Ответ: 1. Во-первых, данные от предков должны быть объединены с данными текущего экземпляра, и равны по весу, поэтому initInjections внедряемых данных должны быть вInitStateнад. 2. Внедряемые сверху вещи передаются в текущем компоненте и предоставляются потомкам, поэтому внедряемые данные тоже должны быть на нем.

vm.[Math Processing Error]mount(vm.mount(vm.options.el): смонтировать экземпляр.

Реализация поддержки активности

Роль: реализация кэширования компонентов

Функция крючка:

`activated `组件渲染后调用
`deactivated `组件销毁后调用

принцип:Vue.jsВнутренняя воляDOMУзлы абстрагируются один за другимVNodeузел,keep-aliveКэширование компонентов также основано наVNodeNode вместо прямого хранилищаDOMструктура. это удовлетворит условию（pruneCache与pruneCache）компоненты вcacheОбъект кэшируется и повторно визуализируется, когда его необходимо повторно визуализировать.vnodeузел изcacheОбъект вынимается и визуализируется.

Свойства конфигурации:

includeСтрока или регулярное выражение. Кэшируются только компоненты с совпадающими именами.

excludeСтрока или регулярное выражение. Любой компонент, имя которого совпадает, не будет кэшироваться

maxЧисло, максимальное количество экземпляров компонента может быть закэшировано.

Принцип реализации vuex и vue-router

vuex— это библиотека управления состоянием, специально разработанная для приложений vue.js. Основная идея:

state(одно дерево состояний)getter/MutationПоказать изменения фиксацииstate
Action类似Mutation,представитьMutation, который может содержать произвольные асинхронные операции.
module(Когда приложение становится большим и сложным, разделитеstoreдля конкретныхmoduleмодуль)

Как вы понимаете алгоритм сравнения в Vue?

В js сделать trueDOMНакладные расходы очень велики.Например, если мы изменим определенные данные, если они будут напрямую преобразованы в реальныеDOM, вызовет весьdomПерерисовка и перестановка деревьев. Итак, возможно ли обновить только небольшой фрагмент домена, который мы модифицируем, не обновляя весь?domШерстяная ткань? В этот момент нам нужно сначалаdomСоздать виртуальныйdom, когда виртуальныйdomПосле изменения данных узла будет сгенерирован новыйVnode, то новыйVnodeИ старыйVnodeДля сравнения, если есть какая-то разница, измените его прямо на реальном доме, а затем сделайте старыйVnodeстоимость новогоVnode.

diffПроцесс заключается в вызовеpatchфункцию, сравните старый и новый узлы и дайте реальный при сравненииDOMПластырь. в принятииdiffКогда алгоритм сравнивает старые и новые узлы, сравнение будет выполняться только на одном уровне. существуетpatchметод, сначала выполните сравнение на уровне дереваnew Vnodeудалить, если его нетold Vnode old VnodeДобавьте новые, если они не существуютVnodeВыполнить обновление различий, если оба существуют Когда будет определено, что алгоритм сравнения должен быть выполнен, сравните дваVnode, включая три типа операций: обновление атрибута, обновление текста, обновление дочернего узла Если старый и новый узлы имеют дочерние узлы, дочерние узлы будутdiffработай, звониupdatechidrenЕсли у старого узла нет дочерних узлов, а у нового узла есть дочерние узлы, сначала очистите текстовое содержимое старого узла, а затем добавьте к нему дочерние узлы. Если у нового узла нет дочерних элементов, а у старого узла есть дочерние элементы, удалите все дочерние элементы узла. Когда старые, новые и старые узлы не имеют дочерних узлов, замените текст

updateChildrenБудуVnodeИзвлекаются дочерний узел Vch для oldVnode и дочерний узел oldCh для oldVnode.oldCh和vChПеременные с двумя головками и хвостамиStartIdx和EndIdx, их 2 переменные сравниваются друг с другом, всего 4 метода сравнения. Если ни одно из 4 сравнений не совпадает, если установленоkey, буду использоватьkeyСравните, в процессе сравнения переменная окажется посередине, один разStartIdx>EndIdxпоказыватьoldCh和vChПо крайней мере один из них был пройден, и сравнение заканчивается.

Какие оптимизации производительности Vue вы сделали?

编码阶段
尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连用
如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载
SEO优化
预渲染
服务端渲染SSR
打包优化
压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化
用户体验
骨架屏
PWA
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

Знаете ли вы, какие новые функции есть в Vue3? Какое влияние они окажут?

повышение производительности

Меньше и быстрее Поддержка пользовательских рендереров Поддержка оптимизации встряхивания дерева: метод оптимизации для удаления бесполезного кода во время упаковки. Поддержка фрагментов и кросс-компонентного рендеринга

Изменения API

Синтаксис шаблона остается неизменным на 99 % Встроенная поддержка компонентов на основе классов без какой-либо компиляции и различных сценических функций Проектируйте с учетом функций вывода типов TypeScript.重写虚拟DOMМожно ожидать больше подсказок во время компиляции, чтобы уменьшить накладные расходы во время выполнения.优化插槽生成Родительский и дочерний компоненты могут отображаться отдельно静态树提升Сокращение затрат на рендеринг基于Proxy的观察者机制Экономия памяти

Не совместим с IE11

检测机制Более полное, точное, эффективное и более поддающееся отладке отслеживание ответов

Каковы преимущества и недостатки реализации двусторонней привязки Proxy по сравнению с Object.defineProperty?

Object.definedPropertyФункция заключается в захвате свойств объекта, захвате методов получения и установки свойств и выполнении определенных операций при изменении свойств объекта. Прокси захватывает весь объект.
ProxyБудет возвращен прокси-объект, нам нужно только управлять новым объектом, а Object.defineProperty может только просматривать свойства объекта и изменять их напрямую.
Object.definedPropertyНе поддерживает массивы, точнее не поддерживает различные API массивов, потому что если рассматривать только ситуацию arr[i]=value, то его можно угнать, но такой угон не имеет смысла. Прокси может поддерживать различные API массивов.
Хотя Object.defineProperty имеет много недостатков, его совместимость лучше, чем у Proxy.

React

1. Функция ключа в реакции, в чем разница между наличием ключа и отсутствием ключа, что значит сравнивать узлы на одном уровне?

Keys是React用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

2. Ваше понимание алгоритмов виртуального дома и сравнения и реализация функции рендеринга.

虚拟DOMПо сутиJavaScriptобъект, да真实DOMабстрактное представление. Когда состояние изменится, запишите разницу между новым деревом и старым деревом. Наконец обновите diff до реальногоdomсерединафункция визуализации:

согласно сtagNameСоздать родительский тег, прочитатьprops, установить свойства,如果有content,настраиватьinnerHtml或innerText,
Если есть дочерние элементы, итерация по дочерним элементам рекурсивно вызываетrenderметод, который последовательно добавляет сгенерированные дочерние элементы к родительскому элементу и возвращает корневой элемент.

3. Как общаться между компонентами React?

Родительско-дочерний компонент, родитель-> дочерний элемент используют напрямуюProps, дочернее -> родительское использованиеcallbackПерезвоните
Компоненты, не являющиеся родительскими и дочерними, с использованием модели публикации-подпискиEventмодуль
Для сложных проектовRedux、Mobxи другая глобальная библиотека управления состоянием
Context Api contextДелает компоненты менее пригодными для повторного использования

ContextПредоставляет способ устранить необходимость вручную добавлять компоненты для каждого слоя.props, вы можете передавать данные между деревьями компонентов.Если вы просто хотите избежать передачи некоторых свойств слой за слоем, состав компонента (component composition) иногда является лучшим решением, чем context . 5. Недостатки компонентной композиции: это усложнит высокоуровневые компоненты

4. Как парсить jsx

调用React.createElement函数创建对象

5. Какие типы жизненных циклов существуют и что они делают на какой стадии? Зачем отказываться от некоторых жизненных циклов?

componentWillMount, componentWillReceiveProps и componentWillUpdate устарели в версии 16 и будут удалены в версии 17. Их необходимо использовать с префиксом UNSAVE_ для обратной совместимости.

6. Методы оптимизации реакции

Уровень кода:

Используйте Return NULL вместо CSS для управления отображением скрытых узлов. Убедитесь, что узлов DOM на той же временной странице как можно меньше.

Данные реквизита и состояния максимально простые, понятные и плоские.

Не используйте индексы массива в качестве ключей использоватьshouldComponentUpdateа такжеPureComponentизбегать слишком многогоrender function; renderНовых переменных и функций привязки как можно меньше, а передача параметров должна минимизировать количество передаваемых параметров. как можно большеpropsа такжеstateсгладить, пройти толькоcomponent потребностиprops(Если вы нанесете слишком много или слишком глубоко, это усугубитshouldComponentUpdateДанные внутри более обременительны), будьте осторожныcomponentтак какpropsвходящий

Размер кода:

использоватьbabel-plugin-importОптимизируйте внедрение бизнес-компонентов для достижения загрузки по требованию использоватьSplitChunksPlugin Разделить общий код использовать динамическийimport, ленивая загрузкаReactкомпоненты

7. Несколько способов связать это

bind/箭头函数

8. Понимание клетчатки

React Fiber 是一种基于浏览器的单线程调度算法.

9. Является ли setState синхронным или асинхронным?

setState«Асинхронный» только в синтетических событиях и хуках, синхронный в нативных событиях и setTimeout.
setState«Асинхронность» не означает, что внутренняя реализация реализована асинхронным кодом, на самом деле процесс и код, исполняемый сам по себе, являются синхронными, но последовательность вызова синтетических событий и функций-ловушек предшествует обновлению, так что синтетические события а хуки-функции сразу получить нельзя.К обновленному значению формируется так называемая "асинхронность".Конечно, обновленный результат можно получить через callback во втором параметре setState(partialState, callback).
setStateОптимизация пакетного обновления также основана на «асинхронности» (синтетические события, функции ловушек) и не будет обновляться пакетами в собственных событиях и setTimeout.В «асинхронном режиме», если вы выполняете несколько setState для одного и того же значения, Стратегия обновления перезапишет его и выполнит последнее.Если одновременно установлено несколько разных значений setState, они будут объединены и обновлены партиями во время обновления.

10. Redux, React-Redux

Процесс реализации Redux

Поведение пользователя на странице вызываетAction,ПотомStoreпередачаReducerи передать два параметра: текущийStateи получилAction.Reducerвернется новыйState. в любое времяstateПосле обновленияviewбудет основываться наstateЗапустить повторный рендеринг.

React-Redux:

Provider: инкапсулирует все приложение от самого внешнегоconnectдоставка модуляstore.Connect:

упаковка оригинальных компонентов,stateа такжеactionпройти черезpropsВходящий путь к оригинальным внутренним компонентам.
мониторstore treeИзмените так, чтобы исходный компонент, который он обертывает, реагировалstateРазнообразие

11. Понимание компонентов высшего порядка

Компонент высшего порядка — это функция, параметр которой является компонентом, а возвращаемое значение — новым компонентом.HOCэто чистая функция без побочных эффектов.HOCсуществуетReactраспространен в сторонних библиотеках, таких какReduxизconnectкомпоненты.

Роль компонентов высшего порядка:

Повторное использование кода, логическая абстракция и подготовка с нижнего уровня (bootstrap) код
рендеринг угона
Stateабстрагироваться и измениться
PropsИзменять

12. Какие методы можно использовать для создания`React`компоненты?

React.createClass()、ES6 classи функции без сохранения состояния

13.`React`В чем разница между элементом и компонентом?

Компоненты состоят из элементов. Структуры данных элементов — это обычные объекты, а структуры данных компонентов — это классы или чистые функции.

Vue против React?

поток данных:

reactОн выступает за функциональное программирование, поэтому он защищает чистые компоненты, неизменяемые данные, односторонний поток данных,

vueИдея адаптивного, то есть основанного на переменных данных, путем создания Watcher для каждого атрибута для мониторинга, когда атрибут изменяется, соответствующий виртуальный дом обновляется в ответ.

Принцип мониторинга изменений данных:

Vueпройти черезgetter/setterА также захват некоторых функций, он может точно знать изменения данных и достигать хорошей производительности без специальной оптимизации.
ReactПо умолчанию сравниваются ссылки, если они не оптимизированы (PureComponent/shouldComponentUpdate) может привести к большому количеству ненужных повторных рендеров VDOM.

Разница между взаимодействием компонентов: шаблоны jsx и .vue.

HoC和Mixins(То, как мы комбинируем различные функции в Vue,Mixin, пока вReactв котором мы проходимHoC(Компонент высшего порядка)).

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

React: shouldComponentUpdate
Vue: Внутренняя реализацияshouldComponentUpdateоптимизация, благодаря наличию системы отслеживания зависимостей, путемwatcherОпределить, требуется ли повторный рендеринг (когда на странице большой объем данных,VueПроизводительность низкая, что приводит к зависанию страницы, поэтому обычно проекты с относительно большими данными, как правило, используютReact).

Разница между vuex и redux?

Из принципа реализации самое большое отличие состоит в двух моментах:

Reduxиспользуя неизменяемые данные, в то время какVuexДанные изменчивы.Reduxкаждый раз новыйstateзаменить старыйstate,а такжеVuexявляется прямой модификацией

ReduxПри обнаружении изменений данных, это черезdiffспособ сравнения различий, в то время какVuexПо сути, так же, как и принцип Vue, черезgetter/setterдля сравнения (если посмотретьVuexИсходник будет знать, на самом деле он напрямую создаетVueЭкземпляры используются для отслеживания изменений данных)

Что происходит, когда браузер переходит от ввода URL к отображению страницы?

三个方面：
网络篇:
	     构建请求
             查找强缓存
             DNS解析
             建立TCP连接(三次握手)
			发送HTTP请求(网络请求后网络响应)
浏览器解析篇:
	    解析html构建DOM树
            解析css构建CSS树、样式计算
            生成布局树(Layout Tree)
浏览器渲染篇:
            建立图层树(Layer Tree)
            生成绘制列表
            生成图块并栅格化
            显示器显示内容
            最后断开连接：TCP 四次挥手
            (浏览器会将各层的信息发送给GPU,GPU会将各层合成,显示在屏幕上)

Сетевая безопасность, протокол HTTP

Разница между TCP и UDP

1.`TCP`向上层提供面向连接的可靠服务 ，`UDP`向上层提供无连接不可靠服务。
2.虽然 `UDP` 并没有 `TCP` 传输来的准确，但是也能在很多实时性要求高的地方有所作为
3.对数据准确性要求高，速度可以相对较慢的，可以选用`TCP`

разница	UDP	TCP
подключаться ли	Нет соединения	ориентированный на соединение
Это надежно	Ненадежная передача, не используются управление потоком и контроль перегрузки	Надежная передача с использованием управления потоком и контролем перегрузки
Количество объектов подключения	Поддержка интерактивного общения «один к одному», «один ко многим», «многие к одному» и «многие ко многим».	общение только один на один
способ передачи	ориентированный на сообщение	байтовый поток
Накладные расходы заголовка	Заголовок небольшой, всего 8 байт.	Заголовок минимум 20 байт, максимум 60 байт
Применимая сцена	Идеально подходит для приложений реального времени (IP-телефония, видеоконференции, прямые трансляции и т. д.)	Идеально подходит для приложений, требующих надежной передачи, таких как передача файлов

Разница между Http и Https (высокая частота)

1.`HTTP` 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
2.`HTTP` 是不安全的，而 HTTPS 是安全的
3.`HTTP` 标准端口是80 ，而 HTTPS 的标准端口是443
4.`在OSI` 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
5.`HTTP` 无法加密，而HTTPS 对传输的数据进行加密
6.`HTTP`无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书

Разница между GET и POST (высокая частота)

1.GET在浏览器回退不会再次请求，POST会再次提交请求
2.GET请求会被浏览器主动缓存，POST不会，要手动设置
3.GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会
4.GET请求在URL中传送的参数是有长度限制的，而POST没有限制
5.GET参数通过URL传递，POST放在Request body中
6.GET参数暴露在地址栏不安全，POST放在报文内部更安全
7.GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作
8.GET产生一个TCP数据包；POST产生两个TCP数据包

Понимать принципы xss, csrf, ddos атак и как их избежать

XSS(Cross-Site Scripting,Атака с использованием межсайтовых сценариев) — это атака с внедрением кода. Злоумышленник внедряет вредоносный код на целевой веб-сайт, и этот вредоносный код запускается, когда жертва попадает на веб-сайт.Эти сценарии могут читатьcookie，session tokens, или другую конфиденциальную информацию веб-сайта, фишинговые и мошеннические действия пользователей или даже запуск червей.

CSRF(Cross-site request forgery)Подделка межсайтовых запросов: Злоумышленник побуждает жертву зайти на сторонний веб-сайт и на стороннем веб-сайте отправляет межсайтовый запрос на атакуемый веб-сайт. Используя регистрационные данные, которые жертва получила на атакованном веб-сайте, аутентификация пользователя в фоновом режиме обходится, и достигается цель выдачи себя за пользователя для выполнения операции на атакуемом веб-сайте.

Способы избежать XSS:

urlиспользование параметраencodeURIComponentметод побега
попробуй не иметьInnerHtmlвставлятьHTMLсодержание
Используйте специальные символы, escape-символы.

CSRFСпособы избежать:

Добавить код подтверждения
использовать токен
- Сервер генерирует токен для пользователя, шифрует его и передает пользователю
- Пользователь должен иметь этот токен при отправке запроса.
- Сервер проверяет правильность токена

DDoSТакже называется распределенным отказом в обслуживании, полное имяDistributed Denial of Service, принцип заключается в использовании большого количества запросов, вызывающих перегрузку ресурсов, что приводит к недоступности службы.

DDosСпособы избежать:

Ограничить частоту запросов одного IP.
Брандмауэр и другие настройки защиты запрещеныICMPпакет и т. д.
Проверить открытие привилегированных портов

функции http и коды состояния

比如：
    200响应成功
    301永久重定向
    302临时重定向
    304资源缓存
    403服务器禁止访问
    404服务器资源未找到
    500 502服务器内部错误
    504 服务器繁忙
    1xx	Informational（信息状态码）	  接受请求正在处理
    2xx	Success（成功状态码）            请求正常处理完毕
    3xx	Redirection（重定向状态码）		 需要附加操作已完成请求
    4xx	Client Error（客户端错误状态码）	服务器无法处理请求
    5xx	Server Error（服务器错误状态码）	服务器处理请求出错

http трехстороннее рукопожатие

Шаг 1: Клиент отправляет SYN-сообщение на сервер, чтобы инициировать рукопожатие.После отправки клиент находится в состоянии SYN_Send.
Шаг 2: После получения сообщения SYN сервер отвечает клиенту сообщениями SYN и ACK.
Шаг 3: клиент получает SYN и ACK, отправляет сообщение ACK на сервер, и клиент переходит в установленное состояние.В это время сервер также находится в установленном состоянии после получения сообщения ACK, и обе стороны установили связь.

http волна четыре раза

В начале обе стороны были в establisedСтатус, если клиент сначала инициирует запрос на отключение, то:

Первая волна: клиент отправляет сообщение FIN, в сообщении указывается серийный номер. В этот момент клиент находится в состоянии FIN_WAIT1.
Вторая волна: после того, как сервер получит FIN, он отправит сообщение ACK и использует значение серийного номера клиента + 1 в качестве значения серийного номера сообщения ACK, указывая, что сообщение клиента было получено. сервер в состоянии CLOSE_WAIT.
Третья волна: Если сервер тоже хочет отключиться, как и первая волна клиента, отправьте сообщение FIN и укажите серийный номер. В этот момент сервер находится в состоянии LAST_ACK.
Четвертая волна: после того, как клиент получает FIN, он также отправляет сообщение ACK в качестве ответа и использует значение серийного номера сервера + 1 в качестве значения серийного номера своего собственного сообщения ACK. Состояние TIME_WAIT. Потребуется некоторое время, чтобы убедиться, что сервер не перейдет в состояние CLOSED, пока не получит собственное сообщение ACK.
После того, как сервер получает сообщение ACK, он закрывает соединение и находится в состоянии CLOSED.

Разница между http1.0, http1.1, http2.0

1 По сравнению с 1.0, 1.1 может передавать несколько файлов одновременно
Анализ http1.x основан на тексте, http2.0 использует двоичный формат, а новые функции включают мультиплексирование, сжатие заголовков, отправку на стороне сервера (статические ресурсы HTML).

Как http реализует кеширование

Сильный кеш==>Expires (срок действия)/Cache-Control(без кэша) (высокий приоритет) Negotiate cache ==>Last-Modified/Etag (высокий приоритет) Etag подходит для небольших файлов, которые часто изменяются. Last-Modified подходит для Большие файлы, которые редко изменяются
Сильная стратегия кэширования и согласованная стратегия кэшированияПри попадании в кеш копия локального кеша будет использоваться напрямую, с той лишь разницей, что согласованный кеш будет отправлять запрос на сервер. Когда они пропустят кеш, они отправят запрос на сервер, чтобы получить ресурс. В реальном механизме кэширования строгая стратегия кэширования и согласованная стратегия кэширования используются вместе. Браузер сначала определит, попал ли сильный кеш в соответствии с запрошенной информацией, и если он попадет, ресурс будет использоваться напрямую. Если не попадает, то инициирует запрос к серверу в соответствии с информацией из заголовка и использует согласованный кеш.Если согласованный кеш попадает, сервер не возвращает ресурс, а браузер напрямую использует копию локального ресурса , Если согласованный кеш не попадает, браузер возвращает браузеру последний ресурс.

Полный процесс http-запроса после ввода URL

Установить TCP-соединение -> отправить строку запроса -> отправить заголовок запроса -> (прийти на сервер) отправить строку состояния -> отправить заголовок ответа -> отправить данные ответа -> отключить TCP-соединение

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

Несколько способов оптимизировать производительность интерфейса

1. 浏览器缓存
2. 防抖、节流
3. 资源懒加载、预加载
4.开启Nginx gzip压缩
三个方面来说明前端性能优化
一： webapck优化与开启gzip压缩
    1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件
    其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'
    2.文件采用按需加载等等
    3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：
    accept-encoding:gzip
    4.图片优化，采用svg图片或者字体图标
    5.浏览器缓存机制，它又分为强缓存和协商缓存
二：本地存储——从 Cookie 到 Web Storage、IndexedDB
    说明一下SessionStorage和localStorage还有cookie的区别和优缺点
三：代码优化
    1.事件代理
    2.事件的节流和防抖
    3.页面的回流和重绘
    4.EventLoop事件循环机制
    5.代码优化等等

Что такое политика одинакового происхождения

Сценарии JS в одном домене не могут без разрешения получать доступ к контенту в другом домене. Обычно основанием для оценки кросс-доменности является то, совпадают ли протокол, имя домена и номер порта. Политика одного и того же происхождения является ограничением для сценариев js, а не ограничением для браузеров.Как и img, запросы сценариев сценариев не будут иметь междоменных ограничений.

Как взаимодействуют интерфейс и сервер

Ajax : 短连接
Websocket : 长连接，双向的。
Form表单（最原始的）

Несколько способов междоменной связи

решение:

jsonp(использоватьscriptУязвимая реализация тегов без междоменных ограничений. Недостаток: поддерживает толькоGETпросить)
CORS(настраиватьAccess-Control-Allow-Origin: укажите доменное имя доступного ресурса)
postMessage(message, targetOrigin, [transfer])(HTML5Добавлен API для многооконного сообщения, доставки сообщений iframe на странице), черезonmessageконтролировать входящие данные
WebsocketЭто постоянный протокол HTML5, который реализует полнодуплексную связь между браузером и сервером, а также является междоменным решением.
Nodeпромежуточный прокси
Nginxобратный прокси
различная вложенностьiframeметод, который обычно не используется.
Междоменные решения для наиболее часто используемых в повседневной работе являются CORS и NGINX обратный прокси

Можете ли вы рассказать о локальном хранилище браузера? Каковы плюсы и минусы каждого?

Локальное хранилище браузера в основном разделено наCookie、WebStorage和IndexDB, вWebStorageможно еще разделить наlocalStorage和sessionStorage.

Общая основа:Все сохраняются на стороне браузера и имеют одинаковое происхождение.

разница:

cookieданные всегда в одном и том же источникеhttpпереносятся в запросе (даже если не нужны), т.е.cookieПереход туда и обратно между браузером и сервером.cookieДанные также имеют путь (path) концепция, которая может ограничиватьcookieпринадлежат только определенному путиsessionStorageа такжеlocalStorageДанные не отправляются автоматически на сервер, а сохраняются только локально.
Пределы размера хранилища также отличаются,

cookieДанные не могут превышать 4K,sessionStorage和localStorageможет достигать 5 м
sessionStorage: действует только до закрытия текущего окна браузера;
localStorage: всегда действителен, всегда сохраняется при закрытии окна или браузера, сохраняется локально, поэтому он используется как постоянные данные;
cookie: только когда установленоcookieОн действителен до истечения срока действия, даже если окно закрыто или браузер закрыт.

разная сфера

sessionStorage: не делите между разными окнами браузера даже одну и ту же страницу;
localstorage: Доступно для всех окон одного и того же источника, то есть пока браузер не закрыт, данные все еще существуют.
cookie: он также используется всеми окнами одного и того же происхождения, то есть пока браузер не закрыт, данные все еще существуют.

Фронтенд-инжиниринг

конфигурация webpack, каковы точки оптимизации webpack 4.0

module.exports={
	entry: {},
	output: {},
	plugins: [],
	module: [rules:[{}]]
}

Как webpack достигает разделения кода

入口起点:использоватьentryКонфигурация вручную разделяет код.
防止重复:использоватьCommonsChunkPluginДедупликация и разделениеchunk.
动态导入: Разделение кода путем встраивания вызовов функций модулей.

Общий загрузчик Webpack?Как получить загрузчик Webpack (НЕТ)

loader: экспортируемая функцияjavascriptмодуль, судя поruleКонвертер, соответствующий расширению файла, обрабатывающий файл.

file-loader: вывести файл в папку, передать относительный код в кодеURLВыходные файлы разыменования (обработка изображений и шрифтов)

url-loader: а такжеfile-loaderПодобное, разница состоит в том, что пользователь может установить порог, который больше порогового значения.file-loaderОбработать, вернуть файл, если меньше порогового значенияbase64Кодирование форм (обработка изображений и шрифтов)

image-loader: загружать и сжимать файлы изображений

babel-loader:ПучокES6 Перевести в ES5

sass-loader:БудуSCSS/SASSкод вCSS

css-loader:нагрузкаCSS, который поддерживает модульность, сжатие, импорт файлов и другие функции.

style-loader:ПучокCSSкод, внедренный вJavaScript в, через DOMоперация по загрузкеCSS

postcss-loader: расширенныйCSSГрамматика, используя следующее поколение CSS, может соответствоватьautoprefixerПлагин автодополненияПрефикс CSS3 eslint-loader:пройти черезESLintэкзаменJavaScriptкод

Общий плагин Webpack?Как реализовать плагин Webpack(НЕТ)

плагин: по сути плагин, основанный на структуре потока событий Tapable, плагин может расширитьWebpackфункция, в WebpackМногие события транслируются в течение жизненного цикла бега,PluginВы можете слушать эти события и проходить их в нужное время Webpackкоторый предоставилAPI Изменить результат вывода.

html-webpack-plugin:упрощатьHTMLсоздание файла (в зависимости от html-loader)

uglifyjs-webpack-plugin: сжать js-файлы

clean-webpack-plugin: каталог очистить

mini-css-extract-plugin: отдельные файлы стилей, CSS извлекается в виде отдельного файла, поддерживает загрузку по требованию (альтернативныйextract-text-webpack-plugin)

Сравнение загрузчика и плагина?

Loaderсуществуетmodule.rules Конфигурация в , как правило разбора модуля, тип - массив. Каждый элемент является Оbject, который содержитtest(类型文件)、loader、options(параметр) и другие атрибуты.
Pluginсуществует pluginsНастраивается отдельно в типе, тип - массив, каждый элемент -PluginЭкземпляр , параметры передаются через конструктор.

Фронтенд модульный, CMD, AMD, CommonJS

CommonJS

CommonJSЭто спецификация для серверных модулей, популяризированная и используемая Node, и веб-пакет также написан в этой спецификации.

Спецификация commonJs:

CommonJSСпецификация модуля в основном разделена на три части:模块定义、模块标识、模块引用.

Определение модуля:moduleОбъект: В каждом модулеmoduleОбъект представляет собой сам модуль.exportАтрибуты:moduleСвойство объекта, обеспечивающее интерфейс с внешним миром. Лучший способ экспортировать переменные модуля — использоватьmodule.exportsобъект. Один файл — это модуль. Каждый модуль представляет собой отдельную область, то есть переменные, определенные в модуле, не могут быть прочитаны другими модулями, если они не определены какglobalсвойства объекта.
ID модуля: переданrequireПараметр метода должен быть строкой, соответствующей регистру маленького верблюда, или относительным путем, начинающимся с . , .. , или абсолютным путем.
ссылка на модуль: загрузите модуль, используяrequire(синхронная загрузка), этот метод читает файл и выполняет его, возвращая внутреннийmodule.exportsобъект.

Преимущество:

На заднем конце,JavaScriptСпецификация сильно отстает и имеет много недостатков, что затрудняет использованиеJavaScriptРазработать крупные приложения. Например: нет модульной системы, мало стандартных библиотек, без стандартных интерфейсов, отсутствие системы управления пакетами, списка содержимого

Спецификация модуля CommonJS очень хорошо решает проблему загрязнения переменных.Каждый модуль имеет независимое пространство и не мешает друг другу.Пространство имен не очень хорошее по сравнению с ним.
Спецификация CommonJS определяет, что модуль очень прост, а интерфейс очень лаконичен.
Спецификация модуля CommonJS поддерживает функции импорта и экспорта, так что каждый модуль может быть легко подключен и могут быть реализованы зависимости между собой.
Спецификация CommonJS была предложена главным образом для того, чтобы компенсировать тот недостаток, что JavaScript не имеет стандарта и достиг базовой способности разрабатывать крупномасштабные приложения, такие как Python, Ruby и Java, вместо того, чтобы оставаться на стадии разработки небольших скриптовых программ на сторона браузера.

недостаток:

Нет механизма параллельной загрузки

из-заCommonJSЭто загрузка модулей синхронно, что очень плохо для серверной части, т.к. все модули размещаются на локальном жестком диске. Время ожидания модуля — это время, когда жесткий диск считывает файл, который очень мал. Однако для браузера ему необходимо загрузить модуль с сервера, что связано со скоростью сети, прокси-сервером и другими причинами.Если время ожидания слишком велико, браузер будет находиться в состоянии «подвешенной смерти».

Так что браузерная сторона не очень подходитCommon.Js, появляется другая спецификацияAMD

AMD

AMDявляется спецификацией определения асинхронного модуля, работающей в среде браузера.RequireJSНормализованный вывод определения модуля в процессе продвижения.

Технические характеристики AMD

AMDПредварительно соблюдается в модуле определения, когда мы должны объявить его зависимые модули

преимущество

Пользовательский опыт удобен, потому что задержки нет, а зависимые модули выполняются заранее.

CMD

CMDЭто общая спецификация определения модуля; это стандартизированный результат определения модуля в процессе продвижения SeaJs.

Спецификация CMD

CMDСоблюдайте близость зависимостей, только когда используется модульrequire

преимущество

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

Интервью Серия рукописных кодов

防抖节流

Функция защиты от сотрясения ориентирована на непрерывный запуск в течение определенного периода времени и выполняется только один раз в конце, в то время как функция регулирования фокусируется на выполнении только один раз за период времени.

Стабилизатор

//定义：触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
//搜索框搜索输入。只需用户最后一次输入完，再发送请求
//手机号、邮箱验证输入检测 onchange oninput事件
//窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
const debounce = (fn, wait, immediate) => {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        if (immediate && !timer) {
          fn.call(this, args);
        }
        timer = setTimeout(() => {
          fn.call(this, args);
        }, wait);
      };
    };
const betterFn = debounce(() => console.log("fn 防抖执行了"), 1000, true);
document.addEventListener("scroll", betterFn);

дросселирование

//定义：当持续触发事件时，保证隔间时间触发一次事件。
//1. 懒加载、滚动加载、加载更多或监听滚动条位置；
//2. 百度搜索框，搜索联想功能；
//3. 防止高频点击提交，防止表单重复提交；
function throttle(fn,wait){
    let pre = 0;
    return function(...args){
        let now = Date.now();
        if( now - pre >= wait){
            fn.apply(this,args);
            pre = now;
        }
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));

Глубокая и поверхностная копия объекта

//浅拷贝 
1. Object.assign(target,source)
2. es6对象扩展运算符。
//深拷贝    
function deepClone(obj) {
      if (!obj || typeof obj !== "object") return;
      let newObj = Array.isArray(obj) ? [] : {};
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          newObj[key] = typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key];
        }
      }
      return newObj;
}

Дедупликация массива, дедупликация объекта массива

//数组
const arr = [2,7,5,7,2,8,9];
console.log([...new Set(arr)]); // [2,7,5,8,9];
//对象
const list = [{age:18,name:'张三'},{age:18,name:'李四'},{age:18,name:'王五'}]
let hash = {};
const newArr = arr.reduce((item, next) => {
    hash[next.age] ? '' : hash[next.age] = true && item.push(next);
    return item;
}, []);
console.log(list);

Выравнивание массива

function flatten(arr) {
      return arr.reduce((result, item) => {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
      }, []);
}

Планирование профессиональных навыков, персонал интервью

Куда вы собираетесь развиваться в будущем? Опытный/полностью сухой
Личные инсайты для планирования карьеры
Отражение собственной ценности

Причина ухода

Причины планирования личной карьеры
Причина компании

разное

Каковы ваши карьерные планы на ближайшие один-три года?
Как вы изучаете и обращаете внимание на новые технологии?
Каковы ваши впечатления или выводы из вашей работы за последние годы?
Как вы думаете, каковы ваши сильные и слабые стороны в работе?
Вы пришли в нашу компанию, в чем ваши преимущества?
У вас есть проекты с открытым исходным кодом?
Вы когда-нибудь писали пакет npm или плагин для веб-пакета?
Исходный код какой фреймворка или библиотеки классов вы читали и что вы получили?

Пополнить

символы в ES6

Его функция аналогична идентификатору, который идентифицирует уникальность каждогоSymbolЭкземпляры уникальны.SymbolТип ключа не может быть переданObject.keys()илиfor...inперечислить, Он не входит в набор имен свойств самого объекта (property names) среди. Следовательно, используя эту функцию, мы можем использовать Symbol для определения некоторых свойств, которые не требуют внешних операций и доступа. // использоватьObject的API Object.getOwnPropertySymbols(obj) // [Symbol(name)]

// Используйте новый API отраженияReflect.ownKeys(obj) // [Symbol(name), 'age', 'title']

установить и сопоставить в ES6

MapОбъекты содержат пары ключ-значение. Любое значение (объект или примитив) может использоваться как ключ или значение. Конструктор Map может принимать в качестве параметра массив.
SetОбъекты позволяют хранить значения любого типа, будь то примитивное значение или ссылка на объект. Он похож на массив, но все значения членов уникальны и нет повторяющихся значений.

vue ключ

keyРоль в основном заключается в эффективном обновлении виртуальногоDOM, принцип такойvueсуществуетpatchчерез процессkeyОн может точно определить, являются ли два узла одинаковыми,

Тем самым избегая частых обновлений разных элементов, делая весьpatchПроцесс более эффективен и менееDOMКоличество операций, чтобы улучшить производительность. 2. Далее, если предусмотреноkeyЭто также может вызвать некоторые скрытые ошибки при обновлении списка. 3.vueПри переключении перехода элементов с одинаковым именем тега также используется ключевой атрибут, и цель также состоит в том, чтобы позволить Vue различать их. иначеvueзаменит только свои внутренние свойства, не вызывая эффекта перехода.

Разница между нормальной функцией и функцией стрелки

Стрелочные функции — это анонимные функции, их нельзя использовать в качестве конструкторов и нельзя использовать новые значения.
Стрелочные функции не привязаныarguments, вместоrestПараметры... разрешены
Стрелочные функции не привязаныthis, он захватит значение this контекста, в котором оно находится, как собственное значение this.
стрелочная функция черезcall() 或 apply()Когда метод вызывает функцию, передается только один параметр, и он на это не влияет.
Стрелочные функции не имеют свойства прототипа
Стрелочные функции нельзя использовать какGeneratorфункция, не может быть использованаyieldключевые слова

Суммировать:

стрелочная функцияthis всегда ссылайтесь на его контекст this, который нельзя изменить никаким способом, напримерcall() , bind() , apply()
this нормальной функции указывает на объект, вызвавший ее

Карринг функций JS

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

// 普通的add函数
function add(x, y) {
    return x + y
}

// Currying后
function curryingAdd(x) {
    return function (y) {
        return x + y
    }
}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3

Реализовать диктат наследования

Наследование цепочки прототиповНапишите родительский класс и подкласс Прототип подкласса является экземпляром суперкласса subclass.prootype = новый родительский класс Исправьте прототип подкласса для самого подкласса подкласс.прототип.конструктор=подкласс Новый подкласс может вызывать метод родительского класса Наследование конструктора Напишите родительский класс и подкласс В родительском подклассе class.call(this) может быть достигнут

mapState, mapGetters, mapActions, mapMutations

Когда компоненту необходимо получить несколько состояний, объявление их всех как вычисляемых свойств является несколько повторяющимся и избыточным. Чтобы решить эту проблему, мы можем использовать вспомогательную функцию mapState, которая поможет нам сгенерировать вычисляемые свойства. mapMutations на самом деле похож на mapState, который сопоставляет методы в компоненте с вызовами store.commit.

Простота вычисления функции

Как показано выше, его можно грубо разделить на две категории: полиномиальная величина и неполиномиальная величина. Среди них всего две неполиномиальные величины: O(2n) и O(n!) Соответствующий темп роста показан на рисунке ниже.

Понимание исходного кода Vue

xxxxx...

модель уровня osi7, модель уровня tcp5

модель слоя osi7:物理层-数据链路层-传输层-网络层-应用层-会话层-表示层

Модель слоя tcp5:物理层-数据链路层-传输层-网络层-应用层

напиши в конце

яИрен а, Я очень счастлив встретить тебя.

Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк 👍 и подписывайтесь на 😊
Эта статья была впервые опубликована на Наггетс, перепечатка без разрешения запрещена 💌

Интеллект-карта интервью (картинка слишком большая, рекомендуется скачать и посмотреть)

前端复习导图.png