लेआउट पेंट का पुनर्मूल्यांकन क्रोम डेवलपर टूल टाइमलाइन रिकॉर्ड में क्या मतलब है?
क्रोम डेवलपर टूल टाइमलाइन रिकॉर्ड में लेआउट पेंट का पुनर्मूल्यांकन क्या होता है? और पेज को कम करके पृष्ठ प्रदर्शन में सुधार कैसे करें पुनर्मूल्यांकन, लेआउट और पेंट की गिनती? कुछ सुझाव दे सकते हैं? धन्यवाद
असल में, वे आपके ब्राउज़र को पता लगा रहे हैं कि पृष्ठ पर किए गए परिवर्तनों को कैसे आकर्षित किया जाए।
उनसे छुटकारा पाने के बारे में चिंता न करें - यदि आपने ऐसा किया है, तो आपकी साइट स्थिर होगी। हालांकि ... ... यदि आप कुछ ऐसा करना चाहते हैं जो आईएस प्रदर्शन के लिए उपयोगी है, जो रिफ्लो और पश्चाताप के साथ करना है, तो अपने परिवर्तनों को एकसाथ बैच करें।
आइए कहें कि आपको ट्विटर पर नौकरी मिल गई है। और आपका काम विंडो के अगले संस्करण को लिखना है जो प्रत्येक ट्विटर पोस्ट को स्क्रीन पर जोड़ता है।
यदि उपयोगकर्ता को अपनी टाइमलाइन में 250 नई ट्वीट मिलती हैं, और आप प्रत्येक को एक लूप में जोड़ते हैं, तो एक दूसरे के बाद, ब्राउज़र धीमा होने जा रहा है, क्योंकि हर बार जब आप एक जोड़ते हैं, तो उसे रीफ्लो करना होगा (जो चीज आपने जोड़ी है उसके लिए जगह बनाने के लिए चीजों को चारों ओर ले जाएं) और पुनर्वित्त करें (अतिरिक्त चीज़ जो स्टाइल से प्रभावित थी)।
ऐसा करने का एक बेहतर तरीका ऑफ-डोम (यानी: तत्वों के साथ जो वास्तव में पृष्ठ पर नहीं हैं) के साथ एक साथ नए ट्वीट्स की सूची बनाना होगा, और फिर उन्हें एक साथ में जोड़ें। यह उस समय पर कटौती करता है जब ब्राउज़र को यह पता लगाना पड़ता है कि सब कुछ कहाँ जाना है।
@ फ़ैब्रिकियो - माइक्रो-ऑप्टिमाइज़िंग बहुत अच्छा नहीं हो सकता है, लेकिन एक लूप में सैकड़ों ब्राउज़र तत्वों को जोड़ना, बनाम एक ही समय में उन सभी को एक बड़ा अंतर डाल सकता है। बस ट्विटर दोस्तों से पूछें, जो अपनी jQuery वस्तुओं को कैश करने के लिए परेशान नहीं थे।
आप अपने कोड के प्रदर्शन का पता लगाने के लिए "प्रोफाइल" टैब और "ऑडिट" टैब का उपयोग कर सकते हैं। आपको आपको अपने कोड के बारे में एक रिपोर्ट देगा।
आप पृष्ठ को कई तरीकों से पुनर्मूल्यांकन, लेआउट और पेंट की गणना को कम कर सकते हैं।
यहाँ गुण और तरीकों कि एक पेज के लेआउट (पुनर्प्रवाहित) को गति प्रदान की एक बहुत ही आसान सूची है:
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
आप जितना संभव हो उतना इन कॉल कम करना चाहते हैं - विशेष रूप से स्थितियों में, जहां प्रदर्शन में महत्वपूर्ण है, जैसे स्क्रॉल ईवेंट के दौरान, या सामग्री के बड़े ब्लॉक को एनिमेट करते समय।