จะเพิ่มประสิทธิภาพเว็บแอพพลิเคชั่น HTML5 Canvas และ JavaScript สำหรับ Mobile Safari ได้อย่างไร

ฉันสร้างเกม HTML5 Canvas และ JS ที่ทำงานได้ดีบนเดสก์ท็อปหรือแล็ปท็อปใน Chrome (30fps) แต่สำหรับ Safari บนอุปกรณ์เคลื่อนที่ฉันจะได้รับเพียง 8 เฟรมต่อวินาที มีเคล็ดลับหรือเทคนิคง่ายๆในการเพิ่มอัตราเฟรมหรือไม่?

น่าเสียดายที่คำตอบคือการวาดให้น้อยลง ฉันได้พบกับปัญหาคอขวดด้วยแอพพลิเคชั่นที่ใช้ Canvas (บนแพลตฟอร์มใด ๆ ) เป็นเวลาที่ใช้ในการวาดพิกเซล

ลองทำสิ่งต่อไปนี้:

1. ใช้เลเยอร์ผ้าใบหลายชั้น วาดพื้นหลังของคุณไปยังหนึ่งเลเยอร์ในขณะที่วาดวัตถุของคุณไปยังอีกชั้นหนึ่ง (หมายเหตุ: ฉันไม่ได้ลองในซาฟารีมือถือ แต่สามารถช่วยในแพลตฟอร์มอื่นได้)

2. วาดเฉพาะสไปรต์ที่มีการเปลี่ยนแปลง นี่เป็นเรื่องยาก แต่เพิ่มประสิทธิภาพแน่นอน ความคิดคือการจัดเก็บว่าสไปรต์จะต้องวาดใหม่หรือไม่และวาดซ้ำสไปรต์เท่านั้นที่ต้องใช้พร้อมกับพื้นหลังที่อยู่ด้านหลัง (สิ่งนี้จะต้องเรียงซ้อนกับวัตถุอื่นที่สไปรต์อาจทับซ้อนกัน)

สิ่งที่มีการพัฒนาบน Chrome คือ a) เครื่องยนต์ JavaScript (V8) นั้นเร็วเหมือนนรกและ b) เวอร์ชันใหม่ล่าสุด (7,8,9) ทั้งหมดมีการเร่งความเร็วของ GPU เมื่อมาถึงการเรนเดอร์ผ้าใบ เมื่อรวมกับความจริงที่ว่าฮาร์ดแวร์มือถือนั้นไม่ได้ทรงพลังเท่ากับเดสก์ท็อป / แล็ปท็อปของคุณหมายความว่าจะเป็นการยากที่จะได้รับประสิทธิภาพใกล้เคียงกันบนซาฟารีมือถือ

ฉันคิดว่าในขณะนี้วิธีที่ดีที่สุดอาจจะกำหนดเป้าหมายเกมของคุณในซาฟารีมือถือตั้งแต่เริ่มต้นและลองและสร้างเกมที่ไม่เข้มข้นเหมือนการวาดใหม่

นี่เป็นช็อตเล็กน้อย แต่เกมของคุณสามารถใช้งานสไปรต์ DIV ด้วยการแปลง CSS แทนได้หรือไม่ ฉันพูดแบบนี้เพราะฉันได้รับประสิทธิภาพที่ยอดเยี่ยมด้วยการเคลื่อนย้ายสิ่งต่างๆรอบ ๆ บนอุปกรณ์ iOS ที่มีการแปลง CSS และการเปลี่ยนผ่าน

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

ฉันประทับใจมากกับความเรียบเนียนของการเป็นอยู่ที่ว่าฉันตั้งใจจะลองทำเกมง่ายๆที่เขียนด้วยวิธีนี้

ในกรณีของการวาดเส้นให้รวมคำสั่ง lineTo หลาย ๆ ตัวก่อนที่จะเรียกสโตรก

นี่และเคล็ดลับอื่น ๆ : http://dt.deviantart.com/blog/38471599/

ทุกอย่าง @Gosub กล่าวพร้อม:

ดูว่าคุณกำลังทำคณิตศาสตร์อยู่หรือไม่ดูว่ามีวิธีใดที่จะใช้อัลกอริธึมที่มีประสิทธิภาพมากขึ้น

ใช้ภาพขนาดเล็ก ลองสร้างขนาดของกำลังภาพของ 2

ดูว่าคุณสามารถกำจัด alpha blending บนภาพวาดหรือไม่ใช้คุณสมบัติความทึบของ CSS

กรุณาโพสต์กลับผลลัพธ์ของคุณ จะน่าสนใจที่จะรู้ว่าอะไรช่วยได้มากที่สุด

ฉันเกลียดที่จะเพิ่มคำตอบให้กับหัวข้อเก่า - แต่ฉันประหลาดใจที่ไม่มีใครพูดถึงเรื่องนี้

เมื่อคุณเขียนเกมแรกของคุณเพียงแค่เขียนพวกเขาว่าคุณคาดหวังว่าพวกเขาจะทำงานอย่างชาญฉลาด เทคนิคข้างต้นเป็นจุดเริ่มต้นที่ดีในการรักษาประสิทธิภาพสูง แต่เคล็ดลับที่แท้จริงคือ profiler หากคุณโปรไฟล์แอปพลิเคชันของคุณใน Chrome หรือ Firefox (คำแนะนำ: ใช้วิธีการมากมายเพื่อให้คุณเห็นคอขวดที่แน่นอนดังนั้นคุณไม่ต้องย้ายสิ่งต่าง ๆ ในภายหลัง - คุณควรทำสิ่งนี้ต่อไป) คุณจะได้รับประโยชน์เพิ่มเติมจากการดู ผลลัพธ์เวลาที่แน่นอน ในกรณีของฉันฉันเห็นการวาดพื้นหลังอย่างต่อเนื่องใช้เวลา 80% ของเวลาเบราว์เซอร์ หลังจากที่ฉันไปทางนั้นฉันเห็นสายอื่นรับ 40% ขึ้นไปตามลำดับ หลังจากหนึ่งหรือสองชั่วโมงฉันเห็นกำไรจาก FPS เป็นกอบเป็นกำ

ฉันต้องการรับฟังผลลัพธ์ของคุณ ฉันพยายามทำสิ่งเดียวกัน ฉันพบว่าการทำคณิตศาสตร์จำนวนมากนั้นใช้ได้ แต่ในไม่ช้าเมื่อคุณใส่ผ้าใบลงไปในนั้นก็จะมีอัตราของจิตใจและอัตราเฟรมลดลง

ฉันมีภาพซ้อนทับเบื้องหน้าที่แสดงเอฟเฟกต์ มันเป็นภาพที่มีคุณภาพสูงมาก แต่สิ่งที่อัลฟาชะลอตัวลงมากจนฉันทิ้งมันลงอย่างสมบูรณ์เพื่อผลตอบแทนเฟรมที่มากขึ้นต่อวินาที

อีกสิ่งหนึ่งที่ฉันทำคือการใช้ PHP ในการคำนวณคณิตศาสตร์หนัก ฉันมีชุดข้อมูลขนาดใหญ่ แต่แทนที่จะได้รับ JavaScript เพื่อคำนวณและแสดงข้อมูลฉันตัดสินใจที่จะให้ PHP ทำงานและให้ JavaScript แสดงผลลัพธ์ สิ่งนี้ไม่ประหยัดเวลามากนักเนื่องจาก JavaScript เป็น "sehr gut" ที่มีคณิตศาสตร์

ฉันคิดว่าเว็บไซต์ทั้งหมดของคุณอยู่ใน HTML5 ดังนั้นลองเล่นกับผู้ทำงานเบื้องหลัง

หวังว่าฉันช่วยและโปรดแบ่งปันผลลัพธ์ของคุณ