Сопротивление дороги и долгий ах ТАТ (резюме фронтенд-интервью) с ответами - дальше

интервью

досегмент fault.com/ah/119000001…Я видел эту статью, и я недавно играл с ней.Если есть какая-то ошибка, пожалуйста, поправьте меня

Сторона Tencent

  • 1. Как работают браузеры

    • Пользовательский интерфейс — включая адресную строку, кнопки «назад/вперед», закладки. Механизм браузера — интерфейс для запросов и управления механизмом рендеринга.
    • Механизм рендеринга — интерфейс рендеринга: Firefox, Chrome и Safari построены на двух механизмах рендеринга, Firefox использует Geoko — движок собственной разработки Mozilla, а Safari и Chrome используют webkit.
    • Сеть — используется для выполнения сетевых вызовов, таких как HTTP-запросы. Серверная часть пользовательского интерфейса — используется для рисования основных компонентов, таких как поля со списком и диалоговые окна, с общим интерфейсом, не зависящим от конкретной платформы, а нижний уровень использует пользовательский интерфейс операционная система
    • Интерпретатор JS - интерпретирует и выполняет код JS
    • Хранение данных - относится к уровню сохранения, браузеру необходимо сохранять различные данные, подобные файлам cookie, на жестком диске.

  • 2. Веб-безопасность, например

    • xss
    • https
    • смешанный контент
    • Та же политика происхождения
  • 3. Код состояния
    • 1xx информация
    • 2xx успех
    • 3xx редирект
    • 4xx ошибка клиента
    • ошибка сервера 5хх
  • 4. Гомология
    • тот же порт
    • такое же доменное имя
    • такое же соглашение

  • 5. Наследование объектов

    • Все наследование основано на прототипах, так как механизм наследования js четко не определен, существует множество способов наследования.
      • Наследование цепочки прототипов
          Child.prototype = new Parent();
      • прототипное наследование
          Child.prototype = Parent.prototype;
  Child.prototype.constructor = Child;
      • копировать наследование (расширять)
      • call,apply

  • 6. Какова история и новые возможности ES6?

    • ......
  • 7. Принцип обещания
    • Понимать основные сценарии использования промисов и понимать несколько состояний промисов (в ожидании, выполнено, отклонено).

  • 8. Модель событий

    • Модель уровня DOM0div.onclick = fn()
    • Модель уровня DOM2addEventListener(eventType, handler, useCapture)
    • Модель событий IEattachEvent( "eventType","handler")

  • 9. Общие проблемы совместимости, список (мобильный терминал/ПК-терминал)

  • 10. Оптимизация производительности
    • уменьшить http-запросы
    • Сжатие статических ресурсов
    • CDN-ускорение
    • уменьшить глобальные переменные
    • Тег скрипта ставится после тела

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

Али сторона

  • 1. Принцип Аякса
    • create => open => send => onchange
  • 2. Процесс парсинга в браузере
    • Процесс: Parse html => построить дерево dom -> построить дерево рендеринга -> дерево рендеринга компоновки -> нарисовать дерево рендеринга
  • 3. Центрировать по вертикали
    • flex
    • line-height, text-center
    • postion , margin
    • display: table, vertical-align: middle
    • position, top:0, bottom: 0
  • 4. Оценка типа данных
    • typeof
    • instanceof
    • toString
  • 5. Реализация маршрутизации
    • location.hash+hashchange
    • history.pushState()+popState
  • 6. Локальное хранилище данных
    • localStorage
    • indexDB
    • cookie
    • seesionStorage
  • 7. Перекрестный домен
    • jsonp
    • cors
  • 8. Преимущества и недостатки двусторонней привязки данных и односторонней привязки
    • Двусторонняя привязка автоматически управляет состоянием, что очень удобно для работы со сценариями с взаимодействием с пользователем.Объем кода небольшой.Когда проект становится все больше и больше, отладка становится все сложнее и ее трудно отследить проблема.
    • Односторонняя привязка не имеет состояния, отладка программы относительно проста и позволяет избежать различных проблем при увеличении сложности программы.Конечно, это не так круто, как двусторонняя привязка при написании кода.

Али две стороны

  • 1. Оптимизация производительности беспроводной сети
    • Прокрутите вверх и у вас такая же проблема
  • 2. Коснитесь события, коснитесь
    • Tap — это событие, инкапсулированное библиотекой zepto, которое может заменить событие click на мобильном терминале, тем самым избегая проблемы 300 мс.
    • Touch — это событие жеста на мобильном терминале, например touchstart, touchend, touchmove.
  • 3. Хранение данных
    • Прокрутите вверх и у вас такая же проблема
      сторона Соху
  • 1. Домовая операция
    • Добавляйте, удаляйте, изменяйте, проверяйте, например:
      • document.elementById
      • document.querySelectAll
      • document.appendChild
      • docuemnt.removeChild
      • ......
  • 2. Схема мобильной раскладки
    • Rem, Em
    • flex
    • процент
    • media query
  • 3. Внешняя и внутренняя совместная работа
    • .....
  • 4. Процесс внедрения собственного Ajax
    • Прокрутите вверх и у вас такая же проблема
      Соху Эрмиан
  • 1. Инверсия односвязного списка
      function ReverseList(pHead) {
      var pre = null;
      var next = null;
      while (pHead != null) {
      next = pHead.next;
      pHead.next = pre;
      pre = pHead;
      pHead = next;
      }
      return pre;
  }

  • 2. Быстрый ряд

      const quickSort = (arr) => {
      if(arr.length < 1) return arr;
      let inx = Math.floor(arr.length/2);
      let pivot = arr.splice(inx,1)[0];
      let left = [];
      let right = [];
      for(let i=0; i<arr.length; i++){
      if(arr[i] < pivot){
          left.push(arr[i])
      }else{
          right.push(arr[i])
      }
      }

      return quickSort(left).concat(pivot,quickSort(right))
  }
  • 3. Обмен мгновенными сообщениями (кроме Ajax и websocket)
    • Технология Comet: технология связи в реальном времени на стороне Интернета, основанная на длительном HTTP-соединении.
    • SSE: сервер отправляет события, обменивается данными, используя постоянные соединения.
  • 4. Как переадресация прокси-сервера обрабатывает файлы cookie (nginx)
      proxy_cookie_domain localhost example.org;
  proxy_cookie_domain ~\.([a-z]+\.[a-z]+)$ $1;
  proxy_cookie_path /one/ /;
  proxy_cookie_path / /two/;
  • 5. Наследование объектов
    • proto
    • prototype
    • Object
  • 6.this
    • вызов конструктора
    • подать заявку, позвонить использовать
    • вызов метода объекта
    • обычный вызов функции
  • 7. Преимущества и недостатки rem-макета

Команда сплава Tencent

Одна сторона (запись две, остальные в порядке)

  • Какими способами можно добиться анимации
    • CSS3
    • Кадровая анимация JS, таймер, requestAnimateFrame
    • Анимация холста
    • SVG
    • рисунок
  • веб-безопасность
    • процесс шифрования https, использование сертификата
      • Сертификат конфигурации сервера -> Сертификат передачи -> Сертификат разрешения клиента -> Информация о шифровании передачи -> Информация о расшифровке сервера -> Зашифрованная информация о передаче -> Информация о расшифровке клиента
    • Несколько форм xss, профилактические меры, какие символы фильтруются?
      • форма
        • Данные поступают в веб-приложение по ненадежной ссылке
        • Динамический контент, который не отфильтрован от вредоносного кода, отправляется веб-пользователям
      • меры предосторожности
        • Не доверяйте пользовательскому вводу (фильтрация, экранирование)
        • Укажите тип с помощью заголовков HTTP
      • символ фильтра
        • <,>,",&quot
    • принципы xsrf, примеры, превентивные меры (токен Laravel)
    • SQL-инъекция
      • Внешний интерфейс злонамеренно отправляет код sql, чтобы подделать код выполнения sql сервера.
  • оптимизация производительности
    • Оптимизация кода (html, css, js)
    • Оптимизация производительности сети:
      1. Принудительное кэширование и согласованное кэширование Cache
      2. Принцип и применение CDN
      3. gzip для HTTP-сжатия
  • объект контекста

  • Шаблоны проектирования (требуется, как реализовать, применить, преимущества и недостатки):

    • одноэлементный шаблон

      • Определение: создает уникальный экземпляр класса

      • выполнить:

          const createMask = ()=>{
      let mask = null;
      return ()=> mask || document.appendChild(document.createElement('div'))
  }

  const mask = createMask();
      • преимущество:
        1. Обеспечивает контролируемый доступ к уникальным экземплярам
        2. Избегайте многократного занятия общих ресурсов
        3. Экономьте системные ресурсы
      • недостаток:
        1. Плохая масштабируемость
        2. Слишком большая ответственность
    • Заводская выкройка
      • Определение: При создании объекта нет необходимости указывать конкретный свет, создающий объект
      • выполнить:
          const Example = function(name,age){
      this.name = name || 'Tom',
      this.age = age || '18'
      this.say = function(){
          console.log(`name:${this.name},age:${this.age}`)
      }
  }
      • преимущество:
        1. Четкая структура, эффективные изменения упаковки
        2. Конкретная реализация скрыта от вызывающей стороны, и вызывающей стороне нужно заботиться только об интерфейсе продукта.
        3. уменьшить сцепление
      • недостаток:
        1. Чтобы добавить новый класс, вам нужно переписать фабричный класс

    • модель публикации-подписки

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

      • выполнить:

          const Example = {};
  Example.clientList = [];
  Example.listen = function(fn){
      this.clientList.push(fn)
  }
  Example.trigger = function(){
      for(let i=0,fn; fn=this.clientList[i++]){
          fn.apply(this,arguments)
      }
  }

  Example.listen(function(message){
      console.log(message) // 我发布了一个消息，此时订阅者会收到消息
  })  

  Example.trigger(function(){
      console.log('我发布了一个消息，此时订阅者会收到消息')
  })
      • преимущество:
        1. Развязка во времени
        2. Развязка между объектами
        3. Поддержка широковещательной связи
      • недостаток:
        1. Если наблюдаемый объект имеет много прямых и косвенных наблюдателей, потребуется много времени, чтобы уведомить всех наблюдателей.
        2. Если между наблюдателем и целью наблюдения существует циклическая зависимость, цель наблюдения инициирует циклический вызов между ними, что может привести к сбою системы.
        3. Шаблон наблюдателя не имеет соответствующего механизма, позволяющего наблюдателю узнать, как изменился наблюдаемый целевой объект, а только то, что наблюдаемая цель изменилась.
  • Междоменный (причина)
    • Принцип JSONP
      • В теге script для стороннего общения нет междоменной уязвимости, а данные стороннего ответа - это json, поэтому он называется jsonp (json padding)
    • Как настроен CORS
      • Разрешить указанному источнику общаться, изменив заголовки ответа, чтобы установить белый список
    • Nginx-прокси
        location / {
      proxy_pass  xxx
  }
  • Исходный код какого фреймворка вы читали?
  • Как написать библиотеку CSS и на что обратить внимание?
    1. всегда сначала имя класса
    2. Код компонента собран
    3. Используйте согласованные пространства имен классов
    4. Поддерживайте строгое соответствие между пространствами имен и именами файлов
    5. Избегайте утечки стиля за пределы компонента
    6. Избегайте утечек стиля внутри компонентов
    7. Соблюдайте границы компонентов
    8. Слабо интегрируйте внешние стили
Категории