предисловие
Кстати, неделю назад я запостил эту точку кипения:
Поэтому я действительно создал группу для сбора вопросов и написания ответов с коллегами по команде. Мы ничего не планировали, мы просто хотели сделать что-то значимое. Сейчас я разобрался с нашими ответами. Некоторые из них не обязательно очень хорошо Конкретные ответы, но также предоставьте идеи и справочные материалы, давайте посмотрим, есть ли что-нибудь еще, чтобы добавить, или вопросы, возникшие во время интервью, вы также можете добавить
[Gode side] Сколько HTTP-запросов может отправить TCP-соединение? (ЛВЬЮ)
Если это версия протокола HTTP 1.0, как правило, длинные соединения не поддерживаются, поэтому после отправки каждого запроса TCP-соединение будет разорвано, поэтому TCP отправляет HTTP-запрос, но есть ситуация, когда TCP соединение может поддерживаться в активном состоянии, то есть через заголовки Connection и Keep-Alive, с Connection: Keep-Alive в заголовке запроса, а поведение keep-alive можно настроить с помощью параметров, разделенных запятыми, указанных в заголовке Keep -Alive общий заголовок, если его поддерживают и клиент, и сервер, поэтому вы действительно можете отправлять несколько сообщений, но этот метод также имеет ограничения.Вы можете обратить внимание на ограничения и правила для соединений Keep-Alive в разделе 4.5.5 официальное руководство по HTTP.
И если это версия протокола HTTP 1.1, она поддерживает длинные соединения, поэтому, пока соединение TCP не отключено, вы всегда можете отправлять HTTP-запросы непрерывно, без верхнего предела; Точно так же, если это версия протокола HTTP 2.0, которая поддерживает многократное мультиплексирование, TCP-соединение может одновременно иметь несколько HTTP-запросов, а также поддерживает длинные соединения, поэтому, пока TCP-соединение не отключено, количество HTTP-запросы также можно отправлять непрерывно без верхнего предела.
[Сторона Tencent] Каковы преимущества Virtual Dom? (Б_Корнелиус)
«Преимущества виртуального дома» На самом деле, ответ, который хочет услышать интервьюер, состоит не в том, чтобы сказать «производительность прямых/частых манипуляций с DOM плохая», если производительность манипуляций с DOM настолько невыносима, то jQuery не будет жить. по сей день. Поэтому интервьюер хочет услышать больше о проблемах, которые хочет решить VDOM, и почему частые операции с DOM снижают производительность.
Сначала нам нужно знать:
Механизм DOM и механизм JS не зависят друг от друга, но работают в одном потоке (основном потоке). Код JS для вызова DOM API должен приостановить работу JS-движка, преобразовать входящие данные параметров, активировать DOM-движок, перерисовать DOM, а затем преобразовать возможные возвращаемые значения и, наконец, активировать JS-движок и продолжить выполнение. Вызовы API и просмотр. Производители устройств не оптимизируют «пакетную обработку». Удельная стоимость переключения между движками будет быстро накапливаться.Если есть вызов API DOM, который вызывает перерисовку, пересчет макета и перерисовка изображения вызовут большие затраты производительности.
Второе — это разница и оптимизация VDOM и реального DOM:
- Виртуальный DOM не сразу выполняет операции набора и перерисовки
- Виртуальный DOM часто модифицируется, а затем части, которые необходимо изменить в реальном DOM, сравниваются и модифицируются одновременно, и, наконец, набор и перерисовка выполняются в реальном DOM, чтобы уменьшить потери при наборе и перерисовке избыточного DOM. узлы
- Виртуальный DOM эффективно сокращает перерисовку и верстку большой области реального DOM, потому что в итоге он отличается от реального DOM, и визуализировать можно только часть.
[Byte Beat] В чем разница между введением модулей в common.js и es6? (Хо Сяоэ)
CommonJS — это спецификация модуля, которая изначально применялась к Nodejs и стала спецификацией модуля Nodejs. JavaScript, работающий на стороне браузера, также не имеет аналогичной спецификации.До выхода ES6 интерфейс также реализовывал набор той же спецификации модулей (например, AMD) для управления интерфейсными модулями. Начиная с ES6, был введен новый набор спецификаций модуля ES6, который реализует функцию модуля на уровне языковых стандартов, и реализация довольно проста, и ожидается, что он станет общим модульным решением для браузеров и серверов. Но в настоящее время браузеры не очень совместимы с модулем ES6.Экспорт и импорт, которые мы обычно используем в Webpack, будут преобразованы Babel в спецификацию CommonJS. Основные отличия в использовании:
- Модули CommonJS выводят копию значения, модули ES6 выводят ссылку на значение.
- Модули CommonJS загружаются во время выполнения, а модули ES6 представляют собой скомпилированные интерфейсы.
- CommonJs — это экспорт одного значения, модуль ES6 может экспортировать несколько
- CommonJs — это динамическая грамматика, которая может быть написана на суждениях, а статическая грамматика модуля ES6 может быть написана только на верхнем уровне.
- this для CommonJs — это текущий модуль, а this для модуля ES6 не определено.
[Неизвестно] Разница между токеном cookie и сеансом (Roxannej)
Этот вопрос определенно не является чем больше очков вы ответите, тем лучше. Этот вопрос проверяет ваше понимание знаний о кэшировании браузера, поэтому вы должны ответить на предысторию, принцип и вопросы создания файлов cookie, сеансов и токенов, а также указать разницу на основе ответа на этот вопрос. Ключ к ответу на этот вопрос - ответить на эти вещи по существу, добавить несколько пафосных вещей, а затем намеренно расшириться на другое подготовленное вами содержание.Чтобы хорошо разобраться в этих вещах, на самом деле достаточно дня-двух. Что касается файлов cookie, недавно произошел инцидент, когда Chrome80 блокировал сторонние файлы cookie.Если вы действительно задаете этот вопрос, то это хороший бонус, когда дело доходит до этого вопроса, при условии, что у вас есть относительно глубокое понимание этого вопроса. Я написал статью о файлах cookie и этой штукеGitHub.com/ в настоящее время имеет бриз…Вы можете взглянуть.
[Заголовок] Как выбрать формат изображения, например png, webp(B_Cornelius)
| Формат изображения | Метод сжатия | прозрачность | анимация | Совместимость с браузером | Адаптироваться к сцене |
|---|---|---|---|---|---|
| JPEG | сжатие с потерями | не поддерживается | не поддерживается | все | Сложные цвета и формы, особенно фотографии |
| GIF | сжатие без потерь | служба поддержки | служба поддержки | все | простые цвета, анимация |
| PNG | сжатие без потерь | служба поддержки | не поддерживается | все | Когда нужна прозрачность |
| APNG | сжатие без потерь | служба поддержки | служба поддержки | FirefoxSafariiOS Safari | Анимации, требующие прозрачности |
| WebP | сжатие с потерями | служба поддержки | служба поддержки | ChromeOperaAndroid ChromeAndroid Browser | Сложная платформа браузера цвета и формы предсказуема |
| SVG | сжатие без потерь | служба поддержки | служба поддержки | Все (IE8 и выше) | Простая графика, нужен хороший опыт масштабирования, нужен динамический контроль эффектов изображения |
[Неизвестно] Как рассчитать время первого экрана и белого экрана? (джинн)
Подсчет времени первого экрана можно реализовать методом, аналогичным onload, предоставляемому Native WebView, в ios он соответствует webViewDidFinishLoad, а в android — событию onPageFinished.
Существуют различные определения белого экрана. Можно считать, что «нет контента» — это белый экран, «неисправность сети или услуги» — белый экран, «загрузка данных» — белый экран, а «картинка не может быть загружена» — ошибка. белый экран. В зависимости от сцены метод расчета белого экрана отличается.
Способ 1: Когда количество элементов на странице меньше x, страница считается пустым экраном. Например, «контента нет», вы можете получить количество DOM-узлов страницы, и если количество DOM-узлов меньше определенного порога X, это считается белым экраном. Способ 2. Когда на странице появляется код ошибки, определяемый бизнесом, это считается белым экраном. Например, «Исключение сети или службы». Способ 3. Когда на странице появляется значение функции, определенное компанией, это считается белым экраном. Например, "загрузка данных".
[Неизвестно] В чем разница между апплетом и H5? (Чжан Цыжэнь)
- Метод рендеринга отличается от H5. Апплет обычно визуализируется Native, но апплет также поддерживает веб-рендеринг. Если используется метод веб-рендеринга, нам нужно инициализировать компонент WebView, а затем загрузить страницу H5 в WebView. ;
Поэтому, когда мы разрабатываем небольшую программу, мы обычно используем гибридный метод, то есть мы выбираем некоторые функции для разработки с помощью собственного кода апплета в соответствии с конкретной ситуацией, а некоторые функции реализуются путем загрузки страницы H5 через Веб-просмотр. Нативный и веб-рендеринг смешиваются для достижения оптимального решения проекта;
Здесь стоит отметить, что под апплетом нативный режим обычно имеет лучшую производительность, чем веб-режим.
- Небольшой двухпоточный дизайн для конкретной программы. В H5 все наши ресурсы обычно заносятся в файл bundle.js (не учитывая загрузку подпакетов), а скомпилированный апплет будет иметь два пакета: index.js инкапсулирует слой представления проекта апплета и index.worker. js инкапсулирует бизнес-логику проекта.Во время выполнения будет два потока для обработки двух пакетов соответственно, один из которых является основным потоком рендеринга, который отвечает за загрузку и рендеринг контента в index.js, а другой рабочий поток службы, который отвечает за выполнение бизнес-логики, инкапсулированной в index.worker.js, и будет много вызовов базового API.
[Неизвестно] Как судить, 0,1 + 0,2 равно 0,3? (красный и белый)
В качестве вопроса на собеседовании, я думаю, важно дать немного глубины, на которую другие люди обычно не отвечают. Как и на этот вопрос, можно ответить на вопрос из принципа и решения, а лучше всего составить кейс. Грубо говоря, я столкнулся с этой проблемой, поэтому мне было любопытно изучить ее подробно, и я обнаружил, что она вызвана точностью чисел с плавающей запятой... В чем принцип... Потом я посмотрел исходный код библиотеки в отрасли и как ее решить.
По поводу принципа я специально написал статьюGitHub.com/ в настоящее время имеет бриз…Чтобы объяснить, когда фактический ответ, я думаю, ответ
- Не уникально для ECMAScript
- 64-битный формат хранения в стандарте IEEE754, например 11-битное значение смещения
- Потеря тройной точности
Это уже нормально.
Давайте поговорим о решении, которое можно искать напрямую. Узнайте о различных решениях и сравните плюсы и минусы. Вы также можете обратиться к реализации некоторых библиотек в отрасли, таких как math.js, но я не видел родственные…
Если у вас еще есть энергия, вы можете перейти от сложения к разговору о вычислении чисел, превышающих безопасное значение.
Поэтому я думаю, что один может ответить на базовую реализацию, два могут ответить на плюсы и минусы различных решений, а три могут расширить и рассказать об обработке bignum, что является очень хорошим ответом.
[Вторая сторона Tencent] Знаете ли вы движок v8, как выполняется фрагмент кода js (B_Cornelius)
При выполнении фрагмента кода движок JS сначала создаст стек выполнения.
Затем JS-движок создаст глобальный контекст выполнения и поместит его в стек выполнения.В этом процессе JS-движок выделит память для всех переменных в этом коде и присвоит начальное значение (undefined).После завершения создания JS-движок войдет в исполнение, в этом процессе JS-движок будет выполнять код построчно, то есть поочередно присваивать значения (реальные значения) переменным, которым ранее была выделена память.
Если в этом коде есть объявление и вызов функции, JS-движок создаст контекст выполнения функции и поместит его в стек выполнения.Процесс создания и выполнения такой же, как и для глобального контекста выполнения. Но бывают и частные случаи, то есть когда в функции есть вызовы других функций, движок JS протолкнет глобальный контекст выполнения дочерней функции в стек выполнения во время выполнения родительской функции, поэтому дочерняя функция может получить доступ к родительским переменным функции, объявленным внутри.
Также существует особый случай, когда родительская функция вернула значение во время выполнения дочерней функции, в этом случае JS-движок удалит контекст родительской функции из стека выполнения, и в то же время JS-движок return Создать замыкание в контексте исполняемой дочерней функции. Это замыкание хранит переменные, объявленные в родительской функции, и их назначения. Дочерняя функция по-прежнему может обращаться и использовать эту переменную/константу в своем контексте. Когда подфункция выполняется, JS-движок удалит контекст и закрытие подфункции из стека выполнения.
Наконец, JS-движок является однопоточным, так как же он справляется с высокой степенью параллелизма? То есть, как выполняется JS, когда в коде есть асинхронные вызовы. Например, setTimeout или запросы на выборку не блокируются.Когда запускается код асинхронного вызова, механизм JS перемещает код, который необходимо выполнить асинхронно, из стека вызовов до тех пор, пока он не дождется результата возврата, и механизм JS немедленно подтолкнет соответствующую функцию обратного вызова. Войдите в очередь задач и дождитесь вызова. Когда в стеке вызовов (исполнения) нет кода для выполнения, движок JS немедленно поместит функции обратного вызова в очередь задач одну за другой. в стек вызовов и выполнить их. Мы также называем этот процесс циклом событий.
PS: Для более глубокого понимания движков JS необходимо понимать несколько концепций, контекст выполнения, замыкания, область действия, цепочку областей видимости и цикл событий. Рекомендуется отправиться в Интернет, чтобы прочитать больше статей по теме.Вот очень интересный блог, который предоставляет графическое описание выполнения JS-движка, которое легче понять.