फ़्रंटएंड इंटरव्यू: खोज (Search) के लिए आप CSS Custom Highlight API का उपयोग कैसे करेंगे?

प्रॉम्प्ट और संदर्भ

एक डॉक्यूमेंट रीडर रिच टेक्स्ट में खोज मैच, एनोटेशन और वर्तमान हिट को प्रदर्शित करता है। प्रत्येक मैच को span में लपेटने से चयन, संपादन और लेआउट बाधित होगा। Range लाइफ़साइकिल, रजिस्ट्री अपडेट, कैस्केड, एक्सेसिबल स्टेट्स, फ़ॉलबैक और परफ़ॉर्मेंस को कवर करने वाले CSS Custom Highlight API समाधान को डिज़ाइन करें। यह टेक्स्ट रेंडरिंग और प्रोग्रेसिव एन्हांसमेंट के बारे में एक frontend प्रश्न है।

इंटरव्यूअर क्या मूल्यांकन करता है

1. जावास्क्रिप्ट Range, Highlight ऑब्जेक्ट्स, और ::highlight() के बीच अंतर करना।
2. टेक्स्ट रिप्लेसमेंट या संपादन के बाद पुराने रेंजों को फिर से बनाना।
3. यह समझना कि हाइलाइट्स DOM को नहीं बदलते हैं और ::selection के साथ कैस्केड हो सकते हैं।
4. कंट्रास्ट, वर्तमान हिट, फ़ोकस, और कीबोर्ड सिमेंटिक्स डिज़ाइन करना।
5. एक सुरक्षित फ़ॉलबैक प्रदान करना और लागत का परिमाण तय करना।

पूछने के लिए स्पष्टीकरण वाले प्रश्न

• क्या लक्षित ब्राउज़र और WebViews इस API का समर्थन करते हैं?
• क्या दस्तावेज़ संपादन योग्य (editable), वर्चुअलाइज़्ड, या बार-बार फिर से रेंडर होने वाला है?
• कितने मैच मौजूद हैं, और क्या कोई मैच कई टेक्स्ट नोड्स को पार कर सकता है?
• क्या डार्क मोड, फोर्स्ड कलर्स (forced colors), और स्क्रीन रीडर आवश्यक हैं?
• क्या असमर्थित होने पर मार्क्ड-DOM फ़ॉलबैक स्वीकार्य है?

30-सेकंड का उत्तर

“मैं प्रत्येक मैच को एक Range के रूप में प्रस्तुत करूँगा, रेंजों को एक Highlight में समूहित करूँगा, और ::highlight(name) स्टाइलिंग के लिए इसे CSS.highlights में पंजीकृत करूँगा। जब टेक्स्ट बदलता है, तो अलग हो चुके नोड्स को बनाए रखने के बजाय पुराने पंजीकरणों को हटा दें और टेक्स्ट वर्ज़न और ऑफ़सेट से फिर से बनाएँ। खोज, एनोटेशन और वर्तमान-हिट परतों को अलग करें; रंग के अलावा संख्या और कीबोर्ड स्थिति को उजागर करें। समर्थन का पता लगाएँ, सुरक्षित मार्क्ड टेक्स्ट पर फ़ॉलबैक करें, और मैच काउंट, अपडेट p95, फ़्रेम और मेमोरी का बेंचमार्क करें।”

गहन उत्तर

चरण 1: रेंज और हाइलाइट्स बनाएँ

यह API जावास्क्रिप्ट को मनमाने टेक्स्ट Range बनाने, उन्हें एक Highlight में संयोजित करने, और उस Highlight को HighlightRegistry में पंजीकृत करने की अनुमति देता है। CSS बिना किसी रैपर तत्वों को जोड़े ::highlight(name) के साथ रेंजों को स्टाइल करता है।

const range = new Range();
range.setStart(textNode, start);
range.setEnd(textNode, end);
const hit = new Highlight(range);
CSS.highlights.set("search", hit);

प्रोडक्शन कोड को अभी भी क्रॉस-नोड रेंजों और नोड के जीवनकाल को संभालना होगा।

चरण 2: टेक्स्ट अपडेट का समाधान करें

प्रत्येक मैच के साथ एक दस्तावेज़ संस्करण, टेक्स्ट-नोड पाथ और वर्ण ऑफ़सेट को बनाए रखें। री-रेंडरिंग या संपादन किसी नोड को अलग कर सकता है, जिससे उसका Range पुराना हो जाता है। पुरानी रजिस्ट्री प्रविष्टियों को हटा दें और नए टेक्स्ट इंडेक्स से फिर से बनाएँ; केवल DOM संदर्भ न रखें।

चरण 3: परतों (Layers) का प्रबंधन करें

खोज, एनोटेशन, वर्तमान हिट और वर्तनी-जांच संकेतों के लिए अलग-अलग नामों का उपयोग करें। ::selection और अन्य यूज़र-एजेंट हाइलाइट्स के साथ इच्छित कैस्केड को परिभाषित करें। एक वर्तमान-हिट ऑब्जेक्ट को अपडेट करने से प्रत्येक मैच को फिर से बनाने के लिए बाध्य नहीं किया जाना चाहिए।

चरण 4: सुलभ (Accessible) फ़ीडबैक प्रदान करें

रंग ही एकमात्र संकेत नहीं हो सकता। वर्तमान-हिट संख्या, फ़ोकस करने योग्य नेविगेशन, एक दृश्य फ़ोकस संकेतक, और फोर्स्ड-कलर विकल्प उपलब्ध कराएँ। यह न मानें कि एक हाइलाइट स्वयं स्क्रीन रीडर द्वारा घोषित किया जाएगा; परिणाम सूची को सिमेंटिक स्थिति को उजागर करना होगा।

चरण 5: प्रदर्शन को नियंत्रित करें

इनपुट को डिबाउंस करें, रजिस्ट्री अपडेट को बैच करें, और जब संभव हो तो काम को एक दृश्य विंडो तक सीमित करें। टेक्स्ट स्कैनिंग, अपडेट p95, स्टाइल कैलकुलेशन, स्क्रॉल फ़्रेम और मेमोरी को मापें। प्रति कीस्ट्रोक एक रजिस्ट्री म्यूटेशन से बचें।

चरण 6: प्रोग्रेसिव फ़ॉलबैक

फ़ीचर का पता लगाएँ और Custom Highlight, मार्क्ड DOM, या एक साधारण परिणाम सूची चुनें। एक DOM फ़ॉलबैक को टेक्स्ट को एस्केप करना चाहिए, लिंक को संरक्षित करना चाहिए, और नेस्टेड डुप्लिकेट रैपर से बचना चाहिए। क्लाइंट एन्हांसमेंट से पहले सर्वर आउटपुट पठनीय रहना चाहिए।

चरण 7: परीक्षण और स्वीकृति

क्रॉस-नोड मैच, री-रेंडर, संपादन, डार्क मोड, फोर्स्ड कलर्स, कॉपी, वर्चुअलाइज़ेशन, RTL, और असमर्थित ब्राउज़रों का परीक्षण करें। परिणाम टेक्स्ट, कीबोर्ड क्रम, पहले पेंट, स्क्रॉल FPS, अपडेट p95, और मेमोरी की तुलना करें; फ़ॉलबैक में मैच खोने नहीं चाहिए।

मॉडल उत्तर

“मैं दस्तावेज़ DOM को अपरिवर्तित रखूँगा: मैचों को Ranges के रूप में प्रस्तुत करूँगा, उन्हें Highlights में समूहित करूँगा, CSS.highlights में नाम पंजीकृत करूँगा, और उन्हें ::highlight() के साथ स्टाइल करूँगा। प्रत्येक परिणाम में एक टेक्स्ट वर्ज़न और ऑफ़सेट होता है; री-रेंडरिंग पुराने पंजीकरणों को हटा देती है और उन्हें फिर से बनाती है। खोज, एनोटेशन और वर्तमान हिट की अलग-अलग परतें होती हैं, जबकि संख्या, फ़ोकस और सिमेंटिक स्थिति वर्तमान हिट को सुलभ बनाती हैं।

फ़ीचर डिटेक्शन Custom Highlight या एक सुरक्षित मार्क्ड-DOM/परिणाम-सूची फ़ॉलबैक का चयन करता है। डिबाउंस, बैच अपडेट और विज़िबल-विंडो सीमाएँ लागत को नियंत्रित करती हैं। स्वीकृति क्रॉस-नोड रेंजों, कॉपी, संपादन, डार्क मोड, फोर्स्ड कलर्स, वर्चुअलाइज़ेशन और असमर्थित ब्राउज़रों को कवर करती है, जो p95, FPS, मेमोरी और परिणाम समानता की तुलना करती है।”

सामान्य गलतियाँ

• प्रत्येक हिट को spans में लपेटना → टेक्स्ट संरचना और चयन को बाधित करता है → Range/Highlight को प्राथमिकता दें।
• पुराने Ranges को बनाए रखना → री-रेंडर नोड्स को अलग कर देते हैं → टेक्स्ट वर्ज़न द्वारा फिर से बनाएँ।
• केवल रंग का उपयोग करना → फोर्स्ड-कलर्स और कलर-ब्लाइंड उपयोगकर्ता स्थिति खो देते हैं → सिमेंटिक स्थिति और फ़ोकस जोड़ें।
• प्रत्येक कुंजी पर म्यूटेट करना → स्टाइल चर्न का कारण बनता है → डिबाउंस और बैच करें।
• फ़ॉलबैक HTML को जोड़ना (Concatenating) → इंजेक्शन और नेस्टिंग जोखिम पैदा करता है → एस्केप करें और मार्क्ड रेंज को सीमित करें।

फ़ॉलो-अप प्रश्न और प्रतिक्रियाएँ

फ़ॉलो-अप 1: spans का उपयोग क्यों नहीं करते?

Custom Highlight DOM को अपरिवर्तित छोड़ देता है, जिससे चयन, संपादन और लेआउट के साथ हस्तक्षेप कम हो जाता है। Spans एस्केपिंग और नेस्टिंग नियंत्रणों के साथ एक संगतता फ़ॉलबैक बने रहते हैं।

फ़ॉलो-अप 2: संपादन के बाद एक Range का क्या होता है?

इसका नोड बदला जा सकता है या अलग किया जा सकता है। पुराने संदर्भ का उपयोग करने के बजाय नए टेक्स्ट वर्ज़न और ऑफ़सेट से फिर से बनाएँ।

फ़ॉलो-अप 3: क्या स्क्रीन रीडर हाइलाइट की घोषणा करेंगे?

ऐसा न मानें। परिणाम संख्या, वर्तमान स्थिति, और कीबोर्ड नेविगेशन को सिमेंटिक टेक्स्ट के रूप में उजागर करें।

फ़ॉलो-अप 4: आप कैसे साबित करते हैं कि कोई रिग्रेशन नहीं है?

अपडेट p95, स्टाइल कार्य, स्क्रॉल FPS, मेमोरी, कॉपी व्यवहार, और वर्चुअलाइज़ेशन की तुलना करने के लिए निश्चित दस्तावेज़ों और मैच काउंट का उपयोग करें।