Фундамент не крепкий, земля трясется! ! !

2022.1.12

1. В чем разница между vue2 и vue3? Какие функции были добавлены в vue3?

разница:
1. Изменился принцип двусторонней привязки данных
Двусторонняя привязка данных Vue2 использует ES5Object.defineProperty()Захватите данные и объедините режим публикации-подписки для достижения
Использование ES6 в vue3ProxyAPI для брокера данных

2. Корневой узел
vue2 имеет только один корневой узел
vue3 может иметь несколько корневых узлов

3.API
Vue2 использует API типа опций (API опций): используйте атрибуты для разделения компонентов Vue3 использует API композиции (Composition API): используйте методы для разделения компонентов
Composition API упрощает организацию кода в соответствии с логическими интересами, проблема с option type API заключается в следующем.this, поскольку код зависит от компонентов, его сложно обобщить по интересующим единицам.

4. Создайте данные
vue2 помещает данные в данные

export default {
    data() {
        return {
            name: ''
        }
    }
}

использование vue3setupметод, срабатывающий при инициализации и построении компонента

<template>
  <div>
    <h2> {{ state.name }} </h2>
  </div>
</template>
<script>
import { reactive } from 'vue' //引入reactive声明数据为响应性数据

export default {
  props: {
    title: String
  },
  setup () { // 使用setup()方法来返回我们的响应性数据
    const state = reactive({
      name: '',
    })

    return { state }
  }
}
</script>

5. Смена жизненного крючка

vue2	vue3
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated

6. Различные параметры
От отца к ребенку: vue3 получает через реквизит и преобразует в отзывчивый toRefs (реквизит) через toRefs
От ребенка к родителю: в Vue2 вызывается this.$emit, а затем передаются имя события и объект параметра. В vue3 этого нет, это можно передать только через параметры в setup
7.vue3 меньше и быстрее, чем Vue2

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

Добавлены функции:
Производительность: оптимизация производительности
Поддержка встряхивания дерева: поддержка оптимизации встряхивания дерева
API композиции: API композиции
Фрагмент, Телепорт, Саспенс: новые компоненты
Улучшенная поддержка TypeScript: Улучшенная поддержка TypeScript
API пользовательского рендерера: Пользовательский рендерер

2. Зачем использовать Proxy API вместо defineProperty API в Vue3.0?

Недостатки API определения свойства:

• Vue2 завершает ответ данных путем перехвата данных с помощью функций получения и установки в Object.defineproperty.
• Невозможно напрямую отслеживать добавление и удаление атрибутов
• Невозможно напрямую контролировать массив (хотя метод массива переписан, он может выполнять мониторинг только 7 методов массива)

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

• В качестве нового API для замены defineProperty в vue3 это эквивалентно добавлению уровня перехвата к внешнему слою объекта.Этот уровень перехвата может выполнять множество операций, таких как фильтрация, изменение и сбор информации о данных.
• Поскольку он перехватывается на внешнем уровне всего объекта, вы можете манипулировать свойствами объекта и отслеживать добавление и удаление свойств.
• Прокси может прослушивать изменения в массивах

3. В чем разница между Composition API, используемым Vue 3.0, и Options API, используемым Vue 2.x?

Options API: API, который мы используем в настоящее время, — это API параметров.В vue2.0, чтобы добавить логику к компоненту, мы заполняем атрибуты, такие как данные, методы, смонтированные и вычисляемые и т. д. Самый большой недостаток этого API — что это недействительный код js сам по себе. Когда мы используем API параметров, нам нужно точно знать, к каким свойствам мы можем получить доступ, и поведение текущих свойств, к которым мы обращаемся. Под капотом VUE необходимо преобразовать это свойство в рабочий код, потому что мы не получаем выгоды от автоматического предложения и проверки типов, что дает нам некоторые неудобства при использовании связанных свойств.
Composition API: В vue3.0 для решения этой проблемы используется Composition API. Цель состоит в том, чтобы решить вышеуказанные проблемы путем прямого представления доступных свойств в компоненте как функции js. Код легче читать, понимать и изучать. , без каких-либо закулисных действий
Преимущества Composition API заключаются не только в кодировании по-разному, но и, что более важно, в повторном использовании кода, не ограниченном рамками шаблонов и компонентов, и в точном знании того, какие свойства мы можем использовать, поскольку за кулисами нет операции. , поэтому редактор может помочь нам с проверкой типов и предложениями

2022.1.13

4. Попробуйте объяснить, почему таймеры setTimeout и setInterval не могут выполняться вовремя

JS является однопоточным, поэтому асинхронные события (например, щелчки мышью и таймеры) планируются для запуска только тогда, когда поток простаивает.При выполнении кода асинхронные событийные задачи выполняются в том порядке, в котором они были добавлены в очередь, setTimeout()Второй параметр просто сообщает JS, как долго нужно добавлять текущую задачу в очередь..如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码执行完了以后再执行。

5. Несколько способов вызова функции

4 типа: вызовы функций в общем виде, вызовы методов как объектов, динамические вызовы с использованием call и apply, косвенные вызовы с использованием new
Так раз есть apply/call, то почему нет бинда? Потому что бинд возвращает функцию, а не вызывает ее. Реализация эквивалентна просто навешиванию метода атрибута на объект. Кроме того, IIFE — это самовыполняющаяся функция, а движок js будет прямое исполнение, звонить не надо (личное мнение открыто для обсуждения)

6. Существующий глобальный конструкторfunction f(){}, сказатьf.__proto__ === f.__proto__.constructor.__proto__выход

function f(){}
f.__proto__ === f.__proto__.constructor.__proto__ //true

О функции:
_Proto_ любой функции — это Function.prototype, а Function._proto_ и Function.prototype равны, функция — это частный случай, а у другой не будет своего неявного прототипа и своего явного прототипа.

Function._proto_ === Function.prototype // true
// 对于函数自己生成自己的说法解释
// Function作为一个内置对象，是运行前就已经存在的东西，所以根本就不会根据自己生成自己
// 这种现象可能的解释: 1、只是简单表明一种关系,2、为了和其他函数保持一致

Разобрать:

f.__proto__ == Function.prototype
Function.prototype.constructor == Function
Function.__proto__ == Function.prototype

Расширение:

1. Зачем использоватьsetTimeoutмоделированиеsetIntervalбыло бы лучше
setIntervalбудет пропустить исполнение
Интервальный исполнитель будет добавлять этого исполнителя в очередь каждый фиксированный интервал.

• Если в очереди уже есть задача для этого исполнителя, прекратить добавление
• Если нет невыполненной текущей задачи того же исполнителя, добавьте ее обычным способом
• Если текущая задача исполнителя обрабатывается, задача была удалена из очереди, поэтому также добавьте

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

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)
// 1

.thenили.catchОжидается, что параметр будет функцией, и если будет передана не функция, произойдет проникновение значения
3. Мобильный клик: почему задержка 300 мс
Из-за небольшого экрана мобильного телефона пользователю может потребоваться увеличить экран при просмотре веб-страниц, а задержка в 300 мс используется для определения того, работает ли пользователь двумя или тремя пальцами.

2022.1.14

7. Введите URL-адрес рендеринга страницы, что произойдет?

1. Введите URL-адрес в адресную строку браузера и нажмите Enter.
2. Браузер определяет, имеет ли текущий URL кеш, и сравнивает, истек ли срок действия кеша.
3. DNS разрешает IP-адрес, соответствующий URL-адресу
4. Установить TCP-соединение на основе IP (трехстороннее рукопожатие)
5. Отправить http-запрос
6. Сервер обрабатывает запрос, а браузер принимает HTTP-ответ.
7. Браузер анализирует и отображает страницу
8. Закройте TCP-соединение (четыре волны)

8. Каковы свойства flex:1?

сгибатьсяflex-grow,flex-shrinkа такжеflex-basisАббревиатура для трех свойств
flex-grow: свойство определяет увеличение элемента, по умолчанию0, то есть если осталось место, не увеличивать
flex-shrink: Свойство определяет коэффициент уменьшения предмета, по умолчанию 1, то есть при недостатке места предмет будет уменьшен
flex-basisАтрибут : определяет основной размер, который занимает элемент до выделения лишнего пространства. На основе этого свойства браузер вычисляет, есть ли лишнее место на главной оси. Его значение по умолчаниюauto, который является оригинальным размером элемента.

9.Promise.all()а такжеPromise.race()а такжеPromise.allsettled()Какая разница?

Promise.all(): принимает в качестве параметра массив промисов, если нет, то будет вызванPromise.resolve()метод, который преобразует параметры вPromiseЭкземпляры обрабатываются дальше (параметры могут не быть массивами, но должны иметьIteratorинтерфейс, и каждый возвращаемый элементPromiseinstance), когда статус каждого члена в массиве становится успешным, возвращает массив возвращаемых значений члена. Когда один или несколько членов массива выходят из строя, вернуть возвращаемое значение первого отказавшего элемента.
Promise.race(): параметры такие же, какPromise.all(), пока член массива имеет изменение состояния члена,Promise.race()Состояние возвращенного экземпляра обещания изменится
Promise.allsettled()(ES2020): параметры те жеPromise.all(),Promise.all()Можно определить, что все запросы успешны, но до тех пор, пока один запрос не будет выполнен, он сообщит об ошибке, независимо от того, завершится ли другой запрос, иPromise.allsettled()Чтобы определить, завершился ли набор асинхронных операций (успешно или неудачно), когда состояние каждого члена массива изменяется,Promise.allsettled()Состояние возвращаемого объекта нового обещания изменится только

10. Что делает nextTick?

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

nextTickа также$nextTickРазница:
1.nextTick(callback): при изменении данных выполнить обратный вызов после обновления. Выполняет отложенный обратный вызов после завершения следующего цикла обновления DOM. Используйте этот метод сразу после изменения данных, чтобы получить обновленную модель DOM.
2.$nextTick(callback): при изменении dom обратный вызов выполняется после обновления. Отложите обратный вызов до завершения следующего цикла обновления DOM. Используйте его сразу после изменения данных, а затем дождитесь обновления DOM.
3. Эти два метода мало чем отличаются. Разница в том, что:nextTick(callback)является глобальным методом; и$nextTick(callback)обратный вызовthisавтоматически привязывается к вызывающему его экземпляру, поэтому используйте больше$nextTick(callback)

11. Какова роль useImperativeHandles и forwardRef?

ref должен получить экземпляр узла, но функциональный компонент (PureComponent) не имеет экземпляра, и нет this.В настоящее время вы не можете получить ref функционального компонента. Для решения этой проблемы введениеReact.forwardRef,React.forwardRefРазрешить некоторым компонентам получать ссылку и передавать ее дочерним компонентам

• useImperativeHandle: в функциональных компонентах используется для определения метода ссылки, предоставляемого родительскому компоненту.
• React.forwardRef: передать ссылку родительского класса ref в качестве параметра в функциональный компонент.Сам реквизит имеет только дочерние параметры, чтобы подкласс мог пересылать ссылку родительского класса.Когда родительский класс вешает ссылку на дочерний компонент Когда дочерний компонент обернут forwrardRef, вы можете напрямую повесить ссылку, созданную родительским компонентом, на элемент dom дочернего компонента

2022.1.17

12. Скажите что-нибудь о запросе опций

Запрос параметров можно использовать для запроса поддерживаемого метода запроса для междоменных запросов, что мы часто говоримпредварительный запрос.
Требования стандартной спецификации для междоменного обмена:Для методов HTTP-запросов, которые могут иметь побочные эффекты для данных сервера (особенно HTTP-запросы, отличные от GET, или POST-запросы с определенными типами MIME), браузер должен сначала использовать метод OPTIONS, чтобы инициировать предварительный запрос, чтобы определить, разрешает ли сервер его пересечение. -запрос домена
Главная цель:

• Получить все методы HTTP-запроса, поддерживаемые сервером
• Проверка прав доступа (совместное использование ресурсов CORS между источниками)

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

13. Что такое междоменный домен? Как решить кроссдоменность

Междоменный:Браузеры не могут выполнять сценарии с других веб-сайтов. Это вызвано политикой браузера о том же происхождении, ограничением безопасности, налагаемым браузером.
Та же политика происхождения:Ограничивает взаимодействие документов или сценариев, загруженных из одного источника, с ресурсами из другого источника.
Гомология: протокол,Номер порта,доменное имядолжны согласиться
Решите кросс-домены:

1. CORS
Ключом является сервер, пока сервер реализует запросы CORS, он может обмениваться данными между источниками.
2. JSONP
принцип:использоватьscriptЯрлыки не имеют междоменных ограничений, черезscriptатрибут тега src, отправленный сcallbackGET запрос параметров, сервер соберет результат после получения запросаcallbackВ функции вернитесь в браузер и позвольте браузеру выполнить ее.
недостаток:

• Поддерживается только метод GET
• Небезопасно, может подвергаться XSS-атаке

3. postMessage Проблемы, которые можно решить:

• Передача данных между страницей и новым окном, которое она открывает
• Передача данных между несколькими страницами
• Передача данных между страницей и ее iframe
• Вышеупомянутые три типа междоменной передачи данных

Применение: postMessage(data, origin)

• данные:H5 Предварительно определенные типы данных и поддержка любых объектов могут быть скопированы, но только некоторые браузеры поддерживают строку, предпочтительно использоватьJSON.stringifyсериализировать его
• источник:протокол + хост + номер порта, также можно установить*Указывает, что он поддерживает переход к любому окну. Если вы хотите быть тем же источником, что и текущее окно, вы можете установить его на/

4. document.domain + iframe
Только когда основной домен тот же, а поддомены разные
принцип:Две страницы установлены принудительноdocument.domainДля фонда реализован тот же домен
5. nginx-прокси
Принцип тот же, что и у кросс-доменного CORS, путем установки заголовка ответа на запрос.Access-Controll-Allow-Originполе и т. д.
6. промежуточное ПО nodejs
Принцип такой же, как у прокси-сервера nginx, который позволяет прокси-серверу пересылать данные.
7. location.hash + iframe
принцип:a и b взаимодействуют между доменами и используют c в качестве промежуточного программного обеспечения. Использование iframe между разными доменамиlocation.hashПо значению это же поле используется напрямуюparent.parentобъект доступа.
8. window.name + iframe
9. Протокол веб-сокетов

14. Разница между http и tcp

HTTP — это протокол прикладного уровня, который используется для описания некоторой информации о запросе.Существует тело запроса строки запроса заголовка запроса.Функция в процессе передачи заключается в предоставлении URL-адреса для более позднего уровня для запроса IP-адреса.
tcp — это протокол транспортного уровня. Протокол прикладного уровня добавляется транспортным уровнем с заголовком tcp и передается на следующий уровень. Номер порта указан в заголовке. Убедитесь, что при передаче нет ошибок.
Протокол http — это приложение, построенное поверх протокола tcp.
Почему http не подключается, а http реализован на основе tcp, а tcp ориентирован на подключение:
Соединение TCP с установлением соединения основано на передаче данных в нижней части сети.Соединение HTTP без установления соединения основано на общении и взаимодействии на уровне приложений.HTTP использует TCP для обеспечения надежности и целостности передачи данных.

15. Что такое троттлинг и защита от сотрясений и сценарии применения

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

// 定时器版本
function throttle(fn, await){
  let timer = null
  return function () {
    let context = this, args = arguments
    if (!timer) {
      const timer = setTimeout(() => {
        clearTimeout(timer)
        fn.apply(context, args)
      }, await)
    } 
  }
}
// 时间戳版本
function throttle(fn, await) {
  let curTime = Date.now()
  return function() {
    let context = this, args = arguments, nowTime = Date.now()
    // 如果两次时间间隔超过了规定时间,则执行函数
    if (nowTime - curTime >= await) {
      curTime = Date.now()
      return fn.apply(context, args)
    }
  }
}

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

Стабилизатор
В течение определенного периода времени, если событие сработает снова, отсчет времени будет отменен, а отсчет времени будет запущен заново.

function debounce(fn ,await) {
  let timer = null
  return function () {
    let context = this, args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    const timer = setTimeout(() => {
      fn.apply(context, args)
      clearTimeout(timer)
  }
}

Сценарий приложения: событие Onchange в поле ввода реализует удаленный запрос в реальном времени, а последнее событие отменяется при срабатывании.

2022.1.18

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

(1) Область действия на уровне блоков:блок ограничен{ }Include, let и const имеют область действия блока, var не имеет области действия блока. Блочная область решает две проблемы в ES5

• Внутренние переменные могут переопределять внешние переменные
• Переменная цикла, используемая для подсчета, просочилась как глобальная переменная

(2) Вариативное продвижение:Var имеет продвижение переменных, а let и const не имеют продвижения переменных, то есть переменные можно использовать только после объявления, иначе будет сообщено об ошибке.

(3) Добавьте свойства в глобальные:Глобальный объект браузера — это окно, а глобальный объект узла — глобальный. Переменная, объявленная var, является глобальной переменной и добавит эту переменную в качестве свойства глобального объекта, а let и const — нет.

(4) Повторите утверждение:Когда var объявляет переменную, вы можете объявить переменную повторно, и переменная с тем же именем, объявленная позже, перезапишет обход, объявленный ранее. const и let не допускают повторных объявлений переменных.

(5) Временная мертвая зона:Переменная недоступна, пока переменная не будет объявлена ​​с помощью команды let или const. Это синтаксически называетсяВременная мертвая зона. Переменные, объявленные с помощью var, не имеют временных мертвых зон.

(6) Установка исходного значения:Когда переменная объявлена, var и let можно использовать без установки начального значения. В то время как переменные, объявленные const, должны иметь установленное начальное значение.

(7) Указатель указывает на:И let, и const — это новые синтаксисы для создания переменных в ES6. Переменная, созданная let, может изменить указатель на (может быть переназначена). Но константные объявленные переменные не могут изменять указатель на.

17. Определить, содержит ли объект атрибут (не менее 3 типов)

1:00(. ) или квадратные скобки ([ ] )

let obj = {a: 1}
console.log(obj.b) // undefined

let obj = {a: 1}
console.log(obj['b']) // undefined

согласно сobj.b == undefined或obj[b] == undefinedПроверьте, существует ли атрибут. Однако у этого метода есть недостаток, когда obj имеет атрибут b, но значение атрибута b равноundefined, он будет судить об ошибке

2.inоператор
Если указанное свойство находится в указанном объекте или его цепочке прототипов, тоinоператор возвращаетtrue

let obj = {
    a: 1,
    b: undefined
}
'a' in obj // true
'b' in obj // true
'c' in obj // false

let obj = {a: 1}
let obj1 = Object.create(obj)
'a' in obj1 // true

Этот метод обычно может определить, что значение атрибутаundefined, но невозможно сказать, является ли свойство свойством объекта или свойством прототипа объекта 3.hasOwnProperty()

let obj = {a: 1}
let obj1 = Object.create(obj,{
  b:{
    value: '1',
    enumerable: true
  }
})
obj1.hasOwnProperty('b')        //true   自身属性
obj1.hasOwnProperty('c')           //false  不存在
obj1.hasOwnProperty('a')    //false  原型链上属性

4.Object.keys(obj).includes('a')

let obj = {a: 1}
Object.keys(obj).includes('a') // true

5.Reflect.has()
статический методReflect.has()роль иinтот же оператор

let obj = {a: 1}
Reflect.has(obj, 'a') //true

18. Реализация vue-router

1.реализация хэша
Хэш — это решетка (#) и следующая часть URL-адреса. Он часто используется в качестве привязки для навигации по странице. Изменение хэш-части URL-адреса не приведет к обновлению страницы. Изменение URL-адреса отслеживается. через событие hashchange. Единственный способ изменить URL-адрес — несколько:

• Изменить URL через браузер вперед и назад
• Изменить URL по тегу
• Изменить URL-адрес через window.location

реализация истории history предоставляет два метода: pushState и replaceState. Эти два метода изменяют часть пути URL-адреса, не вызывая обновления страницы.

2.history предоставляет событие popstate, аналогичное событию hashchange, но событие popstate немного отличается:

• Событие popstate запускается, когда URL-адрес изменяется через браузер вперед и назад.
• Изменение URL-адреса с помощью pushState/replaceState или тегов не вызывает событие popstate. К счастью, мы можем перехватывать вызовы pushState/replaceState и помечать события кликов, чтобы обнаруживать изменения URL.
• Вызов методов истории назад, вперед и вперед через js вызывает это событие, поэтому можно добиться отслеживания изменений URL, но это не так удобно, как изменение хэша.

Ссылка на основной принцип:Наггетс.Талант/пост/685457…

19. Процесс создания контекста выполнения JS

Жизненный цикл контекста выполнения состоит из двух фаз:
1. Этап создания. На этом этапе контекст выполнения создает переменные объекты, устанавливает цепочку областей действия и определяет точку
2. Фаза выполнения кода завершает назначение переменных, ссылку на функцию и выполняет другой код.

Статьи по Теме:
nuggets.capable/post/684490…
nuggets.capable/post/684490…

2022.1.19

20.Расстояние CSS

/*方式1*/
.sector {
    height: 0;
    width: 0;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-radius: 50%;
}
/*方式2*/
.sector {
    height: 0;
    width: 0;
    border: 50px solid transparent;
    border-radius: 50%;
    border-top-color: red;
    /*任意角度*/
    transform:rotate(90deg);
}

21. Изучили ли вы уровень браузера (слой рендеринга/композитный слой и т. д.) и рендеринг с помощью графического процессора (как запустить рендеринг с помощью графического процессора? Преимущества рендеринга с помощью графического процессора)?

Подведите итоги последующих обновлений. . .
Статьи по Теме:nuggets.capable/post/684490…
сегмент fault.com/ah/119000001…

22. Какие дескрипторы есть у object.defineProperty

• configurable

  тогда и только тогда, когда свойствоconfigurableключевое значениеtrueКогда дескриптор атрибута может быть изменен, атрибут также может быть удален из соответствующего объекта.
  По умолчанию false.

• enumerable

  тогда и только тогда, когда свойствоenumerableключевое значениеtrue, свойство появится в свойствах перечисления объекта.
  По умолчаниюfalse.

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

• value

  Значение, соответствующее этому свойству. Может быть любым допустимым значением JavaScript (число, объект, функция и т. д.).
  По умолчаниюundefined.

• writable

  тогда и только тогда, когда свойствоwritableключевое значениеtrueПри , значение атрибута, которое вышеvalue, возможно赋值运算符Изменять.
  По умолчаниюfalse.

Дескриптор доступа также имеет следующие необязательные ключи:

• get

  функция получения свойства, или если нет функции полученияundefined. Эта функция вызывается при доступе к свойству. При выполнении никакие параметры не передаются, но они будут переданы вthisОбъект (из-за наследования, здесьthisне обязательно объект, определяющий свойство). Возвращаемое значение этой функции используется как значение свойства.
  По умолчаниюundefined.

• set

  функция установщика свойства, или если установщика нетundefined. Эта функция вызывается при изменении значения свойства. Метод принимает параметр (то есть новое значение для присвоения), которое будет передано при присвоенииthisобъект.
  По умолчаниюundefined.

Сводка значений дескриптора по умолчанию

• ключ с логическим значениемconfigurable,enumerable а также writableЗначение по умолчаниюfalse.
• Значения свойств и ключи для функцийvalue,get а также setЗначение поля по умолчанию равноundefined.

23. Какая польза от object.freeze()

• Object.freeze() — это новая функция ES5. Она может заморозить объект. Заморозка означает, что вы не можете добавлять к объекту новые свойства, изменять существующие значения свойств, удалять существующие свойства и изменять объект. возможность записи существующих свойств. Объекты не могут быть изменены, но ссылки не защищены от изменения. Если у вас есть огромный массив или объект, и вы уверены, что данные не будут изменены, использование Object.freeze() может дать огромный прирост производительности, в основном для презентационных целей.
• заморозить можно использовать для реализации Const
• object.freeze может заставить vue не добавлять ответ

24. Разница между вызовом, привязкой и применением

• Call/bind/apply используются для изменения этой точки. Когда первый параметр передается в null или undefined, это указывает на окно. При передаче параметров связывание может передавать несколько параметров, а передача в применении представляет собой массив или массивоподобный объект
• bind возвращает функцию, а apply/call возвращает результат выполнения
• Когда функция, возвращаемая привязкой, используется в качестве конструктора, значение this, переданное при привязке, будет недействительным, но параметры по-прежнему будут действительными.
• Свяжитесь на двух массовом участии могут быть достигнуты, чтобы позвонить в функции объединить два массовых участия, похоже на участие в карри

2022.1.20

25. Поговорим оfor...inа такжеfor...ofРазница в том, какой метод можно использовать для фильтрации имен свойств в цепочке прототипов? Как определить неперечислимые свойства? Как получить имя атрибута, определенное с помощью этого метода, без изменения описания метода?

Как определить, обладает ли он итеративной способностьюArray.prototype.hasOwnProperty(Symbol.iterator)

• for...in может перебирать объекты и массивы, for...of не может перебирать объекты, но если вы хотите перебирать свойства объекта, вы можете использовать цикл for...in или встроенный Метод Object.keys()
• Цикл for...in перебирает не только числовые имена ключей, но и другие добавленные вручную ключи, даже ключи в цепочке прототипов.
• Индекс, по которому проходит for...in, имеет строковый тип.
• for..of подходит для обхода чисел/объектов массива/строк/карты/набора и т. д.объект итератораколлекция, но не может перебирать объекты
• for...of отличается от forEach() тем, что правильно реагирует на операторы break, continue и return
• имеютОбъект Iterator (Итератор)можно использовать для ... из

одним словомИспользуйте for...of для обхода массива и for...in для обхода объекта

использоватьObject.hasOwnProperty()Фильтровать имена свойств в цепочке прототипов

Можно использовать определение неперечислимых свойствObject.defineProperty()а такжеObject.defineProperties()(Дополнительно: оба функционируют одинаково,Object.defineProperties()можно понимать какObject.defineProperty()Обновленная версия может изменять свойства нескольких объектов)enumerableДескрипторfalse

Обычные свойства, добавляемые с помощью операций присваивания, являются перечислимыми и будут перечисляться в (for...inили Object.keysметод) При получении неперечислимых свойств вы можете использоватьObject.getOwnPropertyNames()Метод, который возвращает целевой объект, не может быть перечислен и значения значений перечисления, одновременно используяReflect.ownKeys()чтобы получить.Reflect.ownKeys()Возвращаемое значение эквивалентноObject.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))

26. Поговорите о разнице между срезом и сплайсингом

splice изменяет исходный массив, а slice — нет.
splice

• Добавляет или удаляет элементы, возвращает удаленный элемент
• изменит исходный массив
• грамматика:array.splice(start[,num, item1...itemN)

// 删除,第二个参数可选,没有则删除第一个参数位置以后所有的元素,为0则不删除
let arr = ['a', 'b', 'c', 'd']
let arr1 = arr.splice(2,1)
console.log(arr)// ['a', 'b', 'd']
console.log(arr1)// ['c']
// 新增
let arr = ['a', 'b', 'c', 'd']
let arr1 = arr.splice(2, 0, 'h')
console.log(arr)// ['a', 'b','h', 'c', 'd']
console.log(arr1)// []

slice

• Возвращает выбранный элемент
• не изменяет исходный массив
• грамматика:array.slice([start,end])

let arr = ['a', 'b', 'c', 'd']
let arr1 = arr.slice()
console.log(arr)// ['a', 'b', 'c', 'd']
console.log(arr1)// ['a', 'b', 'c', 'd']
// 1位置开始,2位置结束,但不包括2
let arr = ['a', 'b', 'c', 'd']
let arr1 = arr.slice(1,2)
console.log(arr)// ['a', 'b', 'c', 'd']
console.log(arr1)// ['a', 'c', 'd']

let arr = ['a', 'b', 'c', 'd']
let arr1 = arr.slice(1)
console.log(arr)// ['a', 'b', 'c', 'd']
console.log(arr1)// ['b', 'c', 'd']

27. Расскажите о разнице между mouseover и mouseenter.

• Событие mouseover (с поддерживаемыми пузырьками) запускается всякий раз, когда указатель мыши проходит над выбранным элементом или его дочерними элементами. Соответствует отсутствию мыши
• Событие mouseenter запускается только тогда, когда указатель мыши проходит над выбранным элементом (всплытие не поддерживается). соответствующий мышиному листу

2022.1.21

28. Кратко о процессе выполнения js (продвижение переменных, контекст выполнения, этап компиляции, этап выполнения, обработка асинхронного метода) ps: В коде есть несколько одинаковых переменных и функций, как они с ними справляются

Ссылки по теме:Наггетс. К / post / 705151 ...

29. Расскажите об инструментах отладки, обычно используемых во внешнем интерфейсе консоли Google Chrome.

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

30. Пожалуйста, рассчитайте угол часовой и минутной стрелок часов (меньший из двух углов, округлить в большую сторону). Время передается в формате ЧЧ:мм. примерangle('12:00')// 0,angle('23:30')// 165

Тема LeetCode:Lee TCO's-talent.com/problems/press…

2022.1.24

31. Как определить, что объект пуст

1.for...in

function checkObj (obj) {
    for(let i in obj) {
        return false
    }
    return true
}
let obj = {}
console.log(checkObj(obj))// true

let obj = {a:1}
console.log(checkObj(obj))// false

мы все знаемfor...inСвойства прототипов могут быть пройдены, так что помните об этом

let obj = {a:1}
let obj1 = Object.create(obj)

console.log(obj1) // {}
console.log(checkObj(obj1)) // false

2.JSON.stringify()(Этот метод имеет определенные лазейки и отнимает много времени)

let obj = {}
if (JSON.stringify(obj) === '{}') {
    return true //是空对象
}

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

const a = {a: undefined}
let b = JSON.stringify(a)
console.log(b) //{}

const a = {a: ()=> {}}
let b = JSON.stringify(a)
console.log(b) //{}

3.Object.keys()

function checkObj(obj) {
    let arr = Object.keys(obj)
    return arr.length > 0?false:true
}

4.Object.getOwnPropertyNames()(Лучший выбор)

let obj = {};

let arr = Object.getOwnPropertyNames(obj);

console.log( arr.length == 0 ); //true

разница:Object.keys()возвращает перечислимое,Object.getOwnPropertyNames()Возвращает все (перечислимые и неперечислимые, но исключая Symbol

32. В чем разница между HTTP/1.0 и HTTP/1.1

• Связь, http1.0 по умолчанию использует непостоянные соединения, а http1.1 по умолчанию использует постоянные соединения. http1.1 использует постоянные соединения для повторного использования одного и того же TCP-соединения для нескольких http-запросов, чтобы избежать задержки установления соединения каждый раз при использовании непостоянного соединения.
• запрос ресурсов, В http1.0 есть некоторые явления траты полосы пропускания.Например, клиенту нужна только часть объекта, а сервер отправляет объект целиком, и не поддерживает функцию возобновления загрузки, в то время как http1.1 запрашивает Заголовок вводит поле заголовка диапазона, которое позволяет запрашивать только определенную часть ресурса, то есть код возврата 206 (частичный контент), что облегчает свободный выбор разработчиков для полного использования пропускной способности и соединения.
• Аспект кэша, В http1.0 If-Modified-Since и Expires в заголовке в основном используются в качестве критериев для оценки кеша, http1.1 вводит больше стратегий управления кешем, таких как Etag, If-Unmodified-Since, If-Match, If -None-Match и другие необязательные заголовки кэша для управления стратегией кэширования.
• В http1.1Добавлено поле хоста, который используется для указания доменного имени сервера. В http1.0 считается, что каждый сервер привязан к уникальному IP-адресу, поэтому URL-адрес в сообщении запроса не передает имя хоста (имя хоста). Но с развитием технологии виртуальных хостов на физическом сервере может существовать несколько виртуальных хостов, и они имеют общий IP-адрес. Следовательно, поле хоста позволяет отправлять запросы на разные веб-сайты на одном сервере.
• По сравнению с http1.0, http1.1 добавил многометод запроса, такие как PUT, HEAD, OPTIONS и т. д.

33. Известны следующие массивы:var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]Напишите программу для выравнивания массива и удаления повторяющейся части данных и, наконец, получения восходящего и неповторяющегося массива.

let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]
// 扁平化
let flatArr = arr.flat(4)
// 去重
let disArr = Array.from(new Set(flatArr))
// 排序
let result = disArr.sort(function(a, b) {
    return a-b
})
console.log(result)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

flat()Метод имеет требования к версии узла, не ниже 12.0 или выше.

34. Что такое GPU-ускорение, как использовать GPU-ускорение, недостатки GPU-ускорения

GPUАппаратное ускорение относится к приложениюGPUГрафическая производительность передается некоторым графическим операциям в браузере.GPUзавершить, потому чтоGPU Да专门为处理图形而设计, так это в速度和能耗более эффективным

GPUУскорение обычно состоит из следующих частей:Canvas2D,布局合成（Layout Compositing）, CSS3转换（transitions）,CSS3 3D变换（transforms）,WebGLа также视频(video).

Преимущества и недостатки реализации анимации на GPU
преимущество:
Используя слой синтеза графического процессора для достижения анимации, он может добиться плавной и плавной анимации.Синтез анимации работает в потоке графического процессора и не будет блокироваться работой js процессора.

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

2022.1.25

35.это указывает на проблему

function fn (){ console.log(this) }
var arr = [fn]
arr[0]()

Детальное объяснение:zhuanlan.zhihu.com/p/174160691

36. Как определить, что элемент находится в текущей видимой области

В качестве примера возьмем отображение изображения:

• window.innerHeightвысота видимой области браузера;
• document.body.scrollTop || document.documentElement.scrollTopрасстояние, на которое прокрутил браузер;
• imgs.offsetTop— высота верхней части элемента от верхней части документа (включая расстояние до полосы прокрутки);
• Когда содержимое достигает области отображения:img.offsetTop < window.innerHeight + document.body.scrollTop;

37. Преимущество requestAnimationframe по сравнению с setTimeout при выполнении анимации

Преимущества requestAnimationframe:

• Энергосбережение процессора:Когда обработка страницы не активирована, задача обновления экрана страницы также будет приостановлена ​​системой.
• Регулирование функций: при часто повторяющихся событиях (изменение размера, прокрутка и т. д.), чтобы предотвратить выполнение нескольких функций в течение интервала обновления, RequestAnimationFrame может гарантировать, что функции выполняются только один раз в каждом интервале обновления, что может обеспечить плавность. также лучше сэкономить накладные расходы на выполнение функции.Бессмысленно выполнять функцию несколько раз в течение интервала обновления, потому что большинство мониторов обновляются каждые 16,7 мс, и многократное рисование не будет отражаться на экране.
• Сокращение операций с домом: requestAnimationFrame соберет все операции DOM в каждом кадре, завершив их за одну перерисовку или перекомпоновку, а временной интервал перерисовки или перекомпоновки близко соответствует частоте обновления браузера, вообще говоря, эта частота составляет каждые 60 кадров в секунду.

Недостаток setTimeout, выполняющего анимацию: он постоянно меняет положение изображения, устанавливая интервал времени для достижения эффекта анимации. Но легко застрять и дрожать; причины таковы:

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

38. Является ли setState синхронным или асинхронным в реакции

setState не является чисто синхронным/асинхронным, его производительность зависит от сценария вызова. В исходном коде isBatchingUpdates используется для определения того, сохраняется ли setState сначала в очереди состояний или обновляется напрямую.Если значение равно true, выполняется асинхронная операция, а если false, обновление выполняется напрямую.

• асинхронный:Это верно там, где React может контролировать, например, в событиях жизненного цикла React и синтетических событиях будет выполняться операция слияния и стратегия отложенного обновления.
• Синхронизировать:В местах, которые React не может контролировать, например, в собственных событиях, особенно в таких событиях, как addEventListener, setTimeout, setInterval и т. д., они могут обновляться только синхронно.

39. Определим переменную a, пустьa==1&&a==2&&a==3 为true

Детальное объяснение:blog.CSDN.net/no 0_48850204…

2022.1.26

40. Принцип $set в vue

41. Принцип $nextTick

Статья о Братце Акуле:Наггетс.Талант/пост/693970…

42. Кратко опишите процесс работы алгоритма vue diff

Статья о Братце Акуле:Наггетс.Талант/пост/695343…

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

Статья босса Руочуань:nuggets.capable/post/701092…

44. Выходные вопросы

const async1 = async () => {
  console.log('async1');
  setTimeout(() => {
    console.log('timer1')
  }, 2000)
  await new Promise(resolve => {
    console.log('promise1')
  })
  console.log('async1 end')
  return 'async1 success'
} 
console.log('script start');
async1().then(res => console.log(res));
console.log('script end');
Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .catch(4)
  .then(res => console.log(res))
setTimeout(() => {
  console.log('timer2')
}, 1000)
/** 输出 
* script start
* async1
* promise1
* script end
* 1
* timer2
* timer1
**/

Разобрать:
первый раунд:

1. Определите функцию async1, ничего не происходит
2. запуск скрипта вывода
3. Выполните async1 и затем, а затем поместите функцию обратного вызова в микрозадачу и запишите ее как p1
4. Выведите async1, поместите setTimeout:timer1 в задачу макроса и запишите его как s1, и выведите обещание 1. Поскольку ожидание и это обещание не разрешаются и не отклоняются, async1 здесь заблокирован, а статус обещания находится в ожидании.
5. конец сценария вывода
6. При встрече с promise.resolve(1) поместите обратный вызов then позади него в микрозадачу и запишите его как p2
7. При встрече с setTimeout: timer2 поместите его в задачу макроса и запишите как t2
8. Проверьте очередь микрозадач: p1 и p2
9. Выполните p1 и обнаружите, что статус асинхронного ожидания ожидается, поэтому выведите
10. Выполните p2 и обнаружите, что функция обратного вызова then не является функцией, поэтому она проникает вниз с помощью разрешения (1) и проникает до конца, когда она достигает последнего then, она выводит 1.
11. Выполнение микрозадачи завершено

второй раунд:
12. Выполните t2 в соответствии со временем задержки задачи макроса и выведите timer2.
13. Выходной таймер1

2022.1.27

45. Захват событий и всплытие

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

46. ​​Роль разных значений атрибута pointer-event

pointer-events:auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
Атрибут pointer-events имеет много значений, но для браузеров доступны только два значения, auto и non, а остальные предназначены для SVG (сам этот атрибут исходит из технологии SVG). Подробное объяснение значения атрибута pointer-events: auto - эффект тот же, что и без определения свойства pointer-events, мышь не будет проникать в текущий слой. В SVG это значение имеет тот же эффект, что и visiblePainted. none — элемент больше не является целью событий мыши, и мышь больше не слушает текущий слой, а слушает элементы в слое ниже. Но если его дочерний элемент устанавливает для событий указателя другие значения, например auto, мышь все равно будет слушать этот дочерний элемент.

47. Использование и сценарии слабых карт и слабых наборов

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

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

WeakSet
Используется для хранения узлов DOM, не беспокоясь об утечках памяти при удалении этих узлов из документа.
который можно использовать дляИзбегайте утечек памятиСлучай

2022.1.28

48. Какие существуют методы оптимизации процесса сборки веб-пакета? Как webpack может оптимизировать размер упаковки?

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

1. В случае множественной записи используйте CommonsChunkPlugin для извлечения общего кода.
2. Извлечение общих библиотек с помощью внешней конфигурации
3. С модулями ресурсов предварительной компиляции DLLPLUGIN и DLLREFERENCEPLUGIN пакеты NPM, на которые мы ссылаемся, но абсолютно не модифицируем, а затем загружаем предварительно скомпилированный модуль с помощью DllReferencePlugin.
4. Используйте Happypack для ускоренной многопоточной компиляции.
5. Используйте webpack-uglify-parallel для повышения скорости сжатия uglifyPlugin. В принципе, webpack-uglify-parallel использует многоядерное параллельное сжатие для повышения скорости сжатия.
6. Используйте Tree-shaking и Scope Hoisting, чтобы отсеять избыточный код.

Оптимизация объема упаковки:

• сжатый код: Удалите избыточный код, комментарии, упростите написание кода и т. д. Вы можете использовать UglifyJsPlugin и ParallelUglifyPlugin от webpack для сжатия файлов JS и использовать cssnano (css-loader?minimize) для сжатия css.
• извлекать выгодуCDNускорить: во время процесса сборки измените указанный путь к статическому ресурсу на соответствующий путь в CDN. Вы можете использовать webpack для выходного параметра и параметр publicPath каждого загрузчика, чтобы изменить путь к ресурсу.
• Tree Shaking: удалить разделы кода, которые никогда не будут доступны. Этого можно добиться, добавив параметр --optimize-minimize при запуске веб-пакета.

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

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

49. И react, и vue используют vdom, зачем нам нужно использовать vdom и каковы преимущества vdom? Какую проблему это решило для нас?

(1) Гарантированный нижний предел производительности, обеспечивающий достойную производительность без ручной оптимизации
Взгляните на процесс рендеринга страницы:Разобрать HTML -> Создать DOM -> Создать CSSOM -> Layout -> Paint -> CompilerДавайте сравним реальную операцию DOM и процесс Virtual DOM при изменении DOM и посмотрим на потребление производительности их перестановкой и перерисовкой:

• Реальный DOM: сгенерируйте строку HTML + перестройте все элементы DOM
• Виртуальный DOM: Генерация vNode + DOMDiff + необходимое обновление dom

Подготовка виртуального DOM для обновления DOM занимает больше времени, то есть на уровне JS, и его потребление чрезвычайно дешево по сравнению с большим количеством операций с DOM. You Yuxi сказал на форуме сообщества: «Гарантия, которую дает вам фреймворк, заключается в том, что вы все еще можете обеспечить достойную производительность без ручной оптимизации».

(2) Кроссплатформенность

Виртуальный DOM — это, по сути, объект JavaScript, которым можно легко управлять на разных платформах, таких как рендеринг на стороне сервера, uniapp и т. д.

50. Каковы преимущества и недостатки одностраничного понимания SPA?

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

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

• Исходя из вышеизложенного, SPA оказывает относительно небольшое давление на сервер;

• Обязанности front-end и back-end разделены, структура понятна, front-end отвечает за логику взаимодействия, а back-end — за обработку данных;

недостаток:

• Первоначальная загрузка занимает много времени: чтобы реализовать функцию и эффект отображения одностраничного веб-приложения, необходимо равномерно загружать JavaScript и CSS при загрузке страницы, а некоторые страницы загружаются по требованию;

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

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

2022.2.07

51. Правила взаимного преобразования при сравнении "=="

1 == true //true
1 === true // false

• Сначала оцените, являются ли эти два типа одинаковыми, оцените, одинаковы ли они, и выполните принудительное преобразование типов, если они различны.
• Сначала определите, является лиnullа такжеundefinedКонтраст, если да, вернуться напрямуюtrue
• Судя по типу обоих, еслиstringа такжеnumber, затем преобразуйте строку вnumber

'1' == 1 //true
'2' == 1 //false

• Если один из нихboolean,БудуbooleanПеревести вnumber

// true转换为1,false是0
1 == true // true
0 == false // true

• один из них являетсяobject, другая сторона естьstring,number,symbol,БудуobjectПреобразуйте в примитивный тип, а затем сравните

Чтобы преобразовать значение в соответствующее значение примитивного типа, абстрактная операция ToPrimitive сначала проверяет (через внутреннюю операцию DefaultValue), что значение присутствуетvalueOf()Метод: если существует и возвращает значение примитивного типа, это значение используется для приведения. использовать, если нетtoString()возвращаемое значение (если оно существует) для приведения
еслиvalueOf()а такжеtoString()Не возвращайте значение примитивного типа, оно будет производитьTypeErrorошибка

52. Механизм распространения событий/делегирование событий/прокси событий

Механизм распространения события делится на три этапа:

• Первый этап: от окна объекта к целевому узлу, называемым «этап захвата»
• Этап 2: запускается на целевом узле, который называется «целевой этап».
• Третий этап: от целевого узла обратно к оконному объекту, называемый «стадией всплытия».

Делегирование события (прокси события) в основном используетВсплывающие события браузераМеханизмы. Поскольку событие будет загружено на родительский узел во время процесса всплытия, и родительский узел может получить целевой узел через объект события, поэтому функция прослушивателя дочернего узла может быть определена на родительском узле, а функция прослушивателя родительский узел может единообразно обрабатывать несколько дочерних элементов.Events, такой способ называется делегированием событий (event delegated).

выгода:Использование делегирования событий устраняет необходимость привязки события прослушивателя для каждого дочернего элемента, что снижает потребление памяти. А использование event proxy также может реализовать динамическую привязку событий, например, если добавляется дочерняя нода, то нет необходимости добавлять для нее отдельно событие слушателя, связанное с ним событие будет передано в функцию слушателя в родительском элементе для обработки.

недостаток:делегация мероприятияВлияет на производительность страницы, основными влияющими факторами являются:
1. В элементе количество раз, когда делегат события связывается;
2. Нижний элемент клика и элемент между элементом события привязкиDOMслои;

ограничение: focus、blurДля таких событий нет механизма всплытия событий, поэтому делегирование событий не может быть реализовано; хотя такие события, как mousemove и mouseout, имеют всплывание событий, они могут только непрерывно вычислять позиционирование через местоположение, что требует высокой производительности, поэтому не подходит. для мероприятий.

53. Разница между mouseover/mouseenter

Пожалуйста, см. вопрос 27 для разницыnuggets.capable/post/705232…

Расширение (вопрос сцены):

Если внутренняя ошибка 401 постоянно перехватывается перехватчиком axios, то на странице внешнего интерфейса сообщается: «Ошибка входа, пожалуйста, войдите снова». Если авторизация не удалась, при входе на страницу и отправке десяти запросов сразу же всплывают десять напоминаний об ошибках без обработки. Как решить такое недружественное сообщение об ошибке?

2022.2.08

54. Как защититься от XSS-атак

• Это можно предотвратить выполнением браузера.Один из них заключается в использовании чисто внешнего метода, без сплайсинга и возврата на стороне сервера (без рендеринга на стороне сервера). Другой — полностью избежать кода, который необходимо вставить в HTML. Для DOM-атак это в основном вызвано ненадежностью интерфейсных скриптов, для сбора и рендеринга данных и сращивания строк необходимо судить о возможном вредоносном коде.
• С CSP суть CSP заключается в создании белого списка, который сообщает браузеру, какие внешние ресурсы могут быть загружены и выполнены, тем самым предотвращая атаки с внедрением вредоносного кода.

1. CSP относится к политике безопасности контента, и его суть заключается в создании белого списка, который сообщает браузерам, какие внешние ресурсы могут быть загружены и выполнены. Нам нужно только настроить правила, как перехват реализуется самим браузером.
2. Обычно есть два способа включить CSP: один — установить Content-Security-Policy в заголовке HTTP, другой — установить метатег.

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

55. Кратко опишите трехстороннее рукопожатие TCP и четырехстороннюю волну.

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

• Первое рукопожатие: клиент отправляет серверу сегмент запроса на подключение.
• Второе рукопожатие: после того, как сервер получает сегмент запроса, он отправляет ответ, если он согласен на подключение.
• Третье рукопожатие: когда клиент получает ответ о согласии на подключение, он также отправляет на сервер подтверждающее сообщение об успешном подключении.

Четыре волны:

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

56. Каковы сценарии применения закрытия?

1. Вызов SetTimeout с использованием ссылки на функцию 2. Небольшая область видимости вместо глобальных переменных 3. Общедоступные методы, имеющие доступ к закрытым переменным и закрытым функциям. 4. Дроссельная заслонка и защита от тряски

2022.2.09

57. Как преобразовать номера классов в массивы?

Первый:Array.prototype.slice.call(likeArray)

function sum(a, b) {
  let args = Array.prototype.slice.call(arguments);
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

Второй: Array.from(likeArray)

function sum(a, b) {
  let args = Array.from(arguments);
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

Третий тип: оператор распространения Es6

function sum(a, b) {
  let args = [...arguments];
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

Четвертое:Array.prototype.splice.call(likeArray,0)

function sum(a, b) {
  let args = Array.prototype.splice.call(arguments, 0);
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

Пятое:Array.prototype.concat.apply([], likeArray)

function sum(a, b) {
  let args = Array.prototype.concat.apply([], arguments);
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

58. Эффективен ли return в forEach? Как разорвать цикл forEach?

Это работает, но если вы не пройдете этот цикл, следующие все равно пройдут.использоватьbreak/continueНедействительно, будет сообщено о синтаксической ошибке

let nums = [1, 2, 3];
nums.forEach((item, index) => {
  return;//无效
})

Метод прерывания:
Используйте try для просмотра блоков кода и выбрасывайте исключения там, где вам нужно сломаться.
Официально рекомендуемый метод (метод замены):

• Замените функцию forEach на каждый и некоторые;
• каждый останавливает цикл, когда встречает return false;
• некоторые завершают цикл, когда он встречает return true

59.["1", "2", "3"].map(parseInt)Какой ответ?

Функция карты массива принимает три параметра: текущее значение, текущий индекс и текущий массив. parseInt принимает два параметра: строку для преобразования и основание (диапазон значений основания от 2 до 36).

['1','2','3'].map((item, index) => {
    return parseInt(item, index)
})
//  parseInt('1', 0)  1
//  parseInt('2', 1)  NaN
//  parseInt('3', 2)  NaN

расширение:

Почему нельзя вернуться в forEach, чтобы завершить цикл
Сначала грубо реализуем forEach

Array.prototype.myEach = function(callback) {
    for (var i = 0; i < this.length; i++)
        callback(this[i], i, this);
};

Итак, почему вы не можете использовать return для выхода из цикла?Поскольку использование return в foreach эквивалентно использованию return в функции, то оно влияет только на функцию обратного вызова и не влияет на цикл for функции верхнего уровня. Аналогично используйте его в функцииbreak/continueБудет сообщено о синтаксической ошибке, аналогичной использованию в forEach.break/continueтакой же эффект
Каковы распространенные типы массивов?

• arguments
• Элемент Dom использует свойство attribute для получения объекта NameNodeMap.
• Получите коллекцию дочерних элементов элемента через дочерний атрибут элемента Dom, то есть объект коллекции HTMLCollection.
• Возвращает детский узел выбранного атрибута узла Nodelist Childnodes от DOM Element

ПРИМЕЧАНИЕ. HTMLCollection устанавливает только узел элемента DOM, NodeList содержит узлы элемента Dom и текстовые узлы (текст) и узел комментариев.

2022.2.10

60. Совместно ли используется информация о файлах cookie для localhost:3000 и localhost:5000.

В соответствии с политикой одного и того же происхождения файлы cookie зависят от порта, но реализации браузера говорят: «Файлы cookie различают домены, а не порты, то есть файлы cookie для нескольких портов под одним и тем же IP-адресом являются общими!

61. Каков результат Array(100).map(x => 1)

Array(100)Создаст разреженный массив (sparse array), то есть реальных элементов нет, экономя место в памяти. отображается в консоли как[empty], именно потому, что нет элементов, у него нет иmapоперация, такArray(100).map(x => 1)все еще возвращается как[empty]

62. Выходные вопросы

const obj = {
  a: 3,
  b: 4,
  c: null,
  d: undefined,
  get e() {},
}
console.log(JSON.stringify(obj))

выход:{"a":3,"b":4,"c":null}