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