जेएस निष्पादन गति और पृष्ठ प्रदर्शन एल्गोरिथ्म का अन्वेषण करें

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



इस लेख में कुछ परिकल्पनाएं और कुछ तथ्य होंगे। ब्राउज़र अभिविन्यास बदलने के लिए कोई प्रशंसक भाषण या कॉल नहीं होगा ।



तो, हमारे प्रयोगात्मक खरगोश:

• एफएफ 4 बी 7
• ओपेरा 10.63
• क्रोम 7

मैंने IE9 का परीक्षण नहीं किया, क्योंकि मैंने इसे एक वर्चुअल मशीन पर स्थापित किया है, और यह गति में एक दंड की उपस्थिति और मूल्यों में ध्यान देने योग्य प्रसार के साथ भरा हुआ है।

जेएस इंजन अनुकूलित, अनुकूलित, लेकिन अनुकूलित नहीं

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

हमें DOM क्या बनाना चाहिए?

चलो एक सरल, घोड़ा-वैक्यूम-गोलाकार उदाहरण लेते हैं: एक लूप में एक स्क्रिप्ट डोम नोड्स बनाता है, जो तब दस्तावेज़ में जोड़ता है।



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

1. नोड बनाने के जेएस-फ़ंक्शन का निष्पादन (सादगी के लिए, चलो इसे "जेएस" कहते हैं)
2. ब्राउज़र (DOM) में DOM ऑब्जेक्ट बनाना
3. एक नोड प्रतिपादन (प्रतिपादन)

अनुक्रमिक निष्पादन

जाहिर है, तत्वों को प्रदर्शित करने के लिए तंत्र को लागू करने का सबसे सरल तरीका क्रमबद्ध रूप से कमांड निष्पादित करना है: सबसे पहले, हम जेएस फ़ंक्शन को निष्पादित करते हैं, जिसकी कमांड से हमें DOM नोड का एक उदाहरण मिलता है, जिसे हम रेंडरिंग के लिए भेजते हैं।







यह एक खराब कार्यान्वयन विधि नहीं है। इसका मुख्य दोष यह है कि आप जेएस इंजन को ब्राउज़र के अन्य कार्यात्मक भागों से "काट" नहीं सकते हैं। हालाँकि, इसके आस-पास एक आसान तरीका है।

एक समय में एक कार्य करना

और चलो हमारे कानों के साथ एक फिंट बनाते हैं और कुछ निष्पादन कतारों के साथ हमारी परतों को विभाजित करते हैं। डोम वस्तुओं के कारखाने के आगे कार्य को पारित करने के बाद, जेएस इंजन बस निष्पादन के लिए आदेशों के एक सेट को कतारबद्ध करेगा और सो जाएगा। फैक्ट्री सभी आवश्यक आदेशों को निष्पादित करेगी, साथ ही रेंडरिंग के लिए तैयार वस्तुओं का एक सेट तैयार करेगी। हम सब कुछ रेंडरिंग कतार में रख देते हैं और बैटन को रेंडरिंग सिस्टम में भेज देते हैं। देखा!







इस तरह की वास्तुकला में, ब्राउज़र का एक हिस्सा दूसरे से "कट ऑफ" करना काफी सरल है, संचार कार्य कतार से होता है।

पूर्ण संगति

पिछले अवतार में, चरण क्रमिक रूप से किए जाते हैं। लेकिन क्या होगा अगर हम तीन समानांतर सिस्टम बनाते हैं? DOM ऑब्जेक्ट्स की फैक्ट्री जॉब कतार की निगरानी करती है, और जैसे ही कमांड दिखाई देती है, तुरंत DOM नोड बनाती है और इसे रेंडरिंग क्यू में भेजती है।







डरावना? हाँ, बहुत दिलचस्प!

परीक्षण

आइए अब उपरोक्त प्रत्येक आर्किटेक्चर की JS निष्पादन गति को मापें। अभी तक परीक्षण शुरू नहीं हुआ है, यह पहले से ही स्पष्ट है कि पहले मामले में हम तीनों चरणों की गति को मापेंगे, दूसरे और तीसरे में - केवल कतार बनाने की गति। लेकिन यह वास्तविकता को प्रतिबिंबित नहीं करेगा!



तीन दृष्टिकोणों को संतुलित करने के लिए, मैंने एक साधारण बेंचमार्क ( RapidShare / Yandex / pasteBin ) बनाया। कई ब्लैंक के क्लोन बेतरतीब ढंग से उत्पन्न होते हैं। यदि क्लोन पंक्ति में अंतिम है, तो इसे एक चौड़ाई असाइन की जाती है ताकि यह सभी उपलब्ध खाली स्थान पर कब्जा कर ले। तत्व तैर रहे हैं और जब तक वे खींचे नहीं जाते, यह स्पष्ट नहीं है कि उनके पास क्या स्थिति और चौड़ाई है। वास्तव में, मैंने सब कुछ आदेशों के क्रमिक निष्पादन के लिए नेतृत्व किया।



परीक्षण ने वास्तव में मुझे चौंका दिया।



पहले, आइए लोड के बिना परीक्षा परिणाम देखें।

	500	750	1000
फ़ायरफ़ॉक्स	19	30	45
ओपेरा	6	10	14
क्रोम	5	9	14

फॉक्स ओपेरा और क्रोम से तीन गुना पीछे है। ऑपेरा की तुलना में क्रोम थोड़ा तेज है, लेकिन पुनरावृत्तियों की संख्या में वृद्धि के साथ, अंतराल कम हो जाता है।



अब "ब्रेक" चालू करें

	500	750	1000
फ़ायरफ़ॉक्स	950	2350	4800
ओपेरा	610	1250	2100
क्रोम	5700	20500	~ 55000

मुझे अपनी आँखों पर विश्वास नहीं हो रहा था। एक हजार पुनरावृत्तियों में, क्रोम क्रूर विचारशीलता में गिर जाता है और अपनी कमजोर आत्मा का मजाक नहीं उड़ाने और स्क्रिप्ट के निष्पादन को रोककर अपनी पीड़ा को समाप्त करने का अनुरोध जारी करता है। यह पहिया में एक छड़ी है!



ओपेरा ने बिना शर्त प्रतियोगिता जीती, फॉक्स दूसरे।

थोड़ा विश्लेषण

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



ओपेरा में, लोड को चालू करने पर गति में गिरावट 100 से 150 बार होती है। ओपेरा पेज को स्क्रिप्ट रन के रूप में प्रस्तुत करता है, जो तीन चरणों के समानांतर निष्पादन योजना के समान है।



क्रोमियम की गति में गिरावट 1,000 से 4,000 गुना तक होती है। जब तक यह लूप पूरा नहीं करता तब तक क्रोम पेज को रेंडर नहीं करता है। यह बहुत हद तक चरणों के समान है।



मजेदार बात है।

निष्कर्ष

मेरा लेख आंशिक रूप से सैद्धांतिक है और इसमें प्रस्तुत किए गए आर्किटेक्चर वास्तव में पुष्टि नहीं किए गए हैं।



तत्वों के आकार का विश्लेषण करने वाली स्क्रिप्ट बनाते समय, सावधान और सतर्क रहें। रेंडरिंग आर्किटेक्चर में अंतर से दुगनी गति की गिरावट हो सकती है।



युपीडी। यैंडेक्स पर बेंचमार्क के लिए एक लिंक जोड़ा गया ।



बहुत से लोग पूछते हैं कि मैं किस कार्यक्रम में चार्ट बनाता हूं। मैन्युअल रूप से Corel Photopaint X5 में।



UPD2। पेस्टबिन में एक लिंक जोड़ा गया। शुक्रिया दोस्तो! ।