जटिल चयनकर्ता प्रसंस्करण का अनुकूलन करें

बैकएंड में सीएसएस चयनकर्ताओं की तुलना एसक्यूएल स्टेटमेंट्स से की जा सकती है। CSS में उनकी मूल भूमिका के बावजूद, हम अपने जावास्क्रिप्ट कोड में चयनकर्ताओं का सक्रिय रूप से उपयोग कर रहे हैं, और चयनकर्ताओं की घोषणा शैली को देखते हुए, वे अनुकूलन के लिए प्राथमिकता वाले उम्मीदवार हैं।

बड़ी संख्या में CSS चयनकर्ताओं को पार्स करने, प्रसंस्करण और मिलान करने के लिए ब्राउज़रों के पास कई विकल्प हैं। आधुनिक वेब एप्लिकेशन अपनी शैलियों में हजारों चयनकर्ताओं का उपयोग करते हैं। एकल तत्व के लिए शैली की गणना करने के लिए, आपको भारी संख्या में CSS नियमों पर विचार करना होगा। और ब्राउज़र एक सर्कल में सभी चयनकर्ताओं के आसपास नहीं जाते हैं - यह बहुत धीमा होगा।

कई ब्राउज़र डेटा के एक विशेष समूह का उपयोग करते हैं, चयनकर्ताओं को त्यागते हैं जो स्पष्ट रूप से काम नहीं करेंगे। WebKit में, यह एक RuleSet निष्पादित करता है।

SelectorSet

SelectorSet इस तरह के एक समूहीकरण का एक जावास्क्रिप्ट कार्यान्वयन है। यदि आपके पास पहले से ज्ञात चयनकर्ताओं का एक सेट है - तो आप इन चयनकर्ताओं द्वारा तत्वों का चयन अधिक कुशलता से कर सकते हैं।

सेट में जोड़े गए चयनकर्ताओं का विश्लेषण और कुंजी द्वारा अनुक्रमित किया जाता है। चयनकर्ता के महत्वपूर्ण दाईं ओर से कुंजी बनाई जाती है। यदि चयनकर्ता का उद्देश्य id - यह id कुंजी बन जाती है, यदि कक्षा दाईं ओर है, तो कक्षा का उपयोग किया जाता है, आदि। फिर चयनकर्ता को कुंजी द्वारा अनुक्रमित हैश में रखा जाता है। इस तरह के हैश में कुंजियों की खोज बहुत तेज़ है।

विचार यह है कि किसी तत्व और चयनकर्ताओं के समूह का मिलान करते समय, तत्वों की गुणों का विश्लेषण कुंजियों की संभावित उपस्थिति के लिए किया जाता है। फिर इन कुंजियों को हैश में खोजा जाता है, चयनकर्ताओं के एक छोटे सेट को लौटाता है, जो पहले से ही मिलान तत्वों और चयनकर्ताओं के लिए एक पूर्ण खोज करते हैं।

हम इसका उपयोग कैसे कर सकते हैं?

प्रत्यायोजित घटनाओं को गति देना

संभवतः प्रतिनिधिमंडल का सबसे अच्छा ज्ञात उदाहरण jQuery $.fn.live (नया $.fn.on ) है। सीधे संलग्न के बजाय एक प्रतिनिधि इवेंट हैंडलर का उपयोग करने का मुख्य लाभ यह है कि DOMContentLoaded घटना के बाद जोड़े गए सभी नए तत्व भी इस हैंडलर को कॉल करेंगे। इस तरह का दृष्टिकोण अक्सर अपूरणीय होता है। उदाहरण के लिए, pjax जैसे पैटर्न में, जब पूरा पृष्ठ कभी ओवरलोड नहीं होता है।

लेकिन document को ओवर-डेलिगेट करने की घटनाएँ, जैसे $('.foo').live('click') , या $(document).on('click', '.foo') है। मुख्य समस्या यह है कि चयनकर्ता को उस घटना के कारण होने वाले तत्व के पूर्वजों की पूरी श्रृंखला को बायपास करना होगा। बड़े और जटिल डोम के साथ बड़े अनुप्रयोगों में, घोंसले का स्तर 15 या अधिक हो सकता है। लेकिन यह सबसे दुखद बात नहीं है। सबसे दिलचस्प बात तब शुरू होती है जब बहुत सारे प्रत्यायोजित चयनकर्ता होते हैं। GitHub 100 से अधिक का उपयोग करता है, और बास्कैम्प 300 से अधिक ईवेंट हैंडलर्स को document लिए उपयोग करता है।

हालांकि,

यदि आप ऊपर दिए गए दृष्टिकोण को समूहीकरण करने वाले चयनकर्ताओं पर लागू करते हैं, तो jQuery के लिए एक पैच के रूप में, आप अपने आवेदन में घटनाओं के प्रसंस्करण में काफी वृद्धि कर सकते हैं। GitHub के साथ वास्तविक मार्कअप और चयनकर्ताओं का उपयोग करने वाले एक छोटे से परीक्षण में अंतर की जांच करें। Chrome 32.0.1700 में, ऐसी घटनाओं की प्रसंस्करण गति में वृद्धि 175% तक पहुँच जाती है!

वास्तव में, इन दोनों पुस्तकालयों को स्वयं ब्राउज़र द्वारा प्रतिस्थापित किया जाना चाहिए। वे निश्चित रूप से, पहले से ही सीएसएस को अनुकूलित करने के लिए अपने दृष्टिकोण का उपयोग करते हैं, लेकिन, दुख की बात है कि उनके पास अभी भी घोषणात्मक घटना संचालकों का मूल कार्यान्वयन नहीं है, हालांकि कुछ लोग 2006 से इसका उपयोग कर रहे हैं।

प्रयुक्त पुस्तकालयों के लिए लिंक

github.com/josh/selector-set
github.com/josh/jquery-selector-set