Запишите интервью стажировки по фронтенд-разработке ByteDance Data.

одна сторона

Потому что первоначальный интервьюер провел временное совещание, а через некоторое время сменился новый интервьюер. Атмосфера интервью по-прежнему очень гармоничная, и каждая часть контента освещена и будет подробной. Вероятно, есть основы JavaScript, алгоритмы, компьютерные сети и шаблоны проектирования.

1. Самостоятельное введение

2. это обсуждение

   • Скажи мне, как изменить точку этого

     Это определяется средой выполнения. Существуют методы вызова, применения и связывания. Это также изменяется при создании нового объекта.

   • прочитать код сказать результат

     От основ к сложным есть много тем, наверное помните эти

     function a() {
       console.log(this.name);
     }
     
     a();
     

     var name = 1;
     a();
     

     a.prototype.name = 2;
     a()
     

     function b() {
       this.value = this.name;
     }
     b();
     

     let c = {name: 3};
     c.say = a;
     let d = c.say;
     
     c.say();
     d();
     

3. привязать реализацию

   • Если вы хотите быть совместимым с IE, просто реализуйте привязку (яма, вырытая вами в приведенном выше вопросе)

     // 当时写的代码，没考虑参数
     Function.prototype.bind = function (obj) {
       return () => {
         this.call(obj);
       }
     }
     

   • Зачем здесь использовать стрелочную функцию?Можно ли вышеприведенную функцию заменить стрелочной функцией?

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

4. Вы читали исходный код Vue? Простая реализация модели публикации-подписки

   Я невнимательно прочитал исходный код😀, но не все понял.

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

   class EventHelper {
     construct() {
       this._eventMap = {}
     }
   
     on(fn, cb) {
       this._eventMap[fn]
         ? this._eventMap.push(cb)
         : this._eventMap[fn] = [cb];
     }
   
     emit(fn, ...args) {
       if (this._eventMap[fn]) {
         this._eventMap[fn].forEach((cb) => cb.apply(this, args))
       }
     }
   
     off(fn) {
       if (this._eventMap[fn]) {
         delete (this._eventMap[fn])
       }
     }
   
     once(fn, cb) {
       this.on(fn, () => {
         cb();
         setTimeout(() => {
           this.off(fn);
         })
       })
     }
   }
   

5. UDP & TCP

   • Скажи разницу между двумя

   • Как определить, является ли пакет UDP или TCP

     Так жестоко, я не думал об этом какое-то время. В начале я ответил на трехстороннее рукопожатие TCP, а потом спокойно подумал, что вроде бы есть эта отметка в IP-сегменте.

6. HTTPS

   • скажи принцип

     Давайте поговорим о TLS, асимметричном шифровании, симметричном шифровании. . .

   • атака «человек посередине»

     О процессе

   • Возможно ли изменить данные, или после того, как данные изменены, принимающая сторона не распознает их?

     О цифровых подписях

7. кеш браузера

   • Подскажите какие методы

     Cache-control, ETag, Last-modify

   • Скажите, когда вы должны использовать ETag

     Я не додумался до всего сразу, поэтому сказал, когда мне нужно использовать last-modify (к счастью, интервьюер меня отпустил😝)

     Отмечено: last-modified не распознает модификацию в s (втором) блоке, поэтому, если ресурс изменен в s (втором) блоке, last-modified не изменится.

8. левое представление бинарного дерева

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

                   1
               2       3
            4   5    6   7
                            8
   
   => 1248
   
   // 当时大概的代码
   function leftSee(node) {
     const arr = [];
     arr.push(null)
     arr.push(node);
     while (arr.length > 0) {
       let t = arr.shift();
       if (t === null) {
         arr.push(null);
         t = arr.shift();
         if (t == null) return;
         console.log(t.value);
       }
       if (t.left) {
         arr.push(t.left)
       }
       if (t.right) {
         arr.push(t.right)
       }
     }
   }
   

две стороны

Интервьюер со второй стороны вызывал у людей более «непринужденное» ощущение, и все интервью напоминало беседу. Но содержание вопроса очень разное, и вопрос может включать в себя много точек знаний.

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

1. Самостоятельное введение

2. Расскажите о новых возможностях Vue3

   Настоящий, настоящий!

   В то время я в основном говорил о двух моментах: 1. Прокси заменил Object.defineProperty, потому что Object.defineProperty не может отслеживать вложенные свойства, ему нужна рекурсия, и он не может отслеживать массивы, поэтому ему нужно переопределять методы. 2. Поддерживает пользовательский рендеринг.В настоящее время базовый API рендеринга Vue2 не предоставляется разработчикам.Например, mpvue разветвляет весь исходный код Vue, а затем изменяет базовый рендеринг. Другие также упомянули TypeScript, объявление объекта и размер пакета среды выполнения. .

3. виртуальный DOM

   • Расскажите о преимуществах и недостатках виртуального DOM по сравнению с оригинальным DOM.

     Упомянуты только преимущества: 1. Используйте вычисления JS в обмен на операции DOM для повышения производительности. 2. Нет необходимости напрямую манипулировать DOM. 3. Кроссплатформенная разработка, weex

   • По svelte framework какие еще минусы можно сказать по аналогии?

     Я не слышал о svelte, и интервьюер кратко рассказал о преимуществах этого фреймворка.

     懵 懵 脸 🙃

4. BFC

   • что

     Контекст форматирования на уровне блока, а также IFC, FFC, GFC

   • когда использовать

     Сворачивание полей, очистка внутренних дочерних элементов от плавающих

   • как вызвать

     ......Я не думал обо всем этом 😐, я вспомнил, что поплавок - это не никто

5. мобильный

   • Адаптация мобильного терминала

     Медиа-запросы @media загружают различные макеты css, flex, float. .

   • разница между рем и эм

     Я не думаю, что ответ хороший.Говорят, что rem определяется на основе размера шрифта HTML-элемента.

6. Vuex использовал модули, давайте поговорим о том, как действия в файле A изменяют состояние файла B.

   1. Непосредственно импортируйте файл B в файл A и вызывайте действия B😁. 2. Третий параметр отправки — {root: true}

7. TypeScript

   • Что означает восклицательный знак после переменной?

     Забыл 🙃, это должно быть ненулевое утверждение

   • Методы утверждения типа

   • Преимущества и недостатки

8. Node

   Спросите меня, как освоить узел, я сказал, что буду использовать только его, и основная часть все еще изучается. . . Б/у экспресс и яйцо

9. асинхронный

   • см. код

     async function test() {
       return 1
     }
     async function call() {
       const a = test();
       const b = await test();
       console.log(a, b);
     }
     call();
     

   • Каков результат этого письма, и что можно улучшить?

     async function test() {
       const resp1 = await getApi1();
       const resp2 = await getApi2();
       console.log(resp1, resp2);
       return 1
     }
     

     Поскольку await будет блокироваться, getApi2 не сработает, пока getApi1 не вернет результат, вы можете использовать Promise.all для запуска одновременно.

10. Promise.all

    Наверно напишу принцип Promise.all

    Не видел, могу только на месте поиграть (я сам выкопал, когда плачу 😭)

    Я общался с интервьюером во время написания, потом сказал, что общая идея похожа, но я хотел вернуться и посмотреть. . .

    Promise.prototype.all = function(promiseArr) {
        const len = promiseArr.length;
        const result = new Array(len);
        let flag = 0;
        return new Promise((resolve, reject) => {
          promiseArr.forEach((cb, index) => {
            Promise.resolve(cb).then(
              res => {
                result[index] = res; // 注意数组中的顺序，当时直接写了push🙃
                if (++flag === len) {
                  resolve(result);
                }
              },
              error => {
                reject(error)
              })
          })
        })
      }
    

Три стороны

Интервьюер с трех сторон должен быть супервайзером.Он очень добрый.Как только подошел,спросил,поел ли я.Собеседую уже давно.Хочешь сделать перерыв😊

Я лично считаю, что все три стороны относительно просты. Это не включает в себя реализацию конкретного API. В основном изучается, как дать практическое решение проблемы. У него сильное дивергентное мышление. Интервьюер будет направлять вас шаг за шагом. дать относительно комплексное решение. В период упоминалось, что для управления данными используется Vuex, и интервьюер прямо сказал, что к Vuex это не имеет никакого отношения. Потребности, выраженные интервьюером, очень ясны, пока потребности практически решены в соответствии с предложенными потребностями, все будет в порядке.

к счастью, три собеседования позади, интервьюер сказал, что впереди еще собеседование с HR, но уже немного поздно, так что я проведу его завтра.

1. Самостоятельное введение

2. Представление ключевых проектов, сложные задачи

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

3. Схема контроля разрешений, как она реализована и какова общая идея?

4. Как разделяется модуляризация и что конкретно сделано

5. Предложена функция подсказки удаленного поиска в поле ввода

   • Расскажите о своих идеях

     Упомянул общую идею, анти-шейк, Барабара

   • Что делать, если вы вводите одно и то же несколько раз

     Можно кэшировать в localStorage, проверяйте локально, прежде чем делать запрос

   • Таким образом, вам нужно каждый раз заходить в localStorage.Есть ли лучшее решение?

     Когда страница загружается, она извлекается из localStronge и сохраняется в карте, а когда страница уходит, новая карта сохраняется в localStronge.

   • Как синхронизировать данные в localStorage, если данные на сервере обновляются

     Вы можете узнать из кеша браузера и добавить идентификаторы, чтобы разделить данные на две части: использовать «сильный кеш» для тех, которые не будут изменяться в течение определенного периода времени; использовать «кеш согласования» для часто изменяемых данных и проверять сервер. каждый раз, когда вы используете его. Есть ли какие-либо модификации

6. Подскажите, как версия итерируется

7. Когда приходить на стажировку

мой вопрос

1. одна сторона:

   • За это время я изучил Flutter и React, Как вы думаете, я буду использовать больше фреймворков за ограниченное время или какое-то углубленное изучение?

   • Стек байтовых технологий

2. Вторая сторона:

   Что-то стояло за интервьюером и не давало мне возможности задать вопросы😥

3. Три стороны:

   • Есть ли у байта способ обучать новых людей?
   • Основано ли это на исследованиях и разработках или на бизнесе?

Ссылки

благодарныйPanJiaChen(vue-element-admin) боссаpush-код