व्यवहार में, 80-90% मामलों में, वेब एप्लिकेशन फ्रंट-एंड के कारण धीमा है: इवान अकुलोव के साथ एक साक्षात्कार

इवान अकुलाव वेब प्रौद्योगिकियों में Google डेवलपर विशेषज्ञ और प्रदर्शन कंपनी PerfPerfPerf के संस्थापक हैं। बहुत जल्द, होल्जेस 2019 मॉस्को में, वह प्रदर्शन के लिए समर्पित, अजीब तरह से पर्याप्त एक कार्यशाला आयोजित करेगा - प्रतिक्रिया में समस्याओं का पता लगाना, धीमी गति से अनुप्रयोगों और अन्य रनटाइम चीजों को डिबग करना।

इस विषय में पवित्रजेएस 2019 मास्को के पाठकों और आगंतुकों को अधिक विसर्जित करने के लिए, हमने इवान के साथ चर्चा की:

• सबसे लोकप्रिय प्रदर्शन के मुद्दे;
• प्रदर्शन को कैसे मापें और समस्या क्या हो सकती है;
• प्रदर्शन का अनुकूलन कैसे करें;
• प्रतिक्रिया में प्रदर्शन के मुद्दों की तलाश करें;
• HTTP / 2 और HTTP / 3 पर स्विच करने के लाभ;
• नई परियोजनाओं पर एक कॉम्पैक्ट ढांचे का उपयोग करना बेहतर है;
• WebAssembly के लाभों के बारे में;
• उपयोगी प्रदर्शन जानकारी के लिए कहां देखें;
• उसकी कार्यशाला किस बारे में होगी और कौन इसमें आने में दिलचस्पी रखेगा (और आखिर कार्यशालाओं में क्यों जाता है)।

पवित्रजस कार्यक्रम समिति से दिमित्री मखनेव और अर्योम कोबज़ार से प्रश्न पूछे जाते हैं।

वह क्या करता है और कैसे प्रदर्शन के लिए आया था

दिमित्री: मुझे अपने बारे में कुछ शब्द बताओ।

इवान: मैं इवान अकुलोव, प्रदर्शन सलाहकार, Google डेवलपर विशेषज्ञ, मेरी प्रदर्शन परामर्श एजेंसी कर रहा हूं।

दिमित्री: आप कहते हैं कि एक परामर्श एजेंसी मुख्य काम नहीं है। लेकिन मूल रूप से आप क्या कर रहे हैं?

इवान: मेरा समय अब ​​लगभग वितरित किया गया है ताकि मैं एक पुराने ग्राहक के साथ काम से आधा भरा हुआ हूं। मैं एक ब्राज़ीलियाई कंपनी के साथ काम करता हूं, साथ में हम एक वर्डप्रेस कंटेंट मार्केटिंग प्लेटफ़ॉर्म बनाते हैं, मैं वहाँ बुनियादी ढांचे और उत्पाद विकास का एक सा प्रबंधन करता हूं, और कुछ प्रकार की सामान्य दृष्टि।

बाकी समय मैं परामर्श, भाषण, लेख और वह सब समर्पित करता हूं।

दिमित्री: प्रदर्शन परामर्श के लिए कई अपीलें हैं? यह कैसे भी काम करता है?

इवान: सामान्य तौर पर, यह बहुत महीने पर निर्भर करता है या ऐसा कुछ ...

दिमित्री: ज्योतिषी प्रदर्शन के महीने की घोषणा कब करते हैं? :)

इवान: बल्कि, जब एकाउंटेंट एक नई तिमाही की घोषणा करते हैं! (हंसते हुए)। मैं अभी सक्रिय रूप से ग्राहकों की तलाश नहीं कर रहा हूं, मुख्य कारण यह है कि अब इसके लिए कोई समय नहीं है, क्योंकि मेरे पास पहले से ही लोड है जो मेरे पास है। लेकिन सामान्य तौर पर, सब कुछ ऐसा दिखता है कि मैं कुछ लेख लिखता हूं, कुछ भाषण देता हूं, और जब कुछ ग्राहकों के साथ काम करते हैं, तो वे मुझे याद करते हैं और मुझे नए सुझाते हैं। ज्यादातर लोग नेटवर्क के लिए धन्यवाद करते हैं, और बहुत अच्छे दोस्त आते हैं।

Artyom: अपनी खुद की परामर्श फर्म बनाने से पहले आप प्रदर्शन विषय पर भी कैसे आए?

इवान: वास्तव में, यह सब इस तथ्य के साथ शुरू हुआ कि हमने एक बार एपम में एक पुराने-पुराने प्रोजेक्ट को आधे साल के लिए वीपबैक पर फिर से लिखा। विरासत का एक गुच्छा के साथ एक पुरानी परियोजना थी, जिसके सामने के छोर के ढांचे थे, जिनमें से आधे जावा स्टैक में काम करते थे। और जब से हमने वेबपैक्स को अपेक्षाकृत तेज़ बनाने में आधा साल बिताया, मुझे वेबपैक के साथ अनुभव मिला। और उस समय मैं मध्यम जटिलता का एक वेबपैक-विन्यास लिख सकता था, 20–40 की पंक्तियाँ, वस्तुतः स्मृति से, बिना किसी चीज के गुगली से, बिना झाँके के और यहाँ तक कि IntelliSense का उपयोग किए बिना।

और मुझे एहसास हुआ कि ऐसा अनुभव किसी और के लिए उपयोगी हो सकता है, मैंने वेबपैक के क्षेत्र में किसी तरह के परामर्श को शुरू करने का प्रयास करने का फैसला किया। मैंने अपने लिए एक लैंडिंग बनाई, इसे कहीं पोस्ट किया, कुछ लोग आए, मैंने उनमें से एक के साथ काम किया। और किसी तरह यह सब शुरू हुआ।

और बाद में, मैं सुचारू रूप से वेबपैक से संबंधित प्रदर्शन से लेकर सामान्य तौर पर प्रदर्शन परामर्श तक बह गया।

Artyom: क्या आपने उस प्रोजेक्ट पर असेंबली के प्रदर्शन को बेहतर बनाने का प्रबंधन किया है?

इवान: यह परियोजना पूरी तरह से काम नहीं कर रही है, न कि जिस तरह से मैं अंत में प्राप्त करना चाहता हूं। यह एक ऐसी बात थी कि दोस्तों एक समय ऐसा आया जब मुझे वास्तव में पैसे की जरूरत थी और फिर भी समझ नहीं आया कि कैसे बातचीत करूं, अपना ख्याल रखूं और इन वार्ता में अपने हितों का ध्यान रखूं। मैंने काम की असुरक्षित मात्रा के साथ कुछ छोटे निश्चित मूल्य सुझाए, हमने काम किया, मैंने उनकी मदद की, कुछ निर्णय लिए जो काम करने लगे, और प्रदर्शन को ठीक किया।

फिर यह पता चला कि इस घोल में कीड़े थे, यह अधूरा निकला और दुर्लभ कीड़े दुर्लभ किनारे के मामलों में पॉप अप हुए। हमने इसे ठीक करना शुरू कर दिया, मैंने एक, दूसरा, तीसरा बग तय किया, यह सब एक महीने तक चला। और अंत में, कुछ बिंदु पर, कीड़े होने बंद हो गए, लेकिन लोगों ने मुझसे कुछ और मांगने का फैसला किया, लेकिन चूंकि मेरे पास इसके लिए एक आंतरिक बजट है, यह पूरी तरह से खत्म हो गया है, मैंने अभी कहा: "क्षमा करें, मैं पहले से ही लोड हूं, और नहीं मैं मदद कर सकता हूं। ”

नतीजतन, जहां तक ​​मुझे पता चला है, कुछ महीनों में उन्होंने इस समाधान को कुछ अन्य, कम जटिल एक के साथ बदल दिया और 100% मामलों में काम किया।

सच कहूं तो, मैं खुद को नहीं जानता ... ऐसा लगता है कि मैंने आया और मदद की, और जो अंतिम निर्णय उन्होंने किया था, वह हमारी पहले की बातचीत में पैदा हुआ था, लेकिन मुझे नहीं पता कि उन्होंने जो किया, उसमें मेरी कितनी मदद की। और इस सब से वे कितने संतुष्ट थे। संक्षेप में, यह उतना सही नहीं था जितना मैं चाहूंगा।

ऐरटॉम: और आज की बात करें, तो क्या आप किसी तरह पिछले ग्राहकों को ट्रैक करते हैं, वे वहां कैसे कर रहे हैं, क्या यह सब मदद करता है?

इवान: हाँ, निश्चित रूप से। मैंने धीरे-धीरे कुछ दृष्टिकोण विकसित किए। सबसे पहले, अपने काम के अंत में मैं प्रत्येक क्लाइंट से कुछ सार्वजनिक प्रतिक्रिया प्राप्त करने की कोशिश करता हूं, जिसे साइट पर पोस्ट किया जा सकता है या कहीं पोस्ट किया जा सकता है।

दूसरी बात, मैंने नौकरी के प्रोसेस या अंत में ग्राहकों से सवाल पूछने के लिए एक दृष्टिकोण विकसित किया "आप वर्तमान प्रक्रिया, वर्तमान वर्कफ़्लो, वर्तमान कुछ से कैसे संतुष्ट हैं?" उत्तर विकल्पों के साथ "संतुष्ट से अधिक", "संतुष्ट", "लगभग संतुष्ट", "वास्तव में संतुष्ट नहीं"।

और मुझे यह सवाल पसंद है, क्योंकि यह विशिष्ट उत्तर देता है, न कि 1 से 5 तक कुछ मूर्खतापूर्ण पैमाने, जो हर कोई अपने तरीके से मानता है। अब तक, किसी भी ग्राहक ने "लगभग संतुष्ट" या "वास्तव में संतुष्ट नहीं" उत्तर दिया है। यह संतुष्ट, खुश और ऐसा ही कुछ था।

Artyom: क्या मैं सही ढंग से समझता हूं कि प्रदर्शन में आपकी विशेषज्ञता का क्षेत्र मुख्य रूप से ग्राहक की ओर है? या क्या आपके पास पूरे वेब स्टैक हैं जो परामर्श से प्रभावित हैं?

इवान: हाँ, विशेषज्ञता का क्षेत्र मुख्य रूप से क्लाइंट स्टैक पर लक्षित है, बैकएंड या डेटाबेस में प्रदर्शन अनुकूलन के साथ, मैंने बहुत कम काम किया। लेकिन व्यवहार में, यदि कोई वेब एप्लिकेशन धीमा हो जाता है, यहां तक ​​कि कुछ लेख या अध्ययन भी, तो यह है कि 80-90% मामलों में - यह ठीक सामने-नीचे होने के कारण धीमा हो जाता है।

यदि कोई ग्राहक अंदर आता है और कुछ धीमा हो जाता है, तो ज्यादातर मामलों में मेरी विशेषज्ञता सही है।

सबसे लोकप्रिय मुद्दों के बारे में

आर्टीम: और जब कुछ किनारे मामले होते हैं तो क्या होता है? जब हमारे पास जावास्क्रिप्ट और इसके लॉन्च की पार्सिंग के साथ समस्या नहीं है, लेकिन परिवहन के साथ समस्या है। जब पहली बातचीत क्लाइंट को सौंपी जाती है, साथ ही बैकएंड को भी। यह गॉसी है कि गज़िप गलत तरीके से स्थापित किया गया था, यह बहुत लंबे समय तक घूमता रहा है। आप इन मामलों में क्या करते हैं? और अगर आपका विश्लेषण मुख्य रूप से अग्रिम पंक्ति में है, तो आप इस तरह के मामलों को कैसे देखते हैं?

इवान: ठीक है, इसका आमतौर पर मतलब है कि सर्वर से प्रतिक्रिया समय बहुत लंबा हो जाता है। अगर मैं इसे किसी प्रकार के ऑडिट के दौरान नोटिस करता हूं, तो मैं devtools में देखता हूं, नेटवर्क में देखता हूं और देखता हूं कि सर्वर से समय 800 एमएस है - नट्स जाने के लिए, यह बहुत लंबा लगता है। और मैं यह समझने की कोशिश कर रहा हूं कि कैसे लोगों के पास सर्वर है, वे प्रत्येक उत्तर के दौरान क्या करते हैं। यदि यह जावास्क्रिप्ट या पीएचपी है, तो मैं सबसे अधिक संभावना है कि इसे ठीक से समझ सकता हूं और सब कुछ ठीक कर सकता हूं, अगर कुछ अन्य भाषा जो मैंने काम नहीं की, तो उनकी मदद की आवश्यकता हो सकती है।

दिमित्री: क्या आप अभ्यास में आने वाली शीर्ष 5 सबसे आम प्रदर्शन समस्याओं में से किसी का नाम ले सकते हैं?

इवान: मैं जिस तरह से याद करता हूं उसका पालन करूंगा। सामान्य समस्याओं में से एक, जो जटिल वेब अनुप्रयोगों में नहीं होती है, लेकिन साधारण साइटों पर होती है जब कोई डेवलपर या क्लाइंट बिना एसिंक्स या डिफरेंट विशेषताओं के हेड टैग के अंदर बहुत सी स्क्रिप्ट डालता है, और यह बुरा है क्योंकि ब्राउज़र पेज को तब तक प्रस्तुत करना शुरू नहीं कर सकता है इन लिपियों को लोड और निष्पादित नहीं करेगा।

और अगर कोई धीमा सर्वर या एक बड़ी स्क्रिप्ट है जिसे निष्पादित करने में लंबा समय लगता है, तो साइट का उपयोग करने वाला व्यक्ति निष्पादन के अंत तक पृष्ठ नहीं देखेगा।

एक अन्य आम समस्या थर्ड पार्टी स्क्रिप्ट है। मैं वर्तमान में एक क्लाइंट के साथ काम कर रहा हूं जिसे मैं उनके लाइटहाउस स्कोर को बेहतर बनाने में मदद कर रहा हूं। प्रारंभ में, उनके पास जो लाइटहाउस स्कोर था, वह लगभग 35-40 था। मैं आया, सभी प्रकार की अलग-अलग चीजों को किया, अनावश्यक जावास्क्रिप्ट को हटा दिया, संसाधनों को प्रस्तुत करना, किसी भी तरह से अनुकूलित करना ... आखिरकार मैंने ऐसा किया, स्कोर केवल 55 तक बढ़ गया। और यह पता चला है कि यदि आप जाते हैं और इस एकल अनुकूलित प्रतिक्रिया घटक पर टिप्पणी करते हैं जो सभी विश्लेषिकी को लोड करता है, तो लाइटहाउस स्कोर 88-90 + अंक तक कहीं भी कूदता है। ऐसा इसलिए होता है क्योंकि बहुत सारे JS हैं जो मैट्रिक्स को हटाते हैं।

कुछ जटिल वेब अनुप्रयोगों में, एक लगातार विषय यह है कि जब डेवलपर्स कुछ बड़े पुस्तकालय स्थापित करते हैं और यह बंडल में पूरी तरह से बंडल करता है, हालांकि यह पूरी तरह से उपयोग नहीं किया जाता है। अक्सर यह मोमेंट.जेएस होता है , जिसमें बहुत बड़ी स्थानीयकरण फाइलें होती हैं, 165 KB की मिनिफाइज्ड लोकलाइजेशन फाइलें होती हैं, जिनमें लगभग किसी की भी जरूरत नहीं होती है, न ही बहुत सारे तरीके होते हैं, और सभी केवल 10-20 का उपयोग करते हैं।

रेंडरिंग प्रदर्शन के साथ, अक्सर एक समस्या आती थी जब डेवलपर्स ने किसी प्रकार के ईवेंट हैंडलर को लटका दिया, उदाहरण के लिए, एक ईवेंट स्क्रॉल पर, इसे 5-10 एमएस लिया, और हर बार जब आप किसी चीज़ के माध्यम से स्क्रॉल करने की कोशिश करते हैं, तो पूरा पृष्ठ पिछड़ जाता है। अब यह कम हो गया है, क्योंकि उसी क्रोम में [निष्क्रिय घटना श्रोताओं को जोड़ा] ( https://stackoverflow.com/questions/37721782/what-are-passive-event-listeners )।

प्रदर्शन को मापने के तरीके के बारे में

दिमित्री: मामलों के दौरान, लाइटहाउस के बारे में एक सवाल सामने आया। मेरी राय में, सभी तीन बीयरजेएस शिखर सम्मेलन में थे, और एलेक्सी कल्माकोव की एक अच्छी रिपोर्ट थी - (सौवां) । कोई प्रविष्टि नहीं है, लेकिन मैंने हैबे पर एक समान लेख देखा, और ऐसी चीजें थोड़ा समझौता लाइटहाउस। यदि आप इसे शुद्ध रूप से एक उपकरण के रूप में लेते हैं, जिसके द्वारा किसी प्रदर्शन इंजीनियर के काम का मूल्यांकन किया जाता है, तो आप वहां कुछ तरकीबें कर सकते हैं।

क्या आपके पास कोई उपकरण हैं, शायद स्व-लिखित भी, जिसके साथ आप स्पष्ट रूप से आकलन करते हैं कि आप सफल हुए या नहीं। उदाहरण के लिए, आप एक अनुबंध पर हस्ताक्षर करते हैं और आपको बताया जाता है कि आपको प्रदर्शन x2 बनाने की आवश्यकता है। इसके लिए आप कौन से टूलसेट का उपयोग करेंगे?

इवान: ठीक है, सबसे पहले, अगर हम एक अनुबंध समाप्त करते हैं और x2 पर सहमत होते हैं, तो हम किसी तरह के साधन पर सहमत होंगे। लेकिन सामान्य तौर पर, लाइटहाउस के अलावा, मुझे वास्तव में वेबपेजेज पसंद है। यह एक बहुत अच्छा उन्नत वेब प्रदर्शन उपकरण है जो आपको वास्तविक मनमाने स्थान से अपने आवेदन का परीक्षण करने की अनुमति देता है, उदाहरण के लिए, ब्राज़ील या ऑस्ट्रेलिया, वास्तविक पर, उदाहरण के लिए, बहुत कमजोर डिवाइस, जैसे मोटो जी।

यह लाइटहाउस की तुलना में ठंडा है, क्योंकि यह यह सब अनुकरण करता है, और केवल एक वास्तविक डिवाइस पर परीक्षण के बाद ही आप जानते हैं कि साइट 15 सेकंड के लिए रेंडर कर रही है। दूसरा लाभ - यह सभी प्रकार के चार्ट के सुपर विस्तृत मैट्रिक्स का एक गुच्छा देता है, जैसे लोडिंग। मैं कुछ चीजों को देखने के लिए नियमित रूप से इसका उपयोग करता हूं।

दिमित्री: क्या आपने अपने किसी भी उपकरण को लिखा है, उदाहरण के लिए, क्रोम देवटूल प्रोटोकॉल के शीर्ष पर? आपके पास साधनों में क्या कमी है?

इवान: मैंने अपना यंत्र लाइटहाउस के ऊपर लिखा है। ग्राहकों में से एक के साथ काम करने के लिए, मुझे एक सेटअप की आवश्यकता थी जो मुझे लाइटहाउस के साथ एक पृष्ठ के प्रदर्शन को काफी स्थिर वातावरण में मापने की अनुमति देगा, इसे लाइटहाउस स्कोर मानें और इसे टेबल पर कॉपी करें। उसके साथ एक समस्या है: पेजस्पीड इनसाइट्स में लाइटहाउस बहुत स्थिर नहीं है। यदि आप एक ही पृष्ठ को तीन बार मापते हैं, तो आप तीन अलग-अलग माप प्राप्त कर सकते हैं। इसके अलावा, मुझे उन पृष्ठों को मापने की ज़रूरत है जो नेटवर्क पर तैयार और प्रकाशित नहीं थे, लेकिन स्थानीय एक। और एकमात्र विकल्प स्थानीय रूप से लाइटहाउस चलाना है, जो लाइटहाउस स्कोर को बहुत प्रभावित करता है, क्योंकि स्कोर आपके लैपटॉप पर क्या काम करता है पर निर्भर करता है। उदाहरण के लिए, डॉकर को लॉन्च किया, स्कोर 2 बार गिर गया।

इस मामले के लिए मुझे लाइटहाउस को अनुमान से मापने की आवश्यकता थी। मैंने एक पटकथा लिखी, जिसमें तीन बार लाइटहाउस चला, एक स्कोर, तीन बार का औसत मूल्य लिया, और कई सेटअपों के साथ कई पृष्ठों के लिए किया। मैंने इसके लिए एक DigitalOcean सर्वर किराए पर लिया और बाहरी कारकों से इसे अलग-थलग करने के लिए वहां सब कुछ चलाया।

आर्टीम: आपने विभिन्न लाइटहाउस मेट्रिक्स के बारे में एक दिलचस्प मामले का उल्लेख किया। हाल ही में एक लेख था, प्रोग्रामर्स के लिए 99 परसेंटाइल का परिचय , जिसमें उन्होंने सिर्फ यह निष्कर्ष निकाला कि आधुनिक बेंचमार्किंग टूल और, सिद्धांत रूप में, अकेले माइक्रो-बेंचमार्किंग कुछ भी साबित नहीं करते हैं।

आधुनिक उपकरणों के साथ यह अच्छी तरह से पता चल सकता है कि मैंने एक बेंचमार्क बनाया, आपने लिखा, दिमा ने लिखा, और वे सभी पूरी तरह से अलग-अलग बातें कहेंगे। और अब सिद्धांत और सांख्यिकी में कुछ अधिक या कम गहरे ज्ञान के बिना, बेंचमार्किंग बहुत प्रशंसनीय नहीं लगती है। आपने लाइटहाउस का उल्लेख किया, लेकिन क्या कोई प्रमाण है जो आपको बेंचमार्क में मिला है, कुछ अतिरिक्त पुष्टि?

दिमित्री: शायद लाइटहाउस को किसी चीज़ के साथ मिलाएं? आपने वेबपेजटेस्ट का उल्लेख किया है। हम उन्हें ले जाते हैं, शायद Chrome DevTools से अवलोकन भी करते हैं, और किसी तरह उन्हें मिलाते हैं?

इवान: वास्तव में, आदर्श रूप से, अगर किसी परियोजना पर कुछ है जो आपको RUM (वास्तविक उपयोगकर्ता मैट्रिक्स) को ट्रैक करने की अनुमति देता है - कुछ उपयोगकर्ताओं के लिए साइट कितनी वास्तविक है, और अगर हम इसे वास्तविक उपयोगकर्ताओं के लिए रोल कर सकते हैं और देखें कि कैसे यह उनके लिए काम किया - यह बिल्कुल सही मामला है।

लेकिन सामान्य तौर पर, हां, अगर मैं किसी प्रकार के टूल का उपयोग करता हूं, तो मैं वास्तव में औसत मूल्य प्राप्त करने के लिए एक से अधिक परीक्षण चलाता हूं, लेकिन सामान्य तौर पर, यह लेख वास्तविक समस्या को लाता है कि कुछ 99% उपयोगकर्ताओं का प्रतिशत है जिनके पास सब कुछ बहुत है यह बुरा है और हम नहीं जानते कि क्या हम सिर्फ लाइटहाउस का उपयोग करते हैं, लेकिन यह नहीं कहता है कि लाइटहाउस बेकार है, यह काम करना जारी रखता है और अस्पताल में औसत तापमान दिखाता है। अगर कुल मिलाकर हमने प्रदर्शन में सुधार किया है, तो लाइटहाउस इसे दिखाएगा।

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

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

दिमित्री: और सबसे पहले ध्यान देने वाली सबसे महत्वपूर्ण बात क्या है? पहला पेंट , इंटरएक्टिव का समय , पहली बाइट का समय , कुछ और?

इवान: मैं इसके बारे में है [एक रिपोर्ट है] ( https://www.youtube.com/watch?v=-H1l9XBXH6Q ) और मैं आपको बताता हूं कि देखने के लिए सबसे महत्वपूर्ण चीजें हैं पहली सार्थक पेंट और इंटरैक्टिव समय। और वे उतने ही महत्वपूर्ण हैं जितना कि वे वही दिखाते हैं जो उपयोगकर्ता पहली बार आया था। वह या तो पढ़ने या कुछ देखने के लिए आया था, फिर यह पहला सार्थक पेंट है, या एप्लिकेशन के साथ काम करना है, तो यह इंटरएक्टिव है। यदि आप किसी प्रकार का लैंडिंग पृष्ठ या समाचार साइट बना रहे हैं, तो पहले अर्थपूर्ण पेंट को ऑप्टिमाइज़ करें, और यदि आपके पास कोई जटिल एप्लिकेशन है, तो पहले सार्थक पेंट और समय को इंटरएक्टिव ऑप्टिमाइज़ करें।

आर्टीम: हमने आपके अभ्यास में सबसे लोकप्रिय मामलों का उल्लेख किया है। और कौन से मामले सबसे दुर्लभ या सबसे दिलचस्प हैं, जिसमें आपको कहीं ना कहीं खुदाई करनी थी?

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

प्रदर्शन का अनुकूलन कैसे करें

दिमित्री: हमने मुख्य ब्राउज़र बारीकियों के बारे में बात की, और चौखटों पर जाने से पहले, मैं वास्तुकला, कुछ डेटा संरचनाओं का उपयोग करके प्रदर्शन अनुकूलन के बारे में सीखना चाहूंगा। क्या आपको आवेदन में कुछ पूरी तरह से बदलना है, उदाहरण के लिए, खोज के लिए एक उपसर्ग सूची या कुछ और जोड़ना जो कि दृश्यपटल के लिए बहुत सामान्य नहीं है? क्या ऐसा होता है?

इवान: मैंने व्यावहारिक रूप से डेटा संरचनाओं या एल्गोरिथम जटिलता के स्तर पर काम नहीं किया है, क्योंकि बहुत सारी चीजें करनी पड़ती हैं ताकि आवेदन इस में धीमा हो जाए, और कुछ और नहीं। और इसलिए, बड़े टुकड़ों के बारे में, मैं एक नई परियोजना बनाते समय सभी को सलाह देता हूं या यदि परियोजना अभी शुरू हुई है और यह अभी भी काफी छोटी है, तो इसे Next.js या Gatsby जैसे ढांचे पर करें।

दोनों और एक और प्रतिक्रिया के लिए एक ढांचा है जो कि इसलिए बनाया गया है ताकि आप बस इस ढांचे के दृष्टिकोणों की जोड़ी का उपयोग करके आवेदन लिखे, और यह स्वचालित रूप से तेज हो गया। और ये बहुत लोकप्रिय फ्रेमवर्क हैं, वे अपना काम पूरी तरह से करते हैं, मैं खुद उन्हें अपने प्रोडक्शन प्रोजेक्ट्स में इस्तेमाल करता हूं और सभी को इसकी सलाह देता हूं।

आर्टेम: बस यहां हमने हाल ही में वी 8 के अंदर नंबर डिवाइस के कारण V8 को कैसे रिएक्ट किया, इससे संबंधित एक घटना हुई । क्या आपको यह समस्या महसूस हुई या क्या कोई खोज थी कि आवेदन धीमा क्यों हो गया?

इवान: मैंने महसूस नहीं किया और इस लेख को deoptimization के बारे में नहीं पढ़ा। क्या कोई विशिष्ट ऑपरेशन था या पूरे रिएक्ट को धीमा कर दिया था?

Artyom: सामान्य तौर पर, क्योंकि React में, FiberNode के अंदर एक टाइमस्टैम्प होता है, और इसे शुरू में 0 पर सेट किया गया था और विस्तार (रोका) को रोका गया था, और इसके लिए, एक छोटे से पूर्णांक के साथ एक आकृति को संख्याओं पर संचालन के लिए आवंटित किया गया था। और जब वास्तविक मूल्य से भरा टाइमस्टैम्प, जो 128 से परे चढ़ गया, तो यह पता चला कि संरचना को छोटे पूर्णांक से उत्परिवर्तनीय हीप संख्या में बदलना आवश्यक था, और चूंकि रोकथाम को कहा जाता था, प्रत्येक फाइबर नोड के लिए पूरी तरह से नए आकार बनाए गए थे। और दसियों और सैकड़ों हजारों हैं।

इवान: मैंने इस पर ध्यान नहीं दिया, और मैंने शायद ही देखा होगा, क्योंकि जब मैं डिबग करता हूं, तो मेरी स्मृति में एक नहीं होता है कि इस ऑपरेशन को रिएक्ट में केवल 10 एमएस लेना चाहिए, और इसमें 20 लगते हैं। मैं सिर्फ डिबग करता हूं, मैं प्रदर्शन ट्रेस देखता हूं मैं कुछ अड़चनें चुनता हूं जहां कुछ धीमा हो जाता है। यदि प्रदर्शन वितरित किया जाता है, तो वी 8 में कुछ अंतराल हैं और पूरे आवेदन के दौरान समान रूप से वितरित किए जाते हैं, फिर अगर मैं बहुत गहरे डिबग में नहीं जाता हूं, तो मैं नोटिस नहीं करूंगा।

यदि यह एक डी-ऑप्टिमाइज़्ड V8 ऑपरेशन में होता है और इसमें लंबा समय लगता है, तो मैं नोटिस करूँगा और डीप डीबगिंग में जाऊँगा।

एरीटॉम: क्या वास्तव में रिएक्ट का कोई मुद्दा था, या अन्य फ्रेमवर्क का जहां आपको कोई मुद्दा बनाना था, किसी चीज की तह तक जाने के लिए?

इवान: मेरी राय में, मैंने कुछ बगों की सूचना दी, लेकिन मुझे विवरण याद नहीं हैं ... मुझे नहीं लगता कि यह इस मुद्दे के लिए प्रासंगिक होगा या नहीं, लेकिन मैं हाल ही में एक दिलचस्प मामले में आया जब सीएसएस चर रिएक्ट प्रोप द्वारा अनुप्रयोगों को बदलने के लिए धीमा हो गया। और मेरे लिए यह अजीब लगता है, क्योंकि हम कहते थे कि सीएसएस सुपरफास्ट है, और फिर अचानक यह रिएक्ट की तुलना में बहुत धीमा काम करता है।

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

मुझे 80% यकीन है कि यह ऐसा है जो मैंने V8 कोड से समझा था, लेकिन मैं गलत हो सकता हूं। लेकिन यह एक ऐसी चीज है जिसे ब्राउज़रों में पंजीकृत और मरम्मत किया जा सकता है, लेकिन यह माइक्रोब्यूग नहीं है, शायद बहुत काम है। मैंने अभी तक इसकी रिपोर्ट नहीं की है और मुझे नहीं पता कि इसे ठीक करने पर मुझे कितना समय लगेगा।

Artyom: क्या आपको परिणामी बायोटेक देखना है? Deoptimization के समान विचारों के साथ, आप V8 बाईटेककोड देखते हैं, और क्या कोई अतिरिक्त ऑपरेशन डाला जाता है?

इवान: नहीं, मैं शायद कभी भी बायटेकोड में नहीं देखा था, लेकिन मैं बहुत अच्छी तरह से छोटा जावास्क्रिप्ट पढ़ना सीख गया। (हंसते हुए)

दिमित्री: और पिछले उत्तर के लिए - क्या आप किसी तरह ब्राउज़र डेवलपर्स के साथ ऐसी बातों को स्पष्ट करने के लिए संवाद करते हैं? और यदि हां, तो वे कैसे प्रतिक्रिया देते हैं? और क्या वे जवाब देते हैं?

: GDE (Google Developer Expert), Google- Slack-, Google-, Chrome. - , . , . . .

: ! .

: , Google, GDE ().

: :)

: , , , .

: , Moment.js. , , Day.js -, bundlephobia . , , , Angular, .

, , , , , , , , . ? , issue , ? , ?

: … . - , , . - , , userspace- .

, .

, , , - . webpack - . React, , API Preact , Inferno .

: ? , , , , Vue.js, , , . -?

: , . , , Angular, Angular. Angular, , . … , , . - Ext JS .

, . , . , .

WebAssembly

: , - JS, , high computation . WebAssembly, computational ?

: , WebAssembly - , .

: , , WASM. Figma, Blazor, C# WebAssembly, - . ?

: , - WebAssembly . , c WebAssembly , . .

: ?

: , . -, JavaScript - , WebAssembly , , 10 .

, , JavaScript, C++ Rust — WebAssembly . , , .

: . scroll, , . - - ? , Chrome iOS - ChromeOS - , - ? , , «.»?

: , performance IE11. , - , , IE11. , . IE11.

. «.» Chrome iOS , «.» Chromium, Chrome iOS — WebKit, iOS

: , … ()

HTTP/3

: , , . . HTTP/2, HTTP/3, QUIC . , : HTTP/2 , ?

, HTTP/3 ?

: HTTP/3 ?

: , Chrome , cURL, .

: , . , , , , HTTP/3 . Google , HTTP/3, , HTTP/3.

, , HTTP/2 , , , 2-3 , , HTTP/2 . HTTP/3 . , - , .

: , , ? , , - ?

: -, Twitter, (, []( https://twitter.com/slightlylate ), []( https://twitter.com/zachleat ), []( https://twitter.com/csswizardry ), []( https://twitter.com/igrigorik ), []( https://twitter.com/philwalton )). - Google GDE , - - performance-. .

, Calibre ( performance-) Perf.email , performance-.

: GDE! , - , . , , , ? , .

: , Service License Agreement , 95% . , performance . Juliarderity , , , . , .

: « », , . ? React, Angular .. — framework-specific , , ? TC39?

: (). , — , — .

: ?

: - . proposal, , . proposal, - . — .

: , RSS? - .

: RSS.

: , Habr, « Chrome», RSS . RSS , .

: , -, , , DevTool-, , - , , , .

: , ?

: Twitter, , -, Twitter, 20-30 . , « @vkozula ?».

, « , ». - . . , . , . Facebook- , - 50 , , .

: jsunderhood - ?

: underhood. - , . underhood, — jsunderhood 2017 , , , , , , .

: , , HolyJS jsunderhood, .. . ? , ?

: , , . , , , … , , . 10—20 .

: , ?

: , , , , , , , , . , , , Twitter , , . - Twitter Telegram , , .

Artyom: यदि हम किसी अन्य गतिविधि पर जाते हैं जिसका आपने उल्लेख नहीं किया है। आप कार्यशालाओं का नेतृत्व करते हैं, आपको लगता है कि इसमें बहुत अनुभव है। सार्वजनिक-एक्सेस वर्कशॉप आप ध्वनि पर विचार करने के लायक क्या समझते हैं, और क्या आप खुद सोचते हैं कि वे सामग्री को समग्र रूप में प्रस्तुत करने के मामले में सफल थे, और आगंतुक संतुष्ट थे?

इवान: मेरे पास निरपेक्ष मात्रा में इतनी कार्यशालाएं नहीं थीं, लेकिन मुझे जो सबसे ज्यादा गर्व है वह है मेरी वेबपैक कार्यशाला , जिसे मैंने 2017 के अंत में वेबपैक के लिए एक परिचय के रूप में किया था। दुर्भाग्य से, यह पहले से ही पुराना है, लेकिन यह शांत हो गया, क्योंकि मैंने एक ऑनलाइन प्रसारण आयोजित करने की योजना बनाई थी, लेकिन उस दिन मैंने इंटरनेट पर बेतहाशा शुरुआत की।

मैंने नेतृत्व करना शुरू कर दिया, 10 मिनट के बाद मैं गिर गया, फिर से मिला, फिर से गिर गया और मुझे इसे तुरंत रद्द करना पड़ा, माफी माँगता हूं और कहता हूं कि मैं वीडियो पर सभी सामग्री रिकॉर्ड करूंगा और इसे सभी को ऐसे ही डालूंगा। मैंने यह सब किया, बाहर रखा, इसने egghead.io पर वीडियो की एक श्रृंखला निकाली , और इस समस्या के अपवाद के साथ कि बहुत ही शांत ध्वनि थी, क्योंकि कोई सामान्य माइक्रोफोन नहीं था। मैंने बहुत सारी समीक्षाएं सुनीं, जो बहुत अच्छी थीं और इससे लोगों को वास्तव में मदद मिली।

दिमित्री: आपको क्या लगता है, यह कार्यशालाओं में जाने के लायक क्यों है? उदाहरण के लिए, यदि आप किसी ब्राउज़र पर एक कार्यशाला में गए हैं, तो मैं अक्सर सुनता हूं कि लोग यह देखना चाहते हैं कि वी 8 कैसे होता है या कुछ और। और पश्चिम में, इसके विपरीत, यदि आप शांत मिशेल वेस्टस्ट्रेट साक्षात्कार को याद करते हैं, तो उन्होंने कहा, “मैं उनसे सीखने जा रहा हूं। अगर मुझे डॉकटर के बारे में बिल्कुल पता नहीं है, तो मैं वहां जाता हूं और जल्दी से जानकारी प्राप्त करता हूं। आप कार्यशालाएँ कैसे देखते हैं और किन मामलों में आप अपनी कार्यशालाओं में भाग लेने की सलाह देते हैं? जानें, ज्ञान को गहरा करें, हिम्मत देखें?

इवान: मैं यह कहूंगा - यदि वर्णन आपको दिलचस्प लगा, तो आइए। जब मैं वर्कशॉप करता हूं, तो मैं हमेशा किसी न किसी तरह का आधार देने की कोशिश करता हूं ताकि जो लोग आते हैं और पहली बार इसके साथ काम करते हैं वे खोए नहीं। मैं सोच सकता हूं कि सुपर एडवांस में काम करने वाले कुछ लोग सुनने आए थे, शायद शुरुआत उबाऊ है। वे अंत तक नहीं रह सकते हैं जहां एक उन्नत विषय उठाया जा सकता है। दूसरी ओर, मैं यह वादा नहीं कर सकता कि मैं कुछ हिम्मत दिखाऊंगा, क्योंकि सभी लोगों को "हिम्मत" की अलग-अलग समझ है। मैं अपने अनुभव में आए कुछ सुपर दुर्लभ मामलों को दिखाऊंगा, और कोई और आ सकता है और उम्मीद कर सकता हूं कि मैं V8 को डेब्यू करूंगा या क्रोमियम संकलित करूंगा, लेकिन मैं नहीं कर पाया।

दिमित्री: और आप खुद को सिद्धांत रूप में, आमतौर पर एक कार्यशाला से क्या उम्मीद करते हैं?

इवान: मुझे याद है कि मैं केवल अपने जीवन में कुछ कार्यशालाओं में गया था। दोनों बार, यह मेरे लिए कुछ नया विषय था, जिसे मैं अभी भी समझ नहीं पाया। और कार्यशालाएं मेरे लिए किसी तरह का परिचय थीं, और यह सुपर उपयोगी थी।

अपनी कार्यशाला में, मैं बिल्कुल भी और प्रतिक्रिया में प्रदर्शन का परिचय नहीं देता, मुझे उम्मीद है कि आने वाले लोग इसके बारे में कुछ सुनेंगे, लेकिन कुछ बुनियादी विषयों को कवर करने और कुछ उन्नत डिबगिंग दिखाने की कोशिश करेंगे मैं उसे जानता हूं और उसके पार आया हूं।

दिमित्री: आप समग्र रूप से होल्जेस से क्या उम्मीद करते हैं? हो सकता है कि मैंने कुछ रिपोर्ट या वक्ताओं पर ध्यान दिया, जिनसे मैं बात करना चाहूंगा?

इवान: मैं एक महीने से अधिक समय पहले अपने लिए कुछ भी योजना नहीं बनाता, इसलिए मैंने अभी तक कुछ भी योजना नहीं बनाई है। तैयारी है, और बाकी चीजें होंगी। (हंसते हुए)

दिमित्री: बस इतना ही। साक्षात्कार के लिए बहुत बहुत धन्यवाद। हम आपकी कार्यशाला में सभी की प्रतीक्षा कर रहे हैं।