bootg.com »
United States »
Frontend Interview - собеседования по Javascript / Html / Css » Telegram Web
Когда Web Worker автоматически уничтожается без вызова terminate()?
Anonymous Quiz
15%
Никогда
6%
При каждом вызове postMessage()
27%
После выполнения всех операций в worker'e
52%
При перезагрузке страницы или закрытии вкладки
Как добавить слушатель события?
Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.
Почему это нужно?
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.
Как это используется?
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.
Чистый JavaScript
Для добавления слушателя события используется метод
Пример:
В этом примере мы получаем элемент кнопки по её
React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как
Пример:
В этом примере мы определяем функцию
jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.
Пример:
В этом примере мы используем jQuery для добавления обработчика события
Почему это удобно и важно:
- Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.
- Гибкость: Возможность реагировать на различные действия пользователей.
- Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.
👉 @frontendInterview
Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.
Почему это нужно?
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.
Как это используется?
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.
Чистый JavaScript
Для добавления слушателя события используется метод
addEventListener.Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button was clicked!');
});
</script>
</body>
</html>
В этом примере мы получаем элемент кнопки по её
id и добавляем слушатель события click, который вызывает функцию, отображающую сообщение.React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как
onClick, onChange и т.д.Пример:
import React from 'react';
function App() {
const handleClick = () => {
alert('Button was clicked!');
};
return (
<div>
<button onClick={handleClick}>Click me</button>
</div>
);
}
export default App;
В этом примере мы определяем функцию
handleClick и передаем её в атрибут onClick кнопки. Когда пользователь нажимает на кнопку, вызывается функция handleClick.jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Click me</button>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
alert('Button was clicked!');
});
});
</script>
</body>
</html>
В этом примере мы используем jQuery для добавления обработчика события
click к кнопке.Почему это удобно и важно:
- Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.
- Гибкость: Возможность реагировать на различные действия пользователей.
- Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.
👉 @frontendInterview
Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL
Книга начинается с основных концепций и строительных блоков, используемых в Three.js, и помогает вам подробно изучить эти важные темы с помощью обширных примеров и образцов кода. Вы узнаете, как создавать реалистично выглядящие 3D-объекты с помощью текстур и материалов и как загружать модели из внешнего источника.
👉 @frontendInterview
Книга начинается с основных концепций и строительных блоков, используемых в Three.js, и помогает вам подробно изучить эти важные темы с помощью обширных примеров и образцов кода. Вы узнаете, как создавать реалистично выглядящие 3D-объекты с помощью текстур и материалов и как загружать модели из внешнего источника.
👉 @frontendInterview
Это треугольник?
Реализуйте функцию, принимающую 3 целых значения a, b, c. Функция должна возвращать true, если треугольник может быть построен со сторонами заданной длины, и false в любом другом случае.
Пример:
👉 @frontendInterview
Реализуйте функцию, принимающую 3 целых значения a, b, c. Функция должна возвращать true, если треугольник может быть построен со сторонами заданной длины, и false в любом другом случае.
Пример:
isTriangle(1,2,2) = true👉 @frontendInterview
В чём разница между макро и микро задачами ?
Существует понятие Event Loop (цикл событий), который отвечает за выполнение кода, сбор событий и обработку сообщений. В его контексте важную роль играют понятия макро- и микрозадач. Эти типы задач помогают понять, как обрабатываются асинхронные операции.
Макрозадачи (Macro-tasks):
Это задачи, которые управляются циклом событий и выполняются одна за другой. Каждая такая задача выполняется в отдельном цикле, после чего выполняются все доступные микрозадачи.
Примеры:
-
-
-
- Запросы к серверу через
-
Микрозадачи (Micro-tasks):
Также управляются циклом событий, но они имеют более высокий приоритет, чем макрозадачи. Они выполняются сразу после завершения текущей исполняемой задачи и перед тем, как Event Loop перейдет к следующей макрозадаче. Это означает, что все они в очереди будут выполнены до начала выполнения следующей макрозадачи.
Примеры:
-
-
-
Различия между макро и микрозадачами:
- Приоритет: Микрозадачи имеют более высокий приоритет по сравнению с макрозадачами. Все микрозадачи в очереди будут выполнены до начала следующего цикла Event Loop и до того, как будет взята новая макрозадача.
- Время выполнения: Микрозадачи выполняются непосредственно после текущей задачи и перед тем, как браузер получит возможность перерисовать страницу или обработать другие события, такие как ввод пользователя. Макрозадачи же разделяются циклами Event Loop.
- Источники: Макро- и микрозадачи поступают из разных источников. Например, таймеры (
👉 @frontendInterview
Существует понятие Event Loop (цикл событий), который отвечает за выполнение кода, сбор событий и обработку сообщений. В его контексте важную роль играют понятия макро- и микрозадач. Эти типы задач помогают понять, как обрабатываются асинхронные операции.
Макрозадачи (Macro-tasks):
Это задачи, которые управляются циклом событий и выполняются одна за другой. Каждая такая задача выполняется в отдельном цикле, после чего выполняются все доступные микрозадачи.
Примеры:
-
setTimeout-
setInterval-
setImmediate (Node.js)- Запросы к серверу через
XMLHttpRequest или fetch (не сам запрос, а обработка результата)-
I/O операции (в Node.js)Микрозадачи (Micro-tasks):
Также управляются циклом событий, но они имеют более высокий приоритет, чем макрозадачи. Они выполняются сразу после завершения текущей исполняемой задачи и перед тем, как Event Loop перейдет к следующей макрозадаче. Это означает, что все они в очереди будут выполнены до начала выполнения следующей макрозадачи.
Примеры:
-
Promise.then/catch/finally-
queueMicrotask-
MutationObserverРазличия между макро и микрозадачами:
- Приоритет: Микрозадачи имеют более высокий приоритет по сравнению с макрозадачами. Все микрозадачи в очереди будут выполнены до начала следующего цикла Event Loop и до того, как будет взята новая макрозадача.
- Время выполнения: Микрозадачи выполняются непосредственно после текущей задачи и перед тем, как браузер получит возможность перерисовать страницу или обработать другие события, такие как ввод пользователя. Макрозадачи же разделяются циклами Event Loop.
- Источники: Макро- и микрозадачи поступают из разных источников. Например, таймеры (
setTimeout, setInterval) и I/O операции генерируют макрозадачи, в то время как обработчики промисов (then, catch, finally) создают микрозадачи.👉 @frontendInterview
Какой оператор JavaScript используется для проверки наличия свойства в объекте?
Anonymous Quiz
88%
in
7%
if
4%
for
2%
while
overscroll-behavior
Допустим, есть два вложенных друг в друга элемента. У обоих есть прокрутка. Если пользователь пролистает дочерний элемент, то при достижении его границы прокрутка перейдет на родительский элемент. Подобное поведение называется цепочкой прокрутки.
В мобильных браузерах при достижении границы прокрутки контент элемента немного оттягивается в направлении скролла, создавая эффект отскока.
Изменить поведение прокрутки в обоих примерах может свойство overscroll-behavior. С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю, а страница не прыгала при достижении границ.
Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно применится к обеим осям. Можно использовать самостоятельные CSS-свойства overscroll-behavior-x и overscroll-behavior-y для отдельных осей или их логические эквиваленты overscroll-behavior-inline, overscroll-behavior-block.
Значения:
- auto — значение по умолчанию. При достижении границы элемента создаётся цепочка прокрутки либо эффект отскока в зависимости от устройства;
- contain — предотвращает создание цепочек прокрутки, но сохраняет эффект отскока;
- none — отключает создание цепочек прокрутки и эффект отскока.
👉 @frontendInterview
Допустим, есть два вложенных друг в друга элемента. У обоих есть прокрутка. Если пользователь пролистает дочерний элемент, то при достижении его границы прокрутка перейдет на родительский элемент. Подобное поведение называется цепочкой прокрутки.
В мобильных браузерах при достижении границы прокрутки контент элемента немного оттягивается в направлении скролла, создавая эффект отскока.
Изменить поведение прокрутки в обоих примерах может свойство overscroll-behavior. С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю, а страница не прыгала при достижении границ.
Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно применится к обеим осям. Можно использовать самостоятельные CSS-свойства overscroll-behavior-x и overscroll-behavior-y для отдельных осей или их логические эквиваленты overscroll-behavior-inline, overscroll-behavior-block.
Значения:
- auto — значение по умолчанию. При достижении границы элемента создаётся цепочка прокрутки либо эффект отскока в зависимости от устройства;
- contain — предотвращает создание цепочек прокрутки, но сохраняет эффект отскока;
- none — отключает создание цепочек прокрутки и эффект отскока.
👉 @frontendInterview
Idle, Click Me Load More, Error, Success: как устроить надёжный UI
При разработке фронтенда мы часто ограничиваемся тремя состояниями UI‑запроса: loading, error, data (или success). Но это не всегда достаточно — особенно когда дело доходит до тонких UX‑деталей, предотвращения гонок запросов и адекватного управления отменой при размонтировании компонентов. В статье рассмотрим, почему добавление состояния idle делает систему более надёжной, как реализовать конечный автомат для управления статусами, как отменять fetch‑запросы и оптимизировать перерисовки.
👉 @frontendInterview
При разработке фронтенда мы часто ограничиваемся тремя состояниями UI‑запроса: loading, error, data (или success). Но это не всегда достаточно — особенно когда дело доходит до тонких UX‑деталей, предотвращения гонок запросов и адекватного управления отменой при размонтировании компонентов. В статье рассмотрим, почему добавление состояния idle делает систему более надёжной, как реализовать конечный автомат для управления статусами, как отменять fetch‑запросы и оптимизировать перерисовки.
👉 @frontendInterview
Для каких элементов работает свойство z-index?
Anonymous Quiz
3%
Только для элементов с position: static
67%
Для элементов с position: relative, absolute, fixed или sticky
27%
Для всех элементов, независимо от position
3%
Только для элементов с display: flex
Что такое state manager и с какими приходилось работать?
Это инструмент или библиотека, который помогает управлять состоянием приложения. Состояние приложения может включать различные данные: от пользовательского ввода и временных данных до кэшированных страниц и аутентифицированного пользователя. Менеджер состояний помогает централизованно управлять этими данными, облегчая их передачу между компонентами, упрощая тестирование и повышая производительность приложения.
Зачем нужен менеджер состояний?
- Упрощение доступа к данным: Предоставляют унифицированный интерфейс для доступа к данным из любого места в приложении.
- Повышение производительности: Эффективное управление состоянием может помочь избежать ненужных обновлений интерфейса и повысить производительность приложения.
- Улучшение масштабируемости: Упрощает масштабирование приложения и добавление новых функций.
- Упрощение отладки и тестирования: Делает приложение более предсказуемым, что упрощает отладку и тестирование.
Примеры:
1. Redux: Одна из самых популярных библиотек для управления состоянием в React-приложениях. Она предлагает однонаправленный поток данных, что делает изменения состояния предсказуемыми.
2. Vuex: Библиотека для управления состоянием в Vue.js. Подобно Redux, она предлагает централизованное хранилище для всех компонентов приложения.
3. MobX: Альтернатива Redux, которая использует наблюдаемые объекты для управления состоянием. Она предлагает более гибкий подход к управлению состоянием, автоматически отслеживая изменения.
4. Context API и Hooks в React: Начиная с версии 16.8, React предоставляет встроенный механизм для управления состоянием без необходимости добавления внешних библиотек. Хотя для небольших или средних проектов это может быть достаточно, в больших приложениях может потребоваться более мощное решение вроде Redux.
👉 @frontendInterview
Это инструмент или библиотека, который помогает управлять состоянием приложения. Состояние приложения может включать различные данные: от пользовательского ввода и временных данных до кэшированных страниц и аутентифицированного пользователя. Менеджер состояний помогает централизованно управлять этими данными, облегчая их передачу между компонентами, упрощая тестирование и повышая производительность приложения.
Зачем нужен менеджер состояний?
- Упрощение доступа к данным: Предоставляют унифицированный интерфейс для доступа к данным из любого места в приложении.
- Повышение производительности: Эффективное управление состоянием может помочь избежать ненужных обновлений интерфейса и повысить производительность приложения.
- Улучшение масштабируемости: Упрощает масштабирование приложения и добавление новых функций.
- Упрощение отладки и тестирования: Делает приложение более предсказуемым, что упрощает отладку и тестирование.
Примеры:
1. Redux: Одна из самых популярных библиотек для управления состоянием в React-приложениях. Она предлагает однонаправленный поток данных, что делает изменения состояния предсказуемыми.
2. Vuex: Библиотека для управления состоянием в Vue.js. Подобно Redux, она предлагает централизованное хранилище для всех компонентов приложения.
3. MobX: Альтернатива Redux, которая использует наблюдаемые объекты для управления состоянием. Она предлагает более гибкий подход к управлению состоянием, автоматически отслеживая изменения.
4. Context API и Hooks в React: Начиная с версии 16.8, React предоставляет встроенный механизм для управления состоянием без необходимости добавления внешних библиотек. Хотя для небольших или средних проектов это может быть достаточно, в больших приложениях может потребоваться более мощное решение вроде Redux.
👉 @frontendInterview
javascript. Визуальные редакторы
Подавляющее большинство ныне действующих сайтов сделано при помощи CMS. А такие системы невозможно представить без визуальных редакторов страниц. WYSIWYG - редакторы позволяют администратору управлять содержимым ресурса, не будучи знакомым даже с азами программирования. Многие разработчики используют не готовые CMS, а пишут собственные. Данная книга призвана помочь им в этом непростом деле. На ее страницах описаны четыре WYSIWYG-редактора — на разный вкус и для разных задач. Все системы являются оригинальными и не содержат каких-либо заимствований кода. Функциональные возможности приведенных разработок имеют исчерпывающие описания и разъяснения.
👉 @frontendInterview
Подавляющее большинство ныне действующих сайтов сделано при помощи CMS. А такие системы невозможно представить без визуальных редакторов страниц. WYSIWYG - редакторы позволяют администратору управлять содержимым ресурса, не будучи знакомым даже с азами программирования. Многие разработчики используют не готовые CMS, а пишут собственные. Данная книга призвана помочь им в этом непростом деле. На ее страницах описаны четыре WYSIWYG-редактора — на разный вкус и для разных задач. Все системы являются оригинальными и не содержат каких-либо заимствований кода. Функциональные возможности приведенных разработок имеют исчерпывающие описания и разъяснения.
👉 @frontendInterview
WeIrD StRiNg CaSe
Напишите функцию, которая принимает строку и возвращает ту же самую строку со всеми четными символами в каждом слове, выделенными верхним регистром, и всеми нечетными символами в каждом слове, выделенными нижним регистром. Индексация, как уже объяснялось, основана на нулях, поэтому нулевой индекс четный, следовательно, этот символ должен быть в верхнем регистре, и вам нужно начать сначала для каждого слова.
Переданная строка будет состоять только из алфавитных символов и пробелов(' '). Пробелы будут присутствовать только при наличии нескольких слов. Слова будут разделены одним пробелом(' ').
Примеры:
👉 @frontendInterview
Напишите функцию, которая принимает строку и возвращает ту же самую строку со всеми четными символами в каждом слове, выделенными верхним регистром, и всеми нечетными символами в каждом слове, выделенными нижним регистром. Индексация, как уже объяснялось, основана на нулях, поэтому нулевой индекс четный, следовательно, этот символ должен быть в верхнем регистре, и вам нужно начать сначала для каждого слова.
Переданная строка будет состоять только из алфавитных символов и пробелов(' '). Пробелы будут присутствовать только при наличии нескольких слов. Слова будут разделены одним пробелом(' ').
Примеры:
"String" => "StRiNg"
"Weird string case" => "WeIrD StRiNg CaSe"
👉 @frontendInterview
Чем тип отличается от интерфейса?
Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.
Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):
Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.
Интерфейсы могут расширять другие интерфейсы:
Ключевые различия
Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова
Типы могут определять объединения (например,
Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке.
Типы могут представлять примитивные типы (например,
Примеры
Тип с объединением
Объединение интерфейсов
Расширение интерфейсов
Тип с пересечением
👉 @frontendInterview
Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.
type User = {
name: string;
age: number;
};Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):
type ID = string | number;
type Employee = {
id: ID;
department: string;
};
type Manager = User & Employee & {
employees: User[];
};
Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.
interface User {
name: string;
age: number;
}
interface Employee extends User {
department: string;
}Интерфейсы могут расширять другие интерфейсы:
interface Manager extends Employee {
employees: User[];
}Ключевые различия
Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова
extends. Типы могут использовать пересечения (&) для комбинирования других типов.Типы могут определять объединения (например,
string | number), что позволяет описывать переменные, которые могут быть одного из нескольких типов. Интерфейсы не поддерживают объединения.Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке.
Типы могут представлять примитивные типы (например,
string, number), а также сложные типы и функции. Интерфейсы могут описывать только структуры объектов.Примеры
Тип с объединением
type ID = string | number;
const userId: ID = 123;
const userName: ID = "abc";
Объединение интерфейсов
interface User {
name: string;
}
interface User {
age: number;
}
const user: User = {
name: "John",
age: 30
};Расширение интерфейсов
interface User {
name: string;
age: number;
}
interface Employee extends User {
department: string;
}
const employee: Employee = {
name: "Alice",
age: 25,
department: "HR"
};Тип с пересечением
type User = {
name: string;
age: number;
};
type Employee = User & {
department: string;
};
const employee: Employee = {
name: "Bob",
age: 35,
department: "IT"
};👉 @frontendInterview
Как ускорить скорость загрузки сайта? Гайд по оптимизации
Скорость загрузки страниц — один из ключевых факторов, влияющих на успех сайта в интернете. Она влияет на пользовательский опыт, конверсию и SEO. Google учло это уже в 2010 году, сделав скорость загрузки фактором ранжирования. В 2018 году метрики были расширены, а в 2020 — дополнены новыми обновлениями.
На сегодняшний день проверка скорости загрузки сайта стала обязательной практикой для всех, кто стремится улучшить производительность своего ресурса. Существует множество инструментов для проверки скорости сайта, которые помогают определить текущие показатели и выявить факторы, влияющие на скорость сайта. Однако одного измерения недостаточно — важно понимать, как ускорить загрузку страницы и какие методы оптимизации наиболее эффективны.
В этой статье разберём, как оценить скорость загрузки страниц, какие показатели важны сегодня и что делать, чтобы ускорить сайт.
👉 @frontendInterview
Скорость загрузки страниц — один из ключевых факторов, влияющих на успех сайта в интернете. Она влияет на пользовательский опыт, конверсию и SEO. Google учло это уже в 2010 году, сделав скорость загрузки фактором ранжирования. В 2018 году метрики были расширены, а в 2020 — дополнены новыми обновлениями.
На сегодняшний день проверка скорости загрузки сайта стала обязательной практикой для всех, кто стремится улучшить производительность своего ресурса. Существует множество инструментов для проверки скорости сайта, которые помогают определить текущие показатели и выявить факторы, влияющие на скорость сайта. Однако одного измерения недостаточно — важно понимать, как ускорить загрузку страницы и какие методы оптимизации наиболее эффективны.
В этой статье разберём, как оценить скорость загрузки страниц, какие показатели важны сегодня и что делать, чтобы ускорить сайт.
👉 @frontendInterview