Advanced Performance Optimization

"Making It Butter Smooth"

মডার্ন ওয়েব অ্যাপে (React, Next.js) পারফরম্যান্স ঠিক রাখা কঠিন, কারণ—ইনফিনিট স্ক্রল, রিয়েল-টাইম ড্যাশবোর্ড, হাজার হাজার ডাটা লিস্ট এবং অ্যানিমেশন ব্রাউজারের মেইন থ্রেডকে ব্যস্ত রাখে।

ফলাফল? Laggy UI, Scroll Jumps, Battery Drain।
একজন সিনিয়র ইঞ্জিনিয়ার হিসেবে তোমার দায়িত্ব কোড অপটিমাইজ করা যাতে ব্রাউজার সবসময় 60 FPS (Frames Per Second) এ চলে।

⭐ ১. Debounce: "অপেক্ষা করো" প্যাটার্ন ⏳

Concept: ব্যবহারকারী যতক্ষণ কাজ করছে, ততক্ষণ চুপ থাকো। কাজ থামালে অ্যাকশন নাও।

Analogy: লিফটের দরজা। যতক্ষণ মানুষ ঢুকতে থাকে, দরজা বন্ধ হয় না। শেষ মানুষ ঢোকার পর কিছুক্ষণ অপেক্ষা করে তারপর দরজা বন্ধ হয়।

✅ Use Case: Search Bar

ইউজার JavaScript টাইপ করছে। প্রতি অক্ষরে API কল করলে ১০টা রিকোয়েস্ট যাবে। Debounce করলে টাইপ শেষ হওয়ার পর মাত্র ১টা রিকোয়েস্ট যাবে।

💻 Senior Implementation

function debounce(fn, delay = 300) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

// Usage
const handleSearch = debounce((e) => {
    console.log("Searching for:", e.target.value);
}, 500);

input.addEventListener("input", handleSearch);

⭐ ২. Throttle: "নিয়ম মেনে চলো" প্যাটার্ন 🚦

Concept: তুমি যতবারই অ্যাকশন নাও না কেন, আমি নির্দিষ্ট সময় পরপর একবারই কাজ করব।

Analogy: মেশিনগান। তুমি ট্রিগার চেপে ধরে রাখলেও গুলি একটা নির্দিষ্ট রেটে বের হবে।

✅ Use Case: Scroll Event & Resize

স্ক্রল ইভেন্ট সেকেন্ডে ১০০ বার ফায়ার হতে পারে। Throttle ব্যবহার করে আমরা সেটাকে সেকেন্ডে ৫ বারে নামিয়ে আনতে পারি।

💻 Senior Implementation

function throttle(fn, delay = 300) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            fn.apply(this, args);
            lastTime = now;
        }
    };
}

// Usage
window.addEventListener("scroll", throttle(() => {
    console.log("Scroll Logic Running...");
}, 200));

⭐ ৩. Debounce vs Throttle (Visual Difference)

FeatureDebounce (Lift Door)Throttle (Machine Gun)
লজিকশেষ ইভেন্টের পর অপেক্ষা করেনির্দিষ্ট সময় পরপর রান হয়
Search Box✅ টাইপ শেষ হলে রেজাল্ট দেখাবে❌ টাইপ করার মাঝেই রেজাল্ট দেখাবে
Scroll / Resize❌ স্ক্রল থামালে আপডেট হবে✅ স্ক্রল করার সময় আপডেট হবে

⭐ ৪. requestAnimationFrame (rAF): The 60FPS King 🎬

ব্রাউজার প্রতি সেকেন্ডে প্রায় ৬০ বার স্ক্রিন রিফ্রেশ করে (প্রতি ফ্রেমে ১৬.৬৭ মিলি সেকেন্ড)।

requestAnimationFrame ব্রাউজারকে বলে: "তোমার পেইন্ট করার ঠিক আগ মুহূর্তে আমার এই ফাংশনটা চালাও।"

const box = document.getElementById("box");
let position = 0;  // 'pos' এর বদলে 'position' ব্যবহার করা হয়েছে

function smoothAnimation() {
    position += 2;
    box.style.transform = "translateX(" + position + "px)";

    if (position < 500) {
        requestAnimationFrame(smoothAnimation);
    }
}
requestAnimationFrame(smoothAnimation);

⭐ ৫. Lazy Loading & IntersectionObserver 👁️

তোমার পেজে ১০০টা ছবি থাকলে ১০০টাই লোড করার দরকার নেই। ইউজার স্ক্রল করে যখন ছবির কাছে আসবে, শুধু তখনই লোড হবে।

Modern API: IntersectionObserver

const images = document.querySelectorAll("img[data-src]");

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.add("fade-in");
            observer.unobserve(img);
        }
    });
});

images.forEach(img => observer.observe(img));

💡 টিপ: সাধারণ ইমেজের জন্য এখন HTML এ <img loading="lazy" /> দিলেই কাজ হয়।

⭐ ৬. DOM Optimization: DocumentFragment & Layout Thrashing

A) DocumentFragment (Batch Insert)

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
    const div = document.createElement("div");
    fragment.appendChild(div);
}
document.body.appendChild(fragment); // ১ বার রি-পেইন্ট হবে! 🚀

B) Layout Thrashing (Avoid Read-Write Cycle)

❌ Bad:

div1.style.width = div2.offsetWidth + "px";
div2.style.height = div1.offsetHeight + "px";

✅ Good (Batching):

const width = div2.offsetWidth;
const height = div1.offsetHeight;

requestAnimationFrame(() => {
    div1.style.width = width + "px";
    div2.style.height = height + "px";
});

⭐ ৭. Web Workers: Main Thread কে মুক্তি দাও 🧵

জাভাস্ক্রিপ্ট সিঙ্গেল থ্রেডেড। ভারী কাজ করলে UI আটকে যায়। সমাধান? Web Worker (ব্যাকগ্রাউন্ড থ্রেড)।

// main.js
const worker = new Worker("heavy-task.js");
worker.postMessage("Start Calculation");

worker.onmessage = (e) => {
    console.log("Result from Worker:", e.data);
};

// heavy-task.js (Worker File)
onmessage = () => {
    let sum = 0;
    for(let i = 0; i < 1e9; i++) sum += i;
    postMessage(sum);
};

⭐ ৮. Virtualization: Huge List Optimization

ফেসবুক বা টুইটারের ফিডে হাজার হাজার পোস্ট থাকে। কিন্তু DOM-এ মাত্র ৫-১০টাই থাকে। একে বলে Virtualization বা Windowing।

  • লিস্টে ১০০০ আইটেম আছে
  • স্ক্রিনে মাত্র ১০টা দেখা যায়
  • DOM-এ শুধু ওই ১০টা (প্লাস বাফার) রেন্ডার করো
  • স্ক্রল করলে পুরোনো গুলো DOM থেকে ফেলে দাও, নতুনগুলো যোগ করো

(React-এ react-window বা react-virtualized লাইব্রেরি এটা করে)

🧠 ৯. Senior Checklist & Interview Questions

✅ Senior Checklist:

  • স্মার্ট ক্যাশিং: Map বা Memoization ব্যবহার করো
  • লুপ অপটিমাইজেশন: বড় লুপে forEach এর চেয়ে সাধারণ for ফাস্ট
  • React: useMemo, useCallback এবং React.memo ব্যবহার করো

Q1: Layout Thrashing কী?

A: যখন বারবার DOM থেকে রিডিং এবং রাইটিং করি, তখন ব্রাউজার বারবার লেআউট রিক্যালকুলেট করে। এটা পারফরম্যান্স ড্রপ করে।

Q2: requestAnimationFrame কেন setTimeout এর চেয়ে ভালো?

A: rAF ব্রাউজারের রিফ্রেশ রেটের সাথে সিঙ্ক করে চলে, ব্যাটারি বাঁচায় এবং ট্যাব ইনএক্টিভ থাকলে পজ হয়ে যায়।

Q3: Virtual DOM (React) কি সবসময় ফাস্ট?

A: না। ডাইরেক্ট DOM ম্যানিপুলেশন সবসময় ফাস্ট। কিন্তু বড় অ্যাপে কোড মেইনটেইনেবল রাখার জন্য Virtual DOM ভালো।

🚀 অধ্যায় ২১ সারাংশ (Checklist)

  • ✓Input: Debounce (Search) এবং Throttle (Scroll) ব্যবহার
  • ✓Animation: rAF দিয়ে স্মুথ অ্যানিমেশন
  • ✓Loading: IntersectionObserver দিয়ে লেজি লোডিং
  • ✓DOM: DocumentFragment দিয়ে ব্যাচ ইনসার্ট
  • ✓Logic: Web Worker দিয়ে ভারী কাজ ব্যাকগ্রাউন্ডে পাঠানো

Next Step: আমাদের পারফরম্যান্স অপটিমাইজেশন শেষ। এখন এই সব কনসেপ্ট নিয়ে আমরা জাভাস্ক্রিপ্টের অন্যতম কঠিন টপিক রিভিজিট করব: "Prototypes Deep Dive & Inheritance Chains"।

🔒 কপিরাইট সুরক্ষিত কন্টেন্ট 🔒

কপি, স্ক্রিনশট, প্রিন্ট করা সম্পূর্ণ নিষিদ্ধ।