Базовые вопросы по фронтенду для интервью @JS статьи

Каковы типы данных Js?

базовый тип

• String
• Number
• Boolean
• null
• undefined
• symbol

тип ссылки

• object

Разговор о коде состояния Http

1** информация, сервер получает запрос, и запрашивающая сторона должна продолжить выполнение операции (101, перейти на протокол веб-сокета)
2** Успех, операция успешно получена и обработана (206, частичное содержание, сегментированная передача)
3** Перенаправление, для выполнения запроса требуются дополнительные действия (перенаправление 301, 302; попадание в кеш 304)
4** Ошибка клиента, запрос содержит синтаксическую ошибку или запрос не может быть выполнен (401, требуется аутентификация; 403, сервер понимает потребности клиента, но доступ запрещен)
5** Ошибка сервера, сервер обнаружил ошибку при обработке запроса

Говоря о кодах состояния ajax, должен ли ajax быть асинхронным?

Ajax не обязательно асинхронный, его можно настроить через третий параметр метода open (по умолчанию true, асинхронный)

код состояния:

0 - (неинициализировано) метод send() не вызывался
1 - (Загрузка) метод send() был вызван, запрос отправляется
2 - (загрузка завершена) выполнение метода send() завершено
3 - (Интерактивный) Анализ содержимого ответа
4 - (Завершено) Содержимое ответа анализируется и может быть вызвано на стороне клиента

Скажи мне, что такое ajax? Преимущество? Недостаток? Вопросы, на которые стоит обратить внимание?

Ajax — это стандарт для связи с серверной частью. Полное название — Asynchronous Javascript And XML (асинхронный javascript и XML).

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

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

Недостаток:

• Кнопка «Назад» в браузере не поддерживается
• Соображения безопасности, возможность отправлять запросы без ведома пользователя
• Предоставление сведений о http-взаимодействии
• Слабая поддержка поисковых систем (сканеры)
• Программы не так просто отлаживать

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

• Проблема совместимости браузера, эта проблема была инкапсулирована для нас jQuery и другими библиотеками.
• При междоменных проблемах доступ через ajax между разными доменами запрещен.Подробное объяснение CORS для совместного использования ресурсов между доменами
• Для большей скорости и удобства для поисковых систем старайтесь не использовать ajax на главной странице, а рендеринг на стороне сервера (конечно, это зависит от сцены)
• Ajax подходит для операций добавления, удаления, модификации и запросов.

Вы записываете результат печати следующего выражения

1.toString()  //Uncaught SyntaxError: Invalid or unexpected token
true.toString()  //"true"
[].toString()  //""
{}.toString()  //Uncaught SyntaxError: Unexpected token .
null.toString()  //Uncaught TypeError: Cannot read property 'toString' of null
undefined.toString()  //Uncaught TypeError: Cannot read property 'toString' of undefined
NaN.toString()   //"NaN"

Их нужно запомнить, где 1 и {} — синтаксические ошибки. null и undefined потому что нетtoStringметод, вы можете использоватьcallЧтобы взять его (если вы хотите узнать больше, вы можете перейти в область комментариев, чтобы увидеть, как меня ругали):

1..toString()   //"1"
(1).toString()  //"1"
Number(1).toString()  //"1"
({}).toString()  //[object Object]
Object.prototype.toString.call(null)   //[object Null]
Object.prototype.toString.call(undefined)   //[object Undefined]

Что вы знаете об оптимизации производительности переднего плана?

уровень содержания

• Используйте CDN
• Одно доменное имя и несколько доменных имен. Одно доменное имя может сократить количество запросов DNS, а несколько доменных имен могут увеличить количество параллельных загрузок браузера. Это необходимо сбалансировать. Как правило, в системе должно быть не более четырех ресурсов. тот же домен.
• Избегайте перенаправлений (сценариев)
• Избегайте 404

сетевой уровень

• Используя кеширование, вы можете обратиться к другой статьеРукописный файловый сервер, рассказ о внешнем и внутреннем взаимодействии
• Сжатие файлов (сообщите серверу тип сжатия, который вы поддерживаете, через заголовок ответа Accept-Encoding: gzip, deflate, br)
• Загрузка по запросу, извлечение общего кода, древовидная тряска и т. д. (все возможно через веб-пакет)
• Уменьшить размер файла cookie
• Объединение файлов, объединение изображений через карту спрайтов css
• Предварительная загрузка файлов, отложенная загрузка изображений

между слоями визуализации

• js внизу, css вверху
• Уменьшить перекомпоновку (reflow) и перерисовать (redraw)
• уменьшить число узлов

уровень кода

• Кэшировать узлы домена, сократить поиск узлов, оптимизировать уровень селектора CSS
• Сокращение операций с узлами dom
• Разумное использование break, continue, return и т. д. для оптимизации цикла
• Такие средства, как делегирование событий и объединение объектов, используемые в реакции

Расскажите о переформатировании и перерисовке браузера

Процесс парсинга в браузере

1. Разобрать html для создания дерева домов
2. Разобрать css
3. Примените css к дереву dom для создания дерева рендеринга (запишите здесь каждый узел, его стиль и расположение)
4. Рендеринг дерева рендеринга на страницу

переплавка

Reflow переводится как reflow, что означает, что страница заново строит дерево рендеринга. Перекомпоновка происходит по крайней мере один раз на страницу, когда страница загружается в первый раз.

Кроме того, перекомпоновка происходит, когда на странице происходят какие-либо изменения, которые могут привести к изменению структуры документа (то есть к изменению относительного или абсолютного положения между элементами).

• Добавить или удалить элементы (кроме opacity:0, что не является удалением)
• Изменение размера или положения элемента
• Окно браузера изменяется (активируется событие изменения размера)

перекрашивать

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

1. Цвет элемента, изменение прозрачности
2. выравнивание текста и т. д.

Оптимизация браузера

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

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

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop/Left/Width/Height
• clientTop/Left/Width/Height
• width,height
• getComputedStyle или currentStyle IE

Обратите внимание на проблему

1. пакетная обработка

• Используйте DocumentFragment для кэширования, чтобы срабатывал только один перекомпоновщик.
• Поместите часто используемые элементы на первое отображение: null, вызовет только два перекомпоновки
• cloneNode и replaceChild вызывают только две перекомпоновки

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

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

//es6
' ab '.trim()      //"ab" 
//正则
' ab '.replace(/^\s*|\s*$/g,'')  //"ab"

Как получить строку запроса в URL

function queryUrlParameter(str) {
    let obj = {}
    let reg = /([^?=&#]+)=([^?=&#]+)/g;
    str.replace(reg, function () {
        obj[arguments[1]] = arguments[2]
    })
    //如果加上hash
    // reg = /#([^?&=#]+)/g
    // if (reg.test(str)) {
    //     str.replace(reg, function () {
    //         obj.hash = arguments[1]
    //     })
    // }
    return obj
}
console.log(queryUrlParameter('http://www.baidu.com?a=1&b=2#12222'))  //{ a: '1', b: '2'}

Как реализовать глубокое копирование, глубокое сравнение

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

function clone(obj) {
  if (obj == null || typeof obj !== 'object') return obj

  let newObj = null

  // 时间对象有特殊性
  if (obj.constructor === Date) {
    newObj = new obj.constructor(obj)
  } else {
    newObj = obj.constructor()
  }


  for (let key in Object.getOwnPropertyDescriptors(obj)) {
    newObj[key] = clone(obj[key])
  }
  return newObj
}

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

function deepCompare(a, b){
  if(a === null
    || typeof a !== 'object'
    || b === null
    || typeof b !== 'object'){
    return a === b
  }

  const propsA = Object.getOwnPropertyDescriptors(a)
  const propsB = Object.getOwnPropertyDescriptors(b)
  if(Object.keys(propsA).length !== Object.keys(propsB).length){
    return false
  }

  return Object.keys(propsA).every( key => deepCompare(a[key], b[key]))

}

Как реализовать функцию троттлинга и антитряски

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

function throttle(fn, delay) {
  delay = delay || 50
  let statTime = 0
  return function () {
    statTime === 0 && fn.apply(this, arguments)
    let currentTime = new Date()
    if (currentTime - statTime > delay) {
      fn.apply(this, arguments)
      statTime = currentTime
    }
  }
}

let throttleFn = throttle(fn)

throttleFn()//只会执行一次
throttleFn()
throttleFn()
throttleFn()

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

function debounce(fn, delay) {
  delay = delay || 50
  let timer = null
  return function () {
    let self = this
    clearTimeout(timer)
    timer = setTimeout(fn.bind(self, arguments), delay);
  }
}

Вы пишете мне нативный метод привязки

Function.prototype._bind = function (context) {
  let self = this
  let args_1 = [].prototype.slice.call(arguments, 1)
  return function () {
    let args_2 = [].prototype.slice.call(arguments)
    let args = args_1.concat(args_2)
    return self.apply(context, args)
  }
}

Это просто простая реализация bind, если вы хотите узнать больше, вы можете обратиться кИспользование и реализация метода bind() в Javascript

Как реализовать выравнивание массива

function (ary) {
    return ary.toString().split(',')
}

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

Как добавлять, удалять, перемещать, копировать узлы DOM

Создайте

• createTextNode() //Создаем текстовый узел
• createElement() //Создаем узел элемента
• createDocumentFragment() //Создаем фрагмент документа

действовать

• appendChild() // добавить
• removeChild() // удалить
• replaceChild() // заменить
• insertBefore() // Вставить

найти

• getElementById()
• getElementByTagName()
• getElementByName()