[Интервью] Полтора года фронт-энда Bigo с одной, двумя и тремя сторонами

предисловие

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

одна сторона

сказать`Javascript`тип данных

НовейшиеECMAScriptСтандарт определяет 8 типов данных

Примитивные типы данных: Boolean, Null, Undefined, Number, BigInt, String, Symbol

Тип ссылки: Объект (Object). Типы объектов включают в себя: массив (Array),функция(Function) и два специальных объекта: обычные (RegExp) и дату (Date)

бонус:BigIntа такжеSymbolТипы

BigInt— это числовой тип данных, который может представлять целые числа в произвольном формате точности. из-заNumberТиповые ограничения. Ограничения типа Number (в JavaScriptNumberпредставляет собой число с плавающей запятой двойной точности, что означает ограниченную точность, как показано ниже)

const max = Number.MAX_SAFE_INTEGER; // 9007199254740991
max + 1 // 9007199254740992
max + 2 // 9007199254740992

Уведомлениеmax + 1 === max + 2,это неправильно

BigIntЯвляется ли решить такие проблемы

`Symbol`Типы сценариев использования

Symbol: Представляет уникальное значение черезSymbolГенерация функции, получающая в качестве параметра строку, указывающую, что параSymbolОписание экземпляра, в основном для отображения в консоли

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

Объекты гарантированно имеют разные имена свойств
- Примечание: используйтеSymbolПри определении свойства значение должно быть заключено в квадратные скобки.
- Не используйте оператор точки при чтении
Определите набор констант, чтобы гарантировать, что набор констант не равен
Используйте символ для определения частных свойств / методов класса

const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{

  // 公有方法
  foo(baz) {
    this[bar](baz);
  }

  // 私有方法
  [bar](baz) {
    return this[snaf] = baz; //私有属性
  }

  // ...
};

Vueспроектировать и внедрить

Другие моменты знаний, которые следует отметить:

Обратите внимание на обход имен свойств
- При обходе объекта свойство не появится в цикле for...in..., for...of и не будет возвращено Object.keys(), Object.getOwnPropertyNames(), JSON.stringify( )
- Доступ к ним можно получить через Object.getOwnPropertySymbols()
Symbol.hasInstance
- Указывает на внутренний метод. Этот метод вызывается, когда другие объекты используют оператор instanceof, чтобы определить, являются ли они экземплярами объекта.
- Например, foo instanceof Foo внутри языка на самом деле вызывает Foo[Symbol.hasInstance](foo), что немного похоже на захват метода instanceof.

class MyClass {
  [Symbol.hasInstance](foo) {
    return foo instanceof Array;
  }
}
[1, 2, 3] instanceof new MyClass() // true

`null`а также`undefined`разница

nullТип представляет нулевое значение, которое представляет объект нулевого указателя,typeof nullполучите'object'Таким образом, это можно рассматривать как особое значение объекта.undefinedКогда вы объявляете переменную неинициализированной, вы получаетеundefined

typeofЗначение не то же самое

console.log(typeof undefined); //undefined
console.log(typeof null); //object

При преобразовании в числовые значения значения не совпадают

console.log(Number(undefined)); //NaN
console.log(undefined + 10);//NaN
console.log(Number(null)); //0
console.log(null + 10); //10

=== оператор различаетnullа такжеundefined
nullИспользуемые сценарии
- как конец цепочки прототипов объекта

Object.getPrototypeOf(Object.prototype) // null

undefinedТипичное использование [переменных, параметров функции, возврата функции, свойств объекта]

Общие оптимизации производительности страницы

Какие есть методы оптимизации на HTTP?

Понятия перекомпоновки и перерисовки и как их избежать

Разница между трехсторонним рукопожатием TCP и четырехсторонним рукопожатием TCP

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

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

Когда между клиентом и сервером устанавливается обычное сетевое соединение TCP, клиент сначала выдаетSYNсообщение, сервер используетSYN+ACKОтвет указывает, что сообщение было получено, и, наконец, клиент возвращается сACKответ на сообщение. Таким образом, может быть установлено надежное соединение между клиентом и сервером.TCPсоединение, данные могут передаваться между клиентом и сервером
Когда соединение установлено, клиент отправляетSYNПакет на сервер и дождитесь ответа сервера. (SYNПорядковый номер синхронизации, который является сигналом квитирования, используемым при установлении соединения)
сервер получаетSYNупаковка, использованиеACKПакет подтверждает ответ, а также отправляетSYNпакет, т.е. отправитьSYN+ACKМешок.

Клиент получает серверSYNПакет, отправить пакет подтверждения на серверACK. Этот пакет отправлен, представляютTCPСоединение установлено, трехстороннее рукопожатие завершено

Четыре волны: четыре волны — это релизыTCPПроцесс установления соединения

Клиент отправляет сообщение об освобождении соединения на серверFIN, дождитесь подтверждения сервера и прекратите отправку данных
После того, как сервер получает запрос на освобождение соединения, он отправляетACKПакет означает подтверждение. (В этом состоянии это означает, что соединение между клиентом и сервером было разорвано, и данные, отправленные клиентом, больше не принимаются, но если сервер все еще отправляет данные, клиент все равно их получает)
После отправки сервером последних данных он отправляет клиенту сообщение об освобождении соединения.FIN, ожидая подтверждения клиента.
После того, как клиент получает сообщение об освобождении соединения с сервером, он отправляетACKПакет означает подтверждение. В этот момент клиент войдетTIME_WAITсостояние, которое будет продолжаться2MSL(Максимальное время выживания сегмента, относится к времени, в течение которого сегмент сохраняется в сети, тайм-аут будет отброшен)ACKПосле ответа сразу переходите в выключенное состояние

Как работает оптимизация производительности веб-пакета?

Что такое обновление данных апплета?

Какие темы есть у апплета?

Уровень рендеринга и уровень логики апплета управляются двумя потоками: интерфейс слоя рендеринга используетWebViewДля рендеринга логический уровень использует потоки JsCore для запуска JS-скриптов.
Слой логики: создайте отдельный поток для выполнения JavaScript. В этой среде выполняется весь код, связанный с бизнес-логикой апплета. Поскольку js не запускается вWebView, вы не можете напрямую манипулировать DOM и BOM, поэтому апплет не имеет глобальной переменной окна
Уровень рендеринга: все задачи, связанные с рендерингом интерфейса, находятся вWebViewВыполняйте в потоке и контролируйте, какие интерфейсы визуализируются с помощью кода логического уровня. Апплет имеет несколько интерфейсов, поэтому существует несколько слоев рендеринга.WebViewнить
Двухпоточная коммуникация [Виртуальный DOM Я думаю, все знают, вероятно, этот процесс: симулировать дерево DOM с помощью объекта JS -> сравнить разницу между двумя виртуальными деревьями DOM -> применить разницу к реальному дереву DOM. 】

1、在渲染层把 WXML 转化成对应的 JS 对象

2、在逻辑层发生数据变更的时候，通过宿主环境提供的 setData 方法把数据从逻辑层传递到 Native，再转发到渲染层

3、经过对比前后差异，把差异应用在原来的 DOM 树上，更新界面

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

Да, вы можете установить его один раз, и пытаться установить его как последний раз много раз.

`Vue 2.x`принцип реализации?

Ответьте на соответствующие принципы двусторонней привязки данных

Алгоритм сравнения Vue

Процесс компиляции Vue

Есть три основных процессаparse,optimize,generate
Функция компиляции заключается в анализе шаблона и создании рендеринга, который отображает шаблон. Роль рендеринга также заключается в создании Vnodes, которые соответствуют узлам шаблона один к одному.
разбор: получить исходный шаблон шаблона и сгенерировать соответствующий ast в соответствии с узлом и данными шаблона [через большое количество регулярных сопоставлений для реализации синтаксического анализа строки]
Оптимизируйте: рекурсивно пройдитесь по каждому узлу ast, пометьте статические узлы (без привязки каких-либо динамических данных), чтобы вы знали, что эта часть не изменится, поэтому, когда страницу необходимо обновить, уменьшите сравнение этой части DOM. Для достижения цели оптимизации производительности. [Почему существует процесс оптимизации, потому что мы знаем, что Vue управляется данными и отзывчив, но не все данные в нашем шаблоне отзывчивы, и есть много данных, которые никогда не изменятся после первого рендеринга, так что это DOM, сгенерированный некоторые данные не изменятся, и мы можем пропустить их сравнение в процессе патчинга. 】
Сгенерировать: собрать полный ast, сгенерированный на первых двух шагах, в строку рендеринга (этот рендер становится исполняемой функцией после того, как он становится функцией, но теперь он находится в форме строки, и позже он будет преобразован в функцию)

Простая принципиальная реализация Vuex [также рассматривается режим публикации и подписки]

Ссылаться на:Вопросы собеседования: расскажите нам о своем понимании пар Vuex

Какие сценарии совместимы с мобильным терминалом [Key Review]

Проблема с 1px решена:у-у-у. Краткое описание.com/afraid/3ah262758ah…
Запретить увеличение и уменьшение страницы на мобильных устройствах

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

Заикание и замедление при прокрутке полосы прокрутки вверх и вниз. Android3+ и iOSi5+ поддерживают новое свойство CSS3 overflow-scrolling.

  body {
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}

 - ios和android下触摸元素时出现半透明灰色遮罩

-webkit-tap-highlight-color:rgba(255,255,255,0);

щелчок300msпроблема с задержкой

Проблема: в мобильном терминале событие клика допустимо, но после клика будет ответ с задержкой 300 мс.

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

Вариант 1: отключить масштабирование

когдаHTMLЗаголовок документа содержит следующееmetaПри маркировке: Указывает, что эта страница не масштабируется, поэтому функция масштабирования двойным щелчком не имеет смысла. В это время браузер может отключить поведение масштабирования двойным щелчком по умолчанию и удалить его.300msзадержка клика

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

Решение 2. Измените ширину области просмотра по умолчанию

<meta name="viewport" content="width=device-width">

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

Вариант 3: представитьfastclickбиблиотека для решения

FastClickПринцип реализации заключается в обнаруженииtouchendсобытие, черезDOMПользовательские события, запускающиеся немедленно, имитируют событие щелчка, а обозреватель событий щелкает стоп через 300 мс.

Ссылаться на:woo woo Краткое описание.com/afraid/no 5 из 103 ах 9 нет…

Центрирование по горизонтали и вертикали
Вы использовали узел раньше?

две стороны

кодирование содержимого в HTTP

Content-EncodingЗаголовок сообщения объекта, используемый для сжатия данных определенного типа носителя. Когда этот заголовок присутствует, его значение указывает, как выполняется преобразование кодирования содержимого тела сообщения. Этот заголовок сообщения используется, чтобы сообщить клиенту, как декодировать, чтобы получитьContent-TypeСодержимое типа носителя, указанное в .

Content-Encoding: gzip
Content-Encoding: compress
Content-Encoding: deflate
Content-Encoding: identity
Content-Encoding: br

Ссылаться на:developer.Mozilla.org/this-cn/docs/…

`HTTP`долгая связь в

HTTPПротокол принимает режим «запрос-ответ», когда используется обычный режим, т.KeepAliveВ режиме каждый запрос/ответ клиент и сервер должны создавать новое соединение и отключаться сразу после завершения (HTTPпротокол является протоколом без установления соединения); при использованииKeep-Aliveрежим (он же постоянное соединение, повторное использование соединения),Keep-AliveФункция делает так, чтобы соединение между клиентом и сервером оставалось действительным, и когда происходит последующий запрос к серверу,Keep-Aliveфункция избегает установления или повторного установления соединения

http 1.0По умолчанию он отключен, и его необходимо установить вhttpголова присоединиться"Connection: Keep-Alive", включитьKeep-AlivОй;http 1.1включено по умолчанию вKeep-Alive, если вы добавите «Соединение: закрыть», оно будет закрыто. В настоящее время большинство браузеров используют протокол http1.1, что означает, что запрос на подключение Keep-Alive будет инициирован по умолчанию, поэтому может быть выполнен полныйKeep- AliveСоединение зависит от настроек сервера

Ссылаться на:blog.CSDN.net/common 11799/art… developer.Mozilla.org/this-cn/docs/…

JS сказал на мероприятии в обращении

Надежный кеш и кеш согласования

Вы узнали об эвристическом кэшировании?

Нет полей для кеширования - политика кеширования не задана
Часто принимает заголовок ответаDateминусLast-Modified10% значения в качестве времени кэширования

Ссылаться на:

Политика кэширования браузера

Механизм сборки мусора в V8

Ссылаться на:[Веб-технологии] 737- Глубокое понимание механизма сборки мусора Chrome V8

Что такое глобальные переменные узла

JavaScriptСуществует специальный объект, называемый глобальным объектом (Global Object), он и все его свойства доступны в любом месте программы, т.е. глобальные переменные

В браузерном JavaScript окно обычно является глобальным объектом, а в Node.js глобальным объектом являетсяglobal, все глобальные переменные (кроме самой глобальной)globalсвойства объекта.

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

Ссылаться на:Глобальный объект Node.js

Понимание узла

Что вы знаете о ES6?

Вы знаете о множестве и карте?

Каков принцип реализации карты?

MapИспользуя связанные списки,hashидеи реализовать.

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