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

मक्सिम सडेम

Twitter GitHub

ध्यान दें: क्या आपको DevTools को बेहतर बनाने में मदद करनी है? Google के उपयोगकर्ताओं पर होने वाली रिसर्च में हिस्सा लेने के लिए, यहां साइन अप करें.

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

कम शब्दों में लिखें; गलत क्रम को हटाने से नतीजा मिलता है.

खास जानकारी

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

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

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

mojo तरीके

एक मोजो निर्देश EvaluateScript है, जो JS कमांड चलाता है. यह arguments को शामिल करके, पूरे JS कमांड को JavaScript सोर्स कोड की स्ट्रिंग में सीरीज़ के तौर पर दिखाता है. यह स्ट्रिंग eval() हो सकती है. जैसा कि आपने सोचा होगा, ये स्ट्रिंग बहुत लंबी और महंगी हो सकती हैं. वर्शन 8 को निर्देश मिलने के बाद, चलने से पहले 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-on-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 खुल जाता है और सीपीयू का कम इस्तेमाल करके तेज़ी से काम करता है. 🎉

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

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

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

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

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