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

Maksim Sadym
Maksim Sadym
X GitHub

DevTools अब ~13% ज़्यादा तेज़ी से खुलता है 🎉 (11.2 सेकंड से 10 सेकंड में)

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

खास जानकारी

DevTools के शुरू होने के दौरान, उसे V8 JavaScript इंजन को कुछ कॉल करने की ज़रूरत होती है.

DevTools को शुरू करने की प्रोसेस

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

आइए, mojo की सुविधा के काम करने के तरीके के बारे में जानते हैं!

mojo मैकेनिज़्म

मोजो के काम करने के तरीके

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

बेनेडिक्ट मेयर को पता चला कि arguments को सीरियलाइज़ और डीसीरियलाइज़ करना काफ़ी महंगा है. साथ ही, "JS कमांड को JS स्ट्रिंग में सीरियलाइज़ करना" और "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 में DevTools खोलना
  3. रिकॉर्ड किया गया CrRendererMain ट्रेस पाएं और V8 से जुड़ी मेट्रिक की तुलना करें.

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

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

तरीका का नाम ऑप्टिमाइज़ नहीं किया गया (मि॰से॰) ऑप्टिमाइज़ किया गया (मि॰से॰) अंतर (मि॰से॰) स्पीड में हुई बढ़ोतरी (%)
कुल 11,213.19 9,953.99 -1,259.20 12.65%
v8.run 499.67 3.61 -496.06 12.65%
V8.Execute 1,654.87 1,349.61 -305.25 3.07%
v8.callFunction 1,171.84 1,339.77 167.94 -1.69%
v8.compile 133.93 3.56 -130.37 1.31%

DevTools को लोड होने में सीपीयू का इस्तेमाल करने में लगने वाला समय (मिलीसेकंड)

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

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

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

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

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

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