ब्राउज़र के रीफ़्लो को कम करना

लेखक: लिंडसे साइमन, UX डेवलपर

सुझाया गया ज्ञान: एचटीएमएल की बुनियादी जानकारी, JavaScript की बुनियादी जानकारी, सीएसएस में काम करने की जानकारी

रीफ़्लो, वेब ब्राउज़र प्रोसेस का नाम है. इससे दस्तावेज़ में एलिमेंट की पोज़िशन और ज्यामिति का फिर से हिसाब लगाया जाता है. इसका मकसद दस्तावेज़ के किसी हिस्से या पूरे दस्तावेज़ को फिर से रेंडर करना होता है. रीफ़्लो, ब्राउज़र में उपयोगकर्ता को ब्लॉक करने वाली कार्रवाई है. इसलिए, इससे डेवलपर को यह समझने में मदद मिलती है कि रीफ़्लो के समय को कैसे बेहतर बनाया जाए. साथ ही, रीफ़्लो के समय पर दस्तावेज़ की अलग-अलग प्रॉपर्टी (DOM गहराई, सीएसएस नियम की क्षमता, अलग-अलग तरह के स्टाइल में बदलाव) के असर को भी समझा जा सकता है. कभी-कभी दस्तावेज़ में किसी एक एलिमेंट को रीफ़्लो करने के लिए, उसके पैरंट एलिमेंट और उसे फ़ॉलो करने वाले एलिमेंट को रीफ़्लो करना पड़ सकता है.

उपयोगकर्ता कार्रवाइयां कई तरह के होते हैं और ऐसे DHTML बदलाव होते हैं, जिनकी वजह से रीफ़्लो ट्रिगर हो सकता है. ब्राउज़र विंडो का साइज़ बदलना, कंप्यूट किए गए स्टाइल वाली JavaScript के तरीकों का इस्तेमाल करना, DOM में एलिमेंट जोड़ना या हटाना, और किसी एलिमेंट की क्लास में बदलाव करना कुछ ऐसी चीज़ें हैं जो रीफ़्लो को ट्रिगर कर सकती हैं. यह भी ध्यान देना अहम है कि कुछ कार्रवाइयों की वजह से रीफ़्लो में लगने वाला समय आपकी उम्मीद से ज़्यादा हो सकता है. स्टीव सॉडर की बात "ईवन फ़ास्ट वेब साइट" के नीचे दिए गए डायग्राम पर गौर करें:

ऊपर दी गई टेबल से साफ़ तौर पर पता चलता है कि JavaScript की स्टाइल में किए गए सभी बदलावों की वजह से सभी ब्राउज़र रीफ़्लो नहीं होते हैं. साथ ही, रीफ़्लो में लगने वाला समय अलग-अलग होता है. यह भी कुछ हद तक साफ़ है कि रीफ़्लो के समय आधुनिक ब्राउज़र बेहतर होते जा रहे हैं.

Google में, हम कई तरीकों से अपने वेब पेजों और ऐप्लिकेशन की स्पीड की जांच करते हैं. अपने यूज़र इंटरफ़ेस (यूआई) में सुविधाएं जोड़ते समय, हम रीफ़्लो एक अहम पहलू है. हम उपयोगकर्ताओं को दिलचस्प, इंटरैक्टिव, और बेहतरीन अनुभव देने की कोशिश करते हैं.

दिशा-निर्देश

वेब पेजों में रीफ़्लो को कम करने के लिए, यहां कुछ आसान दिशा-निर्देश दिए गए हैं:

  1. ग़ैर-ज़रूरी डीओएम डेप्थ को कम करें. डीओएम ट्री के किसी एक लेवल पर होने वाले बदलावों से, ट्री के हर लेवल में बदलाव हो सकता है - रूट तक और नीचे, बदले गए नोड के चाइल्ड लेवल में. इससे रीफ़्लो करने में ज़्यादा समय लगता है.
  2. सीएसएस नियमों को छोटा करें और इस्तेमाल न किए गए सीएसएस नियमों को हटाएं.
  3. अगर आप ऐनिमेशन जैसे जटिल रेंडरिंग बदलाव करते हैं, तो ऐसा तुरंत न करें. ऐसा करने के लिए, पोज़िशन-ऐब्सलूट या पोज़िशन-फ़िक्स का इस्तेमाल करें.
  4. ग़ैर-ज़रूरी जटिल सीएसएस सिलेक्टर से बचें - खास तौर पर, डिसेंडेंट सिलेक्टर से बचें - जिन्हें सिलेक्टर मैच करने के लिए ज़्यादा सीपीयू (CPU) पावर की ज़रूरत होती है.

इस वीडियो में, लिंडसे आपके पेजों पर रीफ़्लो को कम करने के कुछ आसान तरीके बताती हैं:

अन्य संसाधन

सुझाव/राय दें या शिकायत करें

क्या इस पेज से कोई मदद मिली?