ประสิทธิภาพ CSS เทียบกับ translateZ (0)

Question 1

บล็อกจำนวนมากแสดงให้เห็นถึงประสิทธิภาพที่เพิ่มขึ้นในการ 'หลอกล่อ' GPU ให้คิดว่าองค์ประกอบนั้นเป็น 3 มิติโดยใช้transform: translateZ(0)เพื่อเร่งความเร็วของภาพเคลื่อนไหวและการเปลี่ยนภาพ ฉันสงสัยว่ามีผลต่อการใช้การแปลงนี้ในลักษณะต่อไปนี้หรือไม่:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

Question 2

การแปลง CSS สร้างบริบทการซ้อนใหม่และมีบล็อกตามที่อธิบายไว้ในข้อมูลจำเพาะ ในภาษาอังกฤษล้วนหมายความว่าองค์ประกอบตำแหน่งคงที่ที่มีการเปลี่ยนแปลงที่นำไปใช้กับองค์ประกอบเหล่านี้จะทำหน้าที่เหมือนองค์ประกอบที่อยู่ในตำแหน่งแน่นอนมากขึ้นและz-indexค่าต่างๆมีแนวโน้มที่จะถูกทำให้เสียหาย

หากคุณดูการสาธิตนี้คุณจะเห็นว่าฉันหมายถึงอะไร div ที่สองมีการเปลี่ยนแปลงที่นำไปใช้ซึ่งหมายความว่าสร้างบริบทการซ้อนใหม่และองค์ประกอบหลอกจะซ้อนกันอยู่ด้านบนแทนที่จะเป็นด้านล่าง

โดยพื้นฐานแล้วอย่าทำอย่างนั้น ใช้การเปลี่ยนแปลง 3 มิติเฉพาะเมื่อคุณต้องการการปรับให้เหมาะสม -webkit-font-smoothing: antialiased;เป็นอีกวิธีหนึ่งในการใช้การเร่งความเร็ว 3D โดยไม่ต้องสร้างปัญหาเหล่านี้ แต่ใช้ได้เฉพาะใน Safari เท่านั้น

Question 3

หากคุณต้องการความหมายในบางสถานการณ์ประสิทธิภาพการทำงานของ Google Chrome เป็นที่น่ากลัวกับการเร่งฮาร์ดแวร์เปิดใช้งาน ผิดปกติพอเปลี่ยน "เคล็ดลับ" ให้-webkit-transform: rotateZ(360deg);ทำงานได้ดี

ฉันไม่เชื่อว่าเราเคยคิดได้ว่าทำไม

Question 4

มันบังคับให้เบราว์เซอร์ใช้การเร่งด้วยฮาร์ดแวร์เพื่อเข้าถึงหน่วยประมวลผลกราฟิก (GPU) ของอุปกรณ์เพื่อทำให้พิกเซลบินได้ ในทางกลับกันเว็บแอปพลิเคชันทำงานในบริบทของเบราว์เซอร์ซึ่งช่วยให้ซอฟต์แวร์ทำหน้าที่ส่วนใหญ่ (ถ้าไม่ใช่ทั้งหมด) ของการเรนเดอร์ส่งผลให้แรงม้าน้อยลงสำหรับการเปลี่ยน แต่เว็บได้รับการติดตามและผู้จำหน่ายเบราว์เซอร์ส่วนใหญ่ให้การเร่งฮาร์ดแวร์แบบกราฟิกโดยใช้กฎ CSS เฉพาะ

การใช้-webkit-transform: translate3d(0,0,0);จะช่วยให้ GPU เข้าสู่การทำงานสำหรับการเปลี่ยน CSS ทำให้ราบรื่นขึ้น (FPS ที่สูงขึ้น)

หมายเหตุ: translate3d(0,0,0)ไม่มีอะไรในแง่ของสิ่งที่คุณเห็น มันย้ายวัตถุโดย 0px ในแกน x, y และ z เป็นเพียงเทคนิคในการบังคับให้ฮาร์ดแวร์เร่งความเร็ว

อ่านดีๆที่นี่: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Question 5

ฉันสามารถยืนยันได้ว่า-webkit-transform: translate3d(0, 0, 0);จะยุ่งกับposition: -webkit-sticky;ทรัพย์สินใหม่ ด้วยรูปแบบการนำทางลิ้นชักด้านซ้ายที่ฉันกำลังทำงานอยู่การเร่งความเร็วของฮาร์ดแวร์ที่ฉันต้องการด้วยคุณสมบัติการแปลงทำให้ยุ่งกับตำแหน่งคงที่ของแถบนำทางด้านบนของฉัน ฉันปิดการแปลงร่างและการวางตำแหน่งก็ใช้ได้ดี

โชคดีที่ดูเหมือนว่าฉันมีการเร่งฮาร์ดแวร์อยู่แล้วเพราะฉันมี-webkit-font-smoothing: antialiasedองค์ประกอบ html ฉันกำลังทดสอบพฤติกรรมนี้ใน iOS7 และ Android

Question 6

บนอุปกรณ์มือถือที่ส่งทุกอย่างไปยัง GPU จะทำให้หน่วยความจำเกินและทำให้แอปพลิเคชันหยุดทำงาน ฉันพบสิ่งนี้ในแอพ iPad ใน Cordova ดีที่สุดที่จะส่งเฉพาะรายการที่จำเป็นไปยัง GPU ซึ่งเป็น div ที่คุณเคลื่อนที่ไปมาโดยเฉพาะ

ยังดีกว่าให้ใช้การ~~เปลี่ยนภาพ~~ 3 มิติเพื่อสร้างภาพเคลื่อนไหวเช่น translateX (50px) ซึ่งตรงข้ามกับซ้าย: 50px;