Делимся вопросами об интервью Baidu с ответами

Это 7-й день моего участия в Gengwen Challenge.Подробности о мероприятии:Обновить вызов

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

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

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

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

связанные со стилем

1.1 Предположим, у вас есть следующая структура и стили DOM (советы, вы можете сначала посмотреть вниз, а затем вернуться, чтобы увидеть эту большую кучу css)

<style>
body {
  background: #fff !important;
 }
.root {
  border: 3px #000 solid;
  width: 200px;
 }
.root div {
  box-sizing: border-box;
  border: 1px #000 solid;
  background-color: #fff;
 }
.div-a {
  position: relative;
  z-index: 100;
  top: 50px;
  width: 200px;
  height: 100px;
 }
.div-b {
  position: absolute;
  z-index: 300;
  top: 80px;
  width: 100px;
  height: 50px;
 }
.div-c {
  position: absolute;
  z-index: 200;
  width: 50px;
  height: 100px;
 }
</style>

<div class="root"> 
  <div class="div-a"> 
    <div class="div-b"></div>
  </div>
  <div class="div-c"></div>
</div>

вопрос

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

отвечать

Выберите Б.

Прежде всего, для высоты корня, так как только div-a относится к элементу под корнем, в потоке документов; поскольку блочная модель всех div является стандартной блочной моделью, высота корня равна div-a Высота a составляет 200 пикселей + высота его верхней и нижней границ 3px * 2 = 206 пикселей;

Затем div-a смещается на 50 пикселей вниз относительно своего нормального положения (сверху: 50 пикселей), div-b абсолютно позиционируется, его позиционирование относительно родительского div-a, смещается вниз на 80 пикселей (сверху: 80 пикселей) ), поэтому параметры C и D можно исключить.

Разница между вариантами A и B заключается в z-индексе для div-c и div-b.Поскольку z-индекс родительского элемента div-a для div-b равен 100px, согласноиз родительского правила, поэтому z-индекс div-b будет понижен, а z-индекс div-c больше, чем z-индекс div-a, поэтому div-c выше div-b. Так что выбирайте Б.

1.2 Кратко опишите, как вы управляете z-индексом каждого элемента в вашем проекте?

Создайте спецификацию для использования z-index, таких как popover, modal, colorpicker и другие компоненты, и укажите спецификацию уровня в соответствии с характеристиками компонента. Кроме того, если в бизнес-макете используется z-индекс, постарайтесь контролировать его уровень до более низкой спецификации, например, попробуйте использовать 1xx для z-индекса в макете, а 2xx — для компонентов всплывающего окна. верхний слой.
Глобально поддерживать метод для получения z-индекса, значение увеличивается на 1 каждый раз, когда он вызывается

1.3 Вкратце, как вы управляете стилями в своем проекте, как избежать влияния стилей из разных страниц/модулей друг на друга?

БЭМ-правила используются в текущем проекте, а стили названы по различению модулей и элементов.
Управляйте CSS в модулях через модули css.

связанные с сетью

2.1 : Что такое политика одного и того же источника и междоменная политика?

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

Ограничения непохожего происхождения: cookie не может быть прочитан, dom не может быть получен, а запросы ajax не могут быть отправлены.

Междоменный: запросы выполняются между двумя разными доменами (разные протоколы, порты и доменные имена).

Решение для междоменного:

JSONP, благодаря динамическому созданию тега скрипта атрибут src тега скрипта не имеет междоменных ограничений.
cors сервер добавляет некоторую информацию заголовка при ответе:
- Access-Control-Allow-Origin: http://ip:port

Обязательное значение — значение Origin в заголовке запроса.

Access-Control-Allow-Credentials:true

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

Access-Control-Allow-Methods:

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

Nginx как обратный прокси
Среда разработки использует прокси-сервер webpack-dev-server между доменами.

2.2: Перечислите заголовки (Head) про "кеш ресурсов" в HTTP?И кратко познакомьте с правилами настройки?

Принудительно кэшировать

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

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

Cache-Control обычно указывает относительное время через max-age в секундах. Приоритет выше, чем Expires . Другое часто используемое

Значения:

public означает, что ответ может быть закэширован любым объектом
частный означает, что он может кэшироваться только одним пользователем, не является общим и не может кэшироваться прокси-серверами.
no-cache заставляет всех пользователей, которые кэшировали ответ, использовать кэшированные данные для отправки запроса на аутентификатор на сервер.
Нет-магазин отключить кеширование

Согласовать кеш

Если сильный кеш не попал, браузер отправляет запрос на сервер. Сервер определяет, следует ли обращаться к кэшу согласования в соответствии с Last-Modify/If-ModifySince или Etag/If-None-Match в заголовке http. Если это произойдет, код возврата http будет 304, и браузер извлечет кеш из Загрузите ресурсы.

Last-Modify/If-Modify-Since Когда браузер впервые запрашивает ресурс, к заголовку, возвращаемому сервером, будет добавлено значение Last-Modify, которое определяет время последней модификации ресурса. При просмотре. Когда сервер снова запрашивает ресурс, заголовок отправленного запроса будет содержать If-Modify-Since, то есть Last-Modify, возвращаемый перед кэшированием. После того, как сервер получает IfModify-Since, он определяет, произошло ли попадание в кеш, в соответствии со временем последней модификации ресурса.
ETag/If-None-Match ETag может гарантировать, что каждый ресурс уникален, а изменения ресурсов приведут к изменениям ETag. Изменение значения ETag указывает на то, что состояние ресурса было изменено. Сервер определяет, нужно ли попадать в кеш, в соответствии со значением If-None-Match, отправленным браузером.

2.3: Кратко объясните разницу между 301, 302, 304?

301 постоянный редирект. Этот код состояния указывает, что запрошенному ресурсу был назначен новый URI, и URI, на который сейчас ссылается ресурс, будет использоваться в будущем. И существуют различные методы обработки в зависимости от метода запроса.

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

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

Код состояния 304 возвращается без какой-либо предметной части ответа. Условный запрос означает, что заголовок запроса с использованием метода GET содержит любое из следующего: If-Match, If-Modified-Since, If-None-Match, If-Range и If-Unmodified-Since.

JS и связанные с алгоритмами

3.1: Пожалуйста, объясните, какой результат выводит следующая программа, и кратко объясните основу вывода

const result = ['1', '3', '10'].map(parseInt);
// 这⾥会打印出什么呢? 
console.log( result );

отвечать

Результат печати: [1, NaN, 2] Поскольку параметр карты

function(current, index, arr) { // 当前元素值，当前元素索引值，数组本身
}

параметры parseInt:

parseInt(str, radix) // 解析的字符串，⼏进制（若省略或为0，则以10进⾏解析，若⼩于2或者⼤于36，则返回NaN）

Итак, название развернуто:

const result = ['1', '3', '10'].map(function(cur, index, arr) {
return parseInt(cur, index);
});
// 执⾏过程：
// parseInt('1', 0) -> 1
// parseInt('3', 1) -> NaN
// parseInt('10', 2) -> 2

3.2: Пожалуйста, измените следующий код, чтобы 1, 2, 3, 4, 5 можно было напечатать последовательно в конце

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}

Требования: Между каждым номером интервал 1 секунда (подсказка, хорошо просмотрите вопросы)

отвечать:

const myPromise = num => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num)
      }, 1000)
    })
 }

async function test() {
  for (let i = 0; i < 5;) {
    i++;
    console.log(await myPromise(i))
  }
 }
test();

3.3: Реализуйте метод процесса следующим образом.

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

const arrayA = [4, 2, 1, 2, 5];
const arrayB = [2, 3, 1, 6];
function process(arrayA, arrayB) {
// 这⾥是你实现代码的地⽅
}
/*
应该返回 [1, 2]
*/
process(arrayA, arrayB);

Часть ответа

Первый:

function process(arrayA, arrayB){
  return arrayA
    .filter((v) => arrayB.includes(v))
    .filter((v, i, arr) => arr.indexOf(v) === i )
    .sort((a, b) => a-b);
}

Тип 2:

function process(arrayA, arrayB) {
  const set = new Set();
  while(arrayA.length > 0) {
    const ele = arrayA.pop();
    if (arrayB.includes(ele)) {
      set.add(ele);
    }
  }
  return [...set].sort((a,b) => a - b);
}

3.4 (Дополнительный вопрос): Ся Мин хочет подняться по длинной лестнице. В этой лестнице N ступеней. Предположим, что Ся Мин может подниматься по одной ступени за раз, он также может подниматься на две ступени. Могу я попросить Ся Мина поднимитесь по этой лестнице, а там всего несколько ступенек, какой метод?

Ваша цель — реализовать метод
Вход представляет собой «число n (с несколькими шагами)»
Результатом является «число (представляющее в общей сложности несколько методов)»

/*
例如,
 n = 1, return 1 (⽅法1: 1台阶)
 n = 2, return 2 (⽅法1: 1台阶&1台阶, ⽅法2: 2台阶)
 n = 3, return 3 (⽅法1: 1台阶*3次, ⽅法2: 1台阶&2台阶, ⽅法3: 2台阶&1台阶)
*/
function step(n) {
// 这⾥是你实现代码的地⽅
}

отвечать

(Типичная последовательность Фибоначчи)

Рекурсивное решение:

function step(n) {
  if (n <= 0) {
    throw new Error("param err");
    return -1;
  }
  if (n == 1) return 1;
  if (n == 2) return 2;
  return step(n - 1) + step(n - 2);
}

Нерекурсивное решение:

function step(n) {
  if (n <= 0) {
    throw new Error("param err");
    return -1;
  }

  if (n === 1) return 1;
  if (n === 2) return 2;

  let nMinusOne = 2,
  nMinusTwo = 1,
  timeN = 0;

  for (let i = 3; i <= n; ++i) {
    timeN = nMinusOne + nMinusTwo;
    nMinusTwo = nMinusOne;
    nMinusOne = timeN;
  }
  return timeN;
}

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