this является ключевым словом, которое используется в функциях и методах и указывает на объект, в контексте которого они были вызваны.Его значение зависит от того, как именно вызывается функция, и может изменяться в различных контекстах выполнения.
В глобальном контексте (вне каких-либо функций) он ссылается на глобальный объект. В браузере глобальным объектом является window, в Node.js — global.
console.log(this === window); // в браузере вернет true
В функциях, вызванных обычным способом (не как методы объекта), он ссылается на глобальный объект. В строгом режиме (
"use strict") this будет undefined, если функция вызвана не как метод объекта. function show() {
console.log(this === window); // true в браузере в нестрогом режиме
console.log(this); // undefined в строгом режиме
}
show();Когда функция вызывается как метод объекта, он ссылается на объект, частью которого является метод.
const obj = {
myMethod() {
console.log(this);
}
};
obj.myMethod(); // this ссылается на objВ функции-конструкторе, вызванной с
new, он ссылается на вновь созданный объект.function Person(name) {
this.name = name;
}
const person = new Person("Alice");
console.log(person.name); // AliceСтрелочные функции не имеют собственного контекста, вместо этого они захватывают его из внешнего лексического окружения.
const obj = {
method: function() {
const arrowFunc = () => console.log(this);
arrowFunc(); // this ссылается на obj
}
};
obj.method();С помощью методов
call, apply и bind можно явно указать контекст для функции.function show() {
console.log(this);
}
const obj = {name: "Explicit context"};
show.call(obj); // this в show() ссылается на objВажность понимания this
Понимание механизма его работы важно для эффективного использования, особенно при работе с объектно-ориентированным кодом и при создании сложных веб-приложений, где часто требуется контролировать контекст выполнения функций и методов.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤7
Anonymous Quiz
15%
document.getElement()
75%
document.querySelector()
1%
document.findAll()
9%
document.getElementById()
👍10
React — это библиотека JavaScript для построения пользовательских интерфейсов, разработанная Facebook. React был создан для решения ряда проблем, с которыми сталкивались разработчики веб-приложений, особенно в крупных и динамических проектах. Давайте рассмотрим ключевые цели и преимущества, которые мотивировали создание React:
// Определение простого компонента
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Использование компонента
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
</div>
);
}
export default App;
React автоматически обрабатывает обновления виртуального DOM, что позволяет разработчикам сосредоточиться на логике и интерфейсе, а не на оптимизации работы с DOM.
// Компонент, который обновляет состояние и интерфейс
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;
// Компонент родитель
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: 'Initial Value' };
}
handleChange = (newValue) => {
this.setState({ value: newValue });
};
render() {
return (
<div>
<ChildComponent value={this.state.value} onChange={this.handleChange} />
</div>
);
}
}
// Компонент потомок
function ChildComponent(props) {
return (
<div>
<input
type="text"
value={props.value}
onChange={(e) => props.onChange(e.target.value)}
/>
</div>
);
}
export default ParentComponent;
React был создан для упрощения разработки сложных и динамических веб-приложений. Его компонентный подход, использование виртуального DOM, однонаправленный поток данных и поддержка мощной экосистемы инструментов делают его мощным и гибким инструментом для создания пользовательских интерфейсов.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤6
Anonymous Quiz
17%
<ul>
73%
<ol>
8%
<li>
1%
<dl>
👍10
В React отрисовка компонентов по условию осуществляется с помощью условных операторов JavaScript внутри JSX. Это позволяет отображать компоненты или элементы только тогда, когда выполняется определенное условие. Рассмотрим несколько способов условной отрисовки компонентов в React.
Тернарный оператор
? : позволяет компактно проверять условие и отрисовывать один из двух компонентов.import React from 'react';
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
</div>
);
};
export default MyComponent;
Можно использовать логический оператор
&& для отрисовки компонента только тогда, когда условие истинно.import React from 'react';
const MyComponent = ({ showDetails }) => {
return (
<div>
<h1>Item</h1>
{showDetails && <p>Here are the details...</p>}
</div>
);
};
export default MyComponent;
Для более сложной логики условного рендеринга можно использовать обычные операторы
if...else внутри функции компонента.import React from 'react';
const MyComponent = ({ status }) => {
if (status === 'loading') {
return <p>Loading...</p>;
} else if (status === 'error') {
return <p>Error occurred!</p>;
} else if (status === 'success') {
return <p>Data loaded successfully!</p>;
} else {
return null; // Возвращаем null, чтобы не отрисовывать ничего
}
};
export default MyComponent;
Можно вынести условную логику рендеринга в отдельную функцию для лучшей читаемости и повторного использования.
import React from 'react';
const renderContent = (status) => {
switch (status) {
case 'loading':
return <p>Loading...</p>;
case 'error':
return <p>Error occurred!</p>;
case 'success':
return <p>Data loaded successfully!</p>;
default:
return null;
}
};
const MyComponent = ({ status }) => {
return (
<div>
{renderContent(status)}
</div>
);
};
export default MyComponent;
Можно использовать IIFE (Immediately Invoked Function Expression) для выполнения более сложной логики рендеринга внутри JSX.
import React from 'react';
const MyComponent = ({ isLoggedIn, userName }) => {
return (
<div>
{(() => {
if (isLoggedIn) {
return <p>Welcome back, {userName}!</p>;
} else {
return <p>Please log in.</p>;
}
})()}
</div>
);
};
export default MyComponent;
Условная отрисовка компонентов в React может быть выполнена различными способами, в зависимости от сложности логики и предпочтений:
Короче говоря: Для условной отрисовки компонентов в React используйте тернарный оператор, логическое И, if...else, функции или IIFE. Выбор метода зависит от сложности условий и структуры кода.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30❤2
Anonymous Quiz
65%
background-color
24%
background-image
3%
border-style
8%
filter
🤯23👍5😁4👀3🎉2
С появлением хуков (hooks) в React стало возможным использовать функциональные компоненты вместо классовых для выполнения задач, которые ранее могли быть реализованы только в классовых компонентах. Благодаря хукам, большинство классовых компонентов могут быть заменены функциональными компонентами. Рассмотрим, какие классовые компоненты становятся ненужными при использовании хуков и как они могут быть преобразованы.
Классовый компонент:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
Функциональный компонент с `useState`:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
componentDidMount, componentDidUpdate и componentWillUnmount.Классовый компонент:
class DataFetcher extends React.Component {
constructor(props) {
super(props);
this.state = { data: null };
}
componentDidMount() {
fetchData().then(data => {
this.setState({ data });
});
}
render() {
return <div>Data: {this.state.data}</div>;
}
}
Функциональный компонент с `useEffect`:
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetchData().then(data => {
setData(data);
});
}, []); // Пустой массив означает, что эффект выполняется только при монтировании
return <div>Data: {data}</div>;
}
contextType или Context.Consumer.Классовый компонент:
const MyContext = React.createContext();
class MyComponent extends React.Component {
render() {
return (
<MyContext.Consumer>
{value => <div>{value}</div>}
</MyContext.Consumer>
);
}
}
Функциональный компонент с `useContext`:
import React, { useContext } from 'react';
const MyContext = React.createContext();
function MyComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}
useState для сложных состояний и логики обновления.С введением хуков в React большинство классовых компонентов становятся ненужными, так как их функциональность может быть реализована с помощью функциональных компонентов и хуков. Это упрощает код, улучшает читаемость и поддержку, а также предоставляет более гибкие возможности для управления состоянием и жизненным циклом компонентов.
Коротко: Благодаря хукам, такие как
useState, useEffect и useContext, большинство классовых компонентов в React могут быть заменены функциональными компонентами, что упрощает и улучшает код.Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🤔3❤1
Anonymous Quiz
11%
href
73%
src
8%
type
8%
rel
👍7👀6🎉3
В методе
render (или в теле функционального компонента) в React не следует писать код, который выполняет побочные эффекты или вызывает ресурсоёмкие операции. Метод render должен быть чистым и идемпотентным, что означает, что его выполнение не должно изменять состояние компонента или вызывать другие побочные эффекты. Вот несколько примеров того, чего следует избегать в методе render:Побочные эффекты включают операции, которые изменяют состояние, делают запросы к серверу, подписываются на события или манипулируют DOM напрямую. Для этих целей следует использовать хуки, такие как
useEffect, или методы жизненного цикла классовых компонентов, такие как componentDidMount и componentDidUpdate.class MyComponent extends React.Component {
render() {
// Не делайте запросы в render
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
this.setState({ data });
});
return <div>Rendering...</div>;
}
}class MyComponent extends React.Component {
componentDidMount() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
this.setState({ data });
});
}
render() {
return <div>Rendering...</div>;
}
}Изменение состояния компонента внутри метода
render приведет к бесконечному циклу рендеринга.class MyComponent extends React.Component {
render() {
// Не вызывайте setState в render
this.setState({ someState: 'newValue' });
return <div>Rendering...</div>;
}
}class MyComponent extends React.Component {
someMethod() {
this.setState({ someState: 'newValue' });
}
render() {
return <div onClick={() => this.someMethod()}>Rendering...</div>;
}
}Метод
render должен быть быстрым и легким, чтобы поддерживать высокую производительность. Дорогостоящие вычисления могут замедлить рендеринг.class MyComponent extends React.Component {
render() {
// Избегайте долгих вычислений в render
let result = 0;
for (let i = 0; i < 1000000000; i++) {
result += i;
}
return <div>Result: {result}</div>;
}
}class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { result: this.expensiveCalculation() };
}
expensiveCalculation() {
let result = 0;
for (let i = 0; i < 1000000000; i++) {
result += i;
}
return result;
}
render() {
return <div>Result: {this.state.result}</div>;
}
}React управляет DOM за вас, поэтому вам не нужно и не следует манипулировать DOM напрямую в методе
render. Вместо этого используйте состояние и пропсы для управления рендерингом.class MyComponent extends React.Component {
render() {
// Не манипулируйте DOM напрямую в render
document.getElementById('some-id').textContent = 'New Text';
return <div>Rendering...</div>;
}
}class MyComponent extends React.Component {
render() {
return <div id="some-id">New Text</div>;
}
}Метод
render должен быть чистым и идемпотентным. Это означает, что он должен только возвращать JSX для рендеринга и не выполнять побочные эффекты, такие как изменения состояния, запросы к серверу, дорогостоящие вычисления или манипуляции с DOM. Для этих целей следует использовать хуки (например, useEffect) или методы жизненного цикла классовых компонентов.Please open Telegram to view this post
VIEW IN TELEGRAM
❤11👍6🤔1
Anonymous Quiz
1%
<div>
2%
<span>
3%
<header>
94%
<nav>
👍9🤯3❤1
Библиотека React Context (
React.createContext) предоставляет способ передачи данных через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне. Она полезна для управления состоянием, которое должно быть доступно во многих частях приложения, не пропуская его через каждый уровень компонентов.import React from 'react';
// Создание контекста с дефолтным значением
const ThemeContext = React.createContext('light');
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => <button className={theme}>Themed Button</button>}
</ThemeContext.Consumer>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react';
const UserContext = React.createContext(null);
import React, { useContext } from 'react';
function App() {
const user = { name: 'Alice', loggedIn: true };
return (
<UserContext.Provider value={user}>
<UserProfile />
</UserContext.Provider>
);
}
function UserProfile() {
const user = useContext(UserContext);
return (
<div>
{user ? (
<p>Welcome, {user.name}!</p>
) : (
<p>Please log in.</p>
)}
</div>
);
}React Context предоставляет мощный инструмент для управления состоянием и данными, которые должны быть доступны во многих частях приложения, без необходимости пропускать их через каждый уровень компонентов. Это упрощает управление глобальным состоянием и улучшает структуру и читаемость кода.
Коротко: Библиотека React Context позволяет передавать данные через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне, что упрощает управление глобальным состоянием и улучшает читаемость кода.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤2
Anonymous Quiz
7%
text-shadow
78%
box-shadow
8%
border-shadow
7%
shadow
👍10❤3
В React
ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.Установка фокуса на элемент:
import React, { useRef, useEffect } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// Установить фокус на текстовое поле
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Установить фокус</button>
</div>
);
}
export default TextInputWithFocusButton;Измерение элемента:
import React, { useRef, useEffect, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (divRef.current) {
const { width, height } = divRef.current.getBoundingClientRect();
setDimensions({ width, height });
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
Измеряемый элемент
</div>
<p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
</div>
);
}
export default MeasureDiv;Доступ к методам компонента:
import React, { Component } from 'react';
class CustomComponent extends Component {
customMethod() {
console.log('Метод компонента вызван');
}
render() {
return <div>Custom Component</div>;
}
}
class ParentComponent extends Component {
constructor(props) {
super(props);
this.customComponentRef = React.createRef();
}
handleClick = () => {
this.customComponentRef.current.customMethod();
};
render() {
return (
<div>
<CustomComponent ref={this.customComponentRef} />
<button onClick={this.handleClick}>Вызвать метод компонента</button>
</div>
);
}
}
export default ParentComponent;ref следует использовать для случаев, которые не могут быть решены этим способом.ref в React предоставляет способ прямого доступа к DOM-элементам или компонентам. Он полезен для манипуляции с элементами, интеграции со сторонними библиотеками и сохранения информации вне состояния компонента. Тем не менее, ref следует использовать с осторожностью, чтобы не нарушить декларативный подход React.Коротко:
ref в React используется для доступа к DOM-элементам или компонентам напрямую, что позволяет выполнять операции, которые не могут быть выполнены через декларативный подход React.Please open Telegram to view this post
VIEW IN TELEGRAM
👍16❤1🔥1🤯1
Anonymous Quiz
43%
<section>
26%
<article>
13%
<aside>
18%
<div>
🤔39👍8🤯6👀1
Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода. Вот основные места, где это обычно делается, и примеры для каждого из них:
Запросы к серверу часто выполняются непосредственно в компонентах. Для этого можно использовать хуки или методы жизненного цикла классовых компонентов.
useEffect:
useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
export default DataFetchingComponent;componentDidMount:
Метод
componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.import React, { Component } from 'react';
class DataFetchingComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
this.setState({ data });
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
render() {
const { data } = this.state;
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
}
export default DataFetchingComponent;Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым.
service.js:
export async function fetchData() {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
}DataFetchingComponent.js:
import React, { useState, useEffect } from 'react';
import { fetchData } from './service';
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetchData()
.then(data => setData(data))
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
export default DataFetchingComponent;Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX.
Запросы к серверу можно писать в различных частях вашего кода в зависимости от архитектуры приложения и используемых технологий. Важно, чтобы запросы выполнялись в логически обоснованных местах, а их логика была хорошо инкапсулирована и легко тестируема.
Запросы к серверу пишут в коде клиента или сервера, в зависимости от архитектуры приложения. Важно делать это в логически обоснованных местах и обрабатывать возможные ошибки.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤2😁2
Anonymous Quiz
14%
defer
82%
async
3%
src
1%
type
👍9🤔5
Какие знаешь и использовал способы оптимизации ?
Спросят с вероятностью 7%
Оптимизация веб-приложений — это комплекс мероприятий, направленных на улучшение производительности и пользовательского опыта. Рассмотрим основные способы оптимизации, которые можно использовать на различных этапах разработки фронтенда.
1️⃣Оптимизация производительности загрузки
1️⃣.1️⃣Минификация и сжатие
✅Минификация: Удаление лишних пробелов, комментариев и сокращение имен переменных в JavaScript, CSS и HTML.
✅Инструменты: Terser (для JavaScript), cssnano (для CSS), HTMLMinifier (для HTML).
✅Сжатие: Использование gzip или Brotli для сжатия файлов перед отправкой их клиенту.
✅Инструменты: Поддержка встроена в большинство серверов (NGINX, Apache) и CDN.
1️⃣.2️⃣Бандлинг и код-сплиттинг
✅Бандлинг: Объединение множества файлов в один, чтобы уменьшить количество HTTP-запросов.
✅Инструменты: Webpack, Rollup, Parcel.
✅Код-сплиттинг: Разделение кода на более мелкие части, которые загружаются по мере необходимости.
✅Инструменты: Webpack Dynamic Imports, React.lazy, Vue Router lazy loading.
1️⃣.3️⃣Оптимизация изображений
✅Сжатие изображений: Уменьшение размера изображений без значительной потери качества.
✅Инструменты: ImageOptim, TinyPNG, Squoosh.
✅Использование современных форматов: WebP, AVIF.
✅Инструменты: Convertio, встроенные конвертеры в редакторах изображений.
1️⃣.4️⃣Lazy Loading
✅Отложенная загрузка: Загрузка изображений и других ресурсов только по мере их необходимости (например, когда они попадают в видимую область).
✅Инструменты: Intersection Observer API,
2️⃣Оптимизация производительности рендеринга
2️⃣.1️⃣ Виртуальный скроллинг
✅Использование виртуальных списков: Отрисовка только видимых элементов списка, что снижает нагрузку на рендеринг.
✅Инструменты: react-window, react-virtualized, Vue Virtual Scroll List.
2️⃣.2️⃣Избегание ненужных перерисовок
✅Мемоизация: Использование
✅Инструменты: React.iss.onemo, useMemo, PureComponent.
2️⃣.3️⃣Оптимизация CSS
✅Удаление неиспользуемого CSS: Использование инструментов для удаления неиспользуемых стилей.
✅Инструменты: PurgeCSS, UnCSS.
✅Использование CSS-сеток: Применение Flexbox и CSS Grid для оптимизации макетов.
✅Инструменты: CSS Grid, Flexbox.
3️⃣Улучшение пользовательского опыта (UX)
3️⃣.1️⃣Оптимизация времени до интерактивности (Time to Interactive)
✅Preloading: Предварительная загрузка критических ресурсов.
✅Инструменты:
Critical CSS: Встраивание критических CSS в
✅Инструменты: critters, critical.
3️⃣.2️⃣ Progressive Web App (PWA)
✅Кэширование и оффлайн-работа: Использование Service Workers для кэширования ресурсов и обеспечения оффлайн-работы.
✅Инструменты: Workbox, встроенные API браузеров.
4️⃣Улучшение производительности JavaScript
4️⃣.1️⃣Оптимизация использования памяти
✅Избегание утечек памяти: Использование правильных паттернов для управления памятью и очистки ненужных объектов.
✅Инструменты: DevTools профилировщики, ESLint плагины для анализа кода.
4️⃣.2️⃣ Асинхронные операции
✅Использование асинхронного кода: Применение
✅Инструменты: API браузеров, библиотеки (например, Axios).
Для оптимизации веб-приложений используются методы минимизации и сжатия ресурсов, бандлинг и код-сплиттинг, оптимизация изображений и CSS, lazy loading, виртуальный скроллинг, оптимизация JavaScript и данных, а также улучшение времени до интерактивности и внедрение PWA. Эти подходы помогают улучшить производительность и пользовательский опыт.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Оптимизация веб-приложений — это комплекс мероприятий, направленных на улучшение производительности и пользовательского опыта. Рассмотрим основные способы оптимизации, которые можно использовать на различных этапах разработки фронтенда.
1️⃣Оптимизация производительности загрузки
1️⃣.1️⃣Минификация и сжатие
✅Минификация: Удаление лишних пробелов, комментариев и сокращение имен переменных в JavaScript, CSS и HTML.
✅Инструменты: Terser (для JavaScript), cssnano (для CSS), HTMLMinifier (для HTML).
✅Сжатие: Использование gzip или Brotli для сжатия файлов перед отправкой их клиенту.
✅Инструменты: Поддержка встроена в большинство серверов (NGINX, Apache) и CDN.
1️⃣.2️⃣Бандлинг и код-сплиттинг
✅Бандлинг: Объединение множества файлов в один, чтобы уменьшить количество HTTP-запросов.
✅Инструменты: Webpack, Rollup, Parcel.
✅Код-сплиттинг: Разделение кода на более мелкие части, которые загружаются по мере необходимости.
✅Инструменты: Webpack Dynamic Imports, React.lazy, Vue Router lazy loading.
1️⃣.3️⃣Оптимизация изображений
✅Сжатие изображений: Уменьшение размера изображений без значительной потери качества.
✅Инструменты: ImageOptim, TinyPNG, Squoosh.
✅Использование современных форматов: WebP, AVIF.
✅Инструменты: Convertio, встроенные конвертеры в редакторах изображений.
1️⃣.4️⃣Lazy Loading
✅Отложенная загрузка: Загрузка изображений и других ресурсов только по мере их необходимости (например, когда они попадают в видимую область).
✅Инструменты: Intersection Observer API,
loading="lazy" для изображений.2️⃣Оптимизация производительности рендеринга
2️⃣.1️⃣ Виртуальный скроллинг
✅Использование виртуальных списков: Отрисовка только видимых элементов списка, что снижает нагрузку на рендеринг.
✅Инструменты: react-window, react-virtualized, Vue Virtual Scroll List.
2️⃣.2️⃣Избегание ненужных перерисовок
✅Мемоизация: Использование
React.iss.onemo и useMemo для предотвращения ненужных перерисовок в React.✅Инструменты: React.iss.onemo, useMemo, PureComponent.
2️⃣.3️⃣Оптимизация CSS
✅Удаление неиспользуемого CSS: Использование инструментов для удаления неиспользуемых стилей.
✅Инструменты: PurgeCSS, UnCSS.
✅Использование CSS-сеток: Применение Flexbox и CSS Grid для оптимизации макетов.
✅Инструменты: CSS Grid, Flexbox.
3️⃣Улучшение пользовательского опыта (UX)
3️⃣.1️⃣Оптимизация времени до интерактивности (Time to Interactive)
✅Preloading: Предварительная загрузка критических ресурсов.
✅Инструменты:
<link rel="preload">, <link rel="prefetch">.Critical CSS: Встраивание критических CSS в
head для ускорения отображения начального контента.✅Инструменты: critters, critical.
3️⃣.2️⃣ Progressive Web App (PWA)
✅Кэширование и оффлайн-работа: Использование Service Workers для кэширования ресурсов и обеспечения оффлайн-работы.
✅Инструменты: Workbox, встроенные API браузеров.
4️⃣Улучшение производительности JavaScript
4️⃣.1️⃣Оптимизация использования памяти
✅Избегание утечек памяти: Использование правильных паттернов для управления памятью и очистки ненужных объектов.
✅Инструменты: DevTools профилировщики, ESLint плагины для анализа кода.
4️⃣.2️⃣ Асинхронные операции
✅Использование асинхронного кода: Применение
async/await, Promises для работы с асинхронными операциями.✅Инструменты: API браузеров, библиотеки (например, Axios).
Для оптимизации веб-приложений используются методы минимизации и сжатия ресурсов, бандлинг и код-сплиттинг, оптимизация изображений и CSS, lazy loading, виртуальный скроллинг, оптимизация JavaScript и данных, а также улучшение времени до интерактивности и внедрение PWA. Эти подходы помогают улучшить производительность и пользовательский опыт.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍34🔥4❤3
Anonymous Quiz
18%
push()
40%
unshift()
15%
pop()
27%
shift()
👍12❤1
Когда брать абсолютные величины а когда относительные ?
Спросят с вероятностью 7%
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Абсолютные величины (например, px, pt, cm, in)
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Когда использовать:
1️⃣Пиксели (`px`):
✅Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
✅Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
✅Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
Относительные величины (например, %, em, rem, vw, vh)
Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
Когда использовать:
1️⃣Проценты (`%`):
✅Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
✅Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
2️⃣Эм (`em`):
✅Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
✅Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
3️⃣Рем (`rem`):
✅Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно
✅Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
4️⃣Вьюпорт (`vw`, `vh`):
✅Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
✅Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
Комбинированное использование
Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
Абсолютные величины (
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Абсолютные величины (например, px, pt, cm, in)
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Когда использовать:
1️⃣Пиксели (`px`):
✅Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
✅Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
✅Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}Относительные величины (например, %, em, rem, vw, vh)
Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
Когда использовать:
1️⃣Проценты (`%`):
✅Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
✅Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}2️⃣Эм (`em`):
✅Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
✅Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}3️⃣Рем (`rem`):
✅Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно
<html>), что обеспечивает более предсказуемое масштабирование.✅Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}4️⃣Вьюпорт (`vw`, `vh`):
✅Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
✅Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}Комбинированное использование
Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}Абсолютные величины (
px) используются для точных размеров и фиксированных элементов. Относительные величины (%, em, rem, vw, vh) подходят для адаптивных макетов и элементов, которые должны изменяться в зависимости от размеров родителя или вьюпорта.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍26🔥1
Anonymous Quiz
26%
document.location
46%
window.location
13%
navigator.url
15%
document.href
👍11