Необходимые навыки для фронтенд-интервью (2) Разбор сложных моментов

опрос

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

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

第一篇无法访问问题已解决，我也不知道咋回事，又重新发布了一遍

1. Обычное использование ES6

О ES6 (как правило, речь идет о ECMAScript 2015 и более поздних версиях) почти обязательно для интервью. Общий вопрос: «Вы обычно используете ES6? Перечислите несколько вариантов использования ES6».

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

Если у вас есть достаточно времени, рекомендуется взглянутьВводное руководство по ES6 от Ruan Yifeng.

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

  • let работает в области блока и не загрязняет глобальные переменные
  • const не может быть изменен после объявления. Обратите внимание, что гарантируется, что адрес памяти, на который он указывает, не может быть изменен, если это объект, атрибут или элемент в массиве, который можно изменить.
  • Существует временная мертвая зона, и переменное продвижение невозможно.
  • Это может быть объявлено только повторное использование, и не может быть повторено заявление

1.2 Шаблон персонажа

Используется как конкатенация строк:你好，${name}

1.3 Разрушение присвоения переменных

  • let [a,b,c] = [1,2,3]
  • Поменять местами значения переменных: [a,b] = [b,a]
  • Полезно при извлечении данных JSON и получении данных, возвращаемых сервером: let {data, code} = res
  • Как указать входной модуль:
const { SourceMapConsumer, SourceNode } = require("source-map");
  • Вернуть несколько значений из функции: вернуть массив или объект

1.4 Оператор спреда

Оператор спреда (spread) — три точки (...).

  • Копировать массив: пусть arr2 = [...arr1]
  • Объединение массивов: [...arr1, ...arr2, ...arr3]

1.5 Promise

  • Успешный звонокresolve, неудачный вызовreject
  • .thenполучить результат,.catchПоймать исключение. Перехват исключений также может быть выполнен с помощью.thenвторой параметр
  • .finallyБудет вызван независимо от успеха или неудачи
  • Для нескольких одновременных запросов используйтеPromise.all()
    • Толькоp1,p2,p3статус сталfulfilled,pгосударство станетfulfilled,В настоящее времяp1,p2,p3Возвращаемые значения образуют массив, который передается вpфункция обратного вызова.
    • если толькоp1,p2,p3один из них былrejected,pсостояние становитсяrejected, в это время первыйrejectВозвращаемое значение экземпляра , будет передано вpфункция обратного вызова.
let p = Promise.all([p1,p2,p3])
p.then(([res1, res2,res3]) => {};

Пример обещания:

new Promise(){
	if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
}.then().catch().finally()

1.6 async await

Что такое асинхронная функция? Одним словом, это синтаксический сахар для Генераторных функций.asyncУлучшения функций по сравнению с функциями генератора:

  • Встроенный исполнитель может быть вызван напрямую. Генератору тоже нужно звонитьnext() Может быть выполнен только
  • лучшая семантика.asyncа такжеawaitСравнивать*а такжеyield лучше понять
  • Возвращаемое значение является обещанием

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

стрелочная функция() => {}изthisОн связывается, когда функция определена, а не во время выполнения. Проще говоря, когда функция определена,thisОн наследует объект, определяющий функцию.thisОднажды определенная, она не изменится в будущем.

Обычная функция this ссылается на объект, который ее вызвал.

2. Совместимость H5 и адаптация мобильных терминалов

Используется схема адаптации rem + flex layout.

2.1 рем адаптация

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

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

После установки эталонного размера шрифта инкапсулируйте метод с помощью функции SASS для удобства использования.

@function px2rem($value){
  @return $value * 0.02rem
}

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

width: px2rem(100)

2.2 Использование гибкого макета

рекомендация гибкого макетаУчебное пособие по Flex Layout от Ruan Yifeng: грамматика

3. Проблемы, связанные с Vue

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

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

Так как я не очень хорошо знаком с React, я подготовил только несколько вопросов для Vue. Следующие вопросы очень часто задаются в интервью и должны быть поняты.

Есть статья, которая обобщает Vue, и вот несколько ответов. Полное содержание смотрите здесь:30 вопросов для собеседования по Vue, включая подробные пояснения

3.1 Vue двухсторонний принцип обязательства

Если вы спросите о фреймворке, Vue обязательно задаст этот вопрос, просто запомните следующий абзац.

Vue в основном реализует двустороннюю привязку данных с помощью следующих 4 шагов:

  • Реализуйте прослушиватель Observer: просмотрите объект данных, включая свойства объекта подсвойства, используйте Object.defineProperty() для добавления сеттеров и геттеров к свойствам. В этом случае присвоение значения этому объекту вызовет установщик, после чего вы сможете отслеживать изменения данных.
  • Реализовать синтаксический анализатор Compile: разобрать инструкции шаблона Vue, заменить переменные в шаблоне данными, затем инициализировать представление страницы рендеринга, привязать функцию обновления к узлу, соответствующему каждой инструкции, и добавить подписчиков, которые отслеживают данные. уведомление, вызовите функцию обновления, чтобы обновить данные.
  • Внедрение подписчика Watcher: Watcher Subscriber — это мост связи между Observer и Compile.Основная задача — подписаться на сообщение об изменении значения свойства в Observer.При получении сообщения об изменении значения свойства активировать соответствующий компилятор в парсере. функция обновления.
  • Внедрение подписчика Dep: Подписчик принимает шаблон проектирования «публикация-подписка», который используется для сбора наблюдателей-подписчиков и унифицированного управления наблюдателем-прослушивателем и наблюдателем-подписчиком.

После ответа на этот вопрос некоторые интервьюеры расширят вопрос: Vue3 будет использоватьProxyзаменятьObject.defineProperty() ,proxyКаковы преимущества?

Рекомендуется поставитьВведение в проксиПосмотрите и назовите несколько преимуществ.

3.2 Принцип реализации виртуального DOM

По важности этот вопрос уступает только принципу двухсторонней привязки Vue, рекомендуется освоить

Принцип реализации виртуального DOM в основном включает следующие три части:

  • Смоделируйте настоящее дерево DOM с помощью объектов JavaScript и абстрагируйте настоящий DOM;
  • алгоритм diff — сравнивает различия двух виртуальных DOM-деревьев;
  • алгоритм pach — применяет разницу двух виртуальных DOM-объектов к реальному DOM-дереву.

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

  • Гарантированная нижняя граница производительности:Виртуальный DOM фреймворка должен адаптироваться к любым операциям, которые могут быть сгенерированы API верхнего уровня.Реализация некоторых его DOM-операций должна быть универсальной, поэтому его производительность не оптимальна, но она намного лучше, чем грубая. Производительность операции DOM, поэтому виртуальный DOM фреймворка может по крайней мере гарантировать, что вы все еще можете обеспечить хорошую производительность без ручной оптимизации, то есть нижний предел гарантированной производительности;
  • Нет необходимости вручную манипулировать DOM:Нам больше не нужно вручную манипулировать DOM, а нужно только написать логику кода View-Model.Фреймворк будет связывать виртуальный DOM и данные в обоих направлениях, чтобы помочь нам обновлять представление предсказуемым образом, значительно улучшая нашу работу. эффективность разработки;
  • Кроссплатформенность:Виртуальный DOM по сути является объектом JavaScript, а DOM тесно связан с платформой.В отличие от этого, виртуальный DOM может выполнять более удобные кроссплатформенные операции, такие как серверный рендеринг, разработка weex и т. д.

недостаток:

  • Экстремальная оптимизация невозможна:Хотя виртуальный DOM + разумная оптимизация достаточны для удовлетворения требований к производительности большинства приложений, в некоторых приложениях с чрезвычайно высокими требованиями к производительности виртуальный DOM не может быть оптимизирован до предела.

Углубленный анализ: виртуальный DOM в основе Vuenuggets.capable/post/684490…

3.3 Кэш маршрутов

использовать<keep-alive>Кэшируемые маршруты.

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

Уникальные методы жизненного цикла:activited,deactivited

3.4 Переход по маршруту, разница между именем и переходом по пути

Несколько способов маршрутизации прыжка

// 字符串
this.$router.push('home')

// 命名的路由
this.$router.push({
  name: 'user',
  params: {userId: '123'}
})
//接收参数
this.userId = this.$route.params.userId

// 带查询参数，变成 /user?userId=123
this.$router.push({
  path: '/user',
  query: {userId: '123'}
})
//接收
this.userId = this.$route.query.userId;

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

  • Имя передается в виде параметров параметров, а путь передан в виде запроса параметра.
  • После перехода с именем параметры не будут перенесены на URL-адрес, а переданные параметры с запросом будут перенесены на URL-адрес.

3.5 Защита маршрутизации

Глобальная передняя защита

Обязательно звоните next();, иначе хук не будет разрешен.

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
  next();
})

глобальная защита синтаксического анализа

В 2.5.0+ вы можете использоватьrouter.beforeResolveЗарегистрируйте глобальную защиту. с участием router.beforeEachТочно так же разница заключается в том, что защита разрешения вызывается до подтверждения навигации и после разрешения всех встроенных защиты и компонентов асинхронного маршрута.

глобальный почтовый хук

Вы также можете зарегистрировать глобальные почтовые хуки, однако, в отличие от охранников, эти хуки не будут приниматьnextФункция также не меняет саму навигацию:

router.afterEach((to, from) => {
  // ...
})

Эксклюзивный охранник маршрута

Вы можете определить непосредственно в конфигурации маршрутизацииbeforeEnterсторожить:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

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

Ограждения внутри компонентов

Наконец, вы можете определить следующие средства навигации по маршруту непосредственно внутри компонента маршрута:

  • beforeRouteEnter
  • beforeRouteUpdate(2.2 новый)
  • beforeRouteLeave

Примечание для звонкаnext() 

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

Здесь много контента, смотрите подробнееофициальная документация vue-router

3.6 Различия между Vue и React

Формы Vue можно использоватьv-modelПоддерживает двустороннюю привязку, что, конечно, удобнее в разработке, чем Reactv-modelПо сути, это синтаксический сахар, который по сути ничем не отличается от того, как React пишет формы.

Способ изменения данных отличается, Vue намного проще для изменения состояния, React должен использоватьsetStateдля изменения состояния, и использование этого API также имеет некоторые подводные камни. И нижний слой Vue использует отслеживание зависимостей, рендеринг обновления страницы уже оптимален, но React по-прежнему требует, чтобы пользователи вручную оптимизировали этот аспект.

После React 16 некоторые функции хуков будут выполняться несколько раз из-за введения Fiber, который будет рассмотрен в последующих главах.

React должен использовать JSX, который имеет определенную стоимость для начала работы и требует полного набора поддержки цепочки инструментов, но он может полностью управлять страницей через JS, который является более гибким. Vue использует синтаксис шаблона, который не такой гибкий, как JSX, но его можно полностью отделить от цепочки инструментов и написать напрямуюrenderФункцию можно запустить в браузере.

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

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

3.7 Передача значений между компонентами

Передача значения между компонентами делится на передачу значения компонента родитель-потомок и передачу значения компонента не родитель-потомок.

Передача значений между родительским и дочерним компонентами

  • Родительский компонент передает значения дочерним компонентам напрямую черезpropsпройти по значению
<custom content="hello world"></custom>
  • Дочерний компонент передает значения родительскому компоненту черезemitотправить событие
this.$emit('chooseType', type)

Родительский компонент получает событие:

<custom content="hello world" @chooseType="handleType"></custom>

Значение передачи компонента, отличного от родительского-дочернего

В основном передают значения через шину событий

Придавать корневой узелVueмонтировать пустойVueобъект

Vue.prototype.bus = new Vue();

В компоненте, который должен отправить событие

this.bus.$emit("change", params)

компонент, который получает событие

this.bus.$on("change", (msg) => {
    //do yourself work
})

В дополнение к вышеуказанным вопросам часто задают также жизненный цикл Vue, v-show и v-if, vuex и другие вопросы.

Дополнительные советы по разработке Vue см. в другой моей статье:Заметки об опыте разработки Vue

4. Модульная разработка

4.1 Что такое модуль

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

4.2 Преимущества модульности

  • Избегайте конфликтов имен (уменьшайте загрязнение пространства имен)
  • Лучшее разделение, загрузка по запросу
  • Более высокое повторное использование
  • Высокая ремонтопригодность

4.3 Технические характеристики модуля

1. ОбщийJS

Основной синтаксис:

  • Выставить модуль:module.exports = valueилиexports.xxx = value
  • Импортируйте модуль:require(xxx), если это сторонний модуль, xxx — это имя модуля; если это пользовательский модуль, xxx — это путь к файлу модуля

Загрузка модуля фактически загружает свойство module.exports модуля. Команда require используется для загрузки файлов модулей. Основная функция команды require — прочитать и выполнить файл JavaScript, а затем вернуть объект экспорта модуля. Если указанный модуль не найден, будет сообщено об ошибке.Механизм загрузки модулей CommonJS заключается в том, что ввод является копией значения, которое выводится. То есть после вывода значения изменения внутри модуля не могут повлиять на это значение.. Это основное отличие от модульности ES6.

2. Модульность ES6

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

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

Вы также можете использовать экспорт по умолчанию

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'

3. Различия между модулями ES6 и модулями CommonJS

У них есть два основных отличия:

  • Модули CommonJS выводят копию значения, модули ES6 выводят ссылку на значение.
  • Модули CommonJS загружаются во время выполнения, а модули ES6 представляют собой скомпилированные интерфейсы.

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

добавить заголовок

//创建 axios 实例
let instance = axios.create({timeout: 1000 * 12});

//设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
instance.defaults.withCredentials=true; //让ajax携带cookie

добавить заголовок в метод API

postJson(url, params) {
  return axios.post(`${base}${url}`, params, {
    headers: {'content-type': 'application/json;charset=UTF-8'}
  })
},
  
//基本的get方法
get(url, params) {
  return axios.get(`${base}${url}`, {params: params})
},

//基本的post方法
post(url, params) {
  return axios.post(`${base}${url}`, JSON.stringify(params))
},

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

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

Вторая и третья точки будут расширены, а скобки - это общее направление расширения. Подробное объяснение см.12. Производительность страницы

Цель: Ускорить отображение интерфейса и уменьшить количество запросов данных.

Какие есть способы улучшить производительность страницы?

  1. Слияние сжатия ресурсов для уменьшения HTTP-запросов
  2. Асинхронная загрузка неосновного кода (способ асинхронной загрузки, отличие асинхронной загрузки)
  3. Использовать кеш браузера (классификация кеша, принцип кеширования)
  4. Используйте CDN
  5. Предварительно разрешенный DNS
//强制打开 <a> 标签的 dns 解析
<meta http-equiv="x-dns-prefetch-controller" content="on">
//DNS预解析
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

7. Кэш браузера

Классификация стратегий кэширования:

  • Сильный кеш
  • Согласовать кеш

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

7.1 Сильный кеш

Сильный кеш: запрос на сервер не отправляется, а ресурсы считываются непосредственно из кеша. из кеша памяти. Надежного кэширования можно добиться, установив два HTTP-заголовка: Expires и Cache-Control.

1. Expires

Время истечения срока действия кэша используется для указания времени истечения срока действия ресурса, что является конкретным моментом времени на стороне сервера.. То есть Expires=max-age + время запроса, которое нужно использовать вместе с Last-modified. Expires — это поле заголовка ответного сообщения веб-сервера, которое сообщает браузеру, что браузер может напрямую извлекать данные из кеша браузера до истечения срока действия без повторного запроса.Истекает - это продукт http / 1 и ограничен по местном времени. Если локальное время модифицировано, это может привести к недействию кэша.Expires: Wed, 22 Oct 2018 08:41:00 GMTУказывает, что срок действия ресурса истекает после среды, 22 октября 2018 г., 08:41:00 по Гринвичу, и его необходимо запросить снова.

2. Cache-Control

В HTTP/1.1 Cache-Control является наиболее важным правилом, в основном используемым для управления кэшированием веб-страниц. например, когдаCache-Control:max-age=300, это означает, что ресурс будет загружен снова в течение 5 минут после правильного времени возврата запроса (браузер также зафиксирует это), и сильный кеш будет сбит. Cache-Control может быть установлен в заголовках запроса или ответа и может быть объединен с различными директивами:

3. Сравнение Expires и Cache-Control

На самом деле между ними нет большой разницы, разница в том, что Expires является продуктом http1.0, а Cache-Control — продуктом http1.1.Если оба существуют одновременно, Cache-Control имеет более высокий приоритет, чем Expires.; В некоторых средах, не поддерживающих HTTP1.1, вступает в действие Expires. Так что Expires на самом деле устаревший продукт, и его существование на данном этапе — это просто способ написания совместимости. Сильный кеш определяет, основан ли кеш на том, превышает ли он определенное время или определенный период времени, и не заботится о том, был ли обновлен файл на стороне сервера, что может привести к тому, что загруженный файл не будет самым последним содержимым на на стороне сервера, так откуда мы знаем содержимое на стороне сервера? Произошло ли обновление? На этом этапе нам нужно использовать согласованную стратегию кэширования.

7.2 Кэш согласования

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

  • Кэш согласования вступает в силу, возвращает 304 и не изменен
  • Согласовать аннулирование кеша, вернуть 200 и запросить результат

Согласованное кэширование может быть достигнуто путем установки двух HTTP-заголовков: Last-Modified и ETag.

1. Last-Modified и If-Modified-Since

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

Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

В следующий раз, когда браузер запрашивает этот ресурс, он обнаруживает наличие заголовка Last-Modified, поэтому добавляет заголовок If-Modified-Since, а значением является значение Last-Modified; сервер снова получает этот запрос ресурса. , согласно If- Значение в Modified-Since сравнивается со временем последней модификации ресурса на сервере.Если изменений нет, возвращаем 304 и пустое тело ответа и читаем его прямо из кеша.Если время If-Modified-Since меньше времени последней модификации ресурса на сервере Время модификации, что указывает на то, что файл был обновлен, поэтому верните новый файл ресурсов и 200.Но у Last-Modified есть некоторые недостатки:

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

Поскольку вопрос о том, недостаточно ли кэша, определяется на основе времени модификации файла, можно ли определить стратегию кэширования непосредственно на основе того, было ли изменено содержимое файла? Так в HTTP/1.1 пришлиETagа такжеIf-None-Match

2. ETag и If-None-Match

Etag – это уникальный идентификатор (генерируемый сервером) текущего файла ресурсов, который возвращается, когда сервер отвечает на запрос. Пока ресурс изменяется, Etag будет создаваться повторно.. В следующий раз, когда браузер загрузит ресурс и отправит запрос на сервер, он поместит значение Etag, возвращенное в прошлый раз, в If-None-Match в заголовке запроса.Серверу нужно только сравнить отправленное If-None-Match. клиентом со своим собственным сервером.Если ETag ресурса непротиворечив, можно судить о том, был ли ресурс изменен по отношению к клиенту. Если сервер обнаружит, что ETag не совпадает, он напрямую отправит новый ресурс (включая новый ETag) клиенту в виде обычного возвращаемого пакета GET 200; если ETag непротиворечив, он напрямую вернет 304 на уведомить клиента напрямую. Просто используйте локальный кеш.

3. Сравнение между ними

  • Во-первых, Etag лучше, чем Last-Modified, с точки зрения точности.

Единицей времени Last-Modified являются секунды.Если файл изменяется несколько раз в течение 1 секунды, то их Last-Modified на самом деле не отражает модификацию, но Etag будет меняться каждый раз, чтобы обеспечить точность; если это балансировка нагрузки Последнее изменение, сгенерированное каждым сервером, также может быть несогласованным.

  • Во-вторых, по производительности Etag уступает Last-Modified, ведь Last-Modified нужно только записывать время, а Etag нужен сервер для вычисления хеш-значения по алгоритму.
  • В-третьих, с точки зрения приоритета проверка сервера отдает приоритет Etag.

7.3 Механизм кэширования

Обязательное кэширование имеет приоритет над согласованным кэшированием.Если действует обязательное кэширование (Expires и Cache-Control), кеш используется напрямую.Если оно не действует, выполняется согласованное кэширование (Last-Modified / If-Modified-Since и Etag /If-None-Match) , согласованный кеш определяется сервером, использовать ли кеш. Если согласованный кеш недействителен, то кеш, представляющий запрос, недействителен, вернуть 200, вернуть ресурс и идентификатор кеша, а затем сохраните его в кеше браузера; если он действителен, верните 304 и продолжайте использовать кеш.

Разницу между сильным кешем и согласованным кешем можно представить в следующей таблице:

тип кэша Получить форму ресурса код состояния отправить запрос на сервер
Сильный кеш получить из кеша 200 (из кеша) Нет, получить напрямую из кеша
Согласовать кеш получить из кеша 304 (не изменено) Да, сообщить серверу, доступен ли кеш

Влияние поведения пользователя на кеширование

Действие пользователя Expires/Cache-Control Last-Modied/Etag
Введите в адресной строке эффективный эффективный
переход по ссылке на страницу эффективный эффективный
новое окно эффективный эффективный
вперед и назад эффективный эффективный
F5 обновить неверный эффективный
Ctrl+F5 Принудительно обновить неверный неверный

7.4 Сравнение между кешем памяти и кешем диска

В консоли Network в браузере chrome полоса размера обычно имеет три состояния

  1. from memory cache
  2. from disk cache
  3. Размер самого ресурса (например: 1.5k)

Три отличия:

  • from memory cache: Буквальное значение из памяти, но это также буквальное значение.Этот ресурс берется напрямую из памяти, и сервер не запрашивается.Как правило, ресурс уже загружен и закэширован в памяти.Когда страница закрыта, ресурс будет освобожден памятью, и кеш памяти не появится, когда та же страница снова откроется.
  • from disk cache: Аналогично предыдущему, этот ресурс берется с диска, и ресурс был загружен в определенное время до этого, сервер не будет запрашиваться, но этот ресурс не будет освобожден при закрытии страницы, потому что есть жесткий диск Среди них, в следующий раз, когда вы его откроете, он все равно будет из кеша диска
  • Размер самого ресурса: При статусе http 200 ресурс фактически получен из браузера. При статусе http 304 число представляет собой размер сообщения связи с сервером, а не размер самого ресурса. Ресурс получается локально .
условие Типы иллюстрировать
200 form memory cache Не запрашивать сетевые ресурсы, ресурсы находятся в памяти, а общие скрипты, шрифты и картинки будут храниться в памяти.
200 form disk ceche Не запрашивает сетевые ресурсы, на диске вообще не скрипты будут в памяти, типа css и тд.
200 Значение размера ресурса Значение размера ресурса Загрузите последний ресурс с сервера.
304 Размер пакета Сервер запросов обнаруживает, что ресурс не был обновлен, и использует локальный ресурс, то есть обращается к кэшу согласования.

Восемь, базовая конфигурация веб-пакета

Если вы проходите собеседование на продвинутую фронтенд-разработку, вы обязательно спросите webpack — небольшая подготовка лучше, чем ничего.

8.1 Основные понятия

Файл конфигурации по умолчанию для веб-пакета:webpack.config.js.

По умолчанию webpack может обрабатывать только файлы js.Если вы хотите обрабатывать другие файлы, такие как изображения, вам нужно использовать соответствующий загрузчик. Напримерfile-loader,url-loader,css-loader,style-loader, если используется sass, он будет использоватьсяsass-loader.

Несколько других важных концепций:

  • режим: определяет режим упаковки, разработку или производство.
  • devtool: указывает, как генерируется sourceMap.
  • запись: настроить файл записи.Если упаковано несколько файлов, необходимо упаковать несколько файлов, просто напишите несколько записей в записи, а имя выходного файла использует заполнитель[name]Выражать.
  • выход: экспорт.
  • загрузчик: Различные инструменты для помощи при упаковке.
  • Плагины: Плагины, загрузчики используются для преобразования определенных типов модулей, а плагины могут использоваться для выполнения более широкого круга задач. Такие как HtmlWebpackPlugin, CleanWebpackPlugin.
  • devServer: используйте WebpackDevServer, чтобы включить горячие обновления для повышения эффективности разработки.

8.2 HMR Горячая перезагрузка

Метод конфигурации

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
//添加这行
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 9090,
    //添加下面两行
    hot: true,
    hotOnly: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html"
    }),
    new CleanWebpackPlugin(),
    //添加这行
    new webpack.HotModuleReplacementPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/'
          }
        }
      }, {
        test: /\.(eot|woff|svg|ttf)/,
        use: {
          loader: 'file-loader',
        }
      }, {
        test: /\.(css|scss)/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              // modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }
    ]
  }
}

Горячая перезагрузка CSSstyle-loader и css-loader уже сделали это за нас.

Горячая перезагрузка JS

//判断是否开启了热更新
if (module.hot){
  //监听 hotTest.js 文件，当文件有变动时执行箭头函数里的方法
  module.hot.accept('./hotTest.js', () => {
    //文件变动时执行的操作
    hotTest();
  })
}

8.3 Сжатие кода и изображений

Сжать JavaScript

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

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

  • UglifyJsPlugin: сжатие достигается за счет инкапсуляции UglifyJS.
  • ParallelUglifyPlugin: сжатие параллельной обработки нескольких процессов.

Сжать изображение

Сжимайте изображения с помощью image-webpack-loader

Включите сжатие Gzip

Открытый GZIP сжатый размер также может быть значительным.

9. Безопасность

Фронтенд-безопасность делится на две категории: CSRF, XSS.

Общие тестовые площадки: основные понятия и аббревиатуры, принципы атаки, меры защиты

9.1 CSRF

CSRF (подделка межсайтовых запросов) Подделка межсайтовых запросов.

принцип атаки

  1. Пользователь C открывает браузер, посещает доверенный веб-сайт A и вводит имя пользователя и пароль, чтобы запросить вход на веб-сайт A;
  2. После проверки информации о пользователе веб-сайт А генерирует информацию о файлах cookie и возвращает ее в браузер.В это время пользователь успешно входит в систему на веб-сайте А, и запрос может быть отправлен на веб-сайт А в обычном режиме;
  3. Прежде чем пользователь покинет веб-сайт А, в том же браузере откройте страницу TAB, чтобы посетить веб-сайт Б;
  4. После того, как веб-сайт B получает запрос пользователя, он возвращает некоторые оскорбительные коды и отправляет запрос на посещение стороннего веб-сайта A;
  5. После получения этих оскорбительных кодов браузер отправляет запрос веб-сайту А по запросу веб-сайта Б, неся информацию о файлах cookie без ведома пользователя. Веб-сайт A не знает, что запрос на самом деле инициирован B, поэтому он будет обрабатывать запрос с полномочиями C в соответствии с информацией из файла cookie пользователя C, что приведет к выполнению вредоносного кода с веб-сайта B.

защитные меры

  1. Проверка токена
  2. Проверка реферера (это легко сделать, но реферер может быть изменен)
  3. Скрыть токен (аналогично проверке токена, сохранить токен в шапке)

9.2 XSS

XSS (межсайтовый скриптинг) атака междоменного скриптинга

принцип атаки

Вставка вредоносного кода скрипта в веб-страницы

защитные меры

  1. HTML: экранируйте эти символы:
&：&amp;
<：&alt;
>：&gt;
'：&#x27;
"：&quot;
/：&#x2F;

  1. Javascript: экранируйте все символы, кроме буквенно-цифровых, в символы ASCII до 256;

  2. URL: Ввод пользователя кодируется с помощью метода Javascript encodeURIComponent(), который кодирует следующие символы:

    ,      /      ?     :     @     &     =     +     $     #

Десять, глубокая копия, неглубокая копия

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

мелкая копия

  1. Object.assign 

  2. спред оператор... 

глубокая копия

  1. в состоянии пройтиJSON.parse(JSON.stringify(object))Разрешить.

    Но есть несколько вещей, о которых нужно знать

    • будет игнорироватьundefined
    • будет игнорироватьsymbol
    • не могу сериализовать функцию
    • не может разрешать объекты с циклическими ссылками

  2. Если объект, который вы хотите скопировать, имеет встроенные типы и не имеет функций, вы можете использоватьMessageChannel.

  3. Рекомендуемое использованиефункция глубокого копирования lodash.

11. HTTP, HTTPS, HTTP2.0

http-связанный также более важен, и его часто спрашивают.

11.1 Основные понятия

HTTP(Протокол передачи гипертекста: протокол передачи гипертекста) — это протокол прикладного уровня для распределенных, совместных и информационных систем гипермедиа. Проще говоря, это метод публикации и получения HTML-страниц, которые используются для передачи информации между веб-браузером и веб-сервером. HTTP по умолчанию работает на TCP-порту 80, и пользователи получают доступ к веб-сайту.http://Первые — это стандартные HTTP-сервисы. Протокол HTTP отправляет контент в виде открытого текста и не обеспечивает какой-либо формы шифрования данных. Если злоумышленник перехватит сообщение, передаваемое между веб-браузером и веб-сервером, он сможет напрямую прочитать содержащуюся в нем информацию. подходит для передачи.Некоторая конфиденциальная информация, такая как номера кредитных карт, пароли и другая платежная информация.HTTPS(Безопасный протокол передачи гипертекста: Безопасный протокол передачи гипертекста) — это протокол передачи для безопасного обмена данными по компьютерным сетям. HTTPS взаимодействует через HTTP, но использует SSL/TLS для шифрования пакетов. Основной целью разработки HTTPS является обеспечение аутентификации серверов веб-сайтов и защита конфиденциальности и целостности передаваемых данных. HTTPS по умолчанию работает на порту 443 протокола TCP, и его рабочий процесс обычно выглядит следующим образом:

  1. Трёхстороннее рукопожатие синхронизации TCP
  2. Клиентский сервер аутентификации цифровых сертификатов
  3. Алгоритм DH согласовывает ключ алгоритма симметричного шифрования и ключ алгоритма хеширования.
  4. Согласование безопасного зашифрованного туннеля SSL завершено
  5. Веб-страницы передаются в зашифрованном виде, зашифрованном с помощью согласованного алгоритма симметричного шифрования и ключа для обеспечения конфиденциальности данных; согласованный алгоритм хеширования используется для защиты целостности данных, чтобы гарантировать, что данные не будут подделаны.

11.2 Различия между HTTP и HTTPS

  • Передача открытого текста HTTP, данные не зашифрованы, безопасность низкая, процесс передачи данных HTTPS (SSL + HTTP) зашифрован, безопасность лучше.
  • Для использования протокола HTTPS необходимо подать заявку на получение сертификата в CA (Certificate Authority, центр сертификации цифровых сертификатов).Как правило, бесплатных сертификатов мало, поэтому требуется определенная плата. Центры сертификации, такие как: Symantec, Comodo, GoDaddy и GlobalSign и т. д.
  • HTTP-ответ на страницу быстрее, чем https, в основном потому, что http использует трехстороннее рукопожатие TCP, чтобы установить соединение, клиент и сервер необходимо обменять три пакеты, TCP и HTTP в дополнение к трем пакетам, а также рукопожатие SSL требует девяти пакетов, поэтому Всего 12 пакетов.
  • http и https используют совершенно разные методы подключения и используют разные порты: первый — 80, а второй — 443.
  • HTTPS на самом деле представляет собой HTTP-протокол, построенный поверх SSL/TLS, поэтому HTTPS потребляет больше ресурсов сервера, чем HTTP.

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

В протоколе TCP/IP протокол TCP устанавливает надежное соединение через трехстороннее рукопожатие.

  • Первое рукопожатие: клиент пытается подключиться к серверу, отправляет на сервер пакет синхронизации (Synchronize Sequence Numbers), syn=j, клиент переходит в состояние SYN_SEND и ждет подтверждения от сервера
  • Второе рукопожатие: сервер получает пакет синхронизации клиента и подтверждает его (ack=j+1) и одновременно отправляет пакет SYN (syn=k) клиенту, то есть пакет SYN+ACK, в этот момент. время, когда сервер входит в состояние SYN_RECV
  • Третье рукопожатие: третье рукопожатие: клиент получает пакет SYN + ACK на сервер, сервер отправляет пакет подтверждения ACK (ack = k + 1), этот пакет отправляется, клиент и сервер находятся в состоянии ESTABLISHED, завершают три Пожать руки

Справочная документация:У-у-у. Беги, о, о, quilt.com/my 3C note/красное свечение…

11.4 Оптимизация http2.0

Что такое HTTP2.0

Проще говоря, HTTP/2 (протокол передачи гипертекста версии 2, первоначально называвшийся HTTP 2.0) является второй основной версией протокола HTTP. HTTP/2 — это первое обновление протокола HTTP после выпуска HTTP 1.1 в 1999 году, в основном основанное на протоколе SPDY. Особенность HTTP 2.0 заключается в том, что он значительно повышает производительность сети без изменения семантики HTTP, методов, кодов состояния, URI и полей заголовков.

Что такое протокол SPDY

Введение HTTP2.0 только что ввело термин - протокол SPDY, что это такое? SPDY — это прозвище Speedy, что означает «быстрее». Это протокол прикладного уровня, основанный на протоколе TCP, разработанном Google. Цель состоит в том, чтобы оптимизировать производительность протокола HTTP, сократить время загрузки веб-страниц и повысить безопасность с помощью таких методов, как сжатие, мультиплексирование и установка приоритетов. Основная идея протокола SPDY — минимизировать количество TCP-соединений. SPDY — это не протокол, используемый для замены HTTP, а расширение протокола HTTP.

Недостатки HTTP1.x

  1. HTTP/1.0 позволяет инициировать только один запрос для одного TCP-соединения за раз, а конвейерная технология, используемая в HTTP/1.1, может только частично обрабатывать одновременные запросы, и все равно будет возникать проблема блокировки заголовка очереди.Поэтому, когда клиент необходимо инициировать несколько запросов, обычно устанавливается несколько соединений, чтобы уменьшить задержку.
  2. Односторонний запрос, который может быть инициирован только клиентом.
  3. Существует большое количество избыточности в информации заголовка сообщения запроса и сообщения ответа.
  4. Данные не сжимаются, что приводит к передаче большого объема данных.

Особенности HTTP2.0

  1. бинарная передача
  2. Мультиплексор
  3. Сжатие заголовка
  4. пуш сервера
  5. безопаснее

Справочная документация:сегмент fault.com/ah/119000001…

Общие методы запроса

ПОЛУЧИТЬ, ПОСТАВИТЬ, ПОСТАВИТЬ, УДАЛИТЬ, ИСПРАВИТЬ

12. Работа в Linux

Общий бэкэнд, связанный с Linux, запрашивает больше, а фронтенд — меньше

Список всей информации о процессах, работающих в памяти

ps  -aux
//列出 *** 进程的详细信息
ps -aux | grep ***

убить процесс

 kill -9 -pid

13. Алгоритм

Алгоритмы все еще должны накапливаться

дихотомия

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

  1. Сначала начинаем поиск со среднего элемента массива, если элемент точно является целевым элементом, процесс поиска завершается, иначе выполняется следующий шаг.
  2. Если целевой элемент больше/меньше среднего элемента, ищем в половине области массива больше/меньше среднего элемента, а затем повторяем операцию шага (1).
  3. Если массив шагов пуст, это означает, что целевой элемент не может быть найден.

Временная сложность бинарного поиска составляет O(logn).

динамическое программирование

Алгоритм динамического программирования разделяет задачу и определяет взаимосвязь между состоянием задачи и состоянием, так что задачу можно решить рекурсивным способом (или разделяй и властвуй). Основная идея алгоритма динамического программирования аналогична методу «разделяй и властвуй», он также разбивает решаемую задачу на несколько подзадач (этапов) и последовательно решает подэтапы. При решении любой подзадачи перечисляются различные возможные локальные решения, те локальные решения, которые, вероятно, будут оптимальными, сохраняются при принятии решения, а другие локальные решения отбрасываются. Решите каждую подзадачу по очереди, и последняя подзадача будет решением исходной задачи.

Чтобы узнать больше об основных вопросах, связанных с js, перейдите к предыдущей статье.Основные навыки фронтенд-интервью.

Наконец, я желаю вам всем удовлетворительного предложения ~

Категории