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

опрос

предисловие

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

Как гласит старая поговорка:

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

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

"Эта статья будет постоянно обновляться, рекомендуется собрать ее и забрать перед интервью."

"Теплое напоминание: в конце статьи есть важная информация!"

HTML

Какие теги появились в HTML5?

Пылающий шлейф:

  • template  section  nav  article  aside  header  footer  main  canvas  svg  video  audio  source  track  menu Ждать.

Цию:

  • datalist embed Ждать.

Теги уровня блока

Пылающий шлейф:

  • div     p     h1-h6     ul     ol     dl     li     header     footer     aside     section     article     form     table Ждать.

Встроенный ярлык

Пылающий шлейф:

  • span     b     q     i     a     em     label Ждать.

Заменить этикетку (ширину и высоту можно задать)

Пылающий шлейф:

  • img     canvas     svg     video     iframe     input     button Ждать.

linkЧто делает тег при загрузке CSS с помощью@importВ чем разница между методами?

Пылающий шлейф:

  • linkМетки могут реализовывать такие функции, как загрузка ресурсов, предварительное разрешение DNS и т. д.
  • а также@importПо сравнению с методом, во-первых, это разница во времени загрузки,linkТеги не блокируются парсингом DOM, ресурсы могут загружаться параллельно, и@importЗагруженные ресурсы должны дождаться завершения синтаксического анализа DOM, прежде чем их можно будет загрузить; второй — область применения метода импорта ресурсов,linkТеги можно создавать и вставлять в документы с помощью JavaScript createElement для динамического введения, в то время как@importметод может использоваться только в CSS.

Цию:

  • ссылка — это элемент внешней ссылки, предоставляемый HTML, который может загружать не только файлы стилей, но и другие файлы, такие как изображения и сценарии на вкладках. @import — это синтаксис css, который можно использовать только для загрузки файлов стилей.
  • CSS, представленный несколькими ссылками, будет загружен одновременно, и приоритетный анализ будет завершен первым. CSS, импортированный с помощью @import, не будет загружен до тех пор, пока страница не будет загружена.
  • @import — это синтаксис, доступный только в CSS2.1, поэтому его можно распознать только в IE5+; тег ссылки — это элемент HTML, и проблем с совместимостью нет.
  • Вы можете манипулировать DOM через JS и вставлять теги ссылок для изменения стиля; поскольку метод DOM основан на документах, вы не можете использовать @import для вставки стилей.
  • Стили, представленные ссылкой, имеют больший вес, чем стили, введенные @import.

src а такжеhrefразница?

Пылающий шлейф:

  • srcОтноситсяsource, можно задать в свойствахsrcТеги в основном представляют собой замещающие теги, которые используются для замены содержимого тега после загрузки ресурса.srcЗагруженные ресурсы будут блокировать синтаксический анализ DOM.
  • hrefОтноситсяhypertext reference, можно задать в свойствахhrefТеги в основном представляют собой ссылки или теги ссылок, которые используются для ссылки на другие ресурсы в Интернете или для установки якорей.hrefСсылочные ресурсы не блокируют синтаксический анализ DOM, а загружаются параллельно.

scriptпомеченasyncсвойства иdeferВы понимаете свойства?

Пылающий шлейф:

  • async: Параллельная загрузка, загруженный ресурс будет выполнен сразу после загрузки, что прервет синтаксический анализ DOM.
  • defer: отложенное выполнение параллельной загрузки.После завершения загрузки загруженные ресурсы выполняются после завершения синтаксического анализа DOM, и синтаксический анализ DOM не будет прерван.
  • разница:asyncЗагруженные ресурсы будут выполняться сразу после завершения загрузки, поэтому порядок выполнения ресурсов неуправляем, и ресурсы, которые загружаются первыми, будут выполняться первыми;deferПосле завершения загрузки загруженные ресурсы будут помещены в очередь в соответствии с порядком начала загрузки, и они будут выполняться последовательно после завершения парсинга DOM.Свойства выполнения ресурсов можно контролировать.

Каковы преимущества семантических тегов HTML?

Пылающий шлейф:

  • Доступность: Механизму специальных возможностей удобно анализировать веб-контент.
  • SEO: четкая семантика и удобство для сканеров поисковых систем.
  • Удобочитаемость: HTML-код более удобочитаем и прост в обслуживании.

CSS

сказатьinline а такжеinline-blockразница?

Пылающий шлейф:

  • inline: Установить метку как встроенную, ширину и высоту установить нельзя.
  • inline-block: Установите метку как встроенную метку на уровне блока, и можно установить ширину и высоту.

Цию:

  • Установка ширины и высоты встроенных элементов недействительна (высота строки может быть установлена). Установка полей и отступов не повлияет на другие элементы.

flexРазберемся с макетом.flex: 1является аббревиатурой нескольких свойств? Каковы значения по умолчанию?

Пылающий шлейф:

  • flexОбщие свойства макета:flex-directionУстановите направление основной оси гибкости, столбец вертикальный сверху вниз, а ряд горизонтальный слева направо;justify-contentУстановите расположение элементов в направлении главной оси, центр по центру, пространство вокруг делится поровну, пространство между поровну делится, flex-start — это направление основной оси, а flex-end — это направление, противоположное главной оси. ;align-itemsУстановите расположение элементов на поперечной оси, центр по центру, растяжение — это направление поперечной оси, а высота каждого элемента — это высота флексбокса (значение по умолчанию), flex-start — это направление поперечной оси, flex-end — это направление, противоположное поперечной оси, а нижний край базовой линии выровнен.
  • flex: 1 :Даflex-grow flex-shrink flex-basisТри свойства являются аббревиатурами, а значения по умолчанию:0 1 auto, которые соответствуют заполнителю, масштабированию, а также ширине и высоте контейнера гибкого элемента соответственно.

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

Пылающий шлейф:

  • запросы средств массовой информации
  • гибкий макет
  • макет сетки (менее совместимый)
  • процентное расположение

Что такое БФК? Как запускается BFC?

Пылающий шлейф:

  • BFC: (контекст блокирования форматирования) Контекст форматирования блоков, как аранжированы элементы в BFC, не влияют на элементы вне BFC.
  • Триггер BFC:overflowне дляvisible,floatне дляnone,display дляinline-block tabel-cell table-caption один из них,positionне дляrelative илиstatic.
  • Функция: решить проблему коллапса высоты родительских элементов, решить проблему перекрывающихся полей, очистить всплывающие внутренние элементы;

Вы знаете анимацию CSS? Почему анимация с помощью CSS лучше, чем анимация с помощью JS?

Пылающий шлейф:

  • transition: срабатывает при изменении свойства прослушивания, большинство анимаций перехода можно реализовать с помощью других свойств стиля.
  • animation: Автоматический триггер, совпадение@keyframesМожет реализовать самые сложные циклические анимации.
  • Анимация CSS: запуск ускорения графического процессора, вызов возможностей графического процессора, высокая частота кадров (60). Динамическая настройка более сложная, подходит для анимации с фиксированным эффектом.
  • JS для анимации: Занимает движок JavaScript, использует вычисления ЦП, низкая частота кадров (30-50), легко зависает. Динамическая настройка проста и подходит для анимаций со сложными эффектами и высокими требованиями к динамическим эффектам.

JavaScript

newЧто делает оператор? Можете ли вы смоделировать это с помощью кода?

Пылающий шлейф:

function Person(name) {
  this.name = name;
}

function myNew() {
  var person = Object.create({});
  person.__proto__ = Person.prototype;
  var obj = Person.call(person, 'Jack');
  if (typeof obj === 'object') {
    return obj;
  } else {
    return person;
  }
}

var me = myNew(); // Person { name: 'Jack' }

Каково место для хранения Number() и что, если фон отправляет число, превышающее максимальное количество байтов?

Королевский ветер:

  • Суть типа Number — это 64-битное число с плавающей запятой. (8 байт)
  • Тип числа JavaScript использует 53 бита для дробного бита, 10 бит для бита экспоненты и 1 бит для бита знака. Таким образом, экспоненциальная часть имеет максимальное значение 2 ^ 10 = 1024. Следовательно, для диапазона чисел диапазон представления равен 2~2, что составляет 5e~1,7976931348623157e+308.
  • Если это диапазон целых чисел, то диапазон целых чисел, который может точно представить JavaScript, находится между -2^53 и 2^53 (исключая две конечные точки).
  • Если оно превышает, бэкенд может отправить строковый тип

thisВы можете четко указать?call apply bind Какая разница?

Пылающий шлейф:

  • Пока не используются явные привязки (call apply bind), то кто звонитthisуказать кому.
  • call: Первый параметр измененthisОбъект, на который указывает второй и последующие параметры, являются параметрами выполнения функции, и функция будет выполнена немедленно.
  • apply: роль первого параметра такая же, какcallТо же самое, вторым параметром является массив параметров выполнения функции, функция будет выполнена немедленно.
  • bind: создаст новую функцию при выполненииthisУказывает на объект, заданный первым параметром, второй и последующие параметры являются параметрами выполнения новой функции, функция не будет выполняться сразу.

Что такое закрытие? Какая польза?

Пылающий шлейф:

  • Замыкания подобны функциям, которые несут небольшой школьный портфель. В этом школьном портфеле есть некоторые вещи, которые будут использоваться после рождения функции. Описывать это более профессиональным языком — значит возвращать дочернюю функцию в родительскую функцию. Если дочерняя функция ссылается на нее переменных в родительской функции, эти переменные станут замыканием и могут быть получены в течение жизненного цикла дочерней функции.
  • Функция: вы можете обратиться к внутреннему значению извне функции, выполнить некоторую инкапсуляцию и приватизировать какое-то внутреннее состояние, аналогичное приватному в TypeScript; другое — иметь возможность хранить некоторые часто используемые переменные в памяти в течение длительного времени. время (обратите внимание на утечки памяти).

Напишите промис от руки, верно?

Пылающий шлейф:

  • ! @#¥%...&*, я ушел! (Шучу, интервьюер меня троллит)
function myPromise(fn) {
  // 回调函数集合
  this.callbacks = [];

  // resolve 方法
  // 往实例上挂载 data
  // 依次执行回到函数
  function resolve(value) {
    setTimeout(() => {
      this.data = value;
      this.callbacks.forEach((callback) => callback(value));
    });
  }

  // 将 resolve 方法交还
  fn(resolve.bind(this));
}

myPromise.prototype.then = function (onResolve) {
  return new myPromise((resolve) => {
    this.callbacks.push(() => {
      // 将结果返回给传入的回调
      const res = onResolve(this.data);
      // 链式调用  的返回值还是 Promise 对象时
      if (res instanceof myPromise) {
        res.then(resolve);
      } else {
        resolve(res);
      }
    });
  });
};

Сеть прототипов

уу:

  • prototype: Каждый **объект-функция** имеет свойство прототипа, которое указывает на объект-прототип функции. Объект берет свой прототип в качестве шаблона и наследует методы и свойства от прототипа, которые определены в свойстве прототипа функции-конструктора объекта, а не в самом экземпляре объекта. Прототип похож на набор инструментов для конструкторов, наполненный различными инструментами и всегда сопровождаемый конструкторами.
  • __proto__: свойства, которыми обладает каждый объект, будь то экземпляр, конструктор или объект-прототип.
  • __proto__Свойство указывает на прототип объекта конструктора:
person.__proto__ === Person.prototype;
Object.__proto__ === Function.prototype; // Object本质是由Function构造的 Function同理
Funtion.__proto__ === Funtion.prototype; // 这是一个比较特殊的地方
  • Цепочка прототипов по существу проходит через__proto__связаны вместоprototype.

  • Запомните следующие моменты:

    1. Экземпляр__proto__Указывает на прототип объекта конструктора. 2. Функциональный объект__proto__ направлениеFunction.prototype. 3. Объект-прототип__proto__ направлениеObject.prototype. (не знаю что пишу, не знаю как доработать написанное до орз)

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

Каковы поля заголовка HTTP?

Пылающий шлейф:

  • пользовательский агент: используется, чтобы позволить серверу идентифицировать тип приложения, операционную систему, разработчика программного обеспечения и номер версии программного обеспечения пользовательского агента, которое инициирует запрос.
  • referer: Источник запроса.
  • origin: существует, когда делается запрос между источниками, источник запроса.
  • cache-control: сильный контроль кеша, см. полеMDN.
  • expires: строгий контроль кеша, значение представляет собой метку времени, отмечающую время истечения срока действия кеша.
  • cookie: сохранение состояния, подробности см. в разделе браузера.
  • content-type: тип MIME в файле тела запроса/ответа.
  • content-length: длина тела запроса/ответа.

Каковы методы запроса HTTP?

Пылающий шлейф:

  • GET: параметры запроса встраиваются в URL-адрес в виде пар ключ-значение, параметры поддерживают только формат кодировки URL-адреса и обычно используются для получения ресурсов.
  • POST: параметры запроса хранятся в теле запроса в виде текста, который поддерживает несколько типов (MIME) и имеет множество форматов кодировки, обычно используется для создания/изменения ресурсов.
  • PUT: аналогичен POST, обычно используется для создания ресурсов.
  • DELETE: аналогично POST, обычно используется для удаления ресурсов.
  • ВАРИАНТ: предварительный запрос, используемый для проверки производительности сервера, обычно в непростых междоменных запросах, вы можете установить время действия предварительного запроса, установив Access-Control-Max-Age, чтобы избежать отправки перед каждым предварительным междоменным запросом. -чек об оплате. (Непростой запрос: кроме GET HEAD POST, тип содержимого равенtext/plain multipart/form-data appliction/x-form-urlencodedза пределами)
  • HEAD: возвращаются только заголовки ответов.

В чем разница между HTTP 2.0 и HTTP 1.1?

Пылающий шлейф:

  • Мультиплексирование: позволяет одновременно отправлять и получать несколько запросов по одному соединению HTTP 2. Из-за медленного старта TCP, если TCP-соединение создается для каждого пакета, оно будет много раз проходить фазу медленного старта, что требует очень много времени для HTTP, который представляет собой пакетный и немедленный запрос. , Мультиплексирование одного и того же TCP-соединения может значительно повысить эффективность передачи и избежать влияния медленного запуска на скорость передачи. RFC 2616 в HTTP 1.1 предусматривает, что разрешено только 2 соединения TCP под одним и тем же доменным именем одновременно, то есть разрешены только 2 соединения HTTP, а соединения, превышающие количество, будут заблокированы (6 для Chrome).
  • Двоичный кадр: в HTTP 2.0 сообщение будет разделено на двоичные кадры для передачи, которые могут быть завершены за одно соединение (мультиплексирование).
  • Сжатие заголовков: между сервером и клиентом хранится хеш-таблица, которая используется для записи полей заголовка сообщения, появившихся в процессе передачи. Когда тот же заголовок сообщения появляется снова, необходимо только передать идентификатор соответствующего поля заголовка во время передачи сообщения.
  • Нажатие на стороне сервера: в HTTP 1.1 запросы могут инициироваться только клиентом и следовать режиму запрос-ответ.Один вопрос и один ответ, клиент может полагаться только на опрос для получения информации в реальном времени, что очень неэлегантно. и имеет плохую производительность. В HTTP 2.0 после того, как клиент инициирует запрос, сервер может ответить несколько раз, предварительно загрузить некоторые ресурсы и реализовать функцию push сервера.

держите в живых понимаете? Скажи мне, что он делает?

Пылающий шлейф:

  • Отправляется HTTP-запрос, создается TCP-соединение, и клиент не разрывает соединение после получения ответа, а повторно использует для связи один и тот же канал TCP-соединения, избегая ненужных накладных расходов, вызванных установлением и разрывом соединений.

Как я могу предотвратить изменение передаваемых данных? То есть, как гарантировать, что данные не изменятся при отправке и получении данных?

Королевский ветер:

  • Использование передачи по протоколу https, связанное с сетевой безопасностью, подробности:blog.CSDN.net/end no/art IC….

браузер

Разница между localStorage и sessionStorage?

Пылающий шлейф:

  • localStorage: пара ключ-значение размером около 5 М, никогда не удаляется, если только вручную не используется всеми окнами одного и того же источника.
  • sessionStorage: пара ключ-значение, размер около 5M, сеанс закрывается и удаляется немедленно, независимо от окна сеанса, даже если это один и тот же источник, он не используется совместно.

куки знаете? Какие поля есть?

Пылающий шлейф:

  • Поскольку HTTP не имеет состояния, для поддержания состояния между сервером и клиентом появились файлы cookie. Суть куки — текстовый фрагмент, передаваемый между сервером и клиентом, в котором сохраняется некоторая информация о состоянии клиента, которую удобно читать серверу и выполнять другие операции.
  • Имя: имя ключа.
  • Значение: ключевое значение.
  • Домен: доменное имя, которое может содержать пару ключ-значение, начиная с.Это означает, что его имя поддомена также может быть перенесено.
  • Путь: путь к файлу, который может содержать пару ключ-значение.
  • Expires/Max-Age: временная метка времени истечения срока действия файла cookie, который будет автоматически удален по истечении срока его действия.
  • Размер: размер печенья.
  • Httponly: предотвратить JavaScript от чтения и модификации cookie.
  • Безопасный: разрешить передачу только по протоколу HTTPS.
  • SameSite: Запретить определенные запросы на передачу файлов cookie, значение равноNone Lax Strict. значениеNoneКогда есть , любой запрос может содержать этот файл cookie; значение равноLax, некоторые межсайтовые запросы не могут отправить этот файл cookie (толькоa link GETзапрос может выполняться); значение равноStrictКогда все межсайтовые запросы не могут отправлять этот файл cookie, разрешены только запросы одного и того же сайта. (По умолчанию до Chrome 80 былоNone, значение по умолчанию после версии 80 становитсяLax, новую версию Safari на WWDC 2020 также опубликовалиNoneизменился наLax)

кибербезопасность

Вы понимаете XSS? Как провести XSS-атаку?

  • XSS (межсайтовый скриптинг): без переводаurlИли введите сценарий атаки в поле ввода пользователя, чтобы выполнить сценарий для получения файлов cookie, открытия опасных страниц для атаки и других функций для атаки.
  • Предотвращение: все вводимые пользователем данные ненадежны,urlи введенный пользователем текстовый контент должен быть переведен, чтобы контент не был частью html, анализируемого браузером. Файлы cookie также можно отключить, установив параметр HttpOnly, чтобы запретить JavaScript читать и записывать файлы cookie.

CSRF понял? Как провести CSRF-атаку?

  • CSRF (подделка межсайтовых запросов): побуждается нажать на сторонний веб-сайт атаки B на веб-сайте A без защиты CSRF.На сервер веб-сайта A на веб-сайте сторонней атаки B отправлен запрос, и он будет автоматически отправляется при посещении веб-сайта B. Запрос автоматически содержит файл cookie веб-сайта A, который может олицетворять личность веб-сайта A, формирующего CSRF-атаку.
  • Предотвращение: добавьте источник и реферер в заголовок HTTP для проверки источника запроса и перехвата сторонних запросов; при доступе пользователя сервер генерирует случайный токен, сохраняет его в сеансе сервера и отправляет токен в клиент одновременно. Каждый запрос должен принести этот токен и сравнить его с токеном, сохраненным в сеансе сервера. Если срок действия токена не истек и сравнение прошло, он будет аутентифицирован как законный запрос; атрибут cookie SameSite ;

Рамочный принцип

Каков принцип двусторонней привязки Vue?

Пылающий шлейф:

  • Реактивный принцип: Object.defineProperty() перезаписывает установщик/получатель объекта, проходит по свойствам объекта и рекурсивно перезаписывает его.
var data = {
  name: 'Jack Wang',
  age: 21,
  salary: 3500,
  array: ['Jack', 'should', 'fighting']
};

// 模拟渲染
function render() {
  console.log('render');
}

// 定义需要重写的数组方法
var method = ['push', 'pop', 'unshift', 'shift', 'reverse', 'sort', 'splice'];
// 获取数组原型
var arrayProto = Array.prototype;
// 创建新的原型对象
var proto = Object.create(arrayProto);
// 遍历需要重写的数组方法
method.forEach(function (method) {
  // 修改新的原型对象
  proto[method] = function () {
    // 调用数组原型方法
    var res = arrayProto[method].call(this, ...arguments);
    render();
    return res;
  };
});

// 数据劫持/代理方法
function observe(obj) {
  // 非对象类型直接返回
  if (!obj || typeof obj !== 'object') {
    return;
  }
  // 为数组则将新的原型添加到其原型链上
  if (Array.isArray(obj)) {
    obj.__proto__ = proto;
    return;
  }
  // 遍历对象 key 将其传入
  Object.keys(obj).forEach(function (key) {
    defineReactive(obj, key, obj[key]);
  });
}

// 设置对象属性
function defineReactive(obj, key, value) {
  // 递归子属性
  observe(value);
  Object.defineProperty(obj, key, {
    // 重写 getter
    get: function () {
      console.log('get');
      return value;
    },
    // 重写 setter
    set: function (newValue) {
      console.log('set', newValue);
      // 递归子属性
      observe(newValue);
      // 若新值不等于旧值 则发生渲染
      if (newValue !== value) {
        value = newValue;
        render();
      }
    }
  });
}

// 进行数据劫持/代理
observe(data);
var data = {
  name: 'Jack Wang',
  age: 21,
  salary: 3500,
  array: ['Jack', 'will', 'be', 'the', 'best']
};

// 模拟渲染
function render(params) {
  console.log('render');
}

// 代理逻辑
var handler = {
  get(target, key) {
    console.log('get');
    // 若获取到的值为对象 则递归
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], key);
    }
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    console.log('set', value);
    // 若设置对象的 length 属性 则直接返回
    if (key === 'length') {
      return;
    }
    Reflect.set(target, key, value);
    render();
  }
};

// 数据代理
var proxy = new Proxy(data, handler);
  • Двусторонняя привязка: настройте v-модель, установите свойство модели подкомпонента, установите значение свойства, которое слушает v-модель, и привяжите событие, выполняемое при изменении свойства, для реализации пользовательской v-модели, то есть двухсторонняя привязка.

В чем разница между вычислением и просмотром в Vue?

Пылающий шлейф:

  • вычисленный: вычисляемый атрибут. Когда значение вычисляется из нескольких значений в данных, мы можем использовать вычисление для его вычисления и возврата. Результат вычисления кэшируется. Когда значение данных, от которого зависит это значение, не изменилось, оно не будет пересчитываться, а будет напрямую возвращать кэшированный результат. В принципе, после создания вычисляемого будет создан объект ленивого наблюдателя.Когда значение данных, от которого он зависит, изменится, грязное значение будет помечено как истинное.При ссылке на него будет оцениваться в соответствии с грязным значением. Пересчитать результат (true) или напрямую получить кеш (false).
  • watch: прослушивание свойства, некоторые операции, которые будут автоматически запускаться при изменении отслеживаемого свойства. В принципе, объект-наблюдатель создается после создания наблюдения, а обратный вызов запускается при изменении отслеживаемого свойства.

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

Пылающий шлейф:

  • это мойблогНу, я немного ленив и не хочу организовывать.

Особая благодарность

  • Часть содержания в статье - это ответы, которые я обсуждал и узнавал со своими друзьями. В то же время мои друзья также участвовали в редактировании. Здесь я хотел бы поблагодарить их.
  • Мы группа свежих выпускников, которые разогреваются в группе.Мы познакомились друг с другом из-за фронтенда и мечты попасть на большой завод.Если вы хотите присоединиться к нам, пожалуйста, добавьте меня в WeChat, мы можем учиться и общайтесь вместе и добивайтесь прогресса вместе! (Мой WeChat находится в публичном аккаунте~)

Благополучие в конце статьи

Помимо твердых базовых знаний, есть много навыков собеседования, на которые нужно обратить внимание на собеседовании, все они размещены на моем официальном аккаунте:"Hello FE"середина.

Есть публичный аккаунт"Дачан серия", много"Сводка опыта стажеров Дачанга","Внимание также уделит вам фронтальная коллекция книг (действительно очень полная)", всем просьба обратить внимание, поместите QR-код внизу:

公众号
Нет публики