जटिल लेआउट में इंटरैक्शन को ऑप्टिमाइज़ करना

कनबन बोर्ड या बड़े डेटा ग्रिड जैसे कई कॉलम वाले जटिल लेआउट में, खींचने और छोड़ने या बड़े बदलावों के दौरान, ज़्यादा फ़्रेम रेट (60FPS) बनाए रखें और इंटरैक्शन में होने वाली देरी को खत्म करें.

खास जानकारी

जटिल लेआउट में, किसी एक आइटम में छोटा सा बदलाव करने पर, स्टाइल और लेआउट के कैलकुलेशन की चेन रिएक्शन ट्रिगर हो सकती है. जैसे, किसी कार्ड को खींचकर छोड़ना या किसी सेल में बदलाव करना. इससे ब्राउज़र को पूरे पेज को फिर से रीफ़्लो करना पड़ता है. इसकी वजह से, फ़्रेम ड्रॉप होते हैं और पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) की लेटेंसी बढ़ जाती है.

सेल्फ़-कंटेन्ड लेआउट वाले हिस्सों (जैसे, कानबन बोर्ड में कॉलम) पर content-visibility: auto लागू करके, रेंडरिंग के काम को अलग किया जा सकता है.

स्क्रीन पर दिखने वाले एलिमेंट के लिए मैकेनिज़्म

यह समझना ज़रूरी है कि content-visibility: auto से, स्क्रीन पर पहले से दिख रहे एलिमेंट को कैसे फ़ायदा मिलता है:

• दिखने वाले एलिमेंट के लिए, ब्राउज़र रेंडरिंग को स्किप नहीं करता.
• इसके बजाय, परफ़ॉर्मेंस में सुधार पूरी तरह से सीएसएस कंटेनमेंट से होता है.प्रॉपर्टी, इन्हें अपने-आप लागू करती है. जैसे, लेआउट, स्टाइल, और पेंट.
• यह कंटेनमेंट, एक बाउंड्री की तरह काम करता है. अगर कंटेनमेंट लागू होने के बाद, कंटेनर के अंदर कोई बदलाव होता है, तो ब्राउज़र को पता होता है कि ये बदलाव, उस कंटेनर के बाहर मौजूद एलिमेंट की ज्यामिति या स्टाइल पर असर नहीं डाल सकते. पेज रीफ़्लो को अलग रखा जाता है, ताकि ग्लोबल लेआउट को फिर से कैलकुलेट न करना पड़े.

लागू करना

1. कंटेनमेंट ज़ोन की पहचान करना

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;
}

2. इंटरैक्शन मैनेज करना

पक्का करें कि कॉलम के अंदर होने वाले इंटरैक्शन, कंटेनमेंट से फ़ायदा पाएं.

// 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;
  }
}