DevTools के चालू होने में लगने वाले समय में सुधार करना

Maksim Sadym

DevTools स्टार्टअप अब ~13% ज़्यादा तेज़ है 🎉 (11.2 सेकंड से लेकर 10 सेकंड तक)

कम शब्दों में कहा जाए, तो ग़ैर-ज़रूरी क्रम को हटाकर ही नतीजा मिलता है.

खास जानकारी

DevTools शुरू होने के दौरान, आपको V8 JavaScript इंजन को कॉल करने होंगे.

Chromium, DevTools को V8 को भेजने के लिए इस्तेमाल किए गए तरीके को mojo करता है. आम तौर पर, आईपीसी के लिए भी इस तरीके का इस्तेमाल किया जाता है. मेरी टीम के साथी बेनेडिक्ट म्युरर और सिगर्ड श्नाइडर को दूसरे टास्क पर काम करते समय एक गलती का पता चला. उन्होंने इन मैसेज को भेजने और पाने के दो ग़ैर-ज़रूरी चरणों को हटाकर, इस प्रोसेस को बेहतर बनाने का आइडिया सोचा.

आइए, देखते हैं कि mojo तकनीक कैसे काम करती है!

mojo तरीके

एक mojo कमांड EvaluateScript है, जो JS कमांड को चलाता है. यह arguments के साथ पूरे JS कमांड को, JavaScript सोर्स कोड की उस स्ट्रिंग में बनाता है जो eval() हो सकता है. जैसा कि आप कल्पना कर सकती हैं, ये स्ट्रिंग काफ़ी लंबी और महंगी बन सकती हैं. V8 को निर्देश मिलने के बाद, JavaScript कोड की इन स्ट्रिंग को चलाने से पहले डीसीरियलाइज़ (पार्स) किया जाता है. हर मैसेज को क्रम से लगाने और डीसीरियलाइज़ करने की इस प्रोसेस से एक अहम ओवरहेड बनता है.

बेनेडिक्ट म्युरर ने महसूस किया कि arguments का सीरियलाइज़ेशन और डीसीरियलाइज़ेशन काफ़ी महंगा है और "JS स्ट्रिंग को क्रम से लगाएं" और "Deserialize JS स्ट्रिंग" चरण ग़ैर-ज़रूरी और स्किप किए जा सकते हैं.

तकनीकी जानकारी: RenderFrameHostImpl::ExecuteJavaScript

हमने कैसे सुधार किया

हमने mojo API का एक और तरीका लॉन्च किया. इसकी मदद से, JavaScript सोर्स कोड की स्ट्रिंग बनाने के बजाय, ऑब्जेक्ट का नाम, कॉल करने का तरीका, और आर्ग्युमेंट की सूची को सीधे पास किया जा सकता है. इससे हमें क्रम से लगाने और डीसीरियलाइज़ेशन की प्रक्रिया को स्किप करने में मदद मिलती है. साथ ही, JavaScript कोड को पार्स करने की ज़रूरत नहीं पड़ती.

हमने इस ऑप्टिमाइज़ेशन को कैसे लागू किया है, इस बारे में तकनीकी जानकारी के लिए, ये दो पैच देखें:

1. CL 2431864: [devtools] फ़्रंट-एंड में मैसेज भेजने से जुड़े ओवरहेड को कम करें
2. CL 2442012: [devtools] DevTools में ExecuteJavaScriptMethod का इस्तेमाल करना

असर

बदलाव के असर को मापने के लिए, हमने Chromium में किए गए बदलावों cb971089a058 और 4f213b39d581 (बदलाव से पहले और बाद में) की तुलना करने वाले कुछ मेज़रमेंट किए हैं.

दोनों बदलावों के लिए, हमने नीचे दी गई स्थिति को पांच बार चलाया है:

1. chrome://tracing का इस्तेमाल करके ट्रेस रिकॉर्ड करें
2. DevTools-on-DevTools खोलें
3. रिकॉर्ड किया गया CrRendererMain ट्रेस पाएं और V8 की खास मेट्रिक की तुलना करें.

इन प्रयोगों के आधार पर, DevTools ~13% ज़्यादा तेज़ी से (11.2 सेकंड से लेकर 10 सेकंड तक) खुलता है. ऐसा ऑप्टिमाइज़ेशन की मदद से किया जाता है.

हाइलाइट, सीपीयू की अवधि

ट्रेसिंग मेट्रिक की तुलना करने वाली पूरी टेबल

इससे, DevTools खुल जाता है और सीपीयू (CPU) का कम इस्तेमाल होता है. साथ ही, तेज़ी से काम करता है. 🎉

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

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

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

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

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