JavaScriptAdvanced

DOM: Advanced (Dynamic DOM)

Dynamic DOM, event delegation, MutationObserver, performance — বড় পেজের স্মার্ট DOM কৌশল বাংলায়।

24টি অংশবাংলা ভাষায়

এই পর্বে DOM-কে পারফরম্যান্স-সচেতন ও স্কেলেবল ভাবে ব্যবহার — dynamic rendering, delegation, observer, আর reflow-এর মতো বিষয়।

Dynamic DOM — কেন দরকারি

ডেটা-চালিত UI-তে (list, চ্যাট, notifications) element নতুনভাবে বানাতে হয়। কিন্তু প্রতি আপডেটে পুরো list মুছে আবার বানানো ধীর — এই পর্বের কৌশলগুলো কাজে লাগে।

DocumentFragment — বাল্ক আপডেট

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.textContent = "আইটেম " + (i + 1);
  fragment.appendChild(li);   // fragment-এ জমা
}

const ul = document.querySelector("ul");
ul.appendChild(fragment);    // একবারে সব — দ্রুত

DocumentFragment UI-তে সরাসরি আপডেট করে না — हज़ार element জমা করে একবারে যোগ করলে reflow/render কম হয়।

Event Delegation

<ul id="list">
  <li>আম</li>
  <li>কলা</li>
</ul>

<script>
  const list = document.getElementById("list");

  list.addEventListener("click", (event) => {
    const li = event.target.closest("li");
    if (!li) return;
    console.log("চাপা হয়েছে:", li.textContent);
  });
</script>

প্রতিটি <li>-তে listener না রেখে parent-এ একটি listener রাখুন — event bubbles হয়ে parent-এ আসে। এমনকি পরে যোগ-করা <li>-তেও কাজ করে।

// dynamic যোগ-করা element-ও delegation-এ ধরা পড়ে
function addItem(text) {
  const li = document.createElement("li");
  li.textContent = text;
  document.getElementById("list").append(li);
}

addItem("নতুন আইটেম"); // ক্লিকে work করবেই

MutationObserver — DOM পরিবর্তন শোনা

const target = document.querySelector("#widget");

const observer = new MutationObserver((mutations) => {
  mutations.forEach((m) => {
    console.log("দেখা হয়েছে:", m.type);  // childList / attributes
  });
});

observer.observe(target, {
  childList: true,
  attributes: true,
});

// পরে element যোগ-মুছে হলে observer trigger হয়

MutationObserver দিয়ে DOM-এর পরিবর্তন শোনা যায় — নিজের অ্যাপের বাইরে থেকে (external library/extension) হলো DOM পরিবর্তন শনাক্তে কাজে লাগে।

সঠিক observer ব্যবহার

তালিকার অনেক item-এর নিজস্ব DOM listener না বানিয়ে delegation ব্যবহার করুন — ছোট অ্যাপে না শুধু পারফরম্যান্স, পড়াও সহজ।

Performance — reflow কম করুন

DOM-এ বদলই পেজের reflow/layout ঘটায় — ধীর। কয়েকটি নিয়ম:

একসাথে অনেক element → DocumentFragment
ক্লাস toggle-কে অগ্রাহ্য করা — style নয়, class বদলান
loop-এর ভেতরে layout পড়া (offsetWidth) এড়ান
listener গুছিয়ে delegation

// ধীর: প্রতিবার style — বারবার layout
// for (...) { box.style.height = i + "px"; }

// দ্রুত: class + একবার layout
box.classList.add("grown");

Dynamic DOM প্যাটার্ন

function renderUsers(users) {
  const list = document.getElementById("users");
  list.replaceChildren(
    ...users.map((u) => {
      const li = document.createElement("li");
      li.textContent = u.name;
      return li;
    }),
  );
}

renderUsers([{ name: "রহিম" }, { name: "করিম" }]);

replaceChildren(...) পুরো list নতুন করে বসায়, পুরনো সব মুছে — functional re-render-এর সহজ উপায়।

কৌশল	ব্যবহার
DocumentFragment	বাল্ক insert — কম reflow
Event delegation	parent-এ এক listener
MutationObserver	DOM পরিবর্তন শোনা
classList toggle	style-এর তুলনায় দ্রুত
replaceChildren	functional re-render

Interview

"Dynamic list-এ ইভেন্ট কীভাবে handle করবেন?" — উত্তর: delegation। "কীভাবে slow-এড়ান?" — fragment + class + আওতায় layout পড়া।

Practice

একটি বড় (১০০ item) list-কে fragment দিয়ে render করুন আর প্রতিটি item-এ ক্লিক delegation দিয়ে ধরা — হাতে করে পার্থক্য টের পান।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।