[Исправление упущений и заполнение вакансий] Те, кому не хватает базовых знаний по тесту

предисловие

Проверьте наличие упущений и заполните вакансии, проверьте наличие упущений и заполните вакансии, если вы не знаете, где упущенные упущения, как заполнить вакансии? Поскольку эта статья имеет более 10 000 слов, это немного долго, поэтому я предлагаю вам сначала посмотреть на мой Facebook [Check], чтобы узнать, где вы [отсутствуете], а затем вернуться к [заполнить пробел] (Опыт стажировки в Tencent, Baidu, Xiaomi, NetEase и др.)

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

HTML5

1. Новые функции

• Семантические метки

• Улучшенная форма

  • Добавлены свойства формы:placehodler,autofocus,multiple,required,minlength,maxlength,max,min,pattern

• видео и аудио

  • HTML5Предоставляет стандарт для воспроизведения аудиофайлов, т.е.<audio>,<video>элемент

• Canvasрисунок

  • Метки — это просто графические контейнеры, и для их рисования необходимо использовать скрипт.

• СВГ Рисунок

• HTML5 Geolocation(Геолокация) Используется для определения местоположения пользователя.

• Перетащите API

  • ondragstart: срабатывает, когда элемент начинает перетаскиваться на перетаскиваемый элемент.
  • ondragenter: Событие запускается, когда перетаскиваемый элемент входит в целевой элемент, воздействуя на целевой элемент.
  • ondragover: Событие срабатывает, когда перетаскиваемый элемент перемещается по целевому элементу, воздействуя на целевой элемент.
  • ondragleave: срабатывает, когда перетаскиваемый элемент перетаскивается от целевого элемента, воздействуя на целевой элемент.
  • ondrop: перетащенный элемент находится на целевом элементе, и мышь отпускается, когда запускается событие, воздействующее на целевой элемент.
  • ondragend: событие, срабатывающее при завершении перетаскивания, воздействующее на перетаскиваемый элемент.

• WebWorker

  • Спецификация HTML5 предоставляет многопоточное решение, т.WebWorker (Справочные статьи по обучению WebWorker)

• WebStorage (это банально, поэтому расширять не буду)

• WebSocket

  • Это протокол, предоставляемый HTML5 для полнодуплексной связи по одному TCP-соединению (Учебное пособие по WebSocket Справочные статьи)

CSS

1. Селекторы CSS

Несколько общих приоритетов селектора CSS:!important> Встроенные > Селекторы идентификаторов > Селекторы классов > Селекторы меток > Общие селекторы

• Селектор идентификатора
• селектор класса
• Селектор тегов
• селектор элементов-потомков
  • Функция: выберите указанный элемент-потомок указанного элемента. Синтаксис: элемент-предок элемент-потомок {} (через пробел)
• селектор дочерних элементов
  • Функция: выберите указанный дочерний элемент указанного родительского элемента. Синтаксис: родительский элемент > дочерний элемент
• псевдокласс
  • Псевдокласс Представляет особое состояние элемента.
  • :activeДобавьте стили к активированному элементу
  • :focusДобавление стилей к элементам с фокусом ввода с клавиатуры
  • :hoverКогда мышь была приостановлена ​​в вышеуказанных элементах, добавляя элементы в стиль
  • :linkДобавляйте стили к непосещенным ссылкам
  • :visitedДобавляйте стили к уже посещенным ссылкам. (Вопрос конфиденциальности может установить только цвет)
  • :first-childДобавить стили к первому дочернему элементу
  • :langк указанномуlangЭлементы атрибутов для добавления стилей
  • ::selectionСовпадение с частью, выбранной или выделенной пользователем
• псевдоэлемент
  • : Псевдоэлемент Представляет некоторую особую позицию в элементе
  • :first-letterДобавьте особый стиль к первой букве текста.
  • :first-lineДобавьте специальные стили к первой строке текста.
  • :beforeДобавьте содержимое перед элементом.
  • :afterдобавить содержимое после элемента
• другие селекторы дочерних элементов
  • :first-childОпределяет стиль первого элемента в родительском элементе, который является указанным элементом

2. Как очистить поплавок

• Добавить высоту к родительскому элементу плавающего элемента
• Вновь добавьте последний избыточный элемент к последнему дочернему элементу, затем установите егоclear:both, который очищает поплавок
• Удаление псевдоэлемента (рукописныйclearfix )

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

• для родительского элементаoverflow:hidden

3. Разница между em и rem

• emМожно сказать, что он зависит от размера шрифта родительского элемента, и когда размер шрифта родительского элемента изменяется, его необходимо пересчитывать.
• remТолько относительно корневого каталога HTML-элемента. имеютremВ этом блоке нам нужно только настроить корневой элементhtmlизfont-sizeМожет быть достигнута динамическая адаптация всех элементов

4. Перерисовать и перекомпоновать (перекомпоновать)

Перерисовка не обязательно приводит к перерисовке, перерисовка должна вести к перерисовке

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

  • Самая «дорогая» операция: изменение геометрических свойств DOM-элементов
  • «Доступные» операции: изменение структуры DOM-дерева
  • Самая забытая операция: получение значения какого-то конкретного свойства. Когда вы используете такие свойства:offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight

• Перерисовка: когда наша модификация DOM приводит к изменению стиля, не влияя на его геометрические свойства (например, изменение цвета или цвета фона), браузеру не нужно пересчитывать геометрические свойства элемента, и он напрямую рисует новые элементы. для элемента element.style (пропускает ссылку на перекомпоновку, показанную выше). Этот процесс называется перекрашиванием

5. липкое позиционирование

stickyПрилипчивое позиционирование (рекомендуется понимать его в сочетании с конкретными практическими операциями, а некоторые интервьюеры будут копать глубже)

• stickyАнглийский буквально означает липкий, паста, поэтому это можно назвать липким позиционированием.

• position: sticky;Позиционирование на основе положения прокрутки пользователя

• Прикрепленные позиционированные элементы зависят от прокрутки пользователем, вposition:relativeа такжеposition:fixedПереключение между таргетингом

• он ведет себя какposition:relative;И когда страница прокручивается за пределы целевой области, она ведет себя какposition:fixed;, он будет зафиксирован в целевом положении

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

• Этот конкретный порог относится кtop,right,bottomилиleftодин, иными словами, определяющийtop,right,bottomилиleftОдин из четырех порогов для закрепления позиционирования. В противном случае он ведет себя так же, как относительное позиционирование

6.дисплей:нет и видимость:скрыта

display:none

• Если элемент установленdisplay: none, то элемент и все его дочерние элементы будут скрыты, что является наиболее часто используемым методом сокрытия интерфейсными разработчиками. Скрытые элементы нельзя щелкнуть, к ним нельзя получить доступ с помощью вспомогательных устройств, таких как программы чтения с экрана, а занимаемое пространство исчезает.

visibility: hidden

• установить элементvisibility: hiddenЭтот элемент также может быть скрыт, но скрытый элемент все равно должен занимать то же место, что и когда он не скрыт, то есть, хотя элемент невидим, он все равно будет влиять на макет страницы.

7. Разница между стилем до тела и после тела

• Написано перед тегом body, чтобы браузер мог отображать его постепенно.
• Пишется после тега body: Поскольку браузер разбирает html-документ построчно, при разборе таблицы стилей, написанной в конце (контур или в теге style), браузер остановит предыдущую отрисовку, ожидая загрузки и разбора Re -рендеринг после завершения таблицы стилей

8. Принцип реализации Flex

• Вопрос, с которым я столкнулся во время интервью, я думаю, что ответ должен быть основным принципом гибкости, но я до сих пор не нашел соответствующей информации (также может быть, что я неправильно понял значение, интервьюер просто хотел, чтобы я говорил о его контейнере и свойствах и т. д.?) Добро пожаловать в зону комментариев друзей-копателей

9. Разница между стандартной коробочной моделью и коробочной моделью IE

• Ширина двух различна. Ширина стандартной блочной модели = содержимое, а ширина блочной модели IE = граница + отступ + содержимое.

10. Сценарии, в которых z-index не работает

В основном рассматривается концепция контекста стекирования, а также приоритет порядка стекирования и уровня стекирования (конкретное обучение см.Тщательно понимать контекст стека CSS, уровень стека, порядок стека, z-индекс)

• Контекст стекирования: Контекст стекирования — это трехмерная концепция в HTML. В спецификации CSS2.1 положение каждой блочной модели является трехмерным, то есть осью X, осью Y на плоском холсте и осью Z, представляющей укладку. Как правило, элементы располагаются вдоль осей X и Y на странице, и мы не можем воспринимать их отношение друг к другу по оси Z. И как только элементы сложены, можно обнаружить, что элемент может покрывать другой элемент или покрываться другим элементом.

• Уровень наложения: в том же контексте наложения он описывает верхний и нижний порядок элементов контекста наложения в контексте наложения по оси Z.

• Как создать «каскадный контекст»

  • Корневой элемент в самом HTML имеет контекст стека, называемый «корневым контекстом стека».
  • Обычные элементы устанавливают для атрибута position нестатическое значение и устанавливают для атрибута z-index определенное значение для создания контекста стека.
  • Новые свойства в CSS3 также могут генерировать контексты наложения.

• Порядок укладки: расположите, как показано ниже.

11. Правила генерации CSSOM

Построить CSSOM (объектная модель CSS — объектная модель CSS)

• Процесс построения CSSOM очень похож на процесс построения DOM: когда браузер получает фрагмент CSS, первое, что ему нужно сделать, — это идентифицировать токен, затем построить узел и сгенерировать CSSOM (правила следующим образом)
• Bytes→characters→tokens→nodes→CSSOM

JS

1. Разница между var, let и const

1.1 var

• varОбъявленная переменная не имеет области блока
• varОбъявленная глобальная переменная автоматически станетwindowсвойства объекта
• varОбъявленная переменная будет продвинута (объявление будет продвинуто, но присвоение не будет, все равно будет сообщеноundefinedнеправильно)
• varОбъявленная переменная может быть объявлена ​​повторно в одной и той же области видимости, в то время какletа такжеconstне допускается, иначе сообщается об ошибке

1.2 пусть и константа

• letкоманда, используемая для объявления переменных, ее использование аналогичноvar, а объявленная переменная, только вletДействителен в пределах блока кода, в котором находится команда
• constОбъявите константу только для чтения. После объявления значение константы не может быть изменено
• Временная мертвая зона
  • ES6 четко оговаривает, что если в блоке есть команды let и const, то переменные, объявленные этим блоком для этих команд, с самого начала образуют закрытую область видимости. Каждый раз, когда эти переменные используются до их объявления, будет сообщено об ошибке.

  var tmp = 123;
  if (true) {
    tmp = 'abc'; // ReferenceError报错
    let tmp;
  }
  

2. Разница между назначением, глубоким копированием и поверхностным копированием

• Когда мы присваиваем объект новой переменной, это фактически адрес объекта в стеке, а не данные в куче. То есть два объекта указывают на одно и то же пространство хранения.Независимо от того, какой объект изменяется, это фактически содержимое измененного пространства хранения.Поэтому два объекта связаны.

• Поверхностное копирование: повторное создание памяти в куче Базовые типы данных объектов до и после копирования не влияют друг на друга, но ссылочные типы объектов до и после копирования будут влиять друг на друга, поскольку они используют одну и ту же память.

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

3. Стрелочные функции

• Синтаксис стал более лаконичным и понятным. Как видно из приведенного выше базового примера синтаксиса стрелочной функции, определение стрелочной функции намного проще, понятнее и быстрее, чем определение обычной функции.

• Стрелочные функции неprototype(прототип), поэтому сама функция стрелки неthis

• Стрелочные функции не имеют собственныхthis, стрелочная функцияthisУказывает на первую обычную функцию, унаследованную от внешнего уровня, когда она определена (примечание: это время определения, а не время вызова).this. Итак, в стрелочной функцииthisУказатель на определяется, когда он определен, и никогда не изменяется после этого.

• Стрелочные функции не привязаныarguments, вместоrestпараметр...заменятьargumentsobject для доступа к списку параметров стрелочной функции. Стрелочные функции не имеют собственныхargumentsобъект. доступ в стрелочной функцииargumentsНа самом деле получается значение во внешней локальной (функции) среде выполнения.

4. Функции и отличия применения, вызова и связывания

4.1 Общая основа

• Все три используются для изменения контекста функции, то есть для измененияthisнаправление

4.2 Отличия

• bindНе вызывается немедленно, но возвращает новую связанную функцию. Сценарий использования такой: нужно не сразу указывать, а при генерации новой функции привязывать функцию к объекту для длительного использования

let newFn = fn.bind(this.Obj)
newFn(arg1,arg2,arg3...)

• call,applyвызываются немедленно
  • applyОн вызывается сразу и возвращает результат выполнения функции, это указывает на первый параметр, второй параметр - массив, а содержимое этого массива - параметры функции fn (fn.apply(this.Obj,[arg1,arg2,...])). Сценарий использования: если нужно передать много параметров, вы можете использовать массив для вызова параметров
  • callТак же вызывается сразу, возвращая результат выполнения функции, это указывает на первый параметр, после может быть несколько параметров, а это параметры функции fn(fn.call(this.Obj,arg1,arg2...)). Сценарий использования: Параметров для передачи не так много, можно использовать

5. Различные методы API для массивов и символов

5.1 Массивы

• создать массив

  • Array() let arr = new Array()
  • [] let arr = []
  • Array.of() Array.of(1,2,3) // [1,2,3]

• проверить массив

  • Array.isArray(value)

• Метод преобразования:

  • toLocaleString()
  • toString()

  •   let colors = ['red','yellow', 'blue'];
      console.log(colors.toString()) // red,blue,green
      console.log(colors.toLocaleString()) // red,blue,green
    

• метод стека:

  • push()Добавьте элемент в конец массива (исходный массив будет изменен) и верните длину измененного массива.
  • pop()Удалить последний элемент с конца массива (изменить исходный массив), уменьшить длину массива и вернуть удаленный элемент

• Метод очереди:

  • shift()Удалить первый элемент в массиве (изменить исходный массив) и вернуть элемент
  • unshift()Добавьте любое количество элементов в начало массива (исходный массив будет изменен) и верните длину массива.

• Управление методами массива:

  • reverse()Переворачивает массив (изменяет исходный массив) и возвращает отсортированный массив

  • sort()По умолчанию элементы массива сортируются в порядке возрастания, вызываяtoString()затем сравните полученные строки, чтобы определить способ сортировки (который изменяет исходный массив). также можетпринимает функцию. вернуть отсортированный массив

  • concat()для объединения двух или более массивовarrayObject.concat(arrayX,arrayX,......,arrayX), сначала создаст копию текущего массива, затем добавит полученные параметры в конец копии и, наконец, вернет только что построенный массив (не будет изменять исходный массив)

  • slice()Создает новый массив на основе одного или нескольких элементов текущего массива, принимая один или два аргумента, начальную и конечную позиции для возврата (не изменяет исходный массив)

  • splice()Первый параметр — начальная позиция, второй параметр — удалить несколько, а третий параметр — любой элемент, который нужно вставить. splice возвращает массив удаленных элементов, если нет, то возвращает пустой (можно выполнять операции удаления, вставки и замены) (исходный массив будет изменен)

  • fill()Этот метод использует заданное значение для заполнения массива (исходный массив будет изменен)

   ['a', 'b', 'c'].fill(7)
   // [7, 7, 7]
   new Array(3).fill(7)
   // [7, 7, 7]
  

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

   ['a', 'b', 'c'].fill(7, 1, 2)
   // ['a', 7, 'c']
  

  • flat()Используется для "выравнивания" вложенного массива в массив, возвращая новый массив. Получает параметр, указывающий количество выравниваемых слоев (не изменяет исходный массив)

• Как проверить местоположение:

  • indexOf(),lastIndexOf()
    • indexOf()а такжеlastIndexOf()Оба получают два аргумента: элемент для поиска и индекс, указывающий, с чего начать поиск.indexOfМетод ищет с начала массива,lastIndexOfМетод ищет с конца массива. возврат, если не найден-1
  • findIndex()Возвращает первую квалифицированную позицию члена массива, если не найдено, возвращает -1, два параметра: каждую функцию обработчика элементов и (необязательно) объект области для запуска функции.

  [1, 5, 10, 15].findIndex(function(value, index, arr) {//依次当前的值、当前的位置和原数组
   	return value > 9;
  }) // 2
  

• Метод проверки значения:

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

  [1, 4, -5, 10].find((n) => n < 0) // -5
  

  • includes()Возвращает логическое значение, которое принимает два аргумента: искомый элемент и индекс, указывающий, с чего начать поиск.

• Метод итерации:

  • everyЗапустите данную функцию для каждого элемента в массиве, если функция возвращает значение для каждого элемента.true, затем вернутьсяtrue, иначе возвратfalse(то есть возвращаются все парыtrue, иначе оба возвращаютсяfalse)

  • someВ отличие от первого, этот метод передается только в массиве пар функций.определенный предметвернутьtrue, вернусьtrue(то есть возвращаются все ошибкиfalse, иначе вернитесь, если есть совпадениеtrue)

  • filterВозвращает новый массив элементов, соответствующих критериям фильтра (не изменяет исходный массив)

  let number = [1,2,3,4,5];
   let filterResult = number.filter((item, index, array)=>{
       return item > 2
   })
  console.log(filterResult)// [3, 4, 5]
  

  • forEachОн просто запускает переданную функцию для каждого элемента массива. Нет возвращаемого значения (обход исходного массива изменит исходный массив)

  • mapВозвращает новый массив, в котором каждый элемент является результатом выполнения переданной функции над соответствующим элементом в исходном массиве (не изменяет исходный массив)

  let number = [1,2,3,4,5];
   let mapResult = number.map((item, index, array)=>{
       return item * 2
   })
  console.log(mapResult)// [2, 4, 6, 8, 10]
  

6. Способы обхода объектов

• for inВ основном используется для обхода перечислимых свойств объектов, включая собственные свойства, свойства, унаследованные от прототипов.

var obj = {"name":"tom","sex":"male"}

Object.defineProperty(obj, "age", {value:"18", enumerable:false})
//增加不可枚举的属性age

Object.prototype.protoPer1 = function(){console.log("name is tom");}
//通过原型链增加属性，为一个函数

Object.prototype.protoPer2 = 2 //通过原型链增加属性，为一个整型值2

for(var a in obj){
	console.log(a)
    console.log(obj[a])
}
//	示例中的属性age为不可可枚举，所以没有输出

• Object.keysЭтот метод возвращает массив, элементы которого являются собственными перечисляемыми свойствами объекта.

//	(示例为上面代码)
console.log(Object.keys(obj))
//	["name","sex"]

• Object.getOwnPropertyЭтот метод используется для возврата собственных свойств объекта, включая перечисляемые инеисчислимоесвойства

//	(示例为上面代码)
console.log(Object.getOwnPropertyNames(obj))
//	["name","sex","age"]

7. Общие новые функции Es6

• Класс ES6 Класс
• для... из и для... в
• деструктуризация объектов
• оператор отдыха / оператор спреда
• строка шаблона
• const let
• promise
• асинхронная функция
• Module

8. Разница между Set, Map, WeakSet и WeakMap

Для получения подробной информации о различиях, пожалуйста, обратитесь к Учителю Жуань Ифэн.Начало работы с ECMAScript 6 Set and Map Data Structures

• Коллекция (Set) ES6 предоставляет новую структуру данных Set. Он похож на массив, но все значения членов уникальны и нет повторяющихся значений.

• Карта — это структура данных, используемая для доступа к парам ключ-значение. Ключ может соответствовать только одному значению, и ключ не может повторяться.

• Структура WeakSet похожа на Set, это набор уникальных значений.

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

• Структура WeakMap аналогична структуре Map и также используется для создания набора пар ключ-значение.

  • WeakMap принимает в качестве ключей только объекты (кроме null) и не принимает в качестве ключей другие типы значений
  • Объект, на который указывает имя ключа WeakMap, не включается в механизм сборки мусора.

9. Понимание прототипа и цепочки прототипов

Например, в языке c есть классы для достижения наследования, в java можно добиться наследования через абстрактные классы, а js использует цепочку прототипов в качестве основного способа достижения наследования, чтобы абстрагировать класс вещей, чтобы один и тот же класс вещей мог иметь одни и те же атрибуты и методы. С точки зрения структуры данных, цепочка прототипов на самом деле представляет собой связанный список, экземпляр которого содержит указатель на прототип, а прототип содержит указатель на функцию-конструктор.

10. Этапы потока событий браузера и три параметра прослушивания событий

Распространение события DOM состоит из трех этапов:

• 1. Этап захвата
• 2. Целевой объект вызывает обработчик события
• 3. Стадия пузырения

Третий параметрtrueПросто перейдите к фазе захвата, дляfalseПросто перейдите на стадию пузырения. Захват нельзя отменить, а бубнить можно. События привязки по умолчанию относятся к фазе всплытия

11. Проблемы с закрытием

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

12. Как очистить замыкания

Смысл замыкания в том, что когда функция вызывается, она может получить доступ к той области видимости, к которой функция может получить доступ, когда она определена.Например, когда функция a определена, a может получить доступ к переменной b. Каждая функция имеет собственное соответствующее замыкание.Если функция не собирается механизмом сборки мусора, соответствующее замыкание функции также будет находиться в памяти. Если вам нужно очистить замыкание, вам нужно повторно использовать ненужные функции.Согласно механизму повторного использования JavaScript, когда на пространство памяти не указывает переменная, оно будет повторно использовано. Тогда способ очистить закрытие - присвоить имя функции, которое не требуется, для null

Рамка

1. Почему данные vue — это метод?

• Поскольку компонент используется для повторного использования, а объект в JS является ссылочной связью, если компонентdataявляется объектом, то область действия не изолирована, подкомпонентыdataЗначения свойств будут влиять друг на друга, если компонентdataoption является функцией, то каждый экземпляр может поддерживать независимую копию возвращаемого объекта, а между экземплярами компонентаdataЗначения атрибутов не будут влиять друг на друга, а новые экземпляры Vue не будут использоваться повторно, поэтому нет проблем со ссылками на объекты.

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

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

На общие дочерние компоненты, передачу значений дочерним компонентам и Vuex следует ответить, но можете ли вы ответить более четко и всесторонне? Может быть, это может заставить глаза интервьюера сиять (пожалуйста, проверьте справочную статьюЕсть так много способов общаться с компонентами Vue? Сколько ты знаешь)

3. следить за реализацией мониторинга

Кратко объясните принцип (подробности см. в официальном исходном коде):vmпередача$watch, первый звонокobserveсоздание функцииObserverданные наблюдения экземпляра,Observerсоздан сноваDep , DepИспользуется для поддержания подписчиков. затем создайтеWatcherприведенный примерupdateфункция. Как только данные изменяются, функция обратного вызова выполняется слой за слоем.

4. Режим хеширования и истории vue-router

4.1 хеш-режим

hashРежим, изначально использовавшийся для управления положением окна страницы в сочетании с точкой привязки, имеет следующие характеристики:

• В хеш-режиме все переходы страниц выполняются клиентом, что делает его более гибким для перехвата страниц, но каждое изменение URL-адреса не относится к http-запросу, поэтому это не способствует SEO-оптимизации.

• hashПаттерн — это паттерн, в котором путь внешнего маршрута сращен с решеткой # после реального URL. При изменении пути после знака решетки # браузер не будет повторно инициировать запрос, а сработаетhashchangeмероприятие.

• URL-адрес можно изменить без перезагрузки страницы (изменения хеша регистрируются вwindow.hisotryMedium), поэтому он не считается http-запросом, поэтому этот режим не способствует SEO-оптимизации.

• Вы можете изменить только часть после #, поэтому вы можете перейти только к URL-адресу того же документа, что и текущий URL-адрес.

• URL можно изменить только строкой

• пройти черезwindow.onhashchangeОтслеживайте изменения хэша для достижения функции перехода без обновления

4.2 режим истории

historyрежим, по данным Mozilla Developer Network, с использованиемhistory.pushState()По сравнению с прямым изменением хэша есть следующие преимущества:

• history APIЭто новая функция, предоставляемая H5, которая позволяет разработчикам напрямую изменять интерфейсную маршрутизацию, то есть обновлять URL-адрес браузера без повторной инициации запроса.

• Новый URL-адрес может быть любым URL-адресом того же происхождения, что и текущий URL-адрес, или он может совпадать с текущим URL-адресом, но это будет записывать повторяющуюся операцию в стеке.

• по параметруstateObjectВ запись можно добавить любой тип данных

• Доступны дополнительные настройкиtitleсвойства для последующего использования

• пройти черезpushState,replaceStateРеализуйте функцию скачка без обновления

• Совместимость не так хорошаhash, и требует поддержки сервера, иначе при обновлении страницы будет 404

• существуетhistoryрежим, сhistory.pushStateРеализовать скачок страницы без обновления; изменение URL-адреса таким образом относится к http-запросу, поэтому сервер будет повторно запрошен, что также заставляет нас настраивать адрес на стороне сервера, иначе сторона сервера будет вернуть 404, дабы убедиться, что нет проблем, самое благо, настроить страницу 404 в проекте

5. Разница между vue3 Proxy и vue2 defineProperty

5.1 Недостатки DefineProperty

• Нет возможности обнаружить добавление или удаление свойств объекта, для этого нужно использоватьVue.setа такжеVue.deleteчтобы убедиться, что система реагирования работает, как ожидалось
• Изменения нижнего индекса массива и длины массива не могут быть отслежены.Когда значение массива устанавливается напрямую или длина массива изменяется через нижний индекс массива, он не может реагировать в реальном времени.
• Проблема с производительностью, когда в данных много данных, а уровень глубокий, потому что все данные в данных должны быть пройдены и настроены на реагирование, производительность будет снижена.

5.2 Сравнение и разница

• Object.definePropertyМогут быть захвачены только свойства объекта, а новые свойства необходимо добавлять вручную.Observe,а такжеProxyявляется прямым прокси-объектом
• ЗачемProxyМожно ли решить вышеуказанные болевые точки? Существенная причина в том, чтоProxyЭто объект со встроенным перехватчиком, и весь внешний доступ должен сначала пройти через этот уровень перехвата. Независимо от того, является ли это ранее определенным свойством или недавно добавленным свойством, доступ будет перехвачен (proxyДля получения более подробной информации ознакомьтесь с учебным пособием Ruan Yifeng по ES6.Proxy)

6. Разница между вычислением и просмотром

6.1 Концепция

• computed: это вычисляемое свойство, которое зависит от значений других свойств, иcomputedЗначение кеша кешируется, и только значение атрибута от него зависит, изменяется, при следующем извлеченииcomputedзначение будет пересчитаноcomputedзначение
• watch: больше роли «наблюдения», похожей на обратный вызов мониторинга некоторых данных, всякий раз, когда отслеживаемые данные изменяются, обратный вызов будет выполняться для последующих операций.

6.2 Различия

• такой же:computedа такжеwatchОба играют роль мониторинга / использования данных и их обработки.
• разные: они обаvueРеализация слушателя, ноcomputedВ основном используется для обработки синхронных данных,watchОн в основном используется для наблюдения за изменением определенного значения для завершения сложной бизнес-логики с высокими затратами. может быть использованcomputedприоритет, когдаcomputed, чтобы избежать множественных вызовов, когда несколько данных влияют на один из нихwatchсмущающая ситуация

7. В каком жизненном цикле вызывается асинхронный запрос

в функции хукаcreated,beforeMount,mountedвызывается, потому что в этих трех функциях ловушекdataОн создан, и данные, возвращаемые сервером, могут быть назначены. Но я рекомендуюcreatedАсинхронный запрос вызывается в функции ловушки, потому что вcreatedВызов асинхронных запросов в функциях ловушек имеет следующие преимущества.

• Получите данные на стороне сервера быстрее и сократите время загрузки страницы
• сср не поддерживаетbeforeMount,mountedфункция ловушки, поэтому поставьтеcreatedПоследовательность

8. Виртуальный дом

8.1 Каковы преимущества виртуального DOM?

• Если предположить, что за одну операцию выполняется 10 действий по обновлению DOM, виртуальный DOM не будет выполнять DOM немедленно, а будет обновлять его 10 раз.diffКонтент сохраняется в локальный объект JS, и, наконец, этот объект JS является одноразовым.attchприбытьDOMНа дереве выполняются последующие операции, чтобы избежать большого количества ненужных вычислений. Таким образом, преимущество использования JS-объектов для имитации узлов DOM заключается в том, что обновления страниц могут полностью отражаться сначала на виртуальном DOM, а скорость работы JS-объектов в памяти, очевидно, выше.После завершения обновления конечные JS-объекты отображается в настоящий DOM, передается браузеру для рисования

8.2 Сравнение и работа с объектами JS с помощью алгоритма DIFF для дифференциального обновления

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

8.3 Фактические правила рендеринга Virtual DOM

Общий поток Vue и React:vue template/react jsx -> renderфункция -> генерироватьVNode-> Когда есть изменения, новые и старыеVNode diff -> diffСравнение алгоритмов и собственно обновление реального DOM

9. Новые функции Vue3

• Composition API(Посмотрите на картинку, чтобы решить проблему, когда разработчики постоянно прыгают вверх и вниз при завершении или чтении кода, а код одной и той же функции недостаточно агрегирован)
  • Основные моменты использования: вся функция является функцией; функция содержит данные и логику, необходимые для создания новой папки; функция полностью независима, и функцию можно использовать повторно.
  
• попрощаться$set
  • то есть упомянутый вышеProxyПерепишите метод двусторонней привязки данных, чтобы решить проблему болевой точки.
• Fragments
  • Проще говоря, компоненты официально поддерживают объявление нескольких корневых узлов в vue3. То есть возможен следующий способ записи. В то же время нам нужно показать, где распространяется объявление, а также это означает, что функция рендеринга также может возвращать массивattribute
• Vue3.0будуtsx,class componentждем лучшей поддержки
• destroyedЖизненный цикл переименован вunmounted
• beforeDestroyЖизненный цикл переименован вbeforeUnmount

10. Семь методов перезаписи массивов внизу vue

10.1 Обзор

Vue слушает трилогию Array (только общий принцип, пожалуйста, проверьте официальный исходный код для понимания или проверьте некоторые авторитетные книги об исходном коде Vue)

• Шаг 1: Сначала получите метод-прототип нативного массива, потому что после перехвата нативный метод по-прежнему нужен, чтобы помочь нам реализовать изменение массива.
• Шаг 2: Используйте метод прототипа ArrayObject.definePropertyсделать перехват
• Шаг 3: Направьте прототип данных типа Array, который нужно перехватить, на модифицированный прототип.

10.2 Переопределенные методы массива

push(),pop(),shift(),unshift(),splice(),sort(),reverse()

11. Разница между vue и реагированием

11.1 Сходства

• Это идея разработки компонентов
• Оба поддерживают рендеринг на стороне сервера.
• оба используютVirtual DOM, компонентное развитие, черезpropsПараметры используются для передачи данных родительского и дочернего компонентов, все они реализованыwebComponentТехнические характеристики
• представление на основе данных
• иметь поддержкуnativeСхема РеактаReact native, Вьюweex
• У всех есть управление состоянием, у React есть redux, у Vue есть собственный Vuex (адаптивный vue, сделанный на заказ)

11.2 Различия

• React предназначен строго только для уровня представления MVC, Vue — это режим MVVM.
• Виртуальный DOM отличается. Vue будет отслеживать зависимости каждого компонента без повторной визуализации всего дерева компонентов. Для React всякий раз, когда изменяется состояние приложения, все компоненты будут повторно отображаться, поэтому для реакции потребуетсяshouldComponentUpdateЭтот метод функции жизненного цикла для управления
• Компоненты пишутся по-другому React рекомендуетJSX + inline style, то есть положитьHTMLа такжеCSSвсе написано вJavaScript, то естьall in js; Рекомендуемый подход Vue:webpack+vue-loadeоднофайловый компонентный формат, т.е.html,css,jsзаписать в тот же файл
• Привязка данных: Vue реализует двустороннюю привязку данных, а поток данных реакции является односторонним.
• stateОбъекты неизменяемы в реагирующих приложениях и должны использоватьсяsetStateметод обновляет состояние; вvueсередина,stateОбъект не требуется, данные предоставляютсяdataСвойства управляются в объекте vue;

12.keep-alive

• keep-alive — это встроенный компонент Vue.js.<keep-alive>При упаковке динамических компонентов неактивные экземпляры компонентов кэшируются, а не уничтожаются. Он не отображает элемент DOM сам по себе и не появляется в цепочке родительских компонентов. когда компонент находится в<keep-alive>переключается внутри, этоactivatedа такжеdeactivatedДве функции ловушки жизненного цикла будут выполняться соответствующим образом. Это обеспечиваетincludeа такжеexcludeДва свойства, которые позволяют компонентам условно кэшировать

13.vuex

Ядро vuex 13.1:

• state:место храненияstoreразличные состояния
• mutation: ИзменятьstoreСостояние можно пройти только черезmutationметод
• action: метод асинхронной работы
• module: Модульный
• getter: Эквивалентно вычисляемому свойству, отфильтровывающему некоторые значения.

13.2 Использование vuex

• Ядром каждого приложения Vuex являетсяstore(склад).“store”В основном контейнер, который содержит большую часть состояния в вашем приложении. Vuex отличается от чистого глобального объекта следующими двумя способами:

• Хранилище состояния Vuex является реактивным. Когда компонент Vue запускается изstoreПри чтении статуса в , еслиstoreЕсли состояние на сервере изменится, соответствующий компонент будет соответственно эффективно обновлен.

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

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

1. Разрешение DNS

Роль DNS (аббревиатура от Domain Name System) очень проста: в общем, узнать IP-адрес на основе доменного имени.

1.1 Порядок разрешения DNS

• местныйhostsдокумент
• местныйDNSтайник
• DNSкеш сервера
• DNSРекурсивный поиск сервера

1.2 Типы записей DNS

Когда мы покупаем доменное имя в облаке Alibaba, мы можем настроить правила разрешения доменных имен для нашего хоста, то естьЗаписыватьОбщие типы записей DNS следующие:

• A: адресные записи (Address), возвращает IP-адрес, на который указывает доменное имя
• NS: записи сервера имен (Name Server), возвращает адрес сервера, на котором хранится информация о доменном имени следующего уровня. Эта запись может быть установлена ​​только на доменное имя, а не на IP-адрес.
• MX: Журнал почты (Mail eXchange), возвращает адрес сервера, который получает электронную почту
• CNAME: запись канонического имени (Canonical Name), возвращает другое доменное имя, то есть запрашиваемое в данный момент доменное имя является перенаправлением другого доменного имени.
• PTR: обратные записи запроса (Pointer Record), используется только для запроса доменных имен с IP-адресов

1.3 Рекурсивный поиск DNS

Как DNS-сервер выполняет рекурсивный поиск (в качестве примера возьмем этот адрес)tlab.cloud.tencent.com. 600 IN A 193.112.230.97)

• Спросите имя корневого домена, получите доменное имя верхнего уровня.comизNS(Name Server)а такжеA(Address),NSимя домена верхнего уровня,AкоторыйNSсоответствующий IP-адрес
• Спросите доменное имя верхнего уровня, получите доменное имя второго уровня.tencnet.comизNSа такжеA
• Спросите доменное имя второго уровня, получите доменное имя третьего уровня.cloud.tencent.comНС иA
• Спросите доменное имя третьего уровня, получите доменное имя четвертого уровня.tlab.cloud.tencent.comНС иA
• Наконец, будетtlab.cloud.tencent.comIP-адрес возвращается пользователю и кэшируется
• Пользователь получает реальный IP-адрес и кэширует его.

2. Разница между Http1 и Http2

2.1 Недостатки HTTP/1.1

• Блокировка в начале очереди

  • Хотя протокол HTTP/1.1 может отправлять несколько запросов по одному и тому же соединению TCP, эти несколько запросов упорядочены, и перед ответом на следующий запрос необходимо обработать первый запрос. Если первый запрос обрабатывается очень медленно, все последующие запросы нужно будет ставить в очередь.

• Предел подключения TCP

  • Для того же доменного имени браузер также может создать до 6 до 8 соединений TCP. Если страница имеет десять одновременных запросов, единственным шагом один из шести до восьми запросов возвращается для продолжения следующих двух до четырех запросов. Как вы можете сделать? Фрагментированная технология доменного имени вошла. То есть ресурсы выделяются на разное доменное имя (могут быть два подделки), это разрешит бы ограничения, приятные - но злоупотребление техникой нарезки доменных имени не работает, потому что каждое TCP-соединение также очень много времени (Это все знаем).

• В Заголовке много контента, иногда он может превышать контент ответа, и многие поля каждый раз передаются повторно.

• HTTP/1.1 — это передача по текстовому протоколу, который недостаточно безопасен.

2.2 Новые функции HTTP2 по сравнению с HTTP/1.1 включают:

• Мультиплексирование (MultiPlexing), одиночное длинное соединение, передача в бинарном формате, установка приоритета запроса

• сжатие заголовка

• Сервер Push

3. Разница между HTTP и HTTPS

Основное отличие HTTPS от HTTP (дополнительный уровень SSL или TSL)

• 1. Для подачи заявки на сертификат по протоколу https необходимо перейти в ca.Как правило, бесплатных сертификатов мало, поэтому требуется определенная плата.

• 2. http — это протокол передачи гипертекста, информация передается в виде простого текста, а https — безопасный протокол передачи с шифрованием ssl.

• 3. http и https используют совершенно разные способы подключения, и используемые порты тоже разные.Первый 80 а второй 443

• 4. Соединение по http очень простое и без сохранения состояния; протокол HTTPS — это сетевой протокол, созданный на основе протокола SSL+HTTP, который может выполнять зашифрованную передачу и аутентификацию личности, что является более безопасным, чем протокол http.

4. Согласуйте разницу между кешем и сильным кешем

• Тот же момент: при попадании загружается ресурс из кэша клиента, а не данные ресурса с сервера
• Разница: сильный кеш не отправляет запросы на сервер, в то время как согласованный кеш отправляет запросы на сервер
• Подробнее читайте в моей предыдущей статье (Базовые знания о внешнем интерфейсе ⑥ — Оптимизация производительности, веб-безопасность, общие команды Linux)

5. Разница между get и post

• GETПараметры запроса полностью сохраняются в истории браузера, при этомPOSTПараметры не сохраняются

• GETПараметры передаются через URL,POSTпомещатьRequest bodyсередина.GETСравниватьPOSTМенее безопасный, поскольку параметры отображаются непосредственно в URL-адресе, поэтому их нельзя использовать для передачи конфиденциальной информации.

• GETдля получения информации,POSTИспользуется для изменения данных на сервере (обычно следуйте этому правилу)

• Разница между описанием двух в «Иллюстрированном HTTP»

  • GET: используется для запроса доступа к ресурсу, указанному в URI.
  • POST: тело, используемое для передачи сущности (POSTа такжеGETФункционал похож, ноPOSTОсновная цель не получение соответствующего содержания тела)

6. Разница между файлом cookie и сеансом

• cookieДанные хранятся в браузере клиента (клиент),sessionДанные размещаются на сервере, но на стороне сервераsessionреализация пожеланий клиентаcookieзависимый

• cookieНе очень безопасно, другие могут анализировать сохраненное локальноCOOKIEи выполнятьCOOKIEспуфинг, следует использовать из соображений безопасностиsession

• sessionбудет храниться на сервере в течение определенного периода времени. Когда доступ увеличится, он поднимет производительность вашего сервера. Принимая во внимание аспекты снижения производительности сервера, вы должны использоватьCOOKIE

• ОдинcookieОграничение на клиенте 4К, значит сайт хранится на клиентеCOOKIEНе может превышать 4K

7. Используйте axios, чтобы единообразно добавить поле в заголовок каждого запроса.

Используйте перехватчик запросов axios,axios.interceptors.request.use

Суммировать

В следующий раз я напишу статью, связанную с интервью, возможно, весной, что также является DDL моего 21-классника. Потому что некоторые вопросы встречаются в интервью, ответы будут очень расплывчатыми.Фундаментальная причина в том, что я не читал достаточно книг, и у меня нет понимания многих понятий.Если вы только посмотрите на эти краткие понятия, то когда вы интервью, как только интервьюер копает глубоко, вы не сможете на них ответить.Рекомендуется уделить время чтению книг и просмотру официальных документов). Так что через какое-то время я должен уделить время чтению книг во время практики и улучшить всю свою систему знаний, а также, возможно, в будущем я напишу несколько статей о знаниях в книгах.

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

Если вы считаете, что я пишу неплохо, вы можете поставить мне лайк ^^, если что-то не так или плохо, пожалуйста, прокомментируйте и укажите на это, чтобы я мог исправить

Другие статьи

• Как пройти первый уровень собеседования【Резюме】
• Индивидуальный процесс обучения (маршрут обучения)
• Базовые знания о внешнем интерфейсе ⑥ — Оптимизация производительности, веб-безопасность, общие команды Linux
• Базовые знания о внешнем интерфейсе ⑤—— Http, Ajax, междоменные
• Базовые знания о внешнем интерфейсе ④—— События и DOM
• Базовые знания о внешнем интерфейсе ③—— Асинхронный (вопросы сцены интервью)
• Базовые знания о внешнем интерфейсе ②—— Объем и закрытие (вопросы сцены интервью)
• Базовые знания о внешнем интерфейсе ①——CSS-вопросы на собеседовании