प्रतिपादन अनुकूलन और भाई चयनकर्ता

Question

वेबकिट ब्राउज़र में स्टाइल रेंडरिंग के लिए अंतर्निहित ऑप्टिमाइज़ेशन तकनीक है "जिसके परिणामस्वरूप आपके पृष्ठ पर लगभग 60% तत्वों के लिए शैली का मिलान नहीं किया जा सकता है।"

हालांकि, कि अनुकूलन पूरे पृष्ठ के लिए पूरी तरह से बंद है, तो "किसी भी भाई चयनकर्ता स्टाइलशीट में कहीं भी सामना करना पड़ा है ... यह + चयनकर्ता और :first-child और :last-child तरह चयनकर्ताओं भी शामिल है।"

क्या कोई भी इस अनुकूलन को अक्षम करने वाले चयनकर्ता प्रकारों की पूरी सूची जानता है?

-

अधिक जानकारी

• अनुकूलन ब्राउज़र internals पर ताली Garsiel के अध्ययन में चर्चा की है: How Browsers Work।

• यहाँ Dave Hyatt से भाई चयनकर्ताओं पर पूरा बोली, जो जाहिरा तौर पर ब्राउज़र कोड लिखी है: "वहाँ सब पर उपयोग में कोई भाई चयनकर्ताओं होना चाहिए WebCore बस एक वैश्विक स्विच जब किसी भी भाई चयनकर्ता का सामना करना पड़ा है फेंकता है और शैली साझेदारी अक्षम करता है। जब वे मौजूद होते हैं तो पूरे दस्तावेज़ के लिए। इसमें + चयनकर्ता और चयनकर्ता शामिल हैं: पहला बच्चा और: अंतिम बच्चा। "

• बोली एक लेख हयात 2005 में लिखा था नीचे वह और अधिक विस्तार में यह चर्चा करता है (पिछले रूप में एक ही स्रोत) से आने के लिए लगता है कि:
  
  "WebCore (आगामी सफारी विज्ञप्ति में) एक बहुत अच्छा अनुकूलन है कि मैं किसी तत्व पर लागू घोषणाओं के सेट की गणना करने से बचने के लिए आया था। अभ्यास में यह अनुकूलन नतीजे आपके पृष्ठ पर लगभग 60% तत्वों के लिए शैली से मेल नहीं खाता है। अनुकूलन के पीछे विचार पहचानना है जब किसी पृष्ठ में दो तत्वों को डीओएम (और अन्य राज्य) निरीक्षण के माध्यम से एक ही शैली होगी और जब भी संभव हो, उन दो तत्वों के बीच फ्रंट एंड स्टाइल जानकारी साझा करें। "

• यह article by Nate Koechley अधिक विस्तार से एल्गोरिदम पर चर्चा करता है। वह इसके साथ बताता है:
  
  "वेब विकास में अक्सर एक ही काम करने के लिए 6 अलग-अलग तरीके होते हैं। एक अच्छा वेब डेवलपर लगातार निरंतर अलग-अलग पथों का चयन कर रहा है। हयात से इन अंदरूनी सूत्र युक्तियाँ हमें देते हैं ब्राउज़र की हिम्मत की पूरी समझ है, और हमें सर्वोत्तम तरीकों का चयन करने में मदद मिलेगी। "

• हयात भी इस W3C mailing list archive

• में अनुकूलन पर चर्चा यह भी एक Stack chat रयान Kinal से में कुछ समय के लिए आया: "वाह बस वाह मैं एक और भाई चयनकर्ता फिर से उपयोग कभी नहीं होगा।।।"

मैं जानने में विशेष रूप से रुचि:

• कि बच्चे चयनकर्ताओं भी अनुकूलन बंद कर देते हैं

• कि क्या ट्राइडेंट/आईई किसी भी इसी तरह अनुकूलन

• का उपयोग करता है किसी भी परीक्षण है कि शो एक अंतर यह बनाता है की कितना बड़ा मौजूद प्रदर्शन

0 प्रतिपादन के लिए

Answer 1

मैं एक पूरी सूची नहीं है, लेकिन मोज़िला और सर्वो से इस पाठ सहायक हो सकता है, मुझे लगता है। शैली अपडेट

गुण की

वेबकिट से निपटने में परिवर्तन

तो तत्व पहले से ही एक शैली recalc नहीं है चिह्नित किये हैं, और यदि या तो विशेषता आईडी गुण है या वहाँ चयनकर्ताओं कि करना शामिल होता है विशेषता, तत्व शैली realc के लिए ध्वजांकित किया गया है। वहाँ की दोबारा जांच करने के लिए उन चयनकर्ताओं तत्व और '~' और इस स्तर पर '+' से जुड़े मामलों को संभालने के लिए कोई प्रयास के साथ कोई लेना देना है कि क्या कोई कोशिश नहीं की है। एक अलग हुक भी कहा जाता है जब कक्षा गुण बदलते हैं कि अन्य चीजों के साथ बिना किसी शैली के रीयलैक की आवश्यकता के रूप में तत्व को ध्वजांकित किया जाता है। फिर, '~' और '+' को संभालने के लिए कोई प्रयास नहीं किया गया है। इनमें से किसी भी मामले में वंशजों पर चयनकर्ता मिलान को दूर करने का प्रयास नहीं है।

राज्य में परिवर्तन

वहाँ WebKit में राज्य में परिवर्तन के लिए कोई एकीकृत सेटअप है। प्रत्येक छद्म-वर्ग के लिए जो गेको में बूलियन राज्यों के माध्यम से संभाला जाता है, चयनकर्ता मिलान में एक समर्पित कार्य तत्व होता है जिसे यह जांचने के लिए कॉल किया जा सकता है कि छद्म-वर्ग मिलान करता है या नहीं। किसी तत्व के अंदर उस स्थिति में परिवर्तन शैली तत्व recalc की आवश्यकता के रूप में सीधे उस तत्व को चिह्नित करने के लिए जिम्मेदार हैं। फिर से, कोई प्रयास वंश पर चयनकर्ता मिलान दूर अनुकूलन करने के लिए या '+' या '~' को संभालने के लिए किया जाता है। यहाँ कुछ अनुकूलन एक छिपकली :hover कि कवर :hover, :active, और खींचने के बारे में कुछ के लिए बनाता है के समान हैं। सम्मिलन की

हैंडलिंग और विलोपन

RenderStyle झंडे कि संकेत मिलता है कि क्या उसके बच्चों और '+' या '~' combinators विभिन्न संरचनात्मक छद्म वर्गों से प्रभावित कर रहे हैं। डोम उत्परिवर्तन पर, परिवर्तन (बच्चे सूची क्रम में) के बाद पहली प्रभावित तत्व एक शैली recalc, या माता-पिता के एकल पहले बच्चे की आवश्यकता होगी, यह एक recalc आवश्यकता हो सकती है अगर के रूप में चिह्नित किया गया है। यदि परिवर्तन से पहले और चीजों को रिकेलक की आवश्यकता हो सकती है, तो माता-पिता को स्टाइल रिकेलक की आवश्यकता के रूप में चिह्नित किया जाता है, जो उसके सभी बच्चों को पुन: पेश करेगा। इन सभी मामलों में, जब वास्तव में किसी तत्व पर शैली को पुन: संयोजित करते हैं, तो यह देखने के लिए एक चेक किया जाता है कि उसके बच्चे '+' या '~' से प्रभावित हैं या नहीं।यदि ऐसा है तो किसी भी बच्चे को यह बाद शैली recalc या तो बच्चे की आवश्यकता होगी, या उसके बाद सभी बच्चों को भी शैली recalc की आवश्यकता होगी, के रूप में चिह्नित किये जाते हैं (पर कि क्या '+' या '~' शामिल किया गया था निर्भर करता है) के रूप में चिह्नित किया जाता है। कुछ कीड़े कई की जंजीरों के आसपास यहां हैं '+', मुझे लगता है।

उपरोक्त बात यह है कि कुछ मामलों में वेबकिट गीको की तुलना में बहुत अधिक तत्वों पर पुनर्मूल्यांकन शैली को समाप्त करता है, जहां तक ​​मैं कह सकता हूं, लेकिन दूसरों में यह कई कम तत्वों पर पुनर्मूल्यांकन शैली को समाप्त करता है। उदाहरण के लिए, ".foo ~ span" जैसे एक चयनकर्ता और एक div जो "foo" से "bar" में वर्ग को बदलता है, गीको सभी div के बाद के भाई बहनों को पुन: स्थापित करेगा, जबकि वेबकिट कोई भी काम नहीं करेगा यदि कोई "अवधि नहीं है "बच्चों, क्योंकि यह माता-पिता उस मामले में '+' से प्रभावित होने के रूप में कभी नहीं चिह्नित होता। मुझे यकीन नहीं है कि यह किस हद तक सम्मिलन व्यवहार को प्रभावित करता है, जहां ऐसा लगता है कि दोनों की तरह अधिक समान होना चाहिए। किसी भी तरह वेबकिट एचटीएमएल 5 सिंगल-पेज स्पेक स्क्रिप्ट पर गेको से बेहतर प्रदर्शन करता है, और मैं इस बिंदु पर क्यों नहीं समझ सकता। शायद यह इसलिए है क्योंकि इसकी शैली पुनर्मूल्यांकन वास्तव में चलाने के लिए गेको के मुकाबले बहुत सस्ता है।

दूसरा उपरोक्त यह है कि व्यक्तिगत विशेषता और राज्य परिवर्तनों में शामिल कार्य अधिक स्टाइल पुनर्मूल्यांकन की लागत पर गेको से बहुत कम है। डीओएम सम्मिलन/हटाना में शामिल काम वही है।

source

Answer 2

मैं, चयनकर्ताओं के साथ किसी भी तरह के समस्या नहीं देखा है जब तक चयनकर्ता शैली भारी छवि है कि लोड करने के लिए समय लगता है के साथ है।

सीएसएस इनबिल्ट वेब रंगों कि चयनकर्ताओं के किसी भी प्रकार के साथ किसी भी समस्या का सामना नहीं करना चाहिए, चयनकर्ता पर w3 विवरणों के आधार पर के साथ है ..

निम्नलिखित नियम, पिछले उदाहरण में से एक के लिए समान है, सिवाय कि यह एक वर्ग चयनकर्ता जोड़ता है। इस प्रकार, विशेष प्रारूपण केवल तब होता है जब एच 1 वर्ग = "सलामी बल्लेबाज" है:

h1.opener + h2 { margin-top: -5mm } 

अतः नियमों के मानकीकरण कर रहे हैं लेकिन वहाँ वेबकिट ब्राउज़र में कुछ बग, जो विशेष रूप से चयनकर्ता के लिए प्रतीक्षा पर रुकती है होना चाहिए।