Краткое изложение интервью Jinjiu!

внешний интерфейс опрос

предисловие

  • Еще год золотой, девятый, серебряный и десятый, автор не знает, удачный он или неудачный.10Крещение нескольких компаний. Три дня подряд я записывал некоторые часто задаваемые и необычные (но важные) вопросы, с которыми сталкивался автор, касающиесяHTML、CSS、JavaScript、TypeScript、Vue、React、Webpack, браузеры, измельченный код и другие проблемы.

HTML

HTML5Какие новости?

  1. перетащите, чтобы освободить(Drag and drop) API;
  2. Семантические лучшие теги контента（header,nav,footer,aside,article,section）;
  3. аудио видеоAPI (audio,video);
  4. холст(Canvas) API, векторSVG;
  5. география(Geolocation) API;
  6. локальное автономное хранилищеlocalStorageДолгосрочное хранение данных, данные не потеряются после закрытия браузера;sessionStorageданные автоматически удаляются после закрытия браузера;
  7. контроль формы,calendar、date、time、email、url、search...;
  8. новая технологияWeb Worker, WebSocket...;
  9. SVG.

правильноHTML5Семантическое понимание? Перечислите некоторые устаревшие и новые теги?

  • Семантический

    1. страницыСтруктурированный контент, более четкая структура, легко разбирается для браузеров и поисковых систем, даже если нет стиляCSSКейсы также отображаются в формате документа и легко читаются;

    2. Сканеры поисковых систем также полагаются наHTMLтеги для определения контекста и веса отдельных ключевых слов,выгодаSEO;

    3. Сделайте так, чтобы людям, которые читают исходный код, было проще разделять сайт на части,Легко читать и поддерживать.

  • Добавить ярлык
    1. header、footer、section、nav、article、hgroup、aside、video、audio...
  • удалить ярлык
    1. Элементы чистого исполнения:basefont、big、center、font、s、strike、tt、u;
    2. Элементы, негативно влияющие на удобство использования:frame、frameset、noframes.

metaЧто делают лейблы? представлять?

В чем разница между встроенными элементами и элементами блочного уровня?

  1. Встроенные элементы будут расположены по прямой линии, все на одной линии, расположенной горизонтально. Элементы блочного уровня занимают одну строку каждый и располагаются вертикально. Элементы уровня блока начинаются и заканчиваются на новой строке, за которой следует разрыв строки.
  2. Элементы уровня блока могут содержать встроенные элементы и элементы уровня блока. Строчные элементы не могут содержать элементы блочного уровня.
  3. Настройки встроенного элементаwidthневерный,heightнедействительно (можно установитьline-height),margin、paddingВверх и вниз недействительны.

Что такое прогрессивное улучшение и изящная деградация?

  • прогрессивное улучшение (progressive enhancement): Создавайте страницы для браузеров с более низкими версиями, чтобы обеспечить самые основные функции, а затем улучшайте и добавляйте такие функции, как эффекты и взаимодействия, для продвинутых браузеров, чтобы улучшить взаимодействие с пользователем.
  • изящная деградация (graceful degradation): создайте полную функциональность с самого начала, а затем сделайте ее совместимой со старыми браузерами.

iframeКак общаться с родительским окном?

iframeЧто происходит, когда ссылка открывается внутри?

areaObject.target=_blank|_parent|_self|_top
  • когда установленоiframeВнутреннийaЭтикеткаtargetсобственность_black, сколько бы этажей ни скрылосьiframeоткроет новую страницу на самой внешней веб-странице;
  • когда установленоiframeВнутреннийaЭтикеткаtargetсобственность_parentкогда текущийiframeРодительская страница замены;
  • когда установленоiframeВнутреннийaЭтикеткаtargetсобственность_self, сам iframe будет заменен;
  • когда установленоiframeВнутреннийaЭтикеткаtargetсобственность_top, сколько бы этажей ни скрылосьiframeзаменит самую внешнюю страницу.

CSS

CSS3Какие новые свойства?

  • box-shadow,text-shadow,animate,transfrom,transition,border-radiusи т.п.

animate,transfromа такжеtransitionКакая разница?

CSSКак анимация может оптимизировать производительность?

  • will-changeАтрибут: Прежде чем браузер выполнит анимацию, сообщите браузеру заранее, что здесь требуетсяGPUУскорьте и улучшите эффект отображения, но уберите это свойство вовремя после окончания анимации.
  • translate3dпровестиGPUускорить.
  • requestAnimationFrame API.

positionКаковы значения свойств? представлять?

Не используйтеposition:sticky;Как атрибут достигает соответствующего эффекта?

  • Прокрутите событие добавления, получите высоту прокрутки и оцените, соответствует ли изменение высоты прокрутки элементу, который требует фиксированного позиционирования.positionАтрибуты;
  • Прокрутите добавление событий через элементgetBoundingClientRectметод, черезtopЗначение оценивает высоту сверху (применимо к ситуации, когда трудно получить высоту прокрутки) и изменяет значение, соответствующее элементу, которому требуется фиксированное позиционирование.positionАтрибуты.

Как сделать элемент невидимым? Какие способы?

  • display: none;
  • visibility: hidden;
  • positionудалить но регион
  • position indexотрицательное значение
  • transform
  • opacity: 0; filter:Alpha(opacity=0）
  • height: 0; overflow: hidden;
  • background-color: transparent;

Перерисовать и перекомпоновать? Какие кейсы перерисовываются, а какие перекомпоновываются?

  • Перекомпоновка:Render TreeПроцесс, с помощью которого браузер повторно отображает часть или весь документ при изменении размера, структуры или определенных свойств некоторых или всех элементов в документе, называется перекомпоновкой. Каждой странице требуется как минимум одна перекомпоновка, то есть при первой загрузке страницы.
  • Перерисовка: когда стиль элемента на странице изменяется, не влияя на его положение в потоке документа (например:color、background-color、visibilityд.), эти свойства влияют только на внешний вид и стиль элемента, но не на макет. Браузер присвоит элементу новый стиль и перерисует его. Этот процесс называется перерисовкой.
  • Оплавление неизбежно вызовет перерисовку, а перерисовка не обязательно приведет к оплавлению.

Jiugongge, использоватьCSSКак отображать разные границы при перемещении мыши (не занимая дополнительную ширину сетки)?

как реализовать один9/16Адаптивная область?

  • padding-bottom: 56.25%;.

paddingНа чем основан процент?

  • родительского объектаwidth.

Проблема с адаптацией мобильного терминала 1px?

  • использоватьtransform: scale(0.5).

приоритет селектора?

  • !important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

В чем разница между псевдоклассами и псевдоэлементами? Пример.

Как центрировать элемент по горизонтали и вертикали? Фиксированная ширина и высота и переменная ширина и высота.

flexа такжеgridпредставлять?

Каковы способы реализации схемы двухместного крыла?

BFC、IFC、GFC、FFCразница?

Если вам нужно вручную писать анимацию, как вы думаете, какой минимальный интервал времени и почему?

JavaScript

Что такое прототипы и цепочки прототипов?

JavaScriptСколько способов реализовать наследование?

JavaScriptКаковы основные типы данных ?

  • String、Number、Boolean、Null、Undefined、Symbol、BigInt.

Как судить о типе данных? Какие способы?

  • typeof
  • instanceof
  • особый:isNaN、isArray、prototype、constructor...
  • наиболее:Object.prototype.toString.call()

Что делает новая операция?

Что такое закрытие? каков эффект?

  • что такое закрытие
    • Определение: замыкание — это функция, которая имеет доступ к переменным в области видимости другой функции. Проще говоря, вы можете думать о замыкании как о специальной функции, которая может читать переменные внутри других функций.
    • Свободная переменная: не определена в текущей области, определена в родительской области и выше, она будет искать слой за слоем. Переменная в замыкании, которая не используется повторно, является свободной переменной. Свободные переменные находятся слой за слоем в определении функции.
  • эффект
    1. Есть надежда, что переменные будут находиться в памяти долгое время (как правило, после выполнения функции переменные и параметры уничтожаются);
    2. Избегайте загрязнения глобальных переменных.

Что такое утечка памяти? Что будет причиной этого?

Внедрить механизм сборки мусора?

делегация мероприятия?

ES6Какие новости?

Каковы способы модульности?

CommonJSа такжеES6Чем отличается модульность?

Какие методы массивов изменят исходную группу?

  • push、pop、shift、unshift、splice、reverse、sort.

for, for...in,for...of,forEach, mapразница?

  • возвращаемое значение:for, for...in,for...ofнет возвращаемого значения,forEachвернутьundefined,mapВозвращает массив после операции.
  • вакансия:for...in,forEach,mapпропустить вакансию,for,for...ofНе пропускайте пустые места.
  • break、continue:for,for...of,for...inможно прервать,forEach,mapСинтаксическая ошибка, код не может быть выполнен.

В чем разница между глубоким копированием и поверхностным копированием? Как реализовать глубокую копию?

  • BскопированоA, при измененииAкогда, см.Bизменится, еслиBОн также изменяется, указывая на то, что это поверхностная копия; если `B не изменяется, это глубокая копия.

...,concatа такжеsliceЭто глубокая копия или поверхностная копия?

  • ...Это глубокая копия для примитивных типов данных и поверхностная копия для ссылочных типов.
  • concatа такжеsliceявляется мелкой копией.

представлятьPromise?

Promiseвсегда можно выполнитьthenметод?

  • Могу
const promise = new Promise(function(resolve, reject) {
    // ... some code
});
promise.then().then()

Proxyроль? Какие существуют методы?

Отличие и реализация антишейка и троттлинга?

виртуальныйDomдолжно быть более реальнымDomбыстро? При каких обстоятельствах это не так?

  • Не обязательно; просто маленький элемент или элементы, последний по-прежнему самый быстрый.
  • виртуальныйDom VSреальностьDom
Виртуальный дом настоящий дом
обновлять быстрее медленнее обновлять
Невозможно обновить HTML напрямую HTML можно обновлять напрямую
Работа с домом очень удобна Дом операции очень дорогие
Без потери памяти Серьезная трата памяти

Официальный аккаунт открывает браузер,JavaScriptКак закрыть браузер и вернуться в окно официального аккаунта?

  • WeixinJSBridge.call('closeWindow')

TypeScript

TypeScriptКаковы основные типы данных?

  • Примитивный тип данных:boolean、number、string、null、undefined、Symbol;
  • Непримитивные типы данных: массивы,Tuple、enum、never、void、any, типы объединения, типы функций.

В чем разница между интерфейсом и типом?

  1. interfaceВозможность объявлять слияния,typeне можем;
  2. typeМожно объявлять псевдонимы для примитивных типов, типов объединения, кортежей,interfaceнет;
  3. typeможно использовать в заявленииtypeofполучить экземпляр типа;
  4. typeсопоставление типов поддержки,interfaceне поддерживается.

voidа такжеneverразница?

  • voidТип означает, что типа нет. Обычно используется, когда метод не имеет возвращаемого значения. (метод без возвращаемого значения получитundefined, но нам нужно определить его какvoidвведите вместоundefinedТипы. )
  • neverТипы представляют типы значений, которые никогда не существуют, в том числеnullа такжеundefined. (neverТип — это функциональное выражение, которое никогда не вернет значение, или возвращаемый тип выражения стрелочной функции, или переменная, которая никогда не будет истинной. )

Как объявить функцию, которая может принимать как строки, так и возвращать строки и числа и возвращать числа?

  • Объявить две функции с одинаковым именем, дженерики

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

Vue

ЗачемVueНазвать это прогрессивным фреймворком?

  • Пошаговое значение: не выполнять больше, чем свои обязанности.
  • Vueнет сильного主张（每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求）, вы можете использовать его для реализации одного или двух компонентов поверх исходной большой системы, когдаjQueryиспользование; его также можно использовать для развития всей семьи, когдаAngularИспользование; вы также можете использовать его вид со всем нижним слоем вашего собственного дизайна. где вы можете использовать базовую логику данныхOO（object-oriented）Он также может быть функциональным или функциональным.Это просто облегченное представление.Он делает только то, что должен делать, а не то, что не должен делать, вот и все.

представлятьVueжизненный цикл?

diffПринцип алгоритма?

Процесс рендеринга и выгрузки дочерних компонентов?

Принцип двусторонней привязки?

Vue3.0Какие изменения?

зачем заменятьdefinePropertyдляProxy? Каковы преимущества и недостатки двух?

v-ifа такжеv-forприоритет?

  • 2.0 v-forвыше чемv-if,3.0 v-ifвыше чемv-for.

watchа такжеcomputedКакая разница?

nextTickпринцип и сценарии использования?

Vue3изcompositionВ чем проблема?

  • data,methodпроблема повторяющихся имен;
  • Проблема невидимых зависимостей: когда проект большой, на странице десятки страницmixinмодульный миксин, затем каждыйmixinмеждуdataпараметры иmethodзвоните друг другу.

React

представлятьReactЖизненный цикл (16前、16.3、16.4)?

Reactа такжеVueразница?

Componentа такжеPureComponentразница?

  • PureComponentпройти черезpropsа такжеstateМелкий контраст для достиженияshouldComponentUpdate().
  • Примечание: вPureComponentЕсли он содержит более сложную структуру данных, при изменении глубоких данных интерфейс не будет обновляться из-за мелкого контраста.

В чем разница между управляемыми и неуправляемыми компонентами?

Управляемые компоненты неконтролируемые компоненты
1. Неспособность поддерживать собственное состояние 1. Держите себя в форме
2. Данные контролируются родительским компонентом 2. Данные контролируются DOM
3. Получите текущее значение через реквизит, затем уведомите об изменении через обратный вызов 3. Refs используется для получения текущего значения

В чем разница между гражданством и без гражданства?

компоненты с состоянием компоненты без сохранения состояния
1. Хранить информацию об изменении состояния компонента в памяти 1. Рассчитать внутреннее состояние компонента
2. Право на изменение состояния 2. Нет права менять состояние
3. включает в себя прошлые, настоящее и возможные будущие изменения в государстве 3. Не включает прошлые, настоящие и будущие изменения состояния, которые могут произойти
4. Получать уведомления о запросах на изменение состояния компонентов без сохранения состояния и отправлять им реквизиты. 4. Получите реквизиты от компонентов с состоянием и обработайте их как функции обратного вызова.

В каких ситуациях компоненты передают значения и каковы соответствующие методы?

Reactа такжеVueизdiffСравнение алгоритмов?

setStateЭто синхронно или асинхронно?

знаниеFiber? представлять?

Как реализована маршрутизация, отличная от обычной маршрутизации?

тема обычная маршрутизация Реагировать на маршрутизацию
Участвующие страницы Каждое представление соответствует новому файлу Включает только одну HTML-страницу
изменение URL-адреса На сервер отправляется HTTP-запрос и получена соответствующая HTML-страница Изменить только свойства истории
Опыт Пользователь фактически переключается между разными страницами в каждом представлении. Пользователи думают, что они переключаются между страницами

HooksКаковы плюсы и минусы?

useMemoа такжеuseCallbackразница?

  • такой же:

    1. useMemoа такжеuseCallbackВсе полученные параметры одинаковы, первый параметр — это обратный вызов, а второй параметр — данные, от которых нужно зависеть.
    2. Только при изменении данных результат будет пересчитан, что действует как кеш.

  • разные:

    1. useMemoРезультат расчетаreturnВозвращаемое значение в основном используется для кэширования значения результата расчета.Сценарии применения, такие как: Состояние, которое необходимо вычислить
    2. useCallbackРезультатом расчета является функция, которая в основном используется для кэширования функций.Сценариями применения являются: функции, которые необходимо кэшировать, потому что функциональная составляющая имеет любую по одной.stateИзменение всего компонента будет обновлено, а некоторые функции обновлять не нужно, в это время их следует кэшировать, чтобы повысить производительность и уменьшить нерациональное использование ресурсов.

  • Не злоупотребляйте этим, это приведет к потере производительности,reactуменьшениеrenderЭто может повысить производительность, поэтому это только для кэширования может уменьшить использование и кэширование результатов вычислений при повторном рендеринге.

useEffectкаков эффект?

HooksС какими проблемами вы сталкиваетесь при его использовании?

HooksКак узнать, нужно ли обновлять дочерний компонент?

  • useMemoПоместите изменения в данные, необходимые для обновления дочернего компонента, в зависимость (второй параметр).

есть своя упаковкаHooks? представлять?

  • useWinSize:window sizeChange возвращает измененную ширину и высоту.

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

Webpack

WebpackЧто такое элементы конфигурации?

Webpackпроцесс сборки?

Принцип горячего обновления?

dev-serverРешить междоменный принцип?

Babelпринцип?

loaderа такжеpluginроль? Вы сами это реализовали?

как улучшитьWebpackскорость сборки?

  1. CommonsChunkPluginизвлечь публичный код
  2. externalsНастроить для извлечения общих библиотек
  3. использоватьDllPluginа такжеDllReferencePluginПредварительно скомпилированные модули ресурсов черезDllPluginдля тех, на которые мы ссылаемся, но никогда не модифицируемnpmпакет для предварительной компиляции, а затем передатьDllReferencePluginЗагрузите предварительно скомпилированный модуль.
  4. HappypackРеализовать многопоточную ускоренную компиляцию.
  5. webpack-uglify-parallel(многоядерное параллельное сжатие для повышения скорости сжатия)uglifyPluginскорость сжатия.
  6. Tree-shakingа такжеScope Hoistingдля устранения избыточного кода.

браузер

cookie、sessionа такжеtokenразница?

адресная строка вводаURLчто случилось?

Политика кеширования браузера?

Какие существуют методы кэширования браузера?

DNSПроцесс разрешения доменного имени?

httpТри рукопожатия и четыре волны?

HTTP1.0、HTTP1.1а такжеHTTP2.0разница?

процесс шифрования https?

Что такое цикл событий?

Как отличить, является ли задача микрозадачей или макрозадачей?

  • Среда хостинга (среда, обеспечивающая идеальную работу javascript, распространенные браузеры иNode) называются макрозадачами, а те, которые предусмотрены стандартом языка, называются микрозадачами.
  • Общийmacrotaskимеют:
    • <script>(синхронное выполнение кода)
    • setTimeout
    • setInterval
    • setImmediate (NodeОкружающая обстановка)
    • requestAnimationFrame
    • I/O
    • UI rendering
  • Общие микрозадачи:
    • process.nextTick (NodeОкружающая обстановка)
    • Promise.then()
    • Object.observe(в основном устаревшее)
    • MutationObserver

Что такое междоменный домен? Какие существуют решения?

ajax,fetchа такжеaxiosразница?

Каковы способы общения между страницами?

WebSocketа такжеhttpразница?

XSSа такжеCSRFОтличие и профилактика?

рукописный код

Promise

карри

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

LRUАлгоритм исключения

Суммирование бинарного дерева

Сведение и дедупликация многомерных массивов

разное

Каковы способы оптимизации производительности интерфейса?

Как получить закопанные очки? Чтобы данные не потерялись?

base64роль и преимущества и недостатки?

gitОбщие команды?mergeа такжеrebaseразница?

git submoduleвы знаете?

Как выбрать фреймворк или плагин (например,React、Vue,Moment.js、Day.js) Шерстяная ткань?

Каковы ваши будущие карьерные планы?

Какой проект у вас получился лучше всего? представлять.

Каковы ваши ожидания от вашей следующей работы?

хорошее эссе для интервью

Прекрасное прошлое

«Нравится, добавляете в избранное и комментируете»

❤️Подписывайтесь+Нравится Избранное+Комментарии+Поделиться❤️, оставьте аромат в ваших руках, спасибо 🙏 всем.

Категории