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