सीएसएस अनुवाद बनाम पूर्ण स्थिति मूल्य बदलना

Question

आईपैड आईपैड और अन्य टैबलेट के लिए एक वेबपैप लिख रहा है और बहुत से व्यूपोर्ट मुद्दों के बाद तक उचित और कुशल स्थिति और एनीमेशन का संबंध है। मैं हाल ही में अपने सभी मुक्त फ्लोटिंग तत्वों के लिए -webkit-transform का उपयोग करने के विचार के साथ आया था। मेरा सवाल है, सीएसएस स्पेक द्वारा प्रदान किए गए परिवर्तनों का उपयोग करना आसान और विश्वसनीय एनिमेशन के लिए बेहतर होगा उदाहरण के लिए position:relative तत्वों के अंदर lrtb मानों को बदलना? हार्डवेयर त्वरण के साथ, मुझे विशेष रूप से अभिविन्यास में परिवर्तन के दौरान, चलती तत्वों में यादृच्छिक झपकी लग रही है। (पूरी तरह से स्थित तत्व) इसलिए, इस विधि का उपयोग करने वाले कोई उल्लेखनीय ब्लॉग नहीं देखते हैं, मैं यह जांचना चाहता था कि कुछ प्रो-टिप कारण हैं कि यह एक बुरा विचार है।

Answer 1

स्थिति के बजाय परिवर्तन के साथ बेहतर प्रदर्शन प्राप्त करना संभव है।

मैं इस उत्कृष्ट लेख से कुछ बिट्स बोली होगी, लेकिन आप वास्तव में पूरी तस्वीर प्राप्त करने के लिए इसे पढ़ने करना चाहिए:

http://www.html5rocks.com/en/tutorials/speed/html5/

वर्तमान में अधिकांश ब्राउज़रों केवल GPU त्वरण का उपयोग वे एक है जब मजबूत संकेत है कि एक HTML तत्व इससे लाभान्वित होगा। सबसे मजबूत संकेत यह है कि इसमें एक 3 डी परिवर्तन लागू किया गया था। अब आप वास्तव में एक 3 डी परिवर्तन लागू नहीं करना चाहते हैं, लेकिन फिर भी GPU त्वरण से लाभ प्राप्त करें - कोई समस्या नहीं। सीधे शब्दों में पहचान परिवर्तन लागू करें:

-webkit-transform: translateZ(0); 

इसके पीछे कारण यह है कि आप GPU को काम सीपीयू करना है कि के कुछ प्रतिनिधि,, तथापि विचारशील होना ज़रूरी हमेशा नहीं होगा के रूप में योग्य है , खासकर आईपैड जैसे मोबाइल डिवाइस पर, यह आपका पर्यावरण है:

कृपया चेतावनी दीजिये कि यह परिवर्तन लागू करने से आपके प्रदर्शन में सहायता करने की गारंटी नहीं है। यह बस आपके जीपीयू को क्रैंक कर सकता है, अधिक बैटरी का उपयोग कर सकता है लेकिन पहले जैसा ही प्रदर्शन प्रदान करता है। तो इस तकनीक से सावधान रहें और यदि आप एक वास्तविक प्रदर्शन जीत अनुभव करते हैं तो केवल इसका उपयोग करें।

Answer 2

लुका के बिंदु में जोड़कर, यहां दो पोस्ट हैं जो अनुवाद बनाम स्थिति वस्तुओं के प्रदर्शन का परीक्षण करती हैं।

TLDR:

transform: translate(x,y); का उपयोग करना बहुत सीएसएस बदलाव के साथ तत्वों पर रंग बार बढ़ जाती है।

हालांकि, position: absolute;top/left संक्रमण के बिना तत्वों पर उपयोग किए जाने पर तेज़ होगा।

Why Moving Elements with translate is better than position absolute, top/left (पॉल आयरिश):

एनीमेशन के लिए

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

• उपयोग सीएसएस-फ़्रेम एनीमेशन या सीएसएस संक्रमण, सब संभव हो तो पर। ब्राउजर पेंटिंग को अनुकूलित कर सकता है और यहां बड़े पैमाने पर कंपोजिट कर सकता है।

• यदि यह जेएस-आधारित एनीमेशन होना आवश्यक है, तो अनुरोध एनीमेशन फ्रेम का उपयोग करें। SetTimeout से बचें, setInterval।

• यदि आप कर सकते हैं, तो प्रत्येक फ्रेम (jQuery एनिमेट() - शैली) पर इनलाइन शैलियों को बदलने से बचें, सीएसएस में घोषणात्मक एनिमेशन ब्राउज़र के तरीके से अनुकूलित हो सकते हैं।

• पूर्ण स्थिति के बजाय 2 डी ट्रांसफॉर्म का उपयोग करना आम तौर पर छोटे रंग के समय और चिकनी एनीमेशन के माध्यम से बेहतर एफपीएस प्रदान करेगा।

• उपयोग समय फ्रेम के मोड की जांच के लिए क्या नीचे जहाँ आपके तत्व प्रदान की जा रही है सत्यापित करने के लिए अपने व्यवहार "शो पेंट rects" अच्छा समर्थक चाल धीमी हो रही है और "संयुक्त रेंडर परत बॉर्डर" कर रहे हैं।

Myth Busting transform:translate vs position top/left (Tumult ब्लॉग):

प्राथमिक निष्कर्ष

• शीर्ष/बाईं गुण स्थापना एक को बदलने अगर आप बदलाव प्रयोग नहीं कर रहे का उपयोग कर से अधिक तेजी से हो जाएगा।

• लक्ष्य वेबकिट है, तो सबसे तेजी से फ्रेम दर (Chrome अपने आप इस करता है) संपत्ति का अनुवाद के साथ संक्रमण का उपयोग कर, और ग्राफिक्स के लिए मजबूर कर सफारी/मोबाइल सफारी के लिए त्वरण से आएगा।

• यदि वेबकिट में ग्राफिक्स त्वरण को मजबूर करने के लिए गैर-अपारदर्शी वस्तुओं को कंपोजिट करना सफारी/मोबाइल सफारी और क्रोम में मामूली वृद्धि में एक बड़ा प्रदर्शन बढ़ावा देगा।

• यदि वेबकिट में ग्राफिक्स त्वरण को मजबूर करने के लिए केवल अपारदर्शी वस्तुओं को कंपोजिट करना प्रदर्शन पर नकारात्मक प्रभाव डालेगा।

नोट: आदेश GPU सुनिश्चित करने के लिए मोबाइल ब्राउज़र में संक्रमण त्वरित, transform: translate3d(0,0,0) का उपयोग करें। (http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/)