रेगुलर एक्सप्रेशन के अलावा: Chrome DevTools में सीएसएस वैल्यू पार्स करने की सुविधा को बेहतर बनाना

Philip Pfaffe

Ergün Erdogmus

क्या आपने देखा है कि Chrome DevTools के स्टाइल टैब में, सीएसएस प्रॉपर्टी हाल ही में थोड़ी और बेहतर दिख रही हैं? ये अपडेट, Chrome 121 और 128 के बीच रोल आउट किए गए थे. ये अपडेट, सीएसएस वैल्यू को पार्स और दिखाने के तरीके में हुए अहम सुधार की वजह से हुए हैं. इस लेख में, हम आपको इस बदलाव की तकनीकी जानकारी देंगे. इसमें, रेगुलर एक्सप्रेशन से मैच करने वाले सिस्टम से एक बेहतर पार्सर का इस्तेमाल किया जाता है.

आइए, मौजूदा DevTools की तुलना पिछले वर्शन से करें:

इसमें काफ़ी फ़र्क़ है, है न? यहां मुख्य सुधारों के बारे में जानकारी दी गई है:

• color-mix. color-mix फ़ंक्शन में दो रंग के आर्ग्युमेंट को विज़ुअल तौर पर दिखाने वाली आसान झलक.
• pink. नाम वाले रंग pink के लिए, क्लिक की जा सकने वाली रंग की झलक. आसानी से बदलाव करने के लिए, कलर पिकर खोलने के लिए इस पर क्लिक करें.
• var(--undefined, [fallback value]). बिना वैल्यू वाले वैरिएबल को बेहतर तरीके से मैनेज किया जा सकता है. इसके लिए, बिना वैल्यू वाले वैरिएबल को धूसर किया जाता है. साथ ही, चालू फ़ॉलबैक वैल्यू (इस मामले में, एचएसएल रंग) को क्लिक किए जा सकने वाले रंग की झलक के साथ दिखाया जाता है.
• hsl(…): hsl कलर फ़ंक्शन के लिए, क्लिक किए जा सकने वाले कलर की एक और झलक. इससे कलर पिकर को तुरंत ऐक्सेस किया जा सकता है.
• 177deg: क्लिक की जा सकने वाली ऐंगल क्लॉक, जिसकी मदद से ऐंगल की वैल्यू को इंटरैक्टिव तरीके से खींचकर और उसमें बदलाव करके सेट किया जा सकता है.
• var(--saturation, …): कस्टम प्रॉपर्टी की परिभाषा का क्लिक किया जा सकने वाला लिंक, जिससे काम के एलान पर आसानी से पहुंचा जा सकता है.

हालांकि, यह फ़र्क़ बहुत बड़ा है. ऐसा करने के लिए, हमें DevTools को सीएसएस प्रॉपर्टी की वैल्यू को पहले से ज़्यादा बेहतर तरीके से समझने के लिए सिखाना पड़ा.

क्या ये झलक पहले से उपलब्ध नहीं थीं?

ये झलक वाले आइकॉन आपको भले ही पहचाने-पहचाने लगें, लेकिन ये हमेशा एक जैसे नहीं दिखते. खास तौर पर, ऊपर दिए गए उदाहरण जैसे जटिल सीएसएस सिंटैक्स में. जिन मामलों में ये टूल काम करते थे वहां भी उन्हें सही तरीके से काम कराने के लिए, अक्सर ज़्यादा मेहनत करनी पड़ती थी.

इसकी वजह यह है कि DevTools के शुरुआती दिनों से ही, वैल्यू का विश्लेषण करने वाला सिस्टम ऑर्गैनिक तरीके से बेहतर हो रहा है. हालांकि, यह CSS से मिलने वाली नई सुविधाओं और भाषा की जटिलता में हुई बढ़ोतरी के साथ नहीं चल पा रहा है. समय के साथ बदलावों को ध्यान में रखते हुए, सिस्टम को पूरी तरह से फिर से डिज़ाइन करना ज़रूरी था. हमने ऐसा ही किया है!

सीएसएस प्रॉपर्टी की वैल्यू को कैसे प्रोसेस किया जाता है

DevTools में, स्टाइल टैब में प्रॉपर्टी की जानकारी को रेंडर करने और उसे सजाने की प्रोसेस को दो अलग-अलग चरणों में बांटा गया है:

1. स्ट्रक्चरल ऐनलिसिस. इस शुरुआती चरण में, प्रॉपर्टी के एलान को अलग-अलग हिस्सों में बांटा जाता है, ताकि उसके कॉम्पोनेंट और उनके बीच के संबंधों की पहचान की जा सके. उदाहरण के लिए, एलान border: 1px solid red में, यह 1px को लंबाई के तौर पर, solid को स्ट्रिंग के तौर पर, और red को रंग के तौर पर दिखाएगा.
2. रेंडर किया जा रहा है. स्ट्रक्चरल विश्लेषण के आधार पर, रेंडरिंग फ़ेज़ इन कॉम्पोनेंट को एचटीएमएल प्रज़ेंटेशन में बदल देता है. इससे, प्रॉपर्टी के टेक्स्ट को इंटरैक्टिव एलिमेंट और विज़ुअल के साथ बेहतर बनाया जा सकता है. उदाहरण के लिए, रंग की वैल्यू red को क्लिक किए जा सकने वाले रंग आइकॉन के साथ रेंडर किया जाता है. इस आइकॉन पर क्लिक करने पर, आसानी से बदलाव करने के लिए कलर पिकर दिखता है.

रेगुलर एक्सप्रेशन

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

हालांकि, यह ज़्यादातर मामलों में ठीक तरीके से काम करता था, लेकिन कई बार ऐसा भी होता था. पिछले कुछ सालों में, हमें गड़बड़ी की कई रिपोर्ट मिली हैं. इनमें से कई रिपोर्ट में, मैच करने की सुविधा सही तरीके से काम नहीं कर रही थी. हमने इन समस्याओं को ठीक कर दिया है. इनमें से कुछ समस्याएं आसान थीं, जबकि कुछ समस्याएं जटिल थीं. तकनीकी तौर पर होने वाले खर्च को कम करने के लिए, हमें अपने तरीके पर फिर से विचार करना पड़ा. आइए, कुछ समस्याओं पर नज़र डालते हैं!

मैच करना color-mix()

color-mix() फ़ंक्शन के लिए इस्तेमाल किया गया रेगुलर एक्सप्रेशन यह था:

/color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g

जो इसके सिंटैक्स से मेल खाता हो:

color-mix(<color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2})

मैच को विज़ुअलाइज़ करने के लिए, नीचे दिया गया उदाहरण चलाकर देखें.

const re = /color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g;

// it works - simpler example
const simpler = re.exec('color-mix(in srgb, pink, hsl(127deg 100% 50%))');
console.table(simpler.groups);

re.exec('');

// it doesn't work - complex example
const complex = re.exec('color-mix(in srgb, pink, var(--undefined, hsl(127deg var(--saturation, 100%) 50%)))');
console.table(complex.groups);

आसान उदाहरण ठीक से काम करता है. हालांकि, ज़्यादा जटिल उदाहरण में, <firstColor> मिलान hsl(177deg var(--saturation है और <secondColor> मिलान 100%) 50%)) है, जिसका कोई मतलब नहीं है.

हमें पता था कि यह समस्या है. आखिरकार, सीएसएस एक सामान्य भाषा नहीं है. इसलिए, हमने var फ़ंक्शन जैसे ज़्यादा जटिल फ़ंक्शन आर्ग्युमेंट को हैंडल करने के लिए, पहले से ही खास हैंडल शामिल किया है. हालांकि, जैसा कि पहले स्क्रीनशॉट में देखा जा सकता है, यह तरीका सभी मामलों में काम नहीं करता.

मैच करना tan()

शिकायत किए गए सबसे मज़ेदार गड़बड़ियों में से एक, त्रिकोणमितीय tan() फ़ंक्शन से जुड़ी थी . रंगों से मैच करने के लिए इस्तेमाल किए जा रहे रेगुलर एक्सप्रेशन में, नाम वाले रंगों से मैच करने के लिए एक सब-एक्सप्रेशन \b[a-zA-Z]+\b(?!-) शामिल था. जैसे, red कीवर्ड. इसके बाद, हमने यह जांच की कि मैच होने वाला हिस्सा, रंग का नाम है या नहीं. अंदाज़ा लगाइए, tan भी रंग का नाम है! इसलिए, हमने tan() एक्सप्रेशन को रंगों के तौर पर गलत तरीके से समझा.

मैच करना var()

आइए, एक और उदाहरण देखें. इसमें फ़ॉलबैक वाले var() फ़ंक्शन शामिल हैं, जिनमें अन्य var() रेफ़रंस भी शामिल हैं: var(--non-existent, var(--margin-vertical)).

var() के लिए हमारा रेगुलर एक्सप्रेशन, इस वैल्यू से मैच करेगा. हालांकि, यह पहले ब्रैकेट के बंद होने पर मैच करना बंद कर देगा. इसलिए, ऊपर दिया गया टेक्स्ट var(--non-existent, var(--margin-vertical) के तौर पर मैच होता है. यह रेगुलर एक्सप्रेशन मैचिंग की टेक्स्टबुक की सीमा है. जिन भाषाओं में ब्रैकेट मैच करने की ज़रूरत होती है वे मूल रूप से रेगुलर नहीं होती हैं.

सीएसएस पार्सर पर ट्रांज़िशन करना

रेगुलर एक्सप्रेशन का इस्तेमाल करके टेक्स्ट का विश्लेषण करने की सुविधा तब काम नहीं करती, जब विश्लेषण की गई भाषा रेगुलर न हो. ऐसे में, अगला कदम यह है: बेहतर टाइप के व्याकरण के लिए पार्स करने वाले टूल का इस्तेमाल करें. सीएसएस के लिए, इसका मतलब कॉन्टेक्स्ट-फ़्री भाषाओं के लिए पार्स करने वाले टूल से है. असल में, DevTools कोड बेस में ऐसा पार्सर सिस्टम पहले से मौजूद है: CodeMirror का Leger, कोडमिरर में सिंटैक्स हाइलाइट करने की बुनियाद है. यह कोड, Sources पैनल में मौजूद एडिटर के तौर पर काम करता है. Lezer के सीएसएस पार्सर की मदद से, हम सीएसएस नियमों के लिए सिंटैक्स ट्री (ऐबस्ट्रैक्ट नहीं) बना सकते हैं. यह पार्सर, इस्तेमाल के लिए तैयार था. जीत का निशान.

इसे छोड़कर, हमें रेगुलर एक्सप्रेशन पर आधारित मैचिंग से सीधे पार्सर पर आधारित मैचिंग पर माइग्रेट करना मुश्किल लगा: दोनों तरीके अलग-अलग निर्देशों से काम करते हैं. रेगुलर एक्सप्रेशन के साथ वैल्यू के हिस्सों को मैच करते समय, DevTools इनपुट को बाएं से दाएं स्कैन करेगा. साथ ही, पैटर्न की क्रम से लगाई गई सूची में से सबसे पहले मैच करने वाली वैल्यू को बार-बार ढूंढने की कोशिश करेगा. सिंटैक्स ट्री के साथ, मैचिंग की प्रोसेस नीचे से शुरू होती है. उदाहरण के लिए, किसी फ़ंक्शन कॉल से मैच करने से पहले, किसी कॉल के आर्ग्युमेंट का विश्लेषण करना. इसे अंकगणितीय एक्सप्रेशन के आकलन के तौर पर देखें. इसमें सबसे पहले ब्रैकेट वाले एक्सप्रेशन, फिर गुणा करने वाले ऑपरेटर, और फिर जोड़ने वाले ऑपरेटर का इस्तेमाल किया जाता है. इस फ़्रेमिंग में, रेगुलर एक्सप्रेशन पर आधारित मैचिंग, बाईं से दाईं ओर अंकगणितीय एक्सप्रेशन का आकलन करने से जुड़ी होती है. हम मैच करने वाले पूरे सिस्टम को फिर से लिखना नहीं चाहते थे: इसमें 15 अलग-अलग मैचर और रेंडरर पेयर थे, जिनमें कोड की हज़ारों लाइनें थीं. इस वजह से, यह संभावना नहीं थी कि हम इसे एक ही माइलस्टोन में शिप कर पाएं.

इसलिए, हमने एक ऐसा तरीका अपनाया जिससे हम धीरे-धीरे बदलाव कर सकें. इस बारे में हम यहां ज़्यादा जानकारी देंगे. खास तौर पर, हमने दो चरणों वाले तरीके को बरकरार रखा है. हालांकि, पहले चरण में हम सब-एक्सप्रेशन को नीचे से ऊपर की ओर मैच करने की कोशिश करते हैं (इस तरह, रेगुलर एक्सप्रेशन के फ़्लो को तोड़ते हैं). वहीं, दूसरे चरण में हम ऊपर से नीचे की ओर रेंडर करते हैं. दोनों चरणों में, हम रेगुलर एक्सप्रेशन पर आधारित मौजूदा मैचर और रेंडर का इस्तेमाल, बिना किसी बदलाव के कर पाए. इसलिए, हम उन्हें एक-एक करके माइग्रेट कर पाए.

पहला चरण: बॉटम-अप मैचिंग

पहले चरण में, कवर पर बताए गए काम ही किए जाते हैं. हम ट्री को नीचे से ऊपर की ओर ट्रैवर्स करते हैं और हर सिंटैक्स ट्री नोड पर सब-एक्सप्रेशन को मैच करने की कोशिश करते हैं. किसी खास सब-एक्सप्रेशन से मैच करने के लिए, मैचर मौजूदा सिस्टम की तरह ही रेगुलर एक्सप्रेशन का इस्तेमाल कर सकता है. हालांकि, 128 वर्शन में हम अब भी कुछ मामलों में ऐसा करते हैं. उदाहरण के लिए, लंबाई मैच करने के लिए. इसके अलावा, मैचर मौजूदा नोड पर रूट किए गए सबट्री के स्ट्रक्चर का विश्लेषण कर सकता है. इसकी मदद से, यह सिंटैक्स की गड़बड़ियों को एक साथ रिकॉर्ड कर सकता है. साथ ही, स्ट्रक्चर से जुड़ी जानकारी को भी रिकॉर्ड कर सकता है.

ऊपर दिए गए सिंटैक्स ट्री के उदाहरण पर ध्यान दें:

इस ट्री के लिए, मैच करने वाले टूल इस क्रम में लागू होंगे:

1. hsl(177degvar(--saturation, 100%) 50%): सबसे पहले, हम hsl फ़ंक्शन कॉल के पहले आर्ग्युमेंट का पता लगाते हैं. इसका नाम ह्यू ऐंगल है. हम इसे ऐंगल मैचर से मैच करते हैं, ताकि हम ऐंगल वैल्यू को ऐंगल आइकॉन से सजा सकें.
2. hsl(177degvar(--saturation, 100%)50%): इसके बाद, हम किसी वैरिएबल मैचर के साथ var फ़ंक्शन कॉल का पता लगाते हैं. ऐसे कॉल के लिए, हम मुख्य रूप से दो काम करना चाहते हैं:
   • वैरिएबल का एलान देखें और उसकी वैल्यू कैलकुलेट करें. साथ ही, वैरिएबल से कनेक्ट करने के लिए, वैरिएबल के नाम में एक लिंक और पॉपओवर जोड़ें.
   • अगर कैलकुलेट की गई वैल्यू कोई रंग है, तो कॉल को कलर आइकॉन से सजाएं. असल में, एक तीसरा विकल्प भी है, लेकिन हम इस बारे में बाद में बात करेंगे.
3. hsl(177deg var(--saturation, 100%) 50%): आखिर में, हम hsl फ़ंक्शन के लिए कॉल एक्सप्रेशन को मैच करते हैं, ताकि हम इसे कलर आइकॉन से सजा सकें.

हम जिन सब-एक्सप्रेशन को सजाना चाहते हैं उनके अलावा, एक और सुविधा है जिसे हम मैच करने की प्रोसेस के हिस्से के तौर पर चला रहे हैं. ध्यान दें कि दूसरे चरण में हमने कहा था कि हम किसी वैरिएबल के नाम के लिए, कैलकुलेट की गई वैल्यू देखेंगे. हम एक कदम आगे बढ़कर, नतीजों को ट्री में ऊपर तक भेजते हैं. यह सिर्फ़ वैरिएबल के लिए ही नहीं, बल्कि फ़ॉलबैक वैल्यू के लिए भी है! यह गारंटी है कि var फ़ंक्शन नोड को विज़िट करने पर, इसके चाइल्ड एंट्री को पहले ही विज़िट कर लिया जाता है, इसलिए हमें पहले से ही ऐसे var फ़ंक्शन के नतीजों के बारे में पता होता है जो फ़ॉलबैक वैल्यू में दिख सकते हैं. इसलिए, हम var फ़ंक्शन के नतीजों को आसानी से और कम लागत में बदल सकते हैं. इससे, "क्या इस var कॉल का नतीजा कोई रंग है?" जैसे सवालों के जवाब आसानी से मिल जाते हैं. हमने #2 चरण में ऐसा ही किया था.

दूसरा चरण: टॉप-डाउन रेंडरिंग

दूसरे चरण के लिए, हम दिशा उलट देते हैं. पहले चरण में मैच के नतीजों को लेकर, हम ट्री को ऊपर से नीचे की ओर क्रम से ट्रैवर्स करके, उसे एचटीएमएल में रेंडर करते हैं. विज़िट किए गए हर नोड के लिए, हम यह जांच करते हैं कि वह मेल खाता है या नहीं. अगर मेल खाता है, तो हम मैचर के उससे जुड़े रेंडरर को कॉल करते हैं. हम टेक्स्ट नोड के लिए डिफ़ॉल्ट मैचर और रेंडरर को शामिल करके, सिर्फ़ टेक्स्ट वाले नोड (जैसे कि NumberLiteral "50%") के लिए, खास तरीके से हैंडल करने की ज़रूरत से बचते हैं. रेंडरर सिर्फ़ एचटीएमएल नोड दिखाते हैं. इन्हें एक साथ जोड़ने पर, प्रॉपर्टी वैल्यू और उसके डेकोरेशन का रेप्रज़ेंटेशन मिलता है.

उदाहरण के तौर पर दिए गए ट्री में, प्रॉपर्टी वैल्यू इस क्रम में रेंडर की जाती है:

1. hsl फ़ंक्शन कॉल पर जाएं. यह मैच हो गया है, इसलिए कलर फ़ंक्शन रेंडरर को कॉल करें. इससे दो काम होते हैं:
   • किसी भी var आर्ग्युमेंट के लिए, ऑन-द-फ़्लाई बदलाव करने की सुविधा का इस्तेमाल करके, कलर की असल वैल्यू का हिसाब लगाता है. इसके बाद, कलर आइकॉन बनाता है.
   • CallExpression के बच्चों को बार-बार रेंडर करता है. इससे फ़ंक्शन के नाम, ब्रैकेट, और कॉमा को अपने-आप रेंडर किया जाता है. ये सिर्फ़ टेक्स्ट होते हैं.
2. hsl कॉल के पहले आर्ग्युमेंट पर जाएं. यह मैच हो गया है, इसलिए ऐंगल रेंडरर को कॉल करें. यह ऐंगल आइकॉन और ऐंगल का टेक्स्ट बनाता है.
3. दूसरे आर्ग्युमेंट पर जाएं, जो var कॉल है. यह मैच हो गया, इसलिए वैरिएबल रेंडरर को कॉल करें. इससे यह आउटपुट मिलता है:
   • शुरुआत में var( टेक्स्ट.
   • वैरिएबल का नाम तय करके, उसे वैरिएबल की परिभाषा के लिंक या स्लेटी रंग के टेक्स्ट से सजाता है. इससे यह पता चलता है कि वैरिएबल तय नहीं है. यह वैरिएबल की वैल्यू के बारे में जानकारी दिखाने के लिए, इसमें एक पॉपओवर भी जोड़ता है.
   • कॉमा और फिर फ़ॉलबैक वैल्यू को बार-बार रेंडर किया जाता है.
   • क्लोज़ ब्रैकेट.
4. hsl कॉल के आखिरी आर्ग्युमेंट पर जाएं. यह मेल नहीं खाता, इसलिए इसका टेक्स्ट कॉन्टेंट आउटपुट में शामिल करें.

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

रेंडरर की एक और शानदार सुविधा यह है कि मेल खाने वाले नोड के चिल्ड्रेन की रेंडरिंग को कंट्रोल किया जाता है. इसकी मदद से, हम जोड़े जा रहे आइकॉन के बीच डिपेंडेंसी का पता लगा सकते हैं. ऊपर दिए गए उदाहरण में, hsl फ़ंक्शन से मिलने वाला रंग, उसकी ह्यू वैल्यू पर निर्भर करता है. इसका मतलब है कि कलर आइकॉन के ज़रिए दिखाया जाने वाला रंग, ऐंगल आइकॉन के दिखाए गए ऐंगल पर निर्भर करता है. अगर उपयोगकर्ता उस आइकॉन की मदद से ऐंगल एडिटर खोलता है और ऐंगल में बदलाव करता है, तो अब हम कलर आइकॉन का रंग रीयल टाइम में अपडेट कर सकते हैं:

ऊपर दिए गए उदाहरण में देखा जा सकता है कि हम इस तरीके का इस्तेमाल, आइकॉन के दूसरे पेयर के लिए भी करते हैं. जैसे, color-mix() और उसके दो कलर चैनल या var फ़ंक्शन, जो फ़ॉलबैक से रंग दिखाते हैं.

परफ़ॉर्मेंस पर असर

विश्वसनीयता को बेहतर बनाने और लंबे समय से मौजूद समस्याओं को ठीक करने के लिए इस समस्या की जांच करते समय, हमें कुछ परफ़ॉर्मेंस रिग्रेशन की उम्मीद थी. ऐसा इसलिए, क्योंकि हमने एक पूरी तरह से तैयार पार्सर चलाना शुरू कर दिया था. इसकी जांच करने के लिए, हमने एक मानदंड बनाया है, जो करीब 3.5 हज़ार प्रॉपर्टी एलान को रेंडर करता है. साथ ही, M1 मशीन पर छह गुना थ्रॉटलिंग के साथ, रेगुलर एक्सप्रेशन पर आधारित और पार्स करने वाले, दोनों वर्शन की प्रोफ़ाइल बनाता है.

जैसा कि हमने अनुमान लगाया था, उस मामले के लिए पार्सिंग पर आधारित तरीका, रेगुलर एक्सप्रेशन पर आधारित तरीके से 27% धीमा था. रेगुलर एक्सप्रेशन पर आधारित तरीके को रेंडर होने में 11 सेकंड लगे, जबकि पार्सर पर आधारित तरीके को रेंडर होने में 15 सेकंड लगे.

इस नई रणनीति से मिलने वाली उपलब्धियों को ध्यान में रखते हुए, हमने इस दिशा में आगे बढ़ने का फ़ैसला लिया है.

धन्यवाद

इस पोस्ट में बदलाव करने में हमारी मदद करने के लिए, सोफ़िया एमिलियानोवा और जेसलीन येन का बहुत-बहुत धन्यवाद!

झलक वाले चैनल डाउनलोड करना

Chrome कैनरी, डेवलपर या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!

Chrome DevTools की टीम से संपर्क करना

DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.

• crbug.com पर जाकर, हमें सुझाव/राय दें या शिकायत करें. साथ ही, किसी सुविधा का अनुरोध करें.
• DevTools में more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools YouTube वीडियो में नया क्या है या DevTools सलाह YouTube वीडियो पर टिप्पणी की जा सकती हैं.