вопросы на собеседовании по js
1. тип данных js
Базовые типы данных Число, Строка, Логическое значение, Нуль, Неопределено, Символ, bigInt Объект справочных типов данных, Массив, Дата, Функция, RegExp2. Улучшение объявлений переменных и функций js.
В js объявление переменных и функций будет перемещено наверх. Функция выполнения будет перемещена выше переменной. Если внешняя переменная с тем же именем объявлена с var внутри функции, функция больше не будет выполнять поиск вверх. Анонимные функции не поднимаются.3. Закрытие
Замыкание — это функция, которая может читать внутренние переменные других функций. Замыкание — это, по сути, функция, возвращающая функцию. Преимущества: оно может считывать переменные внутри функции и сохранять их в памяти. Оно может инкапсулировать частные свойства и. частные методы объекта. Неправильное использование памяти может привести к проблемам с ее переполнением.4. Разница между == и ===
== равно в нестрогом смысле. Если значения равны, они равны. === равно в строгом смысле. Тип данных и размер значения обеих сторон будут сравниваться. адреса будут равны только в том случае, если они равны.5. это
это всегда указывает на прямой вызов функции. Если есть новое ключевое слово, это указывает на объект, который выходит из нового. В событии это указывает на объект, который вызвал событие.6. Как перемещаться по массивам и объектам js
для inforforEachfor-of7. Разница между картой и forEach
Метод forEach — это самый простой метод, который является обходным и циклическим. По умолчанию передаются три параметра: элемент содержимого пройденного массива, индекс индекса массива и текущий метод Arraymap пройденного массива. Основное использование такое же, как и forEach. , но другой. Он вернет новый массив, поэтому обратный вызов должен иметь возвращаемое значение. В противном случае будет возвращено неопределенное значение.8. Чем стрелочные функции отличаются от обычных функций?
Этот объект в теле функции — это объект, в котором он определен, а не объект, в котором он используется. То есть новую команду нельзя использовать, иначе возникнет ошибка. Выброшен. Объект аргументов не может быть использован. Объект не существует в теле функции. Если вы хотите использовать его, вместо этого вы можете использовать параметр Rest. Команду доходности использовать нельзя, поэтому функцию стрелки нельзя использовать в качестве функции генератора.9. Стратегия одинакового происхождения
Гомология относится к одному и тому же имени домена, протоколу и номеру порта.10. Как решить междоменные проблемы
междоменный jsonp document.domain + iframe междоменный промежуточный прокси nodejs междоменный бэкэнд устанавливает безопасное имя домена в информации заголовка11. Ограничения строгого режима
Переменные должны быть объявлены перед использованием функции. Параметры не могут иметь атрибуты с одинаковыми именами, иначе будет выдано сообщение об ошибке, чтобы предотвратить указание на глобальный объект.12. Новое в es6
Новая функция стрелки строки шаблона for-of (используется для перемещения по данным, например значениям в массиве). ES6 включает объекты Promise в спецификацию и предоставляет собственные объекты Promise. Добавлены команды let и const для объявления переменных. Также введено понятие модульного модуля.13. В чем разница между атрибутом и свойством?
Атрибут — это атрибут, который элемент dom имеет в качестве тега html в документе. Свойство — это атрибут, который элемент dom имеет как объект в js. Для стандартных атрибутов HTML атрибут и свойство синхронизируются и обновляются автоматически. Однако для пользовательских атрибутов они не синхронизируются.14. В чем разница между let и const?
В команде let нет продвижения переменной. Если она используется перед let, будет сообщено об ошибке. Если в области блока есть команды let и const, будет сформирована закрытая область, и повторные объявления не допускаются. и не может быть изменен. Однако, если определением является «Объект», вы можете изменить данные внутри объекта.15. Утечка памяти
Определение: различные проблемы, вызванные тем, что программа не освобождает или не может освободить динамическую память, которая по какой-либо причине была динамически выделена в программе. Возможные утечки памяти в js: Результат: замедление, сбой, большая задержка и т. д. Возможные причины утечек памяти в js При очистке глобальной переменной dom все равно происходит утечка памяти, вызванная существованием дочерних элементов, которые не очищаются эталонный таймер.16. Как внедрить сценарий?
html static <script> представляет динамическую вставку js <script><script defer>: асинхронная загрузка, выполняемая после завершения анализа элемента <script async>: асинхронная загрузка, но рендеринг элемента будет заблокирован во время выполнения17. Метод массива
карта: пройти по массиву и вернуть новый массив, состоящий из возвращаемых значений обратного вызова. forEach: невозможно сломать, вы можете использовать throw new. Ошибка в try/catch, чтобы остановить фильтр: отфильтровать некоторые: если один элемент возвращает true, все — trueevery: Если один элемент возвращает false, то общее значение равно falsejoin: сгенерируйте строку, указав соединитель push/pop: push и pop в конце, измените исходный массив, верните элемент push/pop unshift/shift: push и pop at голова, изменить исходный массив, вернуть операцию сортировки элемента (fn)/обратно: Сортировать и перевернуть, изменить исходный массив concat: соединить массив, не затрагивая исходный массив, мелко скопировать фрагмент (начало, конец): вернуть усеченный новый массив без изменения соединения исходного массива (начало, число, значение...): возвращает массив, состоящий из удаленных элементов, значением является вставленный элемент, изменяет исходный массив indexOf/lastIndexOf(value, fromIndex): находит элемент массива и возвращает соответствующий нижний индекс сокращение/редукцияRight(fn(prev, cur), defaultPrev) : выполняется парами, prev — возвращаемое значение последней упрощенной функции, cur — текущее значение (начиная со второго элемента)18. Глубокое и поверхностное копирование JavaScript?
Неглубокая копия Object.assign глубокая копия может быть решена с помощью JSON.parse(JSON.stringify(object))19. Поговорим о реализации асинхронного программирования?
Преимущества функции обратного вызова: простая и понятная. Недостатки: не способствует обслуживанию, высокая связанность кода. Мониторинг событий. Преимущества: легко понять, можно связать несколько событий, для каждого события можно указать несколько функций обратного вызова. Недостатки: управляемый событиями, процесс не является достаточно ясно для выпуска/подписки (режим наблюдателя) аналогично прослушиванию событий, но вы можете использовать «Центр сообщений», чтобы узнать, сколько издателей и подписчиков сейчас существует. Преимущества объекта Promise: вы можете использовать метод then для записи в файл. цепочка можно писать обратные вызовы при возникновении ошибок. Недостатки функции: относительно сложно писать и понимать. Преимущества функции-генератора: обмен данными внутри и снаружи тела функции, механизм обработки ошибок. Недостатки: неудобное управление процессами. Преимущества асинхронной функции: встроенный исполнитель, лучшая семантика; , широкая применимость, возврат Что такое Promise, четкая структура Недостатки: механизм обработки ошибок20. Обсуждаете идеи объектно-ориентированного программирования?
Основная идея заключается в использовании базовых понятий, таких как объекты, классы, наследование и инкапсуляция, для разработки программ. Преимуществами являются простота обслуживания и расширения, высокая возможность повторного использования и наследования результатов разработки, а также снижение нагрузки, связанной с дублированием. Сокращенный цикл разработки21. Оптимизация производительности проекта
Уменьшите количество HTTP-запросов. Используйте CDN, чтобы избежать перенаправления изображений. Уменьшите количество элементов DOM. Используйте внешний JavaScript и CSS для сжатия JavaScript, CSS, шрифтов, изображений. и т. д. Оптимизируйте CSS Sprite. Используйте iconfont для распространения по нескольким доменам. Максимально разделите контент на разные доменные имена. Сократите использование iframe, избегайте пустых изображений, поместите таблицу стилей в ссылку и поместите JavaScript внизу. страницы.22. Что такое одиночный поток и его связь с асинхронным?
Один поток: существует только один поток, который может делать только одно. Причина: во избежание конфликтов при рендеринге DOM браузеру необходимо отрисовывать DOMJS. Структура DOM может быть изменена. При выполнении JS рендеринг DOM браузера приостанавливается. две части JS и не могут выполняться одновременно (оба изменены, конфликты DOM). Webworker поддерживает многопоточность, но не может получить доступ к решению DOM: асинхронный.23. Поговорим о балансировке нагрузки?
Отдельные серверы работают вместе, чтобы предотвратить перегрузку одного или нескольких из них и максимизировать роль сервера в балансировке нагрузки перенаправления http: планировщик выбирает сервер в соответствии с политикой для ответа на запрос с кодом 302. Недостатком является то, что он работает вместе. имеет эффект только в первый раз и последующие операции. Поддерживать балансировку нагрузки DNS на этом сервере: при разрешении доменных имен получить доступ к одному из нескольких IP-серверов (слабая возможность мониторинга). Причина — избегать конфликтов рендеринга DOM. Балансировка нагрузки обратного прокси: доступ к единому серверу, и сервер планирует доступ. Реальному серверу требуется единый сервер, и его производительность зависит от количества групп серверов.24. Цепочка прицела?
Цепочку областей видимости можно понимать как набор списков объектов, включая родительский объект и его собственные объекты-переменные, поэтому мы можем получить доступ к переменным или функциям, объявленным в родительском элементе, через цепочку областей видимости.25. Что такое прототипы, цепочки прототипов и наследование?
Все функции имеют атрибут прототипа (prototype). Все объекты имеют атрибут __proto__. В Javascript каждая функция имеет прототип атрибута прототипа, который указывает на собственный прототип, и объект, созданный этой функцией, также имеет атрибут proto, указывающий на него. Прототип, а прототипом функции является объект, поэтому этот объект также будет иметь прототип, указывающий на его собственный прототип, и он будет идти глубже слой за слоем до прототипа объекта Object, образуя таким образом цепочку прототипов.26. Что такое механизм сборки мусора в JS? 1. Обзор
Механизм сборки мусора js предназначен для предотвращения утечек памяти (часть памяти, которая больше не нужна, все еще существует. Механизм сборки мусора постоянно ищет эти переменные, которые больше не используются, и освобождает память, на которую он указывает). В JS среда выполнения JS отвечает за управление памятью, используемой во время выполнения кода.
2. Жизненный цикл переменных
Когда жизненный цикл переменной заканчивается, память, на которую она указывает, будет освобождена. В JS есть два типа переменных: локальные переменные и глобальные переменные. Локальные переменные влияют на текущую функцию. Когда функция завершается, память переменных будет освобождена до тех пор, пока браузер не будет закрыт.
3. Существует два метода сборки мусора в js: очистка меток и подсчет ссылок.
Маркировка развертки: большинство браузеров используют этот вид сборки мусора. Когда переменная попадает в среду выполнения (объявляет переменную), сборщик мусора помечает переменную. Когда переменная покидает среду, она помечается снова, а затем удаляется.
Подсчет ссылок: этот метод часто вызывает утечки памяти, в основном в браузерах более ранних версий. Его механизм заключается в отслеживании количества ссылок на определенное значение. Когда переменная объявлена и ей присвоен ссылочный тип, количество ссылок увеличивается на 1. Когда переменная указывает на другую, количество ссылок увеличивается. уменьшается на 1. Когда он равен 0, запускается механизм повторного использования.
27. Прогрессивное улучшение и плавная деградация
Прогрессивное улучшение создает страницы для браузеров низкой версии, чтобы обеспечить большинство основных функций, а затем улучшает эффекты, взаимодействие и добавляет дополнительные функции для браузеров высокой версии, чтобы обеспечить лучшее взаимодействие с пользователем. Грамотный переход на более раннюю версию: создайте полную функциональность с самого начала, а затем обеспечьте ее совместимость с браузерами более ранних версий.вопросы для собеседования на vue
1. Преимущества vue
Легкий, быстрый, простой в освоении, низкая связанность, возможность многократного использования, независимая разработка.Документация полная, документация на китайском языке.
2. Родительский компонент Vue передает данные дочерним компонентам.
реквизит3. Дочерние компоненты передают события родительским компонентам.
$ излучать4. Общие моменты и различия между инструкциями v-show и v-if
Похожие моменты: оба могут управлять отображением и скрытием элементов DOM.
Разница: v-show меняет только атрибут display, элемент dom не исчезает и нет необходимости перерисовывать страницу при переключении.
v-if напрямую удаляет элемент dom со страницы. Повторное переключение требует повторной визуализации страницы.
5. Как заставить CSS работать только в текущем компоненте
ограниченный6. Какова функция <keep-alive></keep-alive>
В основном используется для кэширования компонентов, которые необходимо часто переключать без повторного рендеринга страницы.7. Как получить дом
Добавьте ref='refname' к элементу dom, а затем получите элемент dom через this.$refs.refname.
8. Назовите несколько инструкций в Vue и их использование.
v-модель
в-он
v-html
v-текст
v-один раз
в-если
v-шоу
9. Что такое vue-loader? Для чего он используется?
Загрузчик для файлов vue, который преобразует шаблон/js/style в модули js.
Цель: js может писать стили es6 и стили.
10. Зачем использовать ключ
Добавьте ключ в качестве уникального идентификатора к каждому элементу DOM. Алгоритм сравнения может правильно идентифицировать этот узел и ускорить рендеринг страницы.11. аксиомы и установка?
Плагин axios необходим при использовании ajax в проекте vue.
Метод загрузки cnpm install axios --save
12. Использование v-модели
v-модель используется для двусторонней привязки форм и может изменять данные в реальном времени.13. Расскажите, пожалуйста, об использовании каждой папки и файла в каталоге src в проекте vue.cli.
компоненты хранить компоненты
вход на главную страницу app.vue
запись основного файла index.js
жопа хранит статические файлы ресурсов
14. Кратко опишите сценарии использования компьютера и часов соответственно.
Чтобы использовать предложение с официального сайта, все, что нужно вычислить, должно использовать вычисляемые свойства. Если несколько фрагментов данных влияют на один фрагмент данных, используйте вычисляемые свойства и используйте корзину покупок сцены.
Если изменение данных затрагивает несколько фрагментов данных, используйте часы и поле поиска сцены.
15. Может ли v-on контролировать несколько методов?
Да, например v-on="onclick,onbure"16. Использование $nextTick
После изменения в data() измененные данные данных не могут быть получены на странице. При использовании $nextTick, когда данные в данных изменяются, страница может отображаться в реальном времени.17. Почему данные в компоненте Vue должны быть функцией?
Из-за особенностей JavaScript в компоненте данные должны существовать в форме функции и не могут быть объектом.
Данные в компоненте записываются как функция, а данные определяются в форме возвращаемого значения функции, поэтому при каждом повторном использовании компонента будут возвращаться новые данные, что эквивалентно тому, что каждый экземпляр компонента имеет свои собственные данные. личное пространство данных и их значения. Отвечает за индивидуальное хранение данных, не вызывая путаницы. Если просто написать в форме объекта, все экземпляры компонента используют одни и те же данные, поэтому, если один из них будет изменен, все будут изменены.
18. Понимание прогрессивной системы
Защищайте меньше всего
Различные уровни могут быть выбраны в соответствии с различными потребностями
19. Как Vue реализует двустороннюю привязку данных?
Двусторонняя привязка данных Vue реализуется посредством перехвата данных, комбинирования и режима публикации-подписки. То есть, когда данные изменяются, представление изменяется соответственно. .
Ядро: Что касается двусторонней привязки данных vue, то его ядром является метод Object.defineProperty().
20. Различия и недостатки одностраничных и многостраничных приложений.
Одностраничное приложение (SPA), с точки зрения непрофессионала, относится к приложению только с одной главной страницей. Браузер загружает все js, html и css с самого начала. Все содержимое страницы содержится на этой главной странице. Но при записи все равно пишется отдельно, а потом при защите динамически загружается программа маршрутизации, одностраничные переходы и обновляются только локальные ресурсы. В основном используется на ПК.
Многостраничный (MPA) означает, что в приложении имеется несколько страниц, и при переходе на страницу обновляется вся страница.
Преимущества одной страницы: удобство и быстрота взаимодействия с пользователем, а изменения контента не требуют перезагрузки всей страницы. Благодаря этому спа оказывает меньшую нагрузку на сервер, и эффект страницы будет разделен; круче.
Недостатки одной страницы: не способствует SEO, недоступна навигация. Если вам нужно перемещаться вперед и назад, вам придется самостоятельно перемещаться вперед и назад. Загрузка в первый раз занимает много времени, сложность страницы сильно возрастает.
21. Почему в проекте Vue необходимо прописывать ключ в компоненте списка и какова его функция? Ключ — это уникальный идентификатор, присвоенный каждому vnode. Вы можете положиться на ключ, чтобы получить соответствующий узел vnode в oldVnode более точно и быстро.
Это более точно, поскольку с ключом повторное использование на месте отсутствует. В той же функции сравнения a.key === b.key повторного использования на месте можно избежать. Так будет точнее. Использовать уникальность ключа для генерации объекта карты для получения соответствующего узла быстрее, что быстрее, чем метод обхода.22. Каков порядок выполнения перехватчиков жизненного цикла родительских и дочерних компонентов?
Загрузить процесс рендерингародительский элемент beforeCreate -> созданный родительский элемент -> родительский элемент beforeMount -> дочерний элемент beforeCreate -> созданный дочерний элемент -> дочерний элемент beforeMount -> установленный дочерний элемент -> установленный родительский элемент
Процесс обновления подкомпонентаРодитель beforeUpdate -> Дочерний элемент beforeUpdate -> Дочерний элемент обновлен -> Родительский элемент обновлен
Процесс обновления родительского компонентародительский элемент beforeUpdate -> родительский элемент обновлен
процесс разрушенияродительский элемент beforeDestroy -> дочерний элемент beforeDestroy -> дочерний элемент уничтожен -> родительский элемент уничтожен
23. Расскажите, как вы понимаете nextTick? Когда вы изменяете значение данных, а затем сразу же получаете значение элемента dom, вы не можете получить обновленное значение. Вам необходимо использовать обратный вызов $nextTick, чтобы измененное значение данных отображалось и обновлялось в элементе dom, прежде чем оно будет успешно получено. .
24. Почему данные в компоненте vue должны быть функцией? Из-за особенностей JavaScript в компоненте данные должны существовать в форме функции и не могут быть объектом. Данные в компоненте записываются как функция, а данные определяются в форме возвращаемого значения функции, поэтому при каждом повторном использовании компонента будут возвращаться новые данные, что эквивалентно тому, что каждый экземпляр компонента имеет свои собственные данные. личное пространство данных. Они несут ответственность только за сохранение своих собственных данных, не вызывая путаницы. Если просто написать в объектной форме, все экземпляры компонентов используют одни и те же данные, поэтому изменение одного из них приведет к изменению всех их.
25. Разница между vue и jQuery. jQuery использует селектор ($) для выбора объектов DOM и выполнения таких операций, как присвоение, получение значения, привязка событий и т. д. Фактически, единственное отличие от нативного HTML заключается в том, что он может быть более удобным. выбирать и управлять объектами DOM, при этом данные и интерфейс работают вместе. Например, если вам нужно получить содержимое тега метки: $("lable").val();, это все равно зависит от значения элемента DOM. Vue полностью разделяет данные и объекты «Просмотр через Vue». Чтобы работать с данными, вам больше не нужно ссылаться на соответствующий объект DOM. Можно сказать, что данные и представление разделены друг с другом через объект Vue, vm. Это легендарный MVVM.
26. Разница между delete и Vue.delete в удалении массива. Удалить только изменяет удаленные элементы на пустые/неопределенные. Ключевые значения других элементов остаются неизменными. Vue.delete напрямую удаляет массив и изменяет ключевое значение массива.
27. Как решить проблему медленной загрузки первого экрана SPA, установив плагины, необходимые для динамической отложенной загрузки, используя ресурсы CDN;
28. Упаковывает ли проект Vue один файл js, один файл css или несколько файлов? Согласно спецификации леса vue-cli, один файл js и один файл CSS.
29. Методы запуска обновления представления при обновлении массива push(); unshift(); splice();
30. Каков жизненный цикл vue? Что он делает? Каждый экземпляр Vue при создании должен пройти ряд процессов инициализации — например, ему необходимо настроить мониторинг данных, скомпилировать шаблоны, смонтировать экземпляр в DOM и обновить DOM при изменении данных и т. д. В то же время во время этого процесса также будут выполняться некоторые функции, называемые перехватчиками жизненного цикла, что дает пользователям возможность добавлять свой собственный код на разных этапах.
31. Какие хуки сработают при первой загрузке страницы? beforeCreate, создано, beforeMount, смонтировано
32. Vue обычно получает данные, в которых функция period создается до установки Mount.
33. Разница между Created и Mount: Created: вызывается перед рендерингом шаблона в html, то есть определенные значения атрибутов обычно инициализируются, а затем рендерятся в представление. смонтированный: вызывается после того, как шаблон преобразуется в HTML, обычно после завершения страницы инициализации, а затем выполняет некоторые необходимые операции над узлом DOM HTML.
34. Понимание жизненного цикла Vue разделено на 8 этапов: до/после создания, до/после загрузки, до/после обновления и до/после уничтожения. До/после создания: на этапе beforeCreated элемент монтажа $el и данные объекта данных экземпляра vue не определены и не были инициализированы. На этапе создания данные объекта данных экземпляра vue доступны, но $el — нет. До/после загрузки: на этапе beforeMount инициализируются $el и данные экземпляра vue, но предыдущий виртуальный узел dom все еще смонтирован, а data.message не заменен. На этапе монтирования экземпляр vue монтируется и data.message успешно отображается. До/после обновления: при изменении данных будут активированы методы beforeUpdate и update. До/после уничтожения: после выполнения метода уничтожения изменения в данных больше не будут запускать периодическую функцию, что указывает на то, что экземпляр Vue выпустил мониторинг событий и привязку к DOM, но структура DOM все еще существует.
35. Что такое vuex? Управление состоянием во фреймворке vue.
36. Каковы атрибуты vuex? Существует пять типов: состояние, геттер, мутация, действие, состояние модуля: базовые данные (место хранения источника данных). геттеры: мутации данных, полученные из базовых данных: методы для отправки измененных данных, синхронизация! действия: Как декоратор, оборачивает мутации так, чтобы они могли быть асинхронными. модули: Модульный Vuex
37. Корзина семейства vue vue-cli, vuex, vueRouter, Axios
38. Какие команды npm обычно используются в проектах vue-cli?
npm install — это команда для загрузки пакета ресурсов node_modules. npm run dev — это команда npm для запуска среды разработки vue-cli. npm run build vue-cli — это команда npm для создания ресурсов развертывания производственной среды. Отчет используется для просмотра файлов ресурсов развертывания производственной среды vue-cli с помощью команды npm.39. Скажите пожалуйста назначение каждой папки и файла в проекте vue-cli?
В папке сборки хранятся некоторые начальные конфигурации веб-пакета. В папке config сохраняются некоторые конфигурации инициализации проекта. node_modules — это модуль, от которого зависит проект, загружаемый npm. Каталог src — это каталог, который мы хотим разработать: ресурсы используются для размещения компонентов приложения. .vue — это входной файл проекта main.js основного файла проекта.40. В чем разница между v-if и v-show?
Что у них общего: все они динамически отображают элементы DOM. Различия: v-if динамически добавляет или удаляет элементы DOM в дереве DOM. v-show управляет отображением и скрытием, устанавливая атрибут стиля отображения элемента DOM. v-. если коммутаторы имеют частичный процесс компиляции. /Uninstall, правильно уничтожайте и перестраивайте внутренние прослушиватели событий и подкомпоненты во время процесса переключения. v-show — это просто потребление производительности при переключении на основе css. v-if имеет более высокую стоимость переключения. более высокая первоначальная стоимость рендеринга. Сценарий v-if подходит для условий эксплуатации, которые маловероятно изменятся. v-show подходит для частого переключения.41. Каковы приоритеты v-for и v-if? Когда v-for и v-if используются одновременно, они имеют более высокий приоритет, чем v-. if, что означает, что v-for имеет более высокий приоритет, чем v-if. Решение v-if вызывается каждый раз в каждом назначении цикла, поэтому не рекомендуется использовать v-if и v-for одновременно. на той же этикетке.
42. Часто используемые модификаторы в модификаторах событий Vue?
.stop предотвращает дальнейшее распространение событий.prevent предотвращает поведение тегов по умолчанию.capture использует режим захвата событий, то есть события, вызванные самим элементом, сначала обрабатываются здесь, а затем передаются внутренним элементам для обработки.только для себя. когда event.target является текущим элементом. Функция-обработчик запускается, когда событие Once будет запускаться только один раз. Пассивный сигнал сообщает браузеру, что вы не хотите предотвращать поведение события по умолчанию.Модификаторы для v-модели
.lazy использует этот модификатор для повторной синхронизации номера события изменения, автоматически преобразует введенное пользователем значение в числовой тип. Trim автоматически фильтрует конечные пробелы, введенные пользователем.Модификатор событий клавиатуры
.enter.tab.delete (захватывает клавиши «удалить» и «возврат»).esc.space.up.down.left.rightсистемный модификатор
.ctrl.alt.shift.metaМодификатор кнопки мыши
.левый.правый.средний43. Как использовать объекты событий в событиях Vue?
Получите объект события и передайте $event в качестве параметра метода. Обратите внимание, что символ $ используется в событии <button @click="Event($event)">объекте Event</button>44. Каковы методы передачи стоимости компонентов?
Передача от родительского компонента к дочернему: дочерний компонент получает значение атрибута xx, переданное родительским компонентом через props['xx'] Передача от дочернего компонента к родительскому: дочерний компонент передает его через this.$emit('fnName',value) , а родительский компонент получает событие fnName. Другие способы получения обратных вызовов: путем создания шины и передачи значений с помощью Vuex45. Как дочерний компонент вызывает родительский компонент в Vue?
Непосредственно вызовите метод родительского компонента через this.$parent.event в дочернем компоненте. Используйте $emit() в дочернем компоненте, чтобы вызвать событие для родительского компонента, и родительский компонент может прослушивать это событие. Родительский компонент передает метод дочернему компоненту, и метод вызывается непосредственно в дочернем компоненте.46. Как заставить CSS работать только в текущем компоненте? Добавьте область видимости перед стилем в компоненте.
47. Как получить dom?ref="domName" Использование: this.$refs.domName
48. прыжок маршрутизации vue
(1) Декларативная навигация по ссылке на маршрутизатор
Без параметров: // Примечание. Если ссылка в router-link начинается с «/», она начинается с корневого маршрута. Если она не начинается с «/», она начинается с текущего маршрута. <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //Приемлемо как имя, так и путь. с параметрами:< router-link :to="{name:'home', параметры: {id:1}}"><router-link :to="{name:'home', запрос: {id:1} }"> < router-link :to="/home/:id"> //Передача объекта<router-link :to="{name:'detail', запрос: {item:JSON.stringify(obj)}} "></ссылка-маршрутизатора>(2) это.$router.push()
Без параметров: this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})параметр запроса 1. Конфигурация маршрутизации: имя: 'home', путь: '/home' 2. Переход: this.$router.push({name:'home',query: {id:'1'}})this.$ router.push ({path:'/home',query: {id:'1'}})3. Получение параметров Параметры html: параметры $route.query.idscript: параметры this.$route.query.idparams 1. Конфигурация маршрутизации: имя : 'home', путь: '/home/:id' (или путь: '/home:id') 2. Переход: this.$router.push({name:'home', params: {id:'1 '}}) Примечание: // Вы можете использовать имя только для сопоставления маршрутов и не можете использовать параметры пути // для передачи параметров (аналогично сообщению). Путь конфигурации маршрутизации: "/home/:id" или путь: "/home :id " в противном случае параметр обновления исчезнет. 3. Получите параметр html параметра: $route.params.id Параметр сценария: this.$route.params.id Передайте параметр непосредственно через путь 1. Конфигурация маршрута: имя: 'home', путь: '/home/:id' 2. Перейти: this.$router.push({path:'/home/123'}) или: this.$router.push('/home/123') 3. Получить параметры: Разница между this.$route.params.idparams и запросом аналогична get. После перехода URL-адрес страницы будет склеен с параметрами, аналогичными ?id=1. Неважные можно передавать следующим образом: пароли и тому подобное по-прежнему используют параметры, а идентификатор все равно будет присутствовать при обновлении страницы. Params аналогичен сообщению. Параметры не будут вставляться после URL-адреса страницы после перехода.(3) это.$router.replace()
Использование такое же, как указано выше.(4) this.$router.go(n)
Перейти на n страниц вперед или назад, n может быть положительным или отрицательным целым числом.разница:
this.$router.push переходит к указанному пути URL-адреса и добавляет запись в стек истории. При нажатии кнопки «Назад» вы вернетесь на предыдущую страницу. this.$router.replace переходит к указанному пути URL-адреса, но записи в списке не будет. Запись стека истории, нажмите «Возврат», чтобы перейти на предыдущую страницу (то есть напрямую заменить текущую страницу) this.$router.go(n) Перейти вперед или назад на n страниц, n может быть положительным или отрицательным целым числом.49. Принцип двусторонней привязки Vue.js. Vue.js 2.0 использует перехват данных (режим прокси) в сочетании с режимом издатель-подписчик (режим PubSub) для перехвата установщиков и получателей каждого свойства через Object.defineProperty(). Публикуйте сообщения подписчикам при изменении данных и запускайте соответствующие обратные вызовы прослушивания.
Каждый экземпляр компонента имеет соответствующий экземпляр программы-наблюдателя, который записывает свойства как зависимости во время рендеринга компонента. Позже, когда вызывается установщик зависимостей, наблюдатель будет уведомлен о необходимости перерасчета, что приведет к обновлению связанных с ним компонентов.
Vue.js 3.0 отказался от Object.defineProperty и использовал более быстрый собственный прокси ES6 (перехватчик объектов доступа, также называемый прокси).
50. Разница между Computed и Watch
Вычисленный вычисленный атрибут: зависит от других значений атрибутов, и вычисленное значение кэшируется.
Смотрите слушатель: это скорее функция наблюдения, без кэширования, аналогично обращению к мониторингу определенных данных.
Сценарии применения:
Когда нам нужно выполнять численные вычисления и полагаться на другие данные, следует использовать вычисленные, поскольку функция вычисленного кэша может использоваться, чтобы избежать пересчетной информации каждый раз, когда значение получается. Смотреть следует использовать, когда нам нужно выполнять асинхронные или дорогие операции, когда изменения данных изменяются. Окончательный результат. Это вещи, которые не могут сделать вычисленные свойства. Если несколько факторов влияют на один дисплей, используйте вычисленные;Разница между вычисленными и методами
Вычисленные: вычисленные свойства кэшируются на основе их зависимостей и будут переоценены только при изменении связанных с ними зависимостей.51. Фильтр
Используйте фильтры в данных VUE для фильтра (формат). Дисплей сценарии: например, форматы отображения, которые должны обрабатывать время, числа и т. Д.;52. Axios-это простой в использовании, краткую и эффективную HTTP-библиотеку.
53. Что такое sass? Как установить и использовать его в Vue? SASS - это предварительный язык CSS.
Используйте NPM для установки погрузчиков (SASS-Loader, CSS-Loader и т. Д. Погрузчики). Настройте загрузчик sass в webpack.config.js. 54. Страница Vue.js Flasses Vue.js предоставляет директиву V-Cloak, которая остается на элементе до тех пор, пока соответствующий экземпляр не завершит компиляцию. При использовании с CSS эта директива скрывает некомпилированные метки до тех пор, пока экземпляр не будет составлен. Использование выглядит следующим образом. [v-cloak] {display: none;55. Как решить проблему слишком глубокой иерархической структуры. Вы можете использовать VM. $ SET вручную определять уровень данных: VM. $ SET («Демо», ABCD)
56. Vue Common Trancess
V-модель в основном используется для элементов формы для реализации двустороннего привязки данных (такая же, как NG-модель в угловой) V-связной функции Dynamic Swiping: своевременно измените данные на странице V-on: Нажмите «Привязывает функцию» к метке , что может быть сокращено как @, например, для привязки функции щелчка, функция должна быть записана в методах V-FOR FORMAT: v-for = "Имя поля в массиве (OF) json" ng-repeat в угловом) V-Show Display Content (так же, как NG-Show в угловом) V-Hide Content (так же, как NG-Hide в угловом) V-if показывать и скрыть (удаление и добавление элементов DOM одинаковы Поскольку ng-if в угловом значении по умолчанию является false) v- else-if должен использоваться в сочетании с v-if v-else, который должен использоваться в сочетании с V-IF и не может использоваться в одиночку, в противном случае ошибка будет Сообщается об ошибке компиляции шаблона v-текст Red: "isred"}, {blue: "isblue"}] 'V-Once Rends только один раз при входе на страницу больше не рендеринг V-Cloak, чтобы предотвратить мерцающую V-Pre, вывод элементов внутри тега на месте57. Разница между маршрутом $ и маршрутизатором $
$ Route - это «информационный объект маршрутизации», включая PATH, PARAMS, HASH, запрос, FullPath, Соответствующий, имя и другие параметры информации о маршрутизации. $ маршрутизатор - это объект «экземпляры маршрутизации», включая методы прыжка маршрутизации, функции крючка и т. Д.58. Как понять отдельный поток данных Vue
Данные всегда передаются от родительского компонента дочернему компоненту. Это не позволит дочернему компоненту случайно изменить состояние родительского компонента, что приведет к тому, что поток данных вашего приложения будет трудно понять. ПРИМЕЧАНИЕ. Непосредственное использование V-модели для связывания реквизита, передаваемых от родительского компонента, дочернему компоненту, является нерегулярным способом написания, и среда разработки сообщит о предупреждении. Если вы действительно хотите изменить значение реквизита родительского компонента, вы можете определить переменную в данных, инициализировать ее со значением PROP, а затем использовать $ Emit для уведомления родительского компонента для его изменения.59. Что такое виртуальный DOM? Каковы плюсы и минусы? Потому что манипулирование DOM в браузере стоит дорого. Частые операции на DOM будут вызывать определенные проблемы с производительностью. Это причина создания виртуального DOM. Виртуальный DOM Vue2 опирается на реализацию библиотеки с открытым исходным кодом. Суть виртуального DOM заключается в использовании нативного объекта JS для описания узла DOM, который является слоем абстракции реального DOM.
Преимущества: 1. Гарантированная производительность Нижний предел: виртуальный DOM структуры должен адаптироваться к любым операциям, которые могут быть сгенерированы API верхнего слоя. но по сравнению с грубым работоспособностью DOM работы DOM намного лучше, поэтому виртуальный DOM структуры может, по крайней мере, гарантировать, что она все еще может обеспечить хорошую производительность без ручной оптимизации, что не только гарантирует нижний предел производительности. 2. Не нужно вручную эксплуатировать DOM: Нам не нужно вручную эксплуатировать DOM. предсказуемым образом, что значительно повышает эффективность. 3. Кроссплатформный: виртуальный DOM-это по существу объект JavaScript, а DOM тесно связан с платформой. Недостатки: 1. Неспособность выполнить окончательную оптимизацию: хотя виртуальная DOM + разумная оптимизация достаточна для удовлетворения потребностей в производительности большинства приложений, в некоторых приложениях с чрезвычайно высокими показателями производительности виртуальный DOM не может выполнять целенаправленную конечную оптимизацию. 2. При первом рендеринге большого количества DOM он будет медленнее, чем вставка InnerHTML из -за дополнительного уровня расчета DOM.60. Как решить проблему потери данных, когда страница Vuex обновляется?
Требуется стопорство данных VEUEX. Рекомендуется использовать плагин Vuex-Persist, который представляет собой плагин для постоянного хранилища Vuex. Вам не нужно вручную получать доступ к хранению, но сохранять состояние напрямую в файлах cookie или local Storage.61. Почему Vuex нужно разделить на модули и добавлять пространства имен?
Модуль: из -за использования одного дерева состояния все состояния применения будут сконцентрированы в относительно большом объекте. Когда приложение становится очень сложным, объекты хранения могут стать довольно раздутыми. Чтобы решить вышеуказанные проблемы, Vuex позволяет нам разделить магазин на модули. Каждый модуль имеет свое собственное состояние, мутация, действие, геттер и даже вложенные подмодули.
Пространство имен: по умолчанию, действия, мутации и гетры в модуле зарегистрированы в глобальном пространстве имен - это позволяет нескольким модулям реагировать на одну и ту же мутацию или действие. Если вы хотите, чтобы ваш модуль имел более высокую степень инкапсуляции и повторного использования, вы можете сделать его именованным модулем, добавив имена: True. Когда модуль зарегистрирован, все его добычи, действия и мутации будут автоматически названы в соответствии с путем, зарегистрированным модулем.
62. Какие шаблоны дизайна используются в Vue?
1. Заводской режим - пройти в параметрах, чтобы создать виртуальный DOM экземпляра и вернуть vNode базового тега и компонента VNODE в соответствии с различными параметрами. 2. Singleton Mode-Вся программа имеет один и только один экземпляр. 3. Publish-Subscribe Model. (Механизм событий VUE) 4. Образец наблюдателя. (Принцип «Адаптивные данные») 5. Режим декоратора (использование @Decorator) 6. Режим стратегии.63. Какие оптимизации производительности вы сделали для Vue? Здесь мы только перечислим оптимизацию производительности для VUE.
Не делайте объектной иерархии слишком глубокой, иначе производительность будет плохим. Не размещайте данные, которые не требуют отзывчивости в данных (вы можете использовать Object.Freeze () для замораживания данных) Ключ при переселении, и ключ - лучшее значение идентификатора, и избегайте использования V -if в то же время, чтобы оптимизировать эффективность эффективности таблицы - виртуальный список/виртуальная таблица, чтобы предотвратить внутренние утечки, уничтожить глобальные переменные и время после разрушения компонентов, Изображение ленивая загрузка маршрутизации, ленивая загрузка асинхронной маршрутизации сторонней плагины с требованием. Соответствующее использование компонентов кэша Keep-Alive для загрузки, анти-уточнения и дросселя, рендеринга на стороне сервера или предварительного воздействия64.
1. Добавьте новые атрибуты в экземпляр после создания экземпляра (добавьте атрибуты в Adscivesive Object). Принцип Vue.Set или $ SET заключается в следующем. При добавлении несуществующего атрибута в объект новый атрибут сначала будет отслеживаться, а затем наблюдатель, собранный DEP объекта OB, будет запускается для обновления. Сам массив, чтобы обновить массив.65. Сценарии использования и принципы функциональных компонентов.
1. Функциональные компоненты должны указывать функциональные: верно при объявлении компонента. Функция и рассчитанные свойства не могут быть использованы. Ссылка внешне через рефери, фактическое упоминание о нем - HTMleLement6. $ attrs и автоматически монтируется.Преимущества: 1. Поскольку функциональные компоненты не должны быть созданы, не имеют состояния и не имеют жизненного цикла, производительность рендеринга лучше, чем обычные компоненты.
Сценарии использования:
Простой компонент отображения, используемый в качестве компонента контейнера, такого как маршрутизатор, является функциональным компонентом. «Компонент высшего порядка» - используется для принятия компонента в качестве параметра и возврата обернутого компонента. Соответствующий код выглядит следующим образом:
if (istrue (ctor.options.functional)) {// Те, кто с функциональными атрибутами, являются функциональными компонентами, возвращают CreateFunctionAlcomponent (ctor, propsdata, данные, контекст, дети);} const слушатели = data.on; ;66. Почему детские компоненты не могут изменить опору, пройденную родительским компонентом? Все реквизиты образуют одностороннюю нисходящую связующую среду между их родителем и дочерним реквизитом: обновления от родительской опоры будут переходить вниз к дочернему компоненту, но не наоборот. Это не позволит дочернему компоненту случайно изменить состояние родительского компонента, что приведет к тому, что поток данных вашего приложения будет трудно понять.
67. Vue Project Creation. Конфигурация маршрутизации, конфигурация среды, передача значения компонента и т. Д.
CSS, HTML -интервью вопросы
В чем разница между HTML и HTML5?
Есть три основных различия:
1. Разница в объявлении документов
HTML: Гипертекстовый язык разметки, простой язык текстового типа.
HTML5.0: документ гласит, что HTML5 легко писать, оптимизировать и способствовать быстрому чтению и разработке программистами.
2. Различия в структурной семантике
HTML: теги, которые не отражают структурную семантику, например: <div id = "Nav"> </div>
html5: добавлено много семантических тегов, таких как: <статья>, <в сторону>, <audio>, <bdi> ...
3. Различия в рисунке
HTML: относится к масштабируемой векторной графике, графике на основе векторов, используемой для определения Интернета.
HTML5: Canvas Element of HTML5 использует сценарии (обычно с использованием JavaScript) для рисования изображений на веб -странице и может управлять каждым пикселем холста.
Что такое модель коробки?
Мы разделим коробку на несколько частей: содержание, прокладка, граница и маржа.Как понять семантику HTML5?
HTML Semantic Tag заголовок - Навигация на NAV - Навигационная статья - раздел статьи - раздел или абзац в сторону - нижний колонтитул - нижний колонтитулКаковы преимущества семантики?
В отсутствие кода CSS структура контента и структура кода могут быть хорошо представлены (так что нетехники могут понять код) для улучшения пользовательского опыта. полезен для SEO. Семантизация может установить лучшую связь с поисковыми системами. (Браузер) 1. cookie (1) Он используется для связи между клиентом и сервером (2), но он имеет функцию локального хранилища, поэтому оно «позаимствован» (3) Document.cookie = ... просто получите и изменить его (4) недостатки файлов cookie для хранения ① емкость хранения слишком мала, только 4 КБ ② Все HTTP -запросы выполняются, что повлияет на эффективность получения ресурсов ③ API прост и необходимо инкапсулировать для использования документа. Cookie 2. LocalStorage, SessionStorage (1) Специализация HTML5, разработанная для хранения, максимальная емкость составляет 5 м (2) API прост и прост в использовании (3) lcoalStorage.SetItem (ключ, значение); localStorage.getItem (ключ); (4) В IOS Safari Hidden Mode: LocalStorage.getItem сообщит об ошибке, предложения Unified Использование инкапсуляции Try-Catch 3. SessionStorage используется для локального хранения данных в сеансе. и данные будут уничтожены, когда сеанс заканчивается. Поэтому sessionStorage — это не постоянное локальное хранилище, а только хранилище уровня сеанса. LocalStorage используется для постоянного локального хранилища. Каковы ядра общих браузеров? ** Ядро Trident: ** означает, что браузер IE Browser, поэтому ядро Trident также называется Enel.** Гекковое ядро: ** Представляет браузер - браузер Firefox. Ядро геккона является открытым исходным кодом, и его самое большое преимущество заключается в том, что оно может быть кроссплатформенным.
Webkit: Webkit Kernel: представителем браузера является Safari (браузер Apple) и более низкая версия Google Chrome, которая является проектом с открытым исходным кодом.
** Presto Core: ** представляет браузерный браузер (китайский перевод как «открытый браузер»). ..
** Blink Core: ** Разработано Google и Opera, выпущенная в апреле 2013 года, текущее Chrome Core - Blink.
Поговорите о своем понимании веб -стандартов и W3C?
веб -стандарты:
Веб -стандарты в основном разделены на три части: структура, производительность и поведение.
Структура: относится к тегам, которые мы обычно пишем в теле, которые в основном состоит из тегов HTML
Производительность: относится к более богатым стилям тегов HTML, в основном состоит из стилей CSS
Поведение: относится к взаимодействию между страницей и пользователем, в основном состоит из части JS
W3C:
W3C выдвинул стандартизированные требования к веб -стандартам, а именно спецификации кода.
Структурные требования
1. Маркируйте буквы.
2. этикетка должна быть закрыта
3. Метки не разрешаются произвольно вложены
Производительность и поведенческие требования
1. Рекомендуется использовать сценарии CSS и JS внешней ссылки для достижения разделения структуры и производительности, структуры и поведения, что может повысить эффективность рендеринга страницы и быстрее отображать веб -контент.
Как реализовать макет ответа на браузер?
Используйте медиа -запросы (@Media), используйте гибкую макету, используйте процентные единицы, используйте единицы REM и используйте единицы VH и HW.Понимание селекторов и приоритетов CSS?
Обычно используются селекторы CSS
Селектор идентификации, селектор классов, селектор тегов, селектор атрибутов, псевдо-класс селектор, селектор потомков
весовой дивизион
На том же уровне:
! Важный> Встроенный стиль> Селектор идентификатора> Селектор класса> (селектор тегов, селектор псевдо-класса, селектор атрибутов)
На разных уровнях:
Обычно, чем выше значение веса, тем выше приоритет, но не было определенного деления веса, поэтому в большинстве современных событий, тем глубже уровень, тем выше приоритет.
Поговорим о своем понимании рефтова и перерисовки?
Что такое рефтова?
Рефоу возникает, когда ширина, высота, макет, отображение или скрытие самого элемента или текстовая структура внутри элемента изменяется, что приводит к восстановлению страницы.Что такое перекраска?
RedRaw возникает, когда ширина, высота, макет, отображение или скрытие самого элемента не изменились, но только стиль появления элемента изменился.
Когда произойдет реис? Когда видимый элемент DOM добавляется или удаляется, положение элемента изменяется, размер элемента меняется, изменяется содержание и когда страница сначала отображается.
Когда произойдет перекрашение?
Перечислите некоторые связанные стили CSS: цвет, фон, размер фонового размера, видимость, каблука
В чем разница между непрозрачностью: 0, видимость: скрыто и отображение: нет?
Opacity = 0, элемент скрыт, но макет страницы не будет изменен.
Видимость = скрыта, элемент скрыт, но макет страницы не будет изменен, но события, связанные с элементом, не будут запускаются.
Display = None скрывает элемент и меняет макет страницы.
CSS препроцессор
МеньшеВ чем разница между названием и альт -альт -<img>?
Обычно, когда мышь скользят по элементу, отображается ALT. Это может улучшить доступность изображений.Что такое встроенные элементы и элементы уровня блока? Какой элемент принадлежит IMG?
Адрес - Адрес Блокировки - Блок -справочный центр - Блок выравнивания центра - список каталогов Div Div - обычно используемый уровень блока, а также основная метка макета CSS DL - Список определений - Форма управления формой - интерактивная форма H1 - заголовок H2 - подзаголовок H3 - Уровень 3 Заголовок H4 - Уровень 4 Заголовок H5 - Уровень 5 заголовок H6 - Уровень 6 заголовок HR - горизонтальная линия сепаратора Isindex - Меню ввода - список меню NofRames - Фреймы Необязательный контент, (отображайте это для браузеров, которые не поддерживают рамки) Блок) Блок) Содержание Noscript - необязательное содержимое сценария (этот контент отображается для браузеров, которые не поддерживают скрипт) OL - Заказанная форма P - Параграф Pre - Formatted Text Table - Таблица UL - Неупомянутый список
A - Anchor Point ABBR - аббревиатура аббревиатура - первая буква B - жирный жирный (не рекомендуется) BDO - BIDI переопределение BIG - Большой шрифт BR - CITE CITE - Справочный код - Код компьютера (требуется при цитировании исходного кода) DFN - определить поле EM - Акцент на шрифте - настройка шрифта (не рекомендуется) I - курсив IMG - ввод изображения - поле ввода KBD - Определить текстовую метку клавиатуры - Метка таблицы Q - Короткая цитата S - подчеркивание (не рекомендуется) SAMP - Определите пример кода компьютера - выбор элемента Small-Small Font Text Span-обычно используется встроенные контейнеры, определяющие блоки в пределах текстового удара-подчеркивают сильные-смелые акценты Sub-sup-sup-SuperScript Textarea-Многостроение текстового ввода TT-Teletype Text u-подчеркивание
IMG является встроенным элементом замены и имеет тот же эффект, что и элемент блока
Разница между Readonly и отключенными в формах
Общие точки: он не позволяет пользователям изменять контент в форме. Не может быть изменен. Набор текстового поля для отключений не может получить фокус 3. Если поле формы отключено, поле не будет отправлено (значение в форме) и сериализовано1. Введите URL в браузере и отображайте его на веб -странице.
Резолюция домена инициирует трехстороннее рукоятку TCP, чтобы установить соединение TCP. Запрашивает ресурсы в HTML -коде.
2. Недостатки печенья
Существует предел максимального количества файлов cookie, сгенерированного в каждом конкретном доменном имени. Обычно это не превышает 4095 байтов.
3. Основные браузеры и ядра
Google Chrome: Webkit/Blink Safari: Webkit IE: Trident Firefox: Gecko Opera: Presto/Webkit/Blink
4. Разница между SessionStorage и LocalStorage
SessionStorage используется для локального хранения данных в сеансе. localStorage используется для постоянного локального хранилища, если данные не будут удалены активно, срок их действия никогда не истечет.
5. Поговорите о понимании спецификаций BFC
BFC - это контекст форматирования блока, то есть форматирование. Эффекты BFC - позволить элементам внутри и снаружи BFC взаимодействовать друг с другом.
6. Пожалуйста, назовите как минимум три способа сокращения времени загрузки страницы.
Минимизируйте повторяющиеся http -запросы на странице.
7. Как оптимизировать производительность веб -сайта?
Для контента уменьшите HTTP -запросы: слияние файлов, спрайты CSS и встроенные изображения. Используйте Gzip для компонентов. Внизу страницы растянуть изображения в HTML.8. РАСПРАВЛЕНИЕ БРУРОВА?
Когда он переходит, нам нужно только хранить данные в памяти, а постоянное хранилище доступно только во время выполнения. и т. д., в HTTP автоматически переносится, верхний предел размера составляет 4K, вы можете установить время истечения срока действия LocalStorage / SessionStorage: долгосрочное закрытие и удаление окна, ограничение размера составляет 4 ~ 5mindexDB Distributed Cache Redis база данных9. Get/post?
get: кэш, длина запроса ограничена, будет сохранена в истории, никакие побочные эффекты (ресурсы не изменены), идентификационное (количество запросов не имеет ничего общего с ресурсами) Сценарий Пост: Безопасность, большие данные, больше типов кодировки10. Проблемы безопасности?
Xss Attack: введите настройка файлов cookie-cookie в злонамеренном коде, чтобы избежать входного контента и выходного контента на странице CSRF: подделка по перекрестным запросам, защита: GET не изменяет данные и не доступен сторонним веб-сайтам. Белый список и не доступен для проверки запроса на веб -сайт третьих сторон.Оптимизация производительности
1. Каковы аспекты оптимизации производительности?
Сжатие и слияние ресурсов, снижение HTTP-запросов, асинхронная загрузка неточного кода, использование кэша браузеров и использование CDN для предварительной разрешения DNS2. Асинхронная нагрузка?
Dynamic Script загрузка deferasync3. Каковы различия в методах загрузки?
Определение выполняется после того, как HTML анализируется.4. Предварительная нагрузка?
Во время разработки вы можете столкнуться с такой ситуацией. Некоторые ресурсы не должны использоваться немедленно, но вы хотите получить их как можно скорее. Предварительная загрузка - это декларативная выборка, которая заставляет браузер запросить ресурсы и не блокирует событие Onload. Предварительная загрузка может в определенной степени сокращать время загрузки первого экрана, потому что некоторые важные файлы, которые не влияют на первый экран, могут быть отложены при загрузке.5. DNS до разрешения?
Резолюция DNS также требует времени, и IP, соответствующий доменному имени, может быть получен заранее через предварительное разрешение. <meta http-equiv = 'x-dns-prefetch-control' content = 'on'> <link rel = "dns-prefetch" href = "// yuchengkai.cn"> Tag не будет включен по умолчанию в Протокол HTTPS предварительно переписывался, поэтому Meta должна быть установлена вручную6. Ленивое исполнение? Эта технология может использоваться для оптимизации первого экрана. Ленивое исполнение требует пробуждения, что, как правило, можно сделать, вызывая таймер или событие.
7. Ленивая нагрузка?
Принцип ленивой загрузки состоит в том, чтобы загрузить только то, что нужно загрузить в нестандартную область (обычно видимую область, но это также может быть областью, которая собирается войти в видимую область). Для изображений сначала установите атрибут SRC тега изображения на изображение заполнителя, поместите реальный ресурс изображения в пользовательский атрибут, а при входе в пользовательскую область замените пользовательский атрибут на атрибут SRC, поэтому изображение будет загружать ресурс , осознавая ленивую загрузку изображения.
Ленивая загрузка может использоваться не только для изображений, но и для других ресурсов. Например, видео начнет играть только после входа в видимую зону и т. Д.
реагировать вопросы интервью
1. Когда использовать государственный менеджер?
В целом, использование пользователя является сложным. Из множества источников. Компонент.2. Каковы характеристики React?
Он использует ** виртуальный DOM ** вместо реального DOM. Это может быть отображено с помощью серверной стороны. Это следует за односторонним потоком данных или привязкой данных3. Перечислите некоторые основные преимущества React?
Он улучшает производительность приложения и может быть легко использовано как на стороне клиента, так и на стороне сервера. Реагировать.4. Что такое JSX?
JSX короткий для JavaScript XML. это файл, используемый React, который использует выразительный синтаксис шаблона, похожий на HTML в JavaScript. Это делает HTML -файлы очень простыми для понимания.此文件能使应用非常可靠，并能够提高其性能例子render() {return(<div><h1> Hello World </h1></div>)}5、说说为什么浏览器无法读取JSX?
浏览器只能处理JavaScript 对象，而不能读取常规JavaScript 对象中的JSX。所以为了使浏览器能够读取JSX，首先，需要用像Babel 这样的JSX 转换器将JSX 文件转换为JavaScript 对象，然后再将其传给浏览器6、你理解“在React 中，一切都是组件”这句话?
组件是React 应用UI 的构建块。这些组件将整个UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响UI 的其余部分7、 React 中render()的目的?
每个React 组件强制要求必须有一个render()。它返回一个React 元素，是原生DOM 组件的表示。如果需要渲染多个HTML 元素，则必须将它们组合在一个封闭标记内，例如<form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果8、什么是Props?
Props 是React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据9、React 中的状态是什么？
状态是React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与Props 不同，它们是可变的，并创建动态和交互式组件。可以通过this.state() 访问它们。10、区分状态和Props?
条件StateProps从父组件中接受初始值YesYes父组件可以改变值NoYes在组件中设置默认值NoYes在组件的内部变化YesNo设置子组件的初始值YesYes在子组件的内部改变NoYes11、如何更新组件的状态?
使用this.setState()更新组件的状态12、React 组件生命周期的阶段是什么?
React 组件的生命周期有三个不同的阶段：初始渲染阶段：这是组件即将开始其生命之旅并进入DOM 的阶段。更新阶段：一旦组件被添加到DOM，它只有在prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从DOM 中删除13、你对React 的refs 有什么了解?
Refs 是React 中引用的简写。它是一个有助于存储对特定的React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对render()返回的特定元素或组件的引用。当需要进行DOM 测量或向组件添加方法时，它们会派上用场列出一些应该使用refs 的情况?需要管理焦点、选择文本或媒体播放时触发式动画与第三方DOM 库集成14、如何模块化React 中的代码?
可以使用export 和import 属性来模块化代码。它们有助于在不同的文件中单独编写组件15、什么是高阶组件HOC?
高阶组件是重用组件逻辑的高级方法，是一种源于React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为HOC 是“纯（Pure）”组件16、你能用HOC 做什么?
HOC 可用于许多任务:用代码重用，逻辑和引导抽象渲染劫持状态抽象和控制Props 控制17、 React 中key 的重要性是什么?
key 用于识别唯一的Virtual DOM 元素及其驱动UI 的相应数据。它们通过回收DOM 中当前所有的元素来帮助React 优化渲染。这些key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能18、MVC 框架的主要问题是什么?
key 用对DOM 操作的代价非常高程序运行缓慢且效率低下内存浪费严重由于循环依赖性，组件模型需要围绕models 和views 进行创建19、请你解释一下Flux? 
20、你对“单一事实来源”有什么理解
Redux 使用“store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在store 中，并且它们从store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。21、列出Redux 的组件?
Redux 由以下组件组成:Action 这是一个用来描述发生了什么事情的对象Reducer 这是一个确定状态将如何变化的地方Store 整个程序的状态/对象树保存在Store 中View 查只显示Store 提供的数据22、 Store 在Redux 中的意义是什么?
store 是一个JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过Reducer 返回一个新状态23、 Redux 有哪些优点?
结果的可预测性可维护性服务器端渲染易于测试-24、 什么是React 路由?
React 路由是一个构建在React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页Web 应用。 React 路由有一个简单的API。25、说说你对React 的渲染原理的理解?
单向数据流。React 是一个MVVM 框架，简单来说是在MVC 的模式下在前端部分拆分出数据层和视图层。单向数据流指的是只能由数据层的变化去影响视图层的变化，而不能反过来（除非双向绑定）数据驱动视图。我们无需关注页面的DOM，只需要关注数据即可渲染过程，生命周期……setState()大部分时候是异步执行的，提升性能。26、React 中三种构建组件的方式?
React.createClass()、ES6 class 和无状态函数。JQuery
说出jQuery中常见的几种函数以及他们的含义是什么? （1）get()取得所有匹配的DOM元素集合； （2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素； （3）append(content)向每个匹配的元素内部追加内容； （4）after(content)在每个匹配的元素之后插入内容； （5）html()/html(var)取得或设置匹配元素的html内容； （6）find(expr)搜索所有与指定表达式匹配的元素； （7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数； （8）empty()删除匹配的元素集合中所有的子节点； （9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法； （10）attr(name)取得第一个匹配元素的属性值。
jQuery 能做什么？ Get the elements of the page; modify the appearance of the page; change the large content of the page; respond to the user's page operations; add dynamic effects to the page; get information from the server without refreshing the page; simplify common javascript tasks .
如何将一个HTML元素添加到DOM树中的？ 可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。
什么是jQuery? jQuer能做什么？ jQuery是一套JavaScript的库，它简化了使用Javascript进行网页特效开发的一些复杂性，提供了对常见任务的自动化和复杂任务的简化
jQuery的作用快速获取文档元素提供漂亮的页面动态效果创建Ajax无刷新网页提供对JavaScript语言的增强增强的事件处理更改网页内容JQuery可以修改网页中的内容,比如更改网页的文本、插入或转网页图像, jQuery简化了原本使用JavaScript代码需要处理的方式。JQuery 的优点1.利用css的选择器提供高速的元素查找行为。 2.提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题。 3.将复杂的代码简化，提供连缀编程模式，大大简化了代码的操作。
以上就是分享一些值得收藏的精选Web前端面试题（附答案）的详细内容，更多请关注本站其它相关文章！