Обмен интервью: краткое изложение интервью переднего плана Alibaba 2018 (вопрос + ответ)

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

Используйте css для достижения эффекта непрерывной анимации

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

Основной тест:animationиспользование

ценность	описывать
`animation-name`	Задает имя ключевого кадра, которое необходимо привязать к селектору.
`animation-duration`	Задает время в секундах или миллисекундах для завершения анимации.
`animation-timing-function`	Определяет кривую скорости для анимации.
`animation-delay`	Определяет задержку перед запуском анимации.
`animation-iteration-count`	Указывает, сколько раз должна воспроизводиться анимация.
`animation-direction`	Указывает, должна ли анимация по очереди воспроизводиться в обратном порядке.

Используйте js для достижения эффекта непрерывной анимации

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

Идеи таймера

var e = document.getElementById('e')
var falg = true;
var left = 0;
setInterval(() => {
    left == 0 ? falg = true : left == 100 ? falg = false : ''
    falg ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`
}, 1000 / 60)

requestAnimationFrame
Так как я не использовал это раньшеAPIТак что сейчас учится.

//兼容性处理
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function(callback){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var e = document.getElementById("e");
var flag = true;
var left = 0;

function render() {
    left == 0 ? flag = true : left == 100 ? flag = false : '';
    flag ? e.style.left = ` ${left++}px` :
        e.style.left = ` ${left--}px`;
}

(function animloop() {
    render();
    requestAnimFrame(animloop);
})();

Пожалуйста, исправьте недостатки (в конце концов, это текущее исследование) и проверьте преимущества между прочим:

Браузеры могут оптимизировать параллельные действия анимации, более рационально перестраивать последовательности действий и выполнять действия, которые можно комбинировать в одном цикле рендеринга, что приводит к более плавным эффектам анимации.
Устранение погрешности в миллисекундах
Избегайте чрезмерного рендеринга (слишком частого рендеринга,tabНевидимая пауза и т.д.)
Примечание:requestAnimFrameКак и таймер, он также имеет аналогичный метод очисткиcancelAnimationFrame.

Фиксированная ширина справа, адаптивная слева

Первое:

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

секунда

<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

Сейчас на ум приходят два.

Центрируется по горизонтали и вертикали

Первое

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

секунда

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

третий

#container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

четвертыйflex

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

Разница между четырьмя позициями

staticзначение по умолчанию
relativeОтносительное позиционирование Смещение относительно исходного положения, все еще в стандартном потоке документов
absoluteАбсолютное позиционирование Относительно ближайшего позиционированного элемента-предка существует позиционированное (см.positionнетstaticelement) элемент-предок с ближайшим элементом-предком в качестве эталона. Если нет позиционированного элемента-предка, тоbodyЭлементы представляют собой смещенные базы, полностью выходящие за рамки стандартного документооборота.
fixedЭлемент с фиксированным положением позиционируется относительно области просмотра, что означает, что он остается в той же позиции даже при прокрутке страницы. Элемент с фиксированным положением не сохраняет пространство, которое в противном случае было бы на странице.

Часто ли используется макет Flex?

Поскольку проект учитывает совместимостьIE9Так что толку мало

Как проходит мобильная адаптация?

Адаптивные макеты, созданные с помощью медиазапросов, которые загружаются по-разному в зависимости от ширины экрана.css.

В чем разница между letи var?

letзаES6Добавлена новая команда объявления переменных, похожая наvar, но со следующими отличиями:

varОбласть объявленной переменной находится внутри функции, в которой находится оператор, и существует явление подъема переменной.
letОбласть объявленной переменной находится в пределах блока кода, в котором находится оператор, и продвижение переменной отсутствует.
letДублирование деклараций не допускается.

Почему var можно объявлять повторно? (не знаю этого)

Когда мы выполняем код, мы можем просто понять, что блок памяти выделен для новой переменной с именемa, и назначьте его как2, но компилятор и движок будут выполнять две дополнительные операции во время выполнения: определять, объявлена ли переменная:

Сначала компилятор анализирует и дизассемблирует код, и встречается слева направоvar a, компилятор спросит, существует ли уже область с именемaпеременная, если она не существует, область приветствия объявляет новую переменнуюa, если он уже существует, игнорируйтеvarПродолжайте компилировать, затемa = 2Компилируется в исполняемый код для использования движком.
двигатель встречаетa=2также спросит, есть ли переменные в текущей областиa, если он существует, то будетaназначить как2(поскольку на первом шаге компилятор игнорирует повторное объявлениеvar, а область видимости уже естьa, поэтому повторные объявления будут переопределены без ошибки). Если он не существует, он будет искать цепочку областей видимости, если переменная наконец будет найдена.aназначить его2, если не найдено, объявить переменную в области приветствияaи назначить как2.
Ссылка на ссылку

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

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

Вопрос о том, на что это указывает

Так и должно быть, точно не помню.

obj = {
    name: 'a',
    getName : function () {
        console.log(this.name);
    }
}

var fn = obj.getName
obj.getName()
var fn2 = obj.getName()
fn()
fn2()

В чем разница между запросом/экспортом в CommonJS и импортом/экспортом в ES6?

CommonJSВажной особенностью модуля является то, что он выполняется при загрузке, то есть код скрипта выполняется вrequire, все будет выполнено. Как только модуль "циклически загружается", будет выводиться только исполняемая часть, а неисполненная часть не будет выводиться.
ES6Модули динамически ссылаются, если вы используетеimportПри загрузке переменных из модуля эти переменные не будут кэшироваться, а станут ссылкой на загруженный модуль, что требует от разработчика гарантии того, что значение может быть получено, когда значение действительно получено.
import/exportв конечном итоге компилируется вrequire/exportsвыполнить.
CommonJSВ спецификации указано, что в каждом модулеmoduleПеременная представляет текущий модуль. Эта переменная является объектом,exportsсвойства (т.е.module.exports) — внешний интерфейс. Загрузка модуля фактически загружает модульmodule.exportsАтрибуты.
exportКоманда указывает внешний интерфейс и должна установить однозначное соответствие с переменными внутри модуля.

Одна строка кода для дедупликации массива?

[...new Set([1,2,3,1,'a',1,'a'])]

Используйте addEventListener, чтобы щелкнуть li, чтобы открыть содержимое, и это эффективно после динамического добавления li.

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

На этот вопрос нет ответа 😨😨

var ulNode = document.getElementById("ul");
    ulNode.addEventListener('click', function (e) {
        if (e.target && e.target.nodeName.toUpperCase() == "LI") {
            alert(e.target.innerHTML);
        }
    }, false);

Как судить о том, что два объекта равны?

obj={
    a:1,
    b:2
}
obj2={
    a:1,
    b:2
}
obj3={
    a:1,
    b:2
}

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

JSON.stringify(obj)==JSON.stringify(obj2);//true
JSON.stringify(obj)==JSON.stringify(obj3);//false

Какую оптимизацию производительности сделал проект?

уменьшатьHTTPколичество запросов
уменьшатьDNSЗапрос
использоватьCDN
Избегайте перенаправлений
Ленивая загрузка изображения
уменьшатьDOMколичество элементов
уменьшатьDOMдействовать
использовать внешнийJavaScriptиCSS
компрессияJavaScript,CSS, шрифты, картинки и т.д.
оптимизацияCSS Sprite
использоватьiconfont
обрезка шрифта
Распределение по нескольким доменам делит контент на разные домены
попытаться вычестьiframeиспользовать
избегайте картинокsrcПусто
поместите таблицу стилей в
Поместите скрипт внизу страницы
Дополнения приветствуются. . .

Как осуществляется модульная разработка?

Используйте пространства имен.

Вы когда-нибудь использовали веб-пакет?

Я сказал, что это использовалось в проекте Vue, а потом не спрашивал.

Gulp сам пишет задачи? Или используются все модули?

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

Как Vue router реализует переходы в дополнение к router-link?

router.go(1)
router.push('/')

В чем разница между Vue router jump и location.href?

routerдаhashИзменять
location.hrefэто переход на страницу, обновите страницу

Как работает двусторонняя привязка Vue?

пройти черезObject.definePropertyосуществленный

Можете ли вы реализовать двустороннюю привязку? 😰😰

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show-txt"></p>
    </div>
    <script>
        var obj = {}
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('txt').value = newValue
                document.getElementById('show-txt').innerHTML = newValue
            }
        })
        document.addEventListener('keyup', function (e) {
            obj.txt = e.target.value
        })
    </script>
</body>

В чем разница между React и Vue?

Установить и сопоставить структуры данных (😨😨)

ES6Предоставляет новые структуры данныхSetОн похож на массив, но все значения членов уникальны и нет повторяющихся значений.
ES6при условииMapструктура данных. Он подобен объекту и также представляет собой набор пар ключ-значение, но область действия «ключей» не ограничивается строками, и в качестве ключей могут использоваться различные типы значений (включая объекты). Это,ObjectСтруктура обеспечивает соответствие "строка-значение",MapСтруктура обеспечивает соответствие «значение-значение», которое является более полным.HashСтруктурная реализация.

Разница между WeakMap и Map?

WeakMapструктура иMapСтруктура в основном похожа, единственное отличие состоит в том, что она принимает только объекты в качестве ключей (nullЗа исключением), другие типы значений не принимаются в качестве имен ключей, а объект, на который указывает имя ключа, не включается в механизм сборки мусора.
WeakMapСамым большим преимуществом является то, что можно избежать утечек памяти. толькоWeakMapв видеkeyСсылочный объект будет собран сборщиком мусора.
WeakMapесть иMapсродниset(key, value),get(key)、has(key),delete(key)иclear()метод без каких-либо свойств и методов, связанных с итерацией.

Перекомпоновать и перекрасить

Некоторые деревья рендеринга (или все дерево рендеринга) требуют повторного анализа и пересчета размера узла. Это называется перестановкой. Учтите, что будет как минимум одна перестановка — макет страницы инициализации.
Некоторое содержимое на экране необходимо обновить из-за изменений в геометрии узла или из-за изменений в стиле, таких как изменение цвета фона элемента. Такие обновления называются перерисовками.

Что вызовет перекомпоновку и перерисовку?

добавить, удалить, обновитьDOMузел
пройти черезdisplay: noneскрыть одинDOMУзел — запускает перекомпоновку и перерисовку
пройти черезvisibility: hiddenскрыть одинDOMУзел — запускает только перерисовку, потому что геометрия не меняется.
переместить или передать на страницуDOMУзел добавления анимации
Добавьте таблицу стилей и настройте свойства стиля
Действия пользователя, такие как изменение размера окна, изменение размера шрифта или прокрутка.

кеш браузера

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

Сначала на основе некоторых из этого ресурсаhttp headerОпределяем попадает ли он в сильный кеш, при попадании ресурсы кеша берутся напрямую из локального, и запрос на сервер не отправляется;
Когда сильный кеш пропускает попадание, клиент отправляет запрос на сервер, а сервер передает еще один запрос.request headerУбедитесь, что этот ресурс попадает в кэш согласования, который называетсяhttpПовторная проверка, при попадании сервер вернет запрос, но не вернет ресурс, а скажет клиенту получить его прямо из кеша, а клиент получит ресурс из кеша после получения возврата;
Что общего у сильного кеша и кеша согласования, так это то, что при попадании в кеш сервер не вернет ресурс;
Разница в том, что сильное кэширование не отправляет запросы на сервер, а согласованное кэширование делает это.
Когда согласованный кеш также дает сбой, сервер отправляет ресурс обратно клиенту.
когдаctrl+f5Когда веб-страница принудительно обновляется, она загружается непосредственно с сервера, минуя сильный кеш и кеш согласования;
когдаf5При обновлении веб-страницы сильный кеш пропускается, но проверяется согласованный кеш;

Сильный кеш

Истекает (это полеhttp1.0спецификация времени, значение является абсолютным временемGMTСтрока времени в формате, представляющем время истечения срока действия кэшированного ресурса)
Cache-Control:max-age (это полеhttp1.1спецификация, сильные кеши используют преимущества ихmax-ageзначение для определения максимального времени жизни кэшированного ресурса, его значение в секундах)

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

Last-Modified (значение — время последнего обновления ресурса, возвращаемое с ответом сервера)
If-Modified-Since (определение того, был ли ресурс изменен во время двух запросов, путем сравнения двух раз, если нет, попадание в кеш согласования)
ETag (представляет собой уникальный идентификатор содержимого ресурса, возвращаемый с ответом сервера)
If-None-Match (Сервер определяет, был ли изменен ресурс между двумя запросами, сравнивая If-None-Match в заголовке запроса с ETag текущего ресурса, чтобы определить, был ли ресурс изменен между двумя запросами. .Если модификации нет, она попадет в кеш согласования)