Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

Performance Optimization в JavaScript: Руководство по улучшению производительности

JavaScript
Оптимизация производительности JavaScript — это комплекс мероприятий, направленных на повышение скорости работы приложения, снижение потребления ресурсов и улучшение пользовательского опыта. В этой статье мы рассмотрим основные техники и подходы, которые помогут вашему JavaScript-приложению работать быстрее и эффективнее.

Основные проблемы производительности


  • Замедление при взаимодействии с DOM: постоянные манипуляции с деревом DOM замедляют работу приложения.
  • Бесконтрольное использование памяти: создание и удаление большого количества объектов приводит к перерасходу памяти.
  • Слишком сложные вычисления: тяжелые математические операции и циклы замедляют приложение.
  • Неправильное использование асинхронности: неправильное использование обещаний и async/await может привести к "заморозке" главного потока.

Основные техники оптимизации



Оптимизация работы с DOM
Манипуляции с DOM — это дорогостоящее занятие. Вот несколько советов, как минимизировать их влияние:
  • Batch Updates: сгруппируйте изменения
...

JS: Отличие переменных с $ вначале и без него?

JavaScript
В JavaScript наличие символа $ в начале имени переменной не имеет никакого особого значения для языка. Сам JavaScript рассматривает переменные с префиксом $ так же, как и любые другие переменные.

Почему программисты используют $?


Префикс $ чаще всего используется для соблюдения соглашения о стиле кодирования и улучшения читаемости кода. Вот несколько распространённых причин, почему разработчики добавляют $ к именам переменных:
  1. DOM-объекты: Традиционно переменные, содержащие ссылки на элементы DOM (Document Object Model), называют с префиксом $, чтобы подчеркнуть, что они ссылаются на DOM-объекты.

    Пример:
    Выделить
    const $header = document.querySelector('header');
const $button = document.getElementById('submit-btn');
  2. Обозначения jQuery-оберток: В jQuery традиционно переменные, содержащие обернутые элементы jQuery, обозначаются с префиксом $, чтобы напомнить, что переменная содержит jQuery-коллекцию.

    Пример:
    Выделить
    const $btn = $('#submit-btn');
  3. Чистая конвенция: Иногда префикс $ используетс
...

Namespace в JavaScript

JavaScript
В JavaScript нет понятия namespace в классическом понимании, как в языках вроде Java или C#, где namespaces — это особая структура для именования классов и модулей. Однако, есть похожие концепции, которые позволяют организовывать код и предотвращать конфликты имен:

Имена объектов (Object Namespaces)


Это простейший способ создать пространство имен. Вы создаете объект, в котором хранятся все ваши функции и переменные:
Выделить
var MyApp = {};

MyApp.Utils = {
    add: function(a, b) { return a + b; },
    multiply: function(a, b) { return a * b; }
};

console.log(MyApp.Utils.add(2, 3)); // Output: 5

IIFE (Immediately Invoked Function Expression)


Это анонимная функция, которая исполняется сразу после объявления. Внутри нее можно объявлять приватные переменные и функции, доступные только внутри этой функции:
Выделить
(function () {
    var privateVar = "I'm private";
    
    window.MyApp = {
        publicMethod: function() {
            console.log(privateVar);
        }
...

Как организовать код в JavaScript

JavaScript
Организация кода в JavaScript важна для поддержания чистоты, ясности и удобства дальнейшей поддержки и развития проекта. Рассмотрим несколько базовых принципов и методик, которые помогут структурировать ваш код эффективно.

Модульность


Одним из самых важных принципов является деление кода на модули. Каждый модуль должен отвечать за отдельную задачу и предоставлять четко определенное API.
  • CommonJS (require/exports): традиционный подход, используемый в Node.js.
  • ES Modules (import/export): современная спецификация, поддерживаемая большинством современных браузеров и Node.js.

Пример ES-модулей:
Выделить
// utils.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './utils.js';
console.log(add(2, 3)); // 5

Namespace (Пространства имен)


Для избежания конфликтов имен в глобальном пространстве можно использовать namespaces:
Выделить
var myApp = {};

myApp.utils = {
    add: function(a, b) {
        return a + b;
    }
};

console.log(myApp.utils.add(2, 3));
...

Перевод rows в пиксели на JS и jQuery

JavaScript Библиотека JS
Представим, что есть такой textarea:
Выделить
<textarea name="val[text]" rows="12" cols="50" id="text"></textarea>

И необходимо при помощи чистого JavaScript или jQuery получить значение rows="12" и перевести его в пиксели. Как это сделать в этой статье.

Для того чтобы получить значение атрибута rows и конвертировать его в пиксели на jQuery, нужно выполнить несколько шагов:
  1. Получить значение атрибута rows с помощью jQuery.
  2. Преобразовать это значение в пиксели, умножив на среднюю высоту строки.

Пример кода:
Выделить
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример преобразования rows в пиксели</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <textarea name="val[text]" rows="12" cols="50" id="text"></textarea>

    <script>
        // Получаем значение атрибута rows
        var rowsCount = parseInt($('#text').attr('rows'));

        // Средняя высота строки обычно принимается равной 20 пикселям
...
Реклама