प्रांप्ट और दायरा
आप एक मल्टी-कॉलम डैशबोर्ड का रखरखाव करते हैं। कार्ड का आकार ग्रिड, ड्रैगिंग, साइडबार और फ़ॉन्ट लोडिंग द्वारा निर्धारित होता है, इसलिए इसे केवल व्यूपोर्ट आकार के फ़ंक्शन के रूप में नहीं माना जा सकता है। 320px से नीचे यह एक कॉम्पैक्ट शीर्षक और सिंगल-कॉलम मेट्रिक्स दिखाता है; सीमा (threshold) से ऊपर यह पूरा लेआउट दिखाता है। विंडो को बदले बिना साइडबार को संक्षिप्त करने का प्रभाव तुरंत दिखना चाहिए।
यह प्रश्न एलिमेंट-स्तरीय मापन (measurement), ब्राउज़र लेआउट समय (timing), React लाइफ़साइकिल और प्रदर्शन सीमाओं का परीक्षण करता है। सार्वजनिक फ्रंट-एंड साक्षात्कार सामग्री आमतौर पर DOM, CSS, ब्राउज़र इवेंट और प्रदर्शन को कवर करती है; प्लेटफ़ॉर्म दस्तावेज़ीकरण गहन फॉलो-अप के लिए सटीक ResizeObserver अधिसूचना और लूप व्यवहार प्रदान करता है।
इंटरव्यूअर क्या जांच रहा है
- समझाएं कि
window.resizeव्यूपोर्ट परिवर्तनों का वर्णन करता है, न कि ग्रिड रीफ़्लो, फ़ॉन्ट स्वैप या पैरेंट-साइज़ परिवर्तनों का। content-boxयाborder-boxचुनें और परिभाषित करें कि थ्रेशोल्ड का क्या अर्थ है।- देखे जा रहे एलिमेंट को सिंक्रोनस रूप से रीसाइज़ किए बिना स्टेट या CSS वेरिएबल्स में माप लिखें।
- टारगेट रिप्लेसमेंट, अनमाउंटिंग, छिपे हुए नोड्स, पुराने ब्राउज़रों और कई कार्डों को संभालें।
- केवल कॉलबैक काउंट के बजाय उपयोगकर्ता मेट्रिक्स, लॉन्ग टास्क और लेआउट ट्रेस के साथ स्मूथनेस साबित करें।
पहले स्पष्ट करने योग्य प्रश्न
- क्या थ्रेशोल्ड content width, border-box width के बारे में है, या केवल-शैली (style-only) का निर्णय है जिसे CSS container queries व्यक्त कर सकती हैं?
- क्या आकार में बदलाव से डेटा का काम शुरू होना चाहिए, या केवल प्रस्तुति बदलनी चाहिए?
- क्या UI को प्रत्येक फ़्रेम का अनुसरण करना चाहिए, या प्रति फ़्रेम एक संयुक्त (coalesced) अपडेट पर्याप्त है?
- ब्राउज़र समर्थन का न्यूनतम स्तर क्या है, और क्या सर्वर रेंडरिंग
windowको छू सकती है? - क्या दर्जनों या हज़ारों कार्ड हैं, और क्या केवल दृश्यमान कार्डों को ही देखा (observe किया) जा सकता है?
एक 30-सेकंड का उत्तर
“मैं सबसे पहले यह स्थापित करूँगा कि यह एक एलिमेंट-साइज़ की समस्या है, व्यूपोर्ट-साइज़ की नहीं। केवल-शैली वाले ब्रेकप्वाइंट के लिए मैं CSS container queries को प्राथमिकता दूंगा। यदि JavaScript को माप की आवश्यकता है, तो मैं क्लाइंट पर एक ResizeObserver संलग्न करूंगा, एक परिभाषित बॉक्स को पढूंगा, थ्रेशोल्ड स्थिति को डिडुप्लिकेट करूंगा, और एक CSS वेरिएबल या असतत (discrete) स्थिति लिखूंगा। कॉलबैक को देखे गए आकार को सिंक्रोनस रूप से नहीं बदलना चाहिए; गैर-जरूरी राइट्स को अगले फ्रेम के लिए शेड्यूल किया जा सकता है, और क्लीनअप को ऑब्जर्वर को डिस्कनेक्ट करना चाहिए। कई कार्डों के लिए मैं ऑब्जर्व किए गए सेट को सीमित करूँगा और INP, लॉन्ग टास्क और लेआउट लागत को मापूँगा। पुराने ब्राउज़रों को एक स्पष्ट फिक्स्ड-लेआउट, कंटेनर-क्वेरी, या थ्रॉटल किया गया व्यूपोर्ट फ़ॉलबैक मिलता है।”
गहन उत्तर
चरण 1: जांचें कि क्या CSS पर्याप्त है
यदि आवश्यकता केवल “320px से नीचे कॉम्पैक्ट शैलियाँ दिखाना” है, तो एक कंटेनर क्वेरी आमतौर पर सरल होती है और माप को जावास्क्रिप्ट से बाहर रखती है। ResizeObserver तब उचित होता है जब आकार चार्ट सैंपलिंग, वर्चुअलाइजेशन, तीसरे पक्ष के रेंडरर, या ऑब्जर्वेबल व्यावसायिक तर्क को संचालित करता है।
चरण 2: आकार अनुबंध (size contract) को परिभाषित करें
ResizeObserverEntry content और border box मापों को उजागर करता है। परिभाषित करें कि कौन सा बॉक्स थ्रेशोल्ड का मालिक है, फिर इकाइयों और पूर्णांक (rounding) को मानकीकृत करें। एक फ़्लोटिंग-पॉइंट नमूना स्वचालित रूप से एक व्यावसायिक घटना नहीं है; 319.9-से-320.1 संक्रमण को ब्रेकप्वाइंट स्थिति के रूप में डिडुप्लिकेट करें जब वह उत्पाद अनुबंध हो।
चरण 3: ऑब्जर्वर लाइफ़साइकिल स्थापित करें
क्लाइंट कंपोनेंट माउंट होने के बाद ऑब्जर्वर बनाएं, कार्ड नोड को ऑब्जर्व करें, और नोड बदलने या कंपोनेंट अनमाउंट होने पर unobserve या disconnect को कॉल करें। React में, एक ref को टारगेट का स्वामित्व लेने दें और एक Effect को ऑब्जर्वर निर्माण और क्लीनअप का स्वामित्व लेने दें ताकि सामान्य रेंडर इसे फिर से न बनाएं।
const ref = useRef<HTMLDivElement>(null)
const [compact, setCompact] = useState(false)
useEffect(() => {
const node = ref.current
if (!node || !('ResizeObserver' in window)) return
const observer = new ResizeObserver(([entry]) => {
const width = entry.contentRect.width
const next = width < 320
setCompact((current) => (current === next ? current : next))
})
observer.observe(node)
return () => observer.disconnect()
}, [])चरण 4: कॉलबैक फ़ीडबैक लूप को रोकें
यदि कॉलबैक देखे गए एलिमेंट की चौड़ाई या ऊंचाई को बदलता है, तो वह परिवर्तन दूसरी अधिसूचना शेड्यूल कर सकता है और अंततः ResizeObserver loop completed with undelivered notifications उत्पन्न कर सकता है। कॉलबैक को आकार अनुबंध पर केंद्रित रखें, या requestAnimationFrame के साथ विज़ुअल राइट्स शेड्यूल करें और उन्हें इडेम्पोटेंट (idempotent) बनाएं।
चरण 5: रेंडरिंग से माप को अलग करें
जब CSS लेआउट का प्रबंधन कर सके तो मापों को एक CSS कस्टम प्रॉपर्टी में लिखें, या केवल एक असतत स्थिति रखें जैसे compact। ड्रैग के दौरान React स्थिति में प्रत्येक पिक्सेल परिवर्तन को न डालें। यदि एक सतत मान की आवश्यकता है, तो प्रति एनिमेशन फ्रेम सूचनाओं को संयोजित (coalesce) करें और छोड़े गए फ्रेम और लॉन्ग टास्क रिकॉर्ड करें।
चरण 6: कई कार्ड और छिपे हुए नोड्स को संभालें
हज़ारों कार्डों के लिए, केवल दृश्यमान नोड्स को ऑब्जर्व करें या लेआउट लेयर को माप वितरित करने दें। display: none, संक्षिप्त पैनल और वर्चुअलाइजेशन ऑब्जर्वेबल आकारों को बदलते हैं; किसी नोड के दृश्यमान होने के बाद, सत्यापित करें कि पहली अधिसूचना सही स्थिति को पुनर्स्थापित करती है। एक ऑब्जर्वर कोई पोलिंग लूप नहीं है।
चरण 7: फ़ॉलबैक और सर्वर सीमाओं को परिभाषित करें
सर्वर रेंडरिंग window तक नहीं पहुंच सकती है। क्लाइंट Effect के अंदर समर्थन का पता लगाएं। ResizeObserver के बिना, एक फिक्स्ड लेआउट, CSS media/container नियम, या एक थ्रॉटल किया गया व्यूपोर्ट लिसनर का उपयोग करें, और उस एलिमेंट-स्तरीय व्यवहार को दस्तावेजित करें जो फ़ॉलबैक प्रदान नहीं कर सकता है।
चरण 8: साक्ष्य के साथ सत्यापित करें
साइडबार संक्षिप्त होना, ड्रैगिंग, फ़ॉन्ट लोडिंग, ग्रिड रीफ़्लो, रोटेशन और ब्राउज़र ज़ूम का परीक्षण करें। Chrome Performance में कॉलबैक, लेआउट, पेंट और लॉन्ग टास्क रिकॉर्ड करें; ड्रैग रिस्पॉन्सिपनेस की जांच के लिए INP या इनपुट विलंब (input delay) का उपयोग करें। कंसोल लूप चेतावनी के लिए एक परीक्षण जोड़ें और सत्यापित करें कि एक अनमाउंटेड कार्ड को अब अपडेट प्राप्त नहीं होते हैं।
समझौते (Trade-offs) और सीमाएं
Container queries बनाम ResizeObserver
कंटेनर क्वेरीज़ केवल-शैली वाले ब्रेकप्वाइंट के अनुकूल होती हैं और डिक्लेरेटिव रहती हैं। ResizeObserver जावास्क्रिप्ट गणनाओं और तीसरे पक्ष के रेंडरिंग के लिए उपयुक्त है लेकिन इसके लिए लाइफ़साइकिल और प्रदर्शन नियंत्रण की आवश्यकता होती है। सीमा यह है कि क्या माप को स्टाइल लेयर से बाहर निकलना चाहिए।
content-box बनाम border-box
सामग्री-लेआउट थ्रेशोल्ड के लिए content-box का उपयोग करें और पैडिंग और बॉर्डर को शामिल करने वाले बाहरी कार्ड अनुबंध के लिए border-box का उपयोग करें। एक गलत विकल्प ब्रेकप्वाइंट को स्थानांतरित कर देता है; अनुबंध और परीक्षणों में विकल्प को शामिल करें।
सतत (Continuous) बनाम असतत (discrete) मान
निरंतर चौड़ाई एक चार्ट को चला सकती है लेकिन बार-बार अपडेट होती है। एक असतत ब्रेकप्वाइंट स्थिर और परीक्षण में आसान होता है। असतत अनुबंध के साथ शुरुआत करें और केवल मापे गए बजट और स्पष्ट दृश्य लाभ के साथ निरंतर अपडेट जोड़ें।
विफलता अभ्यास और विकास
विफलता: केवल window.resize को सुनना
साइडबार संक्षिप्त होने और ग्रिड रीफ़्लो से व्यूपोर्ट नहीं बदलता है, इसलिए कार्ड गलत लेआउट में रहता है। कार्ड या उसके कंटेनर को ऑब्जर्व करें और गैर-व्यूपोर्ट परिवर्तनों का परीक्षण करें।
विफलता: कॉलबैक में देखे गए आकार को बदलना (mutate करना)
म्यूटेशन दूसरे कॉलबैक को ट्रिगर करता है और एक लूप और अतिरिक्त लेआउट बना सकता है। एक स्वतंत्र CSS वेरिएबल लिखें, एक असतत स्थिति का उपयोग करें, या एक इडेम्पोटेंट अगले-फ्रेम अपडेट को शेड्यूल करें।
विफलता: प्रत्येक पिक्सेल के लिए setState
ड्रैगिंग उच्च-आवृत्ति React रेंडर बनाती है और इनपुट प्रतिक्रिया को खराब करती है। थ्रेशोल्ड को डिडुप्लिकेट करें, rAF के साथ संयोजित करें, केवल दृश्यमान कार्ड देखें, और Performance में लागत की पुष्टि करें।
सामान्य गलतियाँ और फॉलो-अप
गलती: ResizeObserver को एक मजबूत resize इवेंट के रूप में मानना
यह किसी एलिमेंट के बॉक्स को ऑब्जर्व करता है और लेआउट समय के अनुसार सूचनाएं देता है; यह केवल व्यूपोर्ट इवेंट का सीधा प्रतिस्थापन नहीं है।
फॉलो-अप: आप React Strict Mode को कैसे सत्यापित करते हैं?
सुनिश्चित करें कि डेवलपमेंट सेटअप और क्लीनअप युग्मित (paired) रहें और ऑब्जर्वर काउंट जमा न हों। डेवलपमेंट की अतिरिक्त जांच को प्रोडक्शन डुप्लिकेट सब्सक्रिप्शन समझने की भूल न करें।
फॉलो-अप: क्या कॉलबैक getBoundingClientRect को कॉल कर सकता है?
यह कर सकता है, लेकिन अतिरिक्त माप लेआउट लागत जोड़ सकता है। प्रविष्टि (entry) के बॉक्स मानों को प्राथमिकता दें और प्रदर्शन ट्रेस के साथ किसी भी अतिरिक्त रीड को सिद्ध करें।
फॉलो-अप: आप आकार लूप का परीक्षण कैसे करते हैं?
कॉलबैक द्वारा एक ऐसी शैली को बदलवाएं जो उसके अपने आकार को प्रभावित करती है, चेतावनियों, अधिसूचना गणना और अंतिम आकार का निरीक्षण करें, फिर दावा (assert) करें कि निश्चित संस्करण निरंतर सूचनाओं के बिना स्थिर हो जाता है।
फॉलो-अप: जावास्क्रिप्ट कब अनावश्यक है?
जब आवश्यकता केवल एक कंटेनर ब्रेकप्वाइंट शैली परिवर्तन की हो, तो CSS container queries को प्राथमिकता दें। जावास्क्रिप्ट को डेटा, माप, या तीसरे पक्ष के रेंडरिंग के लिए रखें जिसे वास्तव में इसकी आवश्यकता है।
फॉलो-अप: आप कैसे साबित करते हैं कि अनुकूलन (optimization) ने काम किया?
समान ड्रैग स्क्रिप्ट के तहत INP, लॉन्ग-टास्क काउंट, लेआउट समय, React कमिट और मेमोरी की तुलना करें। केवल कॉलबैक काउंट एक उपयोगकर्ता-अनुभव मेट्रिक नहीं है।