Обзор интервью (1): признать реальность

опрос
Обзор интервью (1): признать реальность

предисловие

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

Информационный бюллетень

Стаж в этом блюде около 2-х лет, а большинство голосов требуется за 2-3 года опыта.

первая компания

Обзор

  • Компания: Координатор Шэньчжэнь.
  • Интервьюер: Старик, который может указать ответ.
  • Результат собеседования: неявка.
  • Опыт интервью: я не очень хорошо отвечал на вопросы, но интервьюер мог помочь мне дать некоторые ответы, и процесс интервью прошел нормально.

вопросы интервью

  1. Пожалуйста, кратко опишите ввод отURLдо завершения рендеринга страницы.
  2. мобильный1pxрешение.
  3. Пожалуйста, кратко опишитеremПринцип реализации и схема компоновки.
  4. У компании есть проект. Этот проект нужно сделать в одностраничное приложение.В это время, не используя другие фреймворки, подскажите, как можно реализовать это одностраничное приложение.
  5. Vue3,как следить за изменениями массива?Зачем использоватьProxyзаменятьdefineProperty?
  6. Array(100).map(x=>1)Что в итоге? Как сгенерировать массив из 100 элементов как 1?
  7. WebpackКак оптимизировать размер проекта.
  8. Если вы поднимаетесь по лестнице, всего N этажей, но вы можете делать только один или два шага каждый раз, когда поднимаетесь по лестнице, сколько всего существует путей?
  9. Как оптимизировать одностраничный проект при первой загрузке белого экрана?
  10. Самое запоминающееся в проекте.

Кратко опишите процесс завершения от ввода URL до рендеринга страницы.

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

(1.6w слов) Вопрос души браузера, сколько вы можете обрабатывать?

Решение 1px для мобильных устройств.

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

  • схема 0.5px
  • Псевдокласс+преобразование
  • viewport + rem
  • border-image
  • background-image
  • postcss-write-svg

Что вы знаете о решениях 1px для мобильных устройств?

Пожалуйста, кратко опишите принцип реализации и схему rem-разметки.

принцип
Предположим, мы делим экран на 10 равных частей, каждая ширина представлена ​​буквой а, то естьа=ширина экрана/10;Так:

div{width: 5a} /* 屏幕宽度的50% */

ноcssВ нем нет единицы a? Мы можем использовать rem для замены вышеуказанного a. Такие как:

html {font-size: 12px}
div {width: 2rem} /* 24px*/

html {font-size: 16px}
div {width: 2rem} /* 32px*/

Так вот вопрос? как позволитьhtmlРазмер шрифта элемента всегда равен 1/10 экрана? Например, ширина ipone6 составляет 375 пикселей, размер шрифта: 37,5 пикселей;

html {fons-size: width / 10}
div {width: 5rem} /* 5rem = 5a = 屏幕宽度的50% */

Мы используем js, чтобы легко установить динамическиhtmlизfont-size1/10 экрана идентификации; мы можемdom,ready,resizeи поворот экрана в настройках:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px‘;

Как изменить единицу измерения в пикселях эскиза дизайна наremдля единиц? Его можно рассчитать с помощью соотношения: например, ширина проектного чертежа750px, количество элемента равно75px,Так:

75px/750px = рассчитанное rem/10rem, таким образом, вычисленное rem=75px, поэтому мы пишем в стиле width: 1rem, реальная ширина 75px, аналогично, если общая ширина черновика дизайна 640px, то 1rem=64px.

Функцию предварительной обработки можно упростить:

$ue-width: 750; /* 设计稿图的宽度 */

@function px2rem($px) {
  @return #{$px/$ue-width*10}rem;
}

div {
  width: px2rem(100);/*编译后：  p{width:1.5625rem}*/
}

Глубокое понимание принципа rem layout

План реализации

Реализация макета rem в vue-ydui

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

web-component Вводный пример учебника по веб-компонентам
hashchange JS нативно реализует интерфейсную маршрутизацию и одностраничное приложение шаг за шагом.
history Принцип реализации front-end маршрутизации (история)

Как в Vue3 отслеживать изменения массива, зачем заменять defineProperty на Proxy?

  1. Vue3Для мониторинга данных через прокси можно объяснить принцип двусторонней привязки данных v2 v3.
  2. Proxyа такжеObject.definePropertyПо сравнению с методом он имеет следующие преимущества:
    • ProxyСуществует до 13 методов перехвата.
    • Может отслеживать изменения объекта массива
    • код проще
    • лучшая производительность,ProxyВозвращается новый объект, мы можем использовать только новый объект для достижения цели, нет необходимости в глубоком мониторинге обхода, производительность выше, чемObject.defineProperty,а такжеObject.definePropertyВы можете только перемещаться по свойствам объекта и изменять их напрямую.

Array(100).map(x=>1)结果是多少？ Как сгенерировать массив из 100 элементов как 1?

  1. пустой массив длины массива 100,mapВозвращаемая длина совпадает с исходной длиной массива.

  2. Как сгенерировать массив из 100 элементов как 1?

    • Array(100).fill(1)
    • цикл
    • '100个1'.split('')
    • жду других ответов

Как Webpack оптимизирует размер проекта.

  • Scope Hoisting
  • Tree-shaking
  • Разделение государственных ресурсов
  • Сжатие изображения
  • динамичныйPolyfill

скорость сборки webpack и стратегия оптимизации размера

Если вы поднимаетесь по лестнице, всего N этажей, но вы можете делать только один или два шага каждый раз, когда поднимаетесь по лестнице, сколько всего существует путей?

Особенностью последовательности Фибоначчи является то, что она начинается с третьего члена, и каждый член равен сумме двух предыдущих членов. Самое простое решение — рекурсия 😂, но если n превышает 50, это очень медленно, и страница со 100 вкладками напрямую зависает.
Алгоритм вы можете посмотреть в следующей статье, но я не буду подробно описывать его здесь.

function climbStairs(n) {
    return n < 3 ? n : climbStairs(n-1) + climbStairs(n-2)
};

Энциклопедия Байду
Проблема алгоритма - подъем по лестнице [реализация JS]

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

  • Оптимизация размера проекта
  • Маршруты загружаются по запросу
  • включиgzip
  • Ленивая загрузка изображения
  • index.htmlплюс загрузка
  • uiКомпоненты загружаются по запросу
  • Пакетный проект, кромеindex.html, все остальные CDN, но это необходимо настроить при разработке
  • Скелетный экран, как упомянул здесь интервьюер, используетWebpackУнифицированная обработка каркасных экрановpage-skeleton-webpack-plugin

Незабываемые вещи в проекте

вторая компания

Обзор

  • Компания: координируется в Шэньчжэне, листинговая компания, набирает людей для управления фоном.
  • Интервьюер: На самом деле это парень.
  • Результат собеседования: неявка.
  • Опыт собеседования: Не очень, такое, что не пройдет, а те, кто ответил, не знают, правильный ли ответ 😹.

вопросы интервью

  1. thisуказатель на, в строгом режимеthisуказатель, функция стрелкиthisнаправление.
  2. Загрузка больших файлов фрагментами, загрузка их вместе или загрузка по отдельности, и что делать, если один из них не работает.
  3. Дизайн разрешений системы фонового управления.
  4. Как реализовать короткие ссылки, используя восьмизначное случайное сопоставление строк (регистр плюс цифры), сколько вероятность повторения.
  5. Разница между 301 и 302.
  6. == и === разница.
  7. undefined==false.
  8. 1+undefined.
  9. Объединить два одинаковых объектаkeyкак с этим бороться.
  10. Оцените пустые объекты.
  11. Какая польза от немедленного выполнения функции.
  12. call、bind、applyразница.
  13. Как получить все параметры внутри функции.
  14. Как преобразовать массив, подобный массиву, в настоящий массив.
  15. vueКомпонентный метод связи.
  16. vuexПринцип реализации.

Это указывает на, это указывает на в строгом режиме, функция стрелки, на которую это указывает

  • Привязка по умолчанию (это указывает на глобальный объект в нестрогом режиме, в строгом режимеthisбудет привязан кundefined)
  • Неявная привязка (когда ссылка на функцию имеет объект контекста, напримерobj.foo()метод вызова,fooвнутриthisнаправлениеobj)
  • Показать привязки (черезcall()илиapply()способ указать напрямуюthisобъект привязки, напримерfoo.call(obj))
  • newсвязывать
  • Привязка стрелочной функции (thisУказание на определяется внешней областью видимости)

[Предложение👍] Давайте продолжим с 40 вопросами этого интервью, кислыми и крутыми (1,2 Вт слов отсортированы вручную)

Загрузка больших файлов фрагментами, загрузка вместе или загрузка по отдельности, что делать, если один из них не работает

Когда несколько фрагментов загружаются вместе, внешний интерфейс информирует серверную часть о количестве фрагментов и дает серверной части уведомление о завершении загрузки. -end, чтобы возобновить загрузку.

Фронтальная загрузка больших файлов

Дизайн полномочий системы фонового управления

Ответы по проектам

  • Всего четыре таблицы, таблица интерфейса, таблица меню, таблица групп пользователей, таблица пользователей.
  • База данных записывает каждый интерфейс, для которого требуются разрешения, и присваивает уникальный идентификатор.
  • База данных вводится в меню и присваивается уникальный идентификатор.
  • Создайте группу пользователей и не давайте группе пользователей никаких разрешений на интерфейс и меню.
  • Назначьте группы пользователей пользователям.
  • Когда пользователь входит в систему, разрешение меню получается черезaddRoutesДинамически генерировать меню.
  • Получите разрешения интерфейса и разрешения кнопок управления с помощью пользовательских команд.
  • Когда бэкэнд возвращает разрешение фронтэнду, удобный запрос на разрешение сохраняется в Redis, а затем запрос перехватывается в промежуточном программном обеспечении.

Гаджет, который я написал ранее, использует этот метод управления разрешениями. Если вам интересно, вы можете взглянуть.GitHub.com/Death Rider/уу…

Как реализовать короткие ссылки, используя совпадение восьмизначных случайных строк (регистр плюс цифры), сколько?

Найдите короткое доменное имя для переноса и введите 8 в качестве случайной строки для сопоставления. Сколько случайных 8 бит генерируется 62 символами 62^8=218340105584896

Разница между 301 и 302

официальное заявление
301 редирект: 301 означает постоянное перемещение.
302 редирект: 302 означает временно перемещенный.

301Перенаправление — это постоянное перенаправление, и поисковая система также заменяет старый URL-адрес перенаправленным URL-адресом при сканировании нового контента.

302Перенаправления — это только временные перенаправления, поисковые системы сканируют новый контент, сохраняя при этом старые адреса.

Разница между == и ===

Проще говоря: == означает то же самое, === означает строго то же самое.

Лучше сначала прочитать эту статьюРешение undefined!=false и правила сравнения ==

==:

  • Если два типа значений совпадают, выполняются еще три сравнения равенства (===).
  • Если два типа значений различны, они также могут быть равны, и преобразование типов должно выполняться в соответствии со следующими правилами при сравнении:
    • Если один равен нулю, а другой не определен, то равен.
    • NaN==NaN возвращает false (примечание: Object.is(NaN, NaN) равно true)
    • Number,Boolean,String,UndefinedКогда эти основные типы смешиваются и сравниваются, они преобразуются в числа, а затем сравниваются.

===:

  • Если типы разные, они не должны быть равными.
  • Если оба числовые и имеют одинаковое значение, то равны, если хотя бы один из них NaN, то не равен. Чтобы определить, является ли значение NaN, вы можете использовать только isNaN().
  • Если обе строки с одинаковыми символами в каждой позиции, то равны, иначе нет.
  • Если оба значения истинны или ложны, они равны.
  • Если оба значения относятся к одному и тому же объекту или функции, они равны, в противном случае — нет.
  • Если оба значения равны нулю или не определены, они равны.

Часть 3: Вопросы о типах данных JS — преобразование(рекомендуемый сборник) Вопрос души нативного JS, сколько вы справитесь? (начальство)

undefined==false

Преобразование типов действительно убивает меня. Я ответил неправильно на оба вопроса. Я не знаю, правильно ли следующее объяснение или нет.
Number,Boolean,String,UndefinedКогда эти основные типы смешиваются и сравниваются, они преобразуются в числа, а затем сравниваются.Undefined==falseОбе стороны будут преобразованы в числа
UndefinedПреобразованный в цифруNaN
falseПреобразовать число в 0
NAN==0？
результатfalse

Эта статья лучше
Решение undefined!=false и правила сравнения ==

1+undefined

объяснил здесьes5.github.io/#x9.3(наизусть?)
UndefinedПреобразуется в число какNaN Null+0
NaNплюс любойNaN
результатNaN

Объединить два объекта, как быть с одним и тем же ключом

идентичныйkey, последний перезапишет первый

  • Inназначение обхода
  • Obj.assign()
  • спред оператор

Оценка пустых объектов

  • Object.keys(obj).length === 0
  • JSON.stringify(data) == "{}"

Какова цель немедленного выполнения функции

Создайте отдельную область, чтобы избежать переменного загрязнения.

Разница между вызовом, привязкой и применением

Та же точка

  • Все меняетсяthisнаправление
  • Первый параметрthisуказательный объект.

разница

  • callа такжеbindПараметры вводятся напрямую, а второй, третий и n-й параметры разделяются запятыми и помещаются непосредственно после .
  • applyВсе параметры помещаются в массивobj.myFun.apply(db,['成都', ..., 'string' ]).
  • bindВозвращается функция, которую необходимо вызвать вручную для выполнения, другие параметры иcallТакой же.

Как получить все параметры в функции

argumentsВключить все параметры по индексу параметра

Примечание. Функции стрелок неarguments, при доступе в функции стрелкиarguments, доступ кargumentsНе стрелочная функция, а "нормальная" функция вне стрелочной функции

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

  • ... оператор
  • Array.from
  • Array.prototype.slice.apply(arguments)

Метод связи компонента Vue

  • Общение родителей и детей: отец предоставляет данные через свойства propsперешло к сыну; сын перешел $onИнцидент со связыванием отца, затем прошел $emitИнициировать собственные события (публикация-подписка)

  • Воспользуйтесь преимуществами детско-родительских отношений $parent, $children,

  • Родительский компонент предоставляет данные, а дочерний компонент вводит их. provide, inject, плагин используется больше.

  • refПолучить экземпляр компонента, вызвать свойства и методы компонента

  • Связь между компонентами Event Bus(Vue.prototype.bus=newVue) на основе и $emit

  • vuexУправление состоянием обеспечивает связь

Коммуникация компонентов Vue

Принцип реализации Vuex

Принцип Vuex [Анализ]

Обзор интервью (1): интервьюер «бывший босс Али» действительно хорош

Эпилог

Впервые опубликовано в документе Yuque @is_tao

Обзор интервью (1): признать реальность
Обзор интервью (2): восстановить уверенность
Обзор интервью (3): хорошее отношение и хорошее состояние

Категории