सीएसएस प्रदर्शन प्रोफाइलर?

Question

मैं वर्तमान में एक साइट पर काम कर रहा हूं, और कहीं भी स्टाइलशीट के अपने द्रव्यमान में, कुछ आईई में प्रदर्शन को मार रहा है। क्या वहां कोई अच्छा सीएसएस प्रोफाइलर्स हैं? मुझे एक ऐसा उपकरण चाहिए जो प्रदर्शन को मारने वाले नियमों को निर्धारित कर सके।

इससे पहले कि आप पूछें, मैंने जावास्क्रिप्ट, अस्पष्टता, और बॉक्स-छाया/टेक्स्ट-छाया नियम अक्षम कर दिए हैं। पृष्ठ अभी भी अजीब है। :/अगर मैं सभी सीएसएस को अक्षम करता हूं, तो यह बहुत अच्छा चलता है।

मुझे ऐसे टूल की आवश्यकता है जो पृष्ठ को प्रोफाइल कर सके और रिपोर्ट करें कि सीएसएस की बाधाएं कहां हैं।

Answer 1

तो, मैं अंत में एक जावास्क्रिप्ट समारोह है कि मेरी सीएसएस वर्गों के सभी अनुक्रमित लिखने के लिए चारों ओर हो गया अनुकूलन में मदद चाहिए पृष्ठ को स्क्रॉल करते समय पृष्ठ और फिर व्यक्तिगत रूप से उन्हें टॉगल किया गया। यह तुरंत गलती कक्षा को इंगित करता है, और वहां से, मैं ग़लत संपत्ति निर्धारित करने में सक्षम था। border-radius को उस तत्व पर बदलता है जिसमें कई बच्चे होते हैं (उदा। शरीर का स्तर div) अविश्वसनीय रूप से IE9 पर खराब प्रदर्शन करता है। https://github.com/andyedinborough/stress-css

वहाँ से, आप आसानी से किसी भी पृष्ठ पर परीक्षण चलाने के लिए एक बुकमार्कलेट स्थापित कर सकते हैं:

मैं अपने सीएसएस तनाव परीक्षण के लिए एक GitHub रेपो शुरू कर दिया है।

Answer 2

हम्म, इस तरह के एक उपकरण के बारे में कभी नहीं सुना।

आप कोई भी मिल जाए, बाहर देखने के लिए चीजों के लिए मैन्युअल रूप से

• किसी भी filter बयान शामिल होंगे -

(क्लासिक alpha=opacity और दूसरों आईई बहुत उन्नत ग्राफिकल फिल्टर है कि बहुत महंगी हैं की एक संख्या है)

• विशाल तत्वों (पिक्सल के हजारों बड़े की तरह)

• विशाल पृष्ठभूमि छवियों - हो सकता है उन सब को एक पल के लिए निकालना चाहते हैं?

मैं दृढ़ता से पहला बिंदु पर शक होगा - अल्फा ट्रांसपरेंसिस, एक भयानक प्रतिपादन टोंटी हो सकता है विशेष रूप से पुराने सिस्टम पर।

Answer 3

Google से Page Speed प्लगइन में एक ऐसा अनुभाग है जो आपके सीएसएस का विश्लेषण करता है और आपको अक्षम चयनकर्ताओं के बारे में बताता है, शायद वहां से शुरू हो सकता है?

hth

नोट: मैं अपने एक Firefox प्लगइन पता है, लेकिन थोड़ा :)

Answer 4

ओपेरा अपने प्रोफाइलर में सीएसएस प्रोफाइलिंग के साथ प्रयोग कर रहा है।

इसे following the steps on this page सक्षम किया जा सकता है। फिर प्रोफाइलर खोलें, प्रोफाइलिंग शुरू करें, और उस पृष्ठ को रीफ्रेश करें जिसे आप विश्लेषण करना चाहते हैं। समाप्त करने के बाद प्रोफाइलिंग रोकें, तो परिणाम दिखाए जाएंगे।

Answer 5

मेरे पास वर्तमान में एक वेब प्रोजेक्ट पर प्रदर्शन समस्याएं भी हैं जिन पर मैं काम कर रहा हूं। यह फ़ायरफ़ॉक्स, क्रोम, यहां तक ​​कि आईई 8 में भी अच्छा प्रदर्शन करता है। आईई 9 में यह नीचे गिर जाता है।

कुछ जासूसी कार्यों के बाद मैंने पाया कि सभी बॉक्स-छाया सीएसएस लाइनों को समाप्त करने में काफी सुधार हुआ है। मेरे पास बैनर, टेबल, बक्से और टैब से छाया थी, प्रत्येक में केवल छाया और धुंध की एक सूक्ष्म मात्रा थी, लेकिन जाहिर है कि आईई 9 के लिए सभी मूडी प्राप्त करने के लिए पर्याप्त है।

Answer 6

क्रोम देव उपकरण इस तरह की चीज करने के लिए सीएसएस चयनकर्ता प्रोफाइलर रखने के लिए प्रयुक्त होते थे। आप in this blog post के स्क्रीन शॉट देख सकते हैं।

क्रोम टीम pulled the feature in Chrome 30 कि बताते हुए:

CSS चयनकर्ता मिलान आम चयनकर्ताओं कि प्रोफाइलर क्रियान्वयन के समय धीमी गति से हुआ करता था की पूर्ण बहुमत के लिए यथोचित तेजी से अब है। इस बार टाइमलाइन "रिकैक्यूलेट स्टाइल" घटना में भी शामिल है।

इस तरह, मेरा मानना ​​है कि सीएसएस चयनकर्ता प्रोफाइलर उतना उपयोगी नहीं है जितना [संभवतः] इस्तेमाल किया जा सकता है और सुरक्षित रूप से गिराया जा सकता है। यह पहले से ही तेजी से चयनकर्ताओं को माइक्रो-ऑप्टिमाइज़ करने की कोशिश कर रहे डेवलपर्स के अंश को भी कम करेगा।

आप मुद्दे में खुदाई करने के लिए Chrome के किसी पुराने संस्करण का उपयोग करने की कोशिश कर सकते हैं, लेकिन मैं के साथ क्रोम देव उपकरणों के वर्तमान संस्करण के Timeline tab पर एक नज़र डालने आपको बताएंगे कि कब तक क्रोम ले लिया है की सलाह देते हैं शैलियों की गणना करने के लिए (जहां चयनकर्ता प्रदर्शन प्रभावित होता है), लेआउट और पृष्ठ को पेंट करें।