कुछ समय पहले, Wilson पेज ने Smashing Journal के लिए एक बढ़िया लेख लिखा था. इस लेख में बताया गया था कि उन्होंने फ़ाइनेंशियल टाइम्स के वेब ऐप्लिकेशन को कैसे लॉन्च किया. इस लेख में, विल्सन ने लिखा है:
जैसे-जैसे ऐप्लिकेशन बढ़ने लगा, हमने पाया कि परफ़ॉर्मेंस खराब और खराब होती जा रही है.
हमने Chrome डेवलपर टूल की टाइमलाइन पर कुछ घंटे बिताए और हमें गलती का पता चला: चौंकाने, डरावना! — वह हमारा नया सबसे अच्छा दोस्त, फ़्लेक्सबॉक्स था. टाइमलाइन से पता चला कि कुछ लेआउट में 100 मिलीसेकंड तक लग रहे थे. फ़्लेक्सबॉक्स के बिना अपने लेआउट पर फिर से काम करने में यह घटकर 10 मिलीसेकंड हो गया!
विल्सन की टिप्पणियां, display: box; का इस्तेमाल करने वाले मूल (लेगसी) फ़्लेक्सबॉक्स के बारे में हैं. अगर नए फ़्लेक्सबॉक्स (display: flex;) को ज़्यादा तेज़ बनाया जाता, तो उन्हें जवाब देने का मौका कभी नहीं मिला. हालांकि, CSS Tricks पर क्रिस कॉयियर ने यह सवाल खोला.
हमने ओजान वफ़ाई से पूछा, जिन्होंने WebKit & Blink में नए फ़्लेक्सबॉक्स मॉडल को लागू करने के बारे में काफ़ी कुछ लिखा है.
नए फ़्लेक्सबॉक्स कोड में मल्टी-पास लेआउट वाले कोडपाथ की संख्या कम है. हालांकि, अब भी मल्टी-पास कोडपाथ को आसानी से हिट किया जा सकता है (उदाहरण के लिए,
flex-align: stretchअक्सर 2-पास होता है). सामान्य तौर पर, यह सामान्य मामले में बहुत तेज़ होना चाहिए, लेकिन आप एक ऐसा मामला बना सकते हैं जहां यह उतना ही धीमा है.
हालांकि, अगर आप इसे कर देते हैं, तो सामान्य ब्लॉक लेआउट (नॉन-फ़्लोट) आम तौर पर नए फ़्लेक्सबॉक्स की तुलना में तेज़ या तेज़ होता है, क्योंकि यह हमेशा सिंगल-पास होता है. हालांकि, नया फ़्लेक्सबॉक्स टेबल का इस्तेमाल करने या कस्टम JS-बेस लेआउट कोड लिखने के मुकाबले तेज़ होना चाहिए.
संख्याओं के बीच का अंतर देखने के लिए, मैंने पुराने और नए सिंटैक्स की तुलना करनी है.
पुराना बनाम नया फ़्लेक्सबॉक्स बेंचमार्क
- old फ़्लेक्सबॉक्स बनाम नया फ़्लेक्सबॉक्स (फ़ॉलबैक के साथ)
- हर पेज पर 500 एलिमेंट
- एलिमेंट डालने के लिए पेज लोड होने की लागत का आकलन करना
- औसतन 3 रन
- डेस्कटॉप पर मापा गया. (मोबाइल की रफ़्तार करीब 10 गुना होगी)
पुराना फ़्लेक्सबॉक्स: ~43.5 मि॰से॰ की लेआउट कीमत
नया फ़्लेक्सबॉक्स: ~18.2 मि॰से॰ की लेआउट कीमत
खास जानकारी: पुराना कॉन्टेंट, नए की तुलना में 2.3 गुना धीमा है.
ऐसे में आपको क्या करना चाहिए?
फ़्लेक्सबॉक्स का इस्तेमाल करते समय हमेशा नई चीज़ों के बारे में जानें: IE10 ट्वीनर सिंटैक्स और अपडेट किया गया नया फ़्लेक्सबॉक्स, जो Chrome 21+, Safari 7+, Firefox 22+, Opera (और Opera Mobile) 12.1+, IE 11+, और BlackBerry 10+ में उपलब्ध है. ज़्यादातर मामलों में आप पुराने मोबाइल ब्राउज़र को वापस इस्तेमाल करने के लिए नए फ़्लेक्स बॉक्स का इस्तेमाल कर सकते हैं.
याद रखें: टूल, न कि नियम
सबसे ज़्यादा ज़रूरी चीज़ों को ऑप्टिमाइज़ करना है. किसी एक तरह के ऑपरेशन को ऑप्टिमाइज़ करने में समय लगाने से पहले, हमेशा टाइमलाइन का इस्तेमाल करके अपनी रुकावटों की पहचान करें.
असल में, हम विल्सन और फ़ाइनेंशियल टाइम्स लैब टीम से कनेक्ट हैं. इसकी वजह से, हम लेआउट परफ़ॉर्मेंस टूल की Chrome DevTools कवरेज में सुधार कर रहे हैं. हम जल्द ही किसी एलिमेंट की रिलेआउट सीमा को देखने की सुविधा जोड़ेंगे. इसके साथ ही, टाइमलाइन में लेआउट इवेंट में, हर लेआउट के दायरे, रूट, और लागत की जानकारी शामिल होगी:
