👴🏿 ✍️ ✍🏼 HTML और CSS एल्गोरिदम की कम्प्यूटेशनल जटिलता के बारे में 👴🏼 📁 👩🏼‍🤝‍👩🏻

ब्राउज़र में लोड किए गए HTML दस्तावेज़ में DOM तत्वों का एक पेड़ और CSS नियमों का एक सेट है। प्रत्येक सीएसएस नियम एक जोड़ी है - एक चयनकर्ता और गुणों की सूची।

हम इस बारे में बहुत कम सोचते हैं, और वास्तव में, कम्प्यूटेशनल दृष्टिकोण से HTML दस्तावेज़ खींचने के लिए क्या है? विचारक जो सोचता है, और उसके अंदर का नीयन अस्पष्टता के माध्यम से चमकता है: 0.5 तत्व स्पष्ट रूप से पर्याप्त नहीं हैं।

असल में, यह इन लेखों के बारे में है - HTML और CSS के प्रदर्शन की कम्प्यूटेशनल जटिलता। मैं यह नोट करना चाहता हूं कि मैं HTML / CSS रेंडरिंग इंजन (HTMLayout और Sciter) को लागू करने में अपने खुद के अनुभव का उपयोग करता हूं, लेकिन इस क्षेत्र में कम्प्यूटेशनल समस्याएं सार्वभौमिक हैं - वे HTML और CSS विनिर्देशों की प्रकृति से निर्धारित होती हैं।

CSS चयनकर्ताओं के बारे में शब्द

एक HTML दस्तावेज़ की कल्पना करें कि एक पार्सर एन तत्वों से मिलकर एक डोम ट्री में बदल गया। इस दस्तावेज़ की शैली प्रणाली में एस सीएसएस नियम शामिल हैं। तब सभी DOM तत्वों के लिए शैली असाइनमेंट प्रक्रिया की कम्प्यूटेशनल जटिलता निम्नानुसार व्यक्त की गई है:

O ( N * S * D )
जहां डी पेड़ की "गहराई" और उपयोग किए गए चयनकर्ताओं का मीट्रिक है।

एक उदाहरण के रूप में, इस "अद्भुत" नियम पर विचार करें:

body * { background:red; }

'*' - <body> के अंदर प्रत्येक तत्व के लिए एक लाल पृष्ठभूमि रंग असाइन करें। इस तरह के एक नियम का व्यावहारिक लाभ, ज़ाहिर है, थोड़ा सा लेकिन यह स्पष्ट करने के लिए कि आपको क्या चाहिए: DOM का nth तत्व लें और बॉडी टैग के लिए उसके सभी माता-पिता (गहराई से) पर पुनरावृति करें। और इसलिए प्रत्येक तत्व के लिए। यदि केवल एस ऐसे नियम हैं, तो हमारे पास ऊपर दिए गए सूत्र हैं।

सिद्धांत रूप में, एन * एस * डी स्थिर मामले में इतना डरावना नहीं है - हमने इसे एक बार गणना की और इसे भूल गए। लेकिन लगातार गतिशील परिवर्तनों के मामले में, समस्याएं संभव हैं। कहते हैं, यदि आप कंटेनर तत्व की कक्षा को बदलते हैं, तो इसके पूरे उपरी हिस्से के लिए आपको शैलियों को फिर से लिखना होगा। और यह फिर से, सामान्य मामले में, एक O ( N * S * D ) कार्य है।

बेशक सीएसएस कार्यान्वयन शैलियों की पुनर्गणना की प्रक्रिया को अनुकूलित करने की कोशिश करते हैं, लेकिन यह हमेशा संभव नहीं होता है। O (N ...) समस्याओं से निपटने का मुख्य तरीका परिणाम कैशिंग का उपयोग करना है। कहते हैं, जब किसी तत्व की शैली का निर्धारण करते हैं, तो हम पिछले तत्व की जांच कर सकते हैं और यदि यह खोज की गई "समान" है, तो इसकी शैली लें (यदि इसे परिभाषित किया गया है)। लेकिन यह ट्रिक li:nth-child(even) जैसे नियमों पर उदाहरण के लिए ठोकर li:nth-child(even) । मेरे विचार से इसका कारण स्पष्ट है।

उदाहरण के लिए WebKit डायनेमिक विशेषता चयनकर्ताओं का बिल्कुल समर्थन नहीं करता है। उदाहरण के लिए, यदि आप एक निश्चित DOM विशेषता "मोड" और फॉर्म body[mode=first] .widget {color:red} के नियमों की एक जोड़ी को बदलकर डॉक्यूमेंट डिस्प्ले मोड को स्विच करना चाहते हैं body[mode=first] .widget {color:red} और body[mode=second] .widget {color:green} तब। आप सफल नहीं हुए (WebKit में) इस इंजन में ऐसा अनुकूलन है।

शैलियों का उपयोग करने के लिए सर्वोत्तम अभ्यास:

हम नियमों की कुल संख्या का पालन करते हैं। यदि इस दस्तावेज़ में कुछ नियम का उपयोग नहीं किया गया है (इसके चयनकर्ता को संतुष्ट करने वाले तत्व नहीं हैं), यह अभी भी सीपीयू को लोड करेगा। ऐसे नियमों को हटाने की जरूरत है।
एक यौगिक चयनकर्ता में, सही-सबसे चयनकर्ता संभवतः अधिक विशिष्ट (विशिष्ट?) होना चाहिए।
उदाहरण: ul.cls2 li चयनकर्ता, ul li.cls1 चयनकर्ता से इस मायने में भी बदतर है कि पहले मामले में, ul.cls2 के लिए सभी ली एलिमेंट्स और उनके माता-पिता स्कैन किए जाते हैं, और दूसरे में, ली ली का सेट जिसमें गहराई से खोज पहले से ही की जाती है - केवल उन लोगों के लिए li जिसके लिए वर्ग = cls1 दिया गया है।
.cls2 .cls1 .cls2 > .cls1 से "बदतर" है। दूसरे मामले में, अनुपालन जांच हमेशा तत्व और उसके माता-पिता तक ही सीमित रहेगी। पहले मामले में, देखने की गहराई जड़ <html> समावेशी है।

लेआउट एल्गोरिदम के बारे में एक शब्द

... और यह अगले लेख का विषय है यदि कोई इस विषय में रुचि रखता है।

HTML और CSS एल्गोरिदम की कम्प्यूटेशनल जटिलता के बारे में

CSS चयनकर्ताओं के बारे में शब्द

लेआउट एल्गोरिदम के बारे में एक शब्द

More articles: