// УТЕЧКА 1: Event listener без cleanup
class Timer {
  start() {
    // Каждый вызов start() добавляет новый listener
    window.addEventListener('resize', this.handleResize)
  }
  // Нет метода stop() с removeEventListener!
}

// ИСПРАВЛЕНИЕ:
class Timer {
  constructor() {
    this.handleResize = this.handleResize.bind(this)
  }
  start() {
    window.addEventListener('resize', this.handleResize)
  }
  stop() {
    window.removeEventListener('resize', this.handleResize)
  }
}

// УТЕЧКА 2: Замыкание держит ссылку на большой объект
function createLeak() {
  const hugeData = new Array(1000000).fill('data')

  return function() {
    // hugeData никогда не будет собран GC
    // даже если мы не используем его внутри
    console.log('done')
  }
}

// ИСПРАВЛЕНИЕ: убираем ссылку
function noLeak() {
  let hugeData = new Array(1000000).fill('data')
  const result = processData(hugeData)
  hugeData = null  // позволяем GC собрать данные

  return function() {
    console.log(result)
  }
}

// УТЕЧКА 3: Unbounded cache (кэш без лимита)
const cache = {}  // растёт бесконечно!

// ИСПРАВЛЕНИЕ: WeakMap (автоочистка) или LRU-кэш с лимитом
const weakCache = new WeakMap()  // ключи-объекты освобождаются автоматически

// ПЛОХО: чтение и запись DOM вперемешку — каждое чтение форсирует reflow
function badLayout(elements) {
  elements.forEach(el => {
    const height = el.offsetHeight  // READ — forceлayout reflow
    el.style.height = height * 2 + 'px'  // WRITE
    // Следующая итерация: снова READ после WRITE — браузер обязан пересчитать!
  })
}

// ХОРОШО: сначала все reads, потом все writes (batching)
function goodLayout(elements) {
  // Фаза чтения
  const heights = elements.map(el => el.offsetHeight)

  // Фаза записи (браузер может батчить)
  elements.forEach((el, i) => {
    el.style.height = heights[i] * 2 + 'px'
  })
}

// НЕ используй setInterval для анимаций
setInterval(() => {
  element.style.left = (x++) + 'px'
}, 16)  // может не совпасть с частотой экрана, вызывает jank

// requestAnimationFrame — синхронизирован с частотой обновления экрана
function animate() {
  element.style.left = (x++) + 'px'

  if (x < 100) {
    requestAnimationFrame(animate)  // следующий кадр
  }
}
requestAnimationFrame(animate)

function memoize(fn) {
  const cache = new Map()

  return function(...args) {
    const key = JSON.stringify(args)

    if (cache.has(key)) {
      return cache.get(key)  // возвращаем кэшированный результат
    }

    const result = fn.apply(this, args)
    cache.set(key, result)
    return result
  }
}

// Для рекурсивных функций — мемоизация значительно ускоряет
const fib = memoize(function(n) {
  if (n <= 1) return n
  return fib(n - 1) + fib(n - 2)
})

// fib(40): без мемоизации ~1 млрд вызовов, с мемоизацией — 40

// ПЛОХО: V8 не может оптимизировать полиморфный код
function process(obj) {
  return obj.value * 2
}

process({ value: 1, name: 'a' })     // форма 1
process({ value: 2, extra: true })   // форма 2 — V8 деоптимизирует!

// ХОРОШО: всегда одна форма объекта
class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}
// Все Point имеют одинаковую форму — V8 генерирует оптимальный машинный код

// ПЛОХО: изменение типа переменной
let x = 42      // integer
x = 'hello'     // string — V8 деоптимизирует переменную!

// ХОРОШО: стабильные типы
const count = 42
const text = 'hello'

// Главный поток (main.js)
// Тяжёлые вычисления блокируют UI — используй Worker
const worker = new Worker('worker.js')

worker.postMessage({ data: largeArray })

worker.onmessage = (event) => {
  console.log('Результат из Worker:', event.data.result)
}

// worker.js — выполняется в отдельном потоке
self.onmessage = (event) => {
  const { data } = event.data
  const result = heavyComputation(data)  // не блокирует UI
  self.postMessage({ result })
}