คุณและผู้ใช้ต้องการเว็บแอปบนอุปกรณ์เคลื่อนที่ที่ตอบสนองและเลื่อนไปที่ แตะ การพัฒนาโฆษณาควรเป็นเรื่องง่าย แต่น่าเสียดายที่เว็บบนอุปกรณ์เคลื่อนที่ เบราว์เซอร์ที่ตอบสนองต่อกิจกรรมการสัมผัสในระหว่างการเลื่อนจะอยู่ในสถานะการใช้งาน ในข้อมูลจำเพาะของ TouchEvent อาส วิธีการสามารถแบ่งออกเป็น 4 หมวดหมู่คร่าวๆ ช่วงเวลานี้ ซึ่งก่อให้เกิดความตึงเครียดพื้นฐานระหว่างมอบความลื่นไหลในการเลื่อนและ ที่ยังคงรักษาการควบคุมของนักพัฒนาซอฟต์แวร์
การประมวลผลกิจกรรมการสัมผัส 4 รูปแบบที่แตกต่างกันมีอะไรบ้าง
ความแตกต่างของลักษณะการทำงานระหว่างเบราว์เซอร์ต่างๆ จะแบ่งออกเป็น 4 รูปแบบ
การประมวลผลเหตุการณ์แบบซิงโครนัสปกติ
ระบบจะส่งเหตุการณ์ Touchmove ระหว่างการเลื่อนและการเลื่อนแต่ละครั้งจะอัปเดตการบล็อกจนกว่าการจัดการ Touchmove จะเสร็จสิ้น วิธีนี้เป็นวิธีที่เข้าใจได้ง่ายที่สุดและมีประสิทธิภาพที่สุด แต่ไม่ดีต่อประสิทธิภาพการเลื่อนเนื่องจากหมายความว่าแต่ละเฟรมในระหว่างการเลื่อนจะต้องบล็อกในเทรดหลัก
เบราว์เซอร์: เบราว์เซอร์ Android (Android 4.0.4, 4.3), Safari ในอุปกรณ์เคลื่อนที่ (เมื่อเลื่อน div)
การประมวลผล Touchmove แบบไม่พร้อมกัน
ระบบจะส่งเหตุการณ์ Touchmove ในระหว่างที่เลื่อน แต่การเลื่อนจะทำงานแบบไม่พร้อมกัน (ระบบจะละเว้นเหตุการณ์ touchmove หลังจากการเลื่อนเริ่ม) ซึ่งอาจทำให้เกิด "การจัดการซ้ำซ้อน" ของเหตุการณ์ เช่น การเลื่อนอย่างต่อเนื่องหลังจากที่เว็บไซต์ดำเนินการด้วย Touchmove และเรียก preventDefault บนเหตุการณ์ เพื่อบอกเบราว์เซอร์ว่าไม่ต้องจัดการเหตุการณ์นั้น
เบราว์เซอร์: Safari ในอุปกรณ์เคลื่อนที่ (เมื่อเลื่อนเอกสาร), Firefox
แตะย้ายค้างไว้ขณะเลื่อน
ระบบไม่ส่งกิจกรรม Touchmove หลังจากการเลื่อนเริ่มต้น และจะไม่กลับมาทำงานอีกจนกว่าจะจบเหตุการณ์แบบสัมผัส ในโมเดลนี้ การบอกความแตกต่างระหว่างการแตะอยู่กับที่และการเลื่อนทำได้ยาก
เบราว์เซอร์: เบราว์เซอร์ Samsung (ส่งเหตุการณ์ mousemove)
ยกเลิกการแตะเมื่อเริ่มการเลื่อน
ซึ่งคุณไม่สามารถมีได้ทั้งสองวิธี คือความลื่นไหลของการเลื่อนและการควบคุมสำหรับนักพัฒนาซอฟต์แวร์ และโมเดลนี้จะตัดข้อเสียระหว่างการเลื่อนอย่างราบรื่นและการจัดการเหตุการณ์ได้ ซึ่งคล้ายกับความหมายในข้อมูลจำเพาะของเหตุการณ์ของ Pointer ประสบการณ์บางอย่างที่อาจต้องติดตามนิ้ว เช่น การดึงเพื่อรีเฟรช จะไม่สามารถทำได้
เบราว์เซอร์: Chrome Desktop M32+, Chrome Android
ทำไมจึงต้องเปลี่ยน
ปัจจุบัน Chrome สำหรับ Android ใช้เวอร์ชันเก่าของ Chrome: แตะยกเลิกเมื่อเลื่อน ซึ่งช่วยเพิ่มประสิทธิภาพของการเลื่อน แต่ก็ทำให้นักพัฒนาซอฟต์แวร์เกิดความสับสน โดยเฉพาะอย่างยิ่ง นักพัฒนาแอปบางรายไม่ทราบถึงเหตุการณ์ "สัมผัสยกเลิก" หรือวิธีการ จัดการกับเรื่องนี้ และทำให้บางเว็บไซต์ใช้งานไม่ได้ ที่สำคัญไปกว่านั้น เอฟเฟกต์และลักษณะการทำงานของการเลื่อน UI ทั้งหมด เช่น พุลเพื่อรีเฟรช แถบซ่อน และจุดสแนปชอตนั้นนำไปใช้ได้ยากหรือเป็นไปไม่ได้
แทนที่จะเพิ่มฟีเจอร์แบบฮาร์ดโค้ดไว้ เพื่อรองรับเอฟเฟกต์เหล่านี้ Chrome มุ่งให้ความสำคัญกับการเพิ่มแพลตฟอร์มพื้นฐานที่ช่วยให้นักพัฒนาซอฟต์แวร์ เพื่อนำเอฟเฟ็กต์เหล่านี้ไปใช้โดยตรง ดูแพลตฟอร์มเว็บที่สมเหตุสมผล เพื่อแสดงปรัชญานี้โดยทั่วไป
โมเดลใหม่ของ Chrome: โมเดล Touchmove แบบไม่พร้อมกันที่มีการควบคุม
Chrome ขอแนะนำลักษณะการทำงานใหม่
ที่ออกแบบมาเพื่อปรับปรุงความเข้ากันได้กับโค้ดที่เขียนสำหรับเบราว์เซอร์อื่นๆ เมื่อ
การเลื่อนหน้าจอ รวมถึงการเปิดใช้งานสถานการณ์อื่นๆ ที่ขึ้นอยู่กับการติดต่อสัมผัส
เหตุการณ์ขณะเลื่อน ฟีเจอร์นี้จะเปิดใช้โดยค่าเริ่มต้น และคุณสามารถเปิดใช้งานได้
ปิดด้วยแฟล็กต่อไปนี้ chrome://flags\#touch-scrolling-mode
ลักษณะการทำงานใหม่มีดังนี้
- ระบบจะส่งการแตะย้ายแรกแบบซิงโครนัสเพื่อให้เลื่อน ยกเลิกแล้ว
- ขณะเลื่อนดูเนื้อหา
- ระบบจะส่งเหตุการณ์ touchmove แบบไม่พร้อมกัน
- ควบคุมเป็น 1 เหตุการณ์ต่อ 200 ms หรือถ้า CSS 15px ไม่ทำงาน เกิน
- Event.cancelable เป็น false
- ไม่เช่นนั้น เหตุการณ์แบบสัมผัสย้ายจะเริ่มทํางานแบบพร้อมกันตามปกติเมื่อมีการเลื่อนแบบแอ็กทีฟ สิ้นสุดหรือดำเนินการไม่ได้เนื่องจากถึงขีดจำกัดการเลื่อนแล้ว
- เหตุการณ์การแตะทุกครั้งจะเกิดขึ้นเมื่อผู้ใช้ยกนิ้วขึ้น
คุณสามารถลองการสาธิตนี้ได้ใน Chrome สำหรับ Android และสลับ
chrome://flags\#touch-scrolling-mode เพื่อดูความแตกต่าง
บอกให้เรารู้ว่าคุณคิดอย่างไร
Async Touchmove Model มีศักยภาพในการปรับปรุงการทำงานบนหลายเบราว์เซอร์ ความสามารถในการใช้งานร่วมกัน และเปิดใช้เอฟเฟกต์ท่าทางสัมผัสการแตะแบบใหม่ เราสนใจ จะได้ฟังความคิดของนักพัฒนาซอฟต์แวร์ และได้เห็นความคิดสร้างสรรค์ของสิ่งที่คุณทำได้ ด้วย