2018 Toutiao Spring Recruitment Сводка вопросов интервью для стажеров переднего плана

интервью внешний интерфейс

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

один раунд интервью

Каков принцип реализации типа?

https://ecma262.docschina.org/#sec-typeof-operator https://stackoverflow.com/questions/45462182/transform-a-javascript-object-to-function-manually https://stackoverflow.com/questions/29353177/what-is-base-value-of-reference-in-ecmascriptecma-262-5-1

Как реализовано наследование js? Каков принцип?

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

Дайте функции A функцию B, и в A есть свойство, которое реализует B вручную и наследуется от A. И сделать наилучшую реализацию наследования

В то время я собирался написать о методе наследования паразитного комбинирования, но, похоже, я написал много ошибок в процессе рукописного ввода, а умение писать код еще нуждается в доработке. Реализация наследования паразитной композиции:

function inheritPrototype(SuperType, SubType) {
    var prototype = Object.create(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

function SuperType(props) {
    this.props = props;
}

function SubType(props) {
    SuperType.call(this, props);
}

inheritPrototype(SuperType, SubType);

В частности, для A и B, A является SuperType, а B является SubType.
ПрикрепилObject.create()реализация, при передаче параметраObject.create()и следующееobject()Ведет себя так же. (Object.create()При необходимости передайте второй параметр, в котором могут быть определены дополнительные свойства нового объекта, такие какObject.create(SuperType, {name: {value: 'Test'}})

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
}

Задача простого алгоритма: найти K-е наибольшее число в массиве

Рукописный собственный запрос ajax

  1. После написания интервьюерif (xhr.readyState == 4 && xhr.status == 200)Также много вопросов по кодам статуса, например статус здесь можно заменить на 201
  2. потому что я написал прямоvar xhr = new XMLHttpRequest(), не обеспечивал совместимость с IE, интервьюер задавал вопросы о совместимости с IE.

Более полный ответ:

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        // 兼容IE5和IE6
        return new ActiveXObject('Microsoft.XMLHttp');
    }
}

var xhr = createXHR();
xhr.onReadyStateChange = function() {
    if (xhr.readyState == 4) {
    // 状态码为200至300之间或304都表示这一请求已经成功
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText)
        } else {
            ...
        }
    }
}
// GET
xhr.open('GET', url);
xhr.send();

// POST
xhr.open('POST', url);
xhr.send(data);

После этого интервьюер нарисовал эскиз и попросил реализовать его с помощью html и css.Контент включал в себя такой контент, как фиксированное левое и правое адаптивное, вертикальное центрирование и так далее. Эскиз выглядит так:

Как обрабатывать ошибки при написании кода?

У вас есть понимание реакции и виртуального DOM?

Второй раунд интервью

Знаете ли вы что-нибудь о семантике html? Есть ли эти семантические новые теги?

В то время я отвечал на некоторые смысловые теги. в заключении:
Семантические теги, то есть содержимое самого тега, могут выражать значение этого элемента для браузера или разработчика. Например<div>и<span>Это элемент без семантики. и<form>представляет форму или<table>Таблицы представления являются семантическими метками.
В H5 представлено много новых семантических элементов, таких как:

  • <header> <nav> <aside> <footer>Несколько тегов используются для представления различных частей страницы, таких как заголовок, навигация и боковая панель.
  • <article>Элемент представляет собой независимую структуру в документе, странице, приложении или веб-сайте, которая предназначена для независимого назначения или повторного использования, как в публикации, это может быть сообщение на форуме, журнал или новостная статья, блог, отправленные пользователем комментарии, интерактивные компоненты, или другие независимые элементы контента.
  • <section>Содержит набор контента и его заголовок.
  • <figure>Укажите независимое содержимое потока, такое как изображение, диаграмма, код фотографии и т. д.,<figcaption>определение<figure>заглавие.

Какой исходный код Bootstrap вы видели? Каковы особенности Bootstrap?

Здесь я расскажу о примерной реализации системы растеризации Bootstrap и отзывчивости Bootstrap. Затем интервьюер спросил, как Bootstrap добивается отзывчивости, и я ответил: @media с помощью css. Затем он спросил меня, есть ли еще какие-то особенности, о которых я тогда не помнил.

Как много вы знаете о флексе? Каковы основные свойства гибкости?

Только что ответил на основноеjustify-contentиalign-items flex-directionи т.д

Как добиться двухколоночного макета одинаковой высоты?

В процессе расспроса он также спросилheight: 100%связанные вопросы

Как очистить поплавок?

Здесь он попадает в использованиеclear: both, сказал интервьюер, есть ли другой способ, сказал толькоclear: bothНедостаточно, нет ответа.

Принцип: Основной принцип очистки плавающего элемента заключается в том, чтобы создать его на родительском элементе плавающего элемента.контекст форматирования блока(контекст блочного форматирования, BFC), все элементы в BFCбудет содержать плавающие элементы. Существует множество способов создания BFC, наиболее часто используемыми являются следующие:

  1. displayзаflex inline-block inline-flex table-cellЭлементы
  2. overflowзаvisibleэлементы, кроме
  3. positionзаabsoluteилиfixedЭлементы
  4. floatзаnoneэлементы, кроме

Поэтому просто примените вышеуказанные свойства к родителю элемента с плавающей запятой, чтобы создать BFC для родителя, чтобы очистить поплавок. Кроме того, используйтеclear:bothПлавающие также можно очистить, лучше всего использовать псевдокласс для родительского элемента.:afterДобавьте это, чтобы очистить плавающие элементы, такие как:

.parent-box:after{
    clear: both;
    content: '';
    display: block;
}

Содержание здесь взято изэта статьяАннотация очень хорошо написана, всем рекомендую прочитать.

Приоритет веса стиля?

!important> Встроенные стили >id > class > tagВес стиля может быть сложен
内容转自:https://juejin.cn/post/6844903570001625102

юнит в cssemиremКакая разница?

  • remотносится к корнюem, rem — это em корня относительно корневого элемента html.
  • emявляется относительной единицей длины относительно размера шрифта текста в текущем объекте. Если текущий размер шрифта для встроенного текста не задан вручную, он определяется размером шрифта браузера по умолчанию. На самом деле, согласно стандарту W3, единицы em относятся к размеру шрифта элементов, использующих единицы em. Размер шрифта родительского элемента может повлиять на значение em из-за наследования.
  • Суммировать:remПеревод единиц в пиксельные значения определяется размером шрифта html-элемента. На этот размер шрифта влияет настройка размера шрифта в браузере, если она явно не переопределена для конкретной единицы измерения.emЕдиницы преобразуются в значения пикселей в зависимости от используемого размера шрифта. На этот размер шрифта влияет размер шрифта, унаследованный от родительского элемента, если он явно не переопределен с помощью определенной единицы измерения.

这部分内容转自: https://www.w3cplus.com/css/when-to-use-em-vs-rem.html © w3cplus.com

Как превратить часть текста за элементом в многоточие (...)

Если однострочное переполнение текста становится многоточием, вам необходимо использовать несколько свойств CSS в сочетании:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Для нескольких строк удовлетворительный эффект может быть получен в браузере ядра webkit.Следующее указывает на отображение 2 строк, а часть с более чем 2 строками отображается в виде многоточия:

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

Рукописный ввод страницы обратного отсчета

  1. здесь, потому что я использовалvar date = new Date(), поэтому интервьюер еще раз спросил, какое время сегодня? Это событие в текущем часовом поясе или времени компьютера или что-то еще? На это нет ответа. ответЕсли параметры не введены, конструктор Date создаст объект Date на основе текущего времени, установленного системой..
  2. потому что я используюsetInterval()Для реализации обратного отсчета написано, что он выполняется раз в 1000 миллисекунд, поэтому интервьюер еще раз спросил содержимое очереди задач js, и спросил меня, может ли браузер гарантировать, что он будет выполняться раз в 1000 миллисекунд. Я сказал, что из-за взаимосвязи между очередью задач основной поток не может быть гарантированно выполнен один раз каждые 1000 миллисекунд Затем он спросил меня, есть ли какой-нибудь метод оптимизации? Я говорю, что ты можешь использоватьrequestAnimationFrameСделайте вызов петли, так что сам браузер будет оптимизирован, и интервьюер спросил меня, как оптимизирован браузер (это действительно вопрос к концу), и я не могу ответить на него здесь.

Как определить, является ли переменная массивом?

Как instanceof реализован в js?

Какие новые функции ES6 были использованы и каковы основные типы данных js? Есть ли новые типы данных в ES6?

Я ответил стрелочные функции, карта, набор и т. д. Интервьюер спросил о характеристиках стрелочных функций. В ES6 появился новый примитивный тип данных Symbol, который раньше почти не использовался и на который не было ответов. Затем я задал вопрос об обещании, имея в виду обещание:

Как реализуются промисы? Могу ли я написать функцию для реализации Promise?

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

Разница между http и https? Каковы характеристики https?

Наиболее часто задаваемые вопросы: процесс от ввода URL до рендеринга веб-страницы.

Это задает порядок отправки HTTP-запросов и DNS-запросов.

Дерево DOM и дерево рендеринга загружаются последовательно? Каков порядок загрузки html, css, js? (наверное спросил)

В дополнение к порядку загрузки, вот еще вопрос, например, полностью ли загружается DOM-дерево и отрисовка css? Или выполнять рендеринг css при построении дерева DOM? Если в html есть кусок js-кода, который долго зацикливается, не повлияет ли это на отрисовку страницы?
В основном меня спросили здесь, потому что я не вникал в вопрос порядка загрузки. Это все вопросы, которые приходят в голову.После интервью я чувствую, что мой фундамент недостаточно хорош, и я немного нервничал во время интервью, и я не мог выразить многие вещи, которые я обычно знаю.
Я надеюсь, что это поможет всем, кто ищет передовую работу.

Категории