জটিল লেআউটে ইন্টার‍্যাকশন অপ্টিমাইজ করা

কানবান বোর্ড বা বিশাল ডেটা গ্রিডের মতো জটিল, মাল্টি-কলম লেআউটে টেনে নিয়ে রাখুন বা ভারী মিউটেশনের সময় হাই ফ্রেম রেট (60FPS) বজায় রাখুন এবং ইন্টার‍্যাকশন লেটেন্সি দূর করুন।

এক নজরে

জটিল লেআউটে, কোনও একটি আইটেমে সামান্য পরিবর্তন করলে—যেমন, কার্ড টেনে আনা বা সেল এডিট করা—স্টাইল ও লেআউট ক্যালকুলেশনের চেইন রিঅ্যাকশন ট্রিগার করতে পারে, যার ফলে ব্রাউজারকে পুরো পৃষ্ঠা রিফ্লো করতে হয়। এর ফলে ফ্রেম ড্রপ হয় এবং Interaction to Next Paint (INP) লেটেন্সি বেড়ে যায়।

সেল্ফ-কন্টেনড লেআউট অঞ্চলে (যেমন কানবান বোর্ডের কলাম) content-visibility: auto প্রয়োগ করে, আপনি রেন্ডারিংয়ের কাজ আলাদা করতে পারবেন।

অন-স্ক্রিন এলিমেন্টের জন্য মেকানিজম

content-visibility: auto কীভাবে স্ক্রিনে আগে থেকেই দেখা যাচ্ছে এমন এলিমেন্টকে সুবিধা প্রদান করে তা বোঝা গুরুত্বপূর্ণ:

• দৃশ্যমান এলিমেন্টের জন্য, ব্রাউজার রেন্ডারিং এড়িয়ে যায় না।
• পরিবর্তে, পারফর্ম্যান্সের সুবিধা সম্পূর্ণভাবে CSS কন্টেনমেন্ট থেকে আসে যা প্রপার্টি অটোমেটিক এনফোর্স করে (যেমন, লেআউট, স্টাইল এবং পেইন্ট)।
• এই কন্টেনমেন্ট একটি সীমানা হিসেবে কাজ করে। কন্টেনমেন্ট প্রয়োগ করা হয়েছে এমন কন্টেনারের মধ্যে মিউটেশন হলে, ব্রাউজার বুঝতে পারে যে সেই কন্টেনারের বাইরে থাকা এলিমেন্টের জ্যামিতি বা স্টাইলে পরিবর্তনগুলি কোনও প্রভাব ফেলতে পারবে না। পৃষ্ঠার রিফ্লো আলাদা করা হয়েছে, যাতে গ্লোবাল লেআউট আবার গণনা করা না হয়।

প্রয়োগ

১. কন্টেনমেন্ট অঞ্চল শনাক্ত করা

বিচ্ছিন্ন লেআউট ইউনিট (যেমন, গ্রিড কলাম, বোর্ড তালিকা) উপস্থাপন করে এমন বড়, স্বয়ংসম্পূর্ণ কন্টেনারে content-visibility: auto প্রয়োগ করুন।

.board-column {
  /* Apply containment boundaries */
  content-visibility: auto;
  
  /* Mandatory: Provide a placeholder size to prevent layouts shifts.
     For a vertical column, define a reasonable width and height. 
     - 'auto' is optional and enables the browser to remember the actual size
       once rendered. It must be paired with a <length> value to be used for
       the first render.
     - '300px' is the estimated width of this element. This can be any valid
      CSS <length> value. Replace it with the expected width of your
      component.
     - '800px' is the estimated height of this element. This can be any valid
      CSS <length> value. Replace it with the expected height of your
      component.
   */
  contain-intrinsic-size: auto 300px auto 800px;
}

২. ইন্টার‍্যাকশন ম্যানেজ করুন

কলামের মধ্যে হওয়া ইন্টার‍্যাকশন যাতে কন্টেনমেন্ট থেকে সুবিধা পায় তা নিশ্চিত করুন।

// Example: Drag and drop item movement
function moveItemToColumn(itemId, columnId) {
  const item = document.getElementById(itemId);
  const column = document.getElementById(columnId);
  
  // The browser will only reflow this specific column, 
  // not the entire board layout!
  column.appendChild(item);
}

ফলব্যাক স্ট্র্যাটেজি

প্রপার্টিটি ধীরে ধীরে অবনমিত হয়। যেসব ব্রাউজারে কাজ করে না:

• প্রপার্টি উপেক্ষা করা হয়েছে এবং মিউটেশনের কারণে স্ট্যান্ডার্ড গ্লোবাল রিফ্লো হবে।
• পুরনো ব্রাউজারে একই ধরনের আইসোলেশন এফেক্ট পেতে, আপনি ম্যানুয়ালি কন্টেনমেন্ট প্রয়োগ করতে পারেন:

@supports not (content-visibility: auto) {
  .board-column {
    /* Manual fallback for containment */
    contain: layout style paint;
  }
}