Помните весь процесс фронтенд-интервью

внешний интерфейс JavaScript браузер CSS опрос

введение

Продолжение предыдущего резюме интервьюПолтора года опыта, резюме интервью Baidu, Youzan, Ali, чтобы подвести итоги интервью за этот период времени.

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

исходный адрес

текст

Через два дня после окончания одного подобного, я получил приглашение на вторую сторону.Я ответил на смс приглашения на собеседование, сказав, что, возможно, я взял слишком большой отпуск в последнее время. Могу ли я записаться на собеседование? ночью, другая сторона очень охотно согласилась, и я назначил встречу, в 19:30 я ответил «да», а затем на следующий день я получил точное время и место интервью, которое было назначено на 19:15. вечера.

В день собеседования я ушел с работы на пять минут раньше, пошел по маршруту, предложенному Baidu Map (около 1 часа 9 минут), и ждал автобус на остановке. . . Потом я подождала, подождала пятнадцать минут, а автобус так и не пришел. Я боялась, что опоздаю, поэтому позвонила ДиДи. Приехав на место собеседования, я подошла к стойке регистрации компании. на стойке регистрации никого нет, пойдем поедим. Затем я увидел много людей, играющих в настольный теннис на полу у стойки регистрации.Все хорошо провели время, и обстановка казалась очень хорошей. Подождав некоторое время, я посмотрел на текстовое сообщение и обнаружил, что в приглашении на собеседование был оставлен контактный номер интервьюера.Я решительно позвонил мне.Через некоторое время интервьюер подошел к стойке регистрации, чтобы забрать меня, затем нашел конференц-зал и начал интервью в течение дня.


Интервьюер: сначала представьтесь

Я: Варвара...

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

Я: Барабара...(Вообще-то это мой уникальный скилл, каждый раз могу долго дуть)

Интервьюер: Поскольку вы публикуете с охватом файлов, как вы обновляете кеш?

Я: Начну с бизнеса компании, Барабара... (еще не закончил)

Интервьюер: Тогда я не буду сейчас говорить о бизнесе, вы можете рассказать о решении для кэширования в браузере?

Я: О, не при делах, во-первых, у браузеров есть две схемы кэширования, одна — сильное кэширование, а другое — согласованное кэширование.

Интервьюер: Ну, а как тогда использовать сильный кеш?

Я: Когда браузер запрашивает ресурс в первый раз, его можно указать в заголовке ответа сервера.expiresполе, которое указывает время истечения кэша ресурса.При втором запросе, если время все еще находится в пределах времени кэша, кэш будет использоваться напрямую, в противном случае ресурс будет перезагружен.expiresУ поля есть недостаток, то есть оно должно быть строго синхронизировано между временем сервера и клиента, чтобы оно вступило в силу, поэтому многие люди не будут использовать измененную схему сейчас. Другим решением является установка заголовка ответа на стороне сервера при первом запросе ресурса.cache-control: max-age, смысл этой настройки в том, чтобы сообщить браузеру, когда истекает срок действия ресурса. Когда ресурс запрашивается во второй раз, он будет судить, превышено ли время истечения срока действия. Если нет, кеш будет использоваться напрямую.

Интервьюер: Заголовок управления кешем устанавливается сервером или клиентом?

Я: установлено сервером управления кешем

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

Я: Первый — публичный, и клиент, и сервер могут кэшировать; второй — частный, только клиент может кэшировать; без хранения — кэш не используется; без кэша — используется согласованный кэш.

Интервьюер: Затем вы идете вниз и говорите о тайнике переговоров.

Я: Есть два типа кэшей согласования, один Last-Modified, то есть когда ресурс запрашивается в первый раз, сервер установит это поле в заголовке ответа, указав время последней модификации ресурса, и браузер запрашивает второй раз. Когда ресурс используется, в заголовок запроса будет добавлено поле If-Modified-Since. Значением является значение Last-Modified, возвращаемое сервером при первом запросе. определит время последней модификации ресурса в это время и заголовок запроса.Совпадают ли поля If-Modified-Since, если они совпадают, скажите клиенту использовать кеш, иначе загрузите ресурс снова. Затем при согласовании кеша используется другой вид ETag.Принцип аналогичен Last-Modified, то есть при первом запросе сервер сгенерирует идентификатор в соответствии с содержимым ресурса или временем последней модификации, а затем установить его как ETag в заголовке ответа и вернуть его Клиенту, когда клиент запрашивает второй раз, вынесет этот ETag в заголовок запроса, то есть добавит поле If-None-Match в заголовок запроса. После получения ETag сервер оценивает, совпадает ли он с исходным, совпадают ли идентификаторы, и если они совпадают, говорит клиенту использовать кеш.

Расскажите о преимуществах и недостатках Last-modified/If-Modified-Since и If-None-Match/ETag.

Я: Ну, давайте подумаем об этом (я не знаю, делаю вид, что думаю об этом)... Я думаю, что ETag на самом деле иногда генерируется в соответствии с последним временем модификации ресурса.Принцип тот же, что и Last- модифицированный. Кажется, что это немного похоже, и ETag должен потреблять ресурсы на стороне сервера для генерации, поэтому производительность низкая. . . (Хотя нет, попробуйте поговорить об этом, если интервьюер не знает. Ха-ха-ха)

Интервьюер: Тогда поговорим о плане оптимизации производительности.

Я: В первую очередь уменьшите количество HTTP-запросов, типа слияния файлов CSS и JS, но не сливайте их полностью в один файл.Одно доменное имя разбрасывает три-четыре ресурса, что браузерам удобно скачивать параллельно Ограничено количество параллельных загрузок для каждого доменного имени.Хотя на одно доменное имя выделяется три-четыре ресурса, хотя количество HTTP-запросов увеличивается, это более рентабельно, чем параллельные загрузки.

Интервьюер: Почему браузеры ограничивают количество ресурсов, загружаемых параллельно для одного и того же доменного имени?

Я: Ну, я тоже думаю об этом (на самом деле я не знаю)... Я не вникал в это, это потому, что браузер запускает слишком много потоков загрузки?

Интервьюер: Какое отношение загрузка ресурсов имеет к тредам?

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

Интервьюер: (некоторое молчание), в чем разница между процессом и потоком?

Я: Процесс — это наименьшая единица для выделения памяти, поток — это наименьшая единица для планирования ЦП, а процесс может содержать несколько потоков.

Интервьюер: Много ли используется nodejs? Поговорите о том, как процессы nodejs взаимодействуют друг с другом

Я: Nodejs используется меньше. Nodejs может запускать подпотоки, а затем использовать основной поток для мониторинга сообщений подпотоков. Связь между подпотоками контролируется основным потоком. (Наверное неправильно, так и должно быть в процессе)

Интервьюер: Что ж, оптимизация производительности продолжается.

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

Интервьюер: Как реализовать ленивую загрузку картинок

Я: прослушайте событие прокрутки браузера и вычислите, находится ли текущее изображение в видимой области, комбинируя такие переменные, как clientHeight, offsetHeight, scrollTop, scrollHeight и т. д. Если это так, замените src, чтобы загрузить изображение. конечно, это событие прокрутки должно быть в основном дросселировано.

Интервьюер: Как определить, загружено ли изображение

я: используйте событие onload.

Интервьюер: Ну, ты продолжай.

Я: Для оптимизации производительности вы также можете разумно использовать кеш, попробуйте использовать форму внешних ссылок для файлов CSS и JS, хотя использование встроенных CSS и JS быстрее, когда кеш пуст, потому что встроенные стили и скрипты не требуют Отправляйте HTTP-запросы, но, чтобы максимально использовать функцию кеша браузера, старайтесь использовать форму внешних ссылок.

Я: Тогда попробуйте поставить CSS вверху, а JS внизу.

Интервьюер: Если скорость загрузки файла css, размещенного в шапке страницы, очень низкая, что произойдет со страницей?

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

Интервьюер: Если я динамически добавлю файл CSS на страницу, будет ли страница перекомпонована?

Я: Пока добавленный CSS влияет на структуру страницы, браузер будет переформатироваться.

Интервьюер: Например, как насчет translate3d в файле CSS страницы?

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

Интервьюер: Так что, если я добавил страницу внутри

Я: Нет, потому что нет никаких изменений, влияющих на структуру страницы.

Интервьюер: Ну, тогда продолжайте.

Я: оптимизация производительности, попробуйте использовать CDN.

Интервьюер: Каков принцип CDN?

Я: Во-первых, браузер сначала запросит доменное имя CDN, а сервер доменных имен CDN вернет CNAME указанного доменного имени браузеру.Браузер анализирует эти CNAME, чтобы получить IP-адрес кэш-сервера CDN, и браузер запрашивает кеш-сервер. Кэш-сервер CDN получает фактический IP-адрес в соответствии с внутренним выделенным разрешением DNS, а затем кеш-сервер запрашивает ресурс с фактического IP-адреса. После того, как кеш-сервер получает ресурс, он сохраняет его. локально и возвращает его клиенту браузера.

Интервьюер: Вы реализуете функцию дросселирования, только что упомянутую ниже.

. . .当时有点不记得什么是防抖,什么节流,把函数写成了防抖。 (这个时候有一个人走进了会议室,好像是一面小哥)

var debounce = function(fn, delay, context) {
  let timer = null;
  return function() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      const arg = Array.prototype.slice.call(arguments);
      fn.apply(context, arg);
    }, delay)
  }
}

// 测试部分
var run = function(text) {
  console.log(text);
}

run = debounce(run, 200);

run('run1');
run('run2');

setTimeout(() => {
  run('run3');
}, 201)

Интервьюер: У меня нет вопросов, у вас есть что добавить?

Я: Тогда я закончу вопрос оптимизации производительности?

Интервьюер: Да.

Потом я начал описывать использование webpack для уменьшения размера js файлов, можно использовать babel-plugin-import, babel-plugin-component, webpack.ContextReplacementPlugin, webpack.IgnorePlugin...

Интервьюер: Я знаю это. У вас остались вопросы? (Наверное, хотите закончить интервью, не хотите, чтобы я продолжал)

Я: Варвара. . . Я задавал много вопросов о Youzan, например, сколько этажей в компании, основной технологический стек компании, занимается ли компания в основном 2B или 2C, и сколько фронтенд-компаний у компании (я все еще могу быть слишком многословно)

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


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

наконец

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

В предыдущем резюме интервьюПолтора года опыта, резюме интервью Baidu, Youzan, Ali, Некоторые студенты обеспокоены результатами итогового собеседования.Ситуация такова, что им посчастливилось получить предложение от Baidu.Прошла неделя с момента первого собеседования с Ant Financial.

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