रेगुलर एक्सप्रेशन के अलावा: 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 के शुरुआती दिनों से ही वैल्यू का विश्लेषण करने वाला सिस्टम, ऑर्गैनिक तरीके से बढ़ रहा है. हालांकि, यह सीएसएस से मिलने वाली हाल ही की शानदार नई सुविधाओं और भाषा की जटिलता में होने वाली बढ़ोतरी के साथ बराबरी में नहीं बना सका है. क्रमिक विकास को ध्यान में रखते हुए, सिस्टम को पूरी तरह से दोबारा डिज़ाइन करने की ज़रूरत पड़ी और हमने यही किया!

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

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

मिलते-जुलते var()

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

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

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

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

इसे छोड़कर, हमें रेगुलर एक्सप्रेशन पर आधारित मैचिंग से सीधे पार्सर पर आधारित मैचिंग पर माइग्रेट करना मुश्किल लगा: दोनों तरीके अलग-अलग निर्देशों से काम करते हैं. रेगुलर एक्सप्रेशन की मदद से वैल्यू के हिस्सों का मिलान करने के लिए, 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 फ़ंक्शन के लिए कॉल एक्सप्रेशन को मैच करते हैं, ताकि हम इसे कलर आइकॉन से सजा सकें.

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

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

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

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

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

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

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

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

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

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

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

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

स्वीकार की गई

इस पोस्ट में बदलाव करने में सोफ़िया एमिलियानोवा और जेसिलिन येन को योगदान देने के लिए हम उनका दिल से शुक्रिया अदा करते हैं!

झलक दिखाने वाले चैनलों को डाउनलोड करें

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

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

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

• crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
• ज़्यादा विकल्प   > का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें सहायता > DevTools में DevTools से जुड़ी समस्याओं की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.