Microsoft เพิ่มแท็บ Composited Layers ในเครื่องมือมุมมอง 3 มิติ

Microsoft เซอร์ไพรส์นักพัฒนาเว็บด้วยฟีเจอร์ใหม่ที่เพิ่มเข้าไปใน เครื่องมือมุมมอง 3 มิติซึ่งเป็นส่วนหนึ่งของเครื่องมือการพัฒนา (เครื่องมือ Dev) ประกาศเมื่อวันอังคาร ฟีเจอร์ที่เรียกว่าแท็บ Composited Layers จะรวมเครื่องมืออื่นๆ ของเครื่องมือมุมมอง 3 มิติ ที่ใช้สำหรับแก้ไขปัญหาการพัฒนาเว็บตามปกติ เช่น แถบเลื่อนที่ไม่จำเป็น ปัญหาการซ้อนดัชนี z และความซับซ้อนของ DOM

คุณลักษณะเลเยอร์แบบรวมมีขึ้นเพื่อแบ่งส่วนหน้าเว็บออกเป็นจำนวนชั้นที่เหมาะสม Microsoft Edge ผู้จัดการผลิตภัณฑ์อาวุโส แพทริก บรอสเซ็ต บอกว่าจะมีประโยชน์เมื่อส่วนประกอบเป็นภาพเคลื่อนไหวหรือเปลี่ยนแปลงโดยไม่ขึ้นกับส่วนที่เหลือ จำได้ว่าก่อนหน้านี้ Microsoft Edge DevTools มีเครื่องมือ Layers แยกต่างหากซึ่งมีฟังก์ชันการทำงานเหมือนกัน อย่างไรก็ตาม บริษัทตัดสินใจถอดแผงควบคุมออก ส่งผลให้มีการผสานเข้ากับเครื่องมือมุมมอง 3 มิติ

ในบล็อกโพสต์ที่ประกาศการมาถึงของคุณลักษณะใหม่ Brosset ยังให้รายละเอียดว่าเลเยอร์มีความสำคัญอย่างไรและโดยทั่วไปแล้วเกิดขึ้นบนเว็บอย่างไรโดยกล่าวถึงกิจกรรมของเครื่องมือแสดงผลของเบราว์เซอร์ในระดับสูง ตามที่เขาพูด เครื่องยนต์เบราว์เซอร์ทำตามขั้นตอนต่างๆ เพื่อดำเนินการจาก HTML และ CSS เป็นพิกเซลบนหน้าจอ ขั้นตอนเหล่านี้รวมถึงการแยกวิเคราะห์โค้ด HTML และการสร้างแผนผัง DOM การแยกวิเคราะห์โค้ด CSS และรับข้อมูลรูปแบบและเลย์เอาต์ การสร้างโครงสร้างแบบต้นไม้ใหม่ และการลงสีหน้าไปยังหน้าจอ

“ในระหว่างขั้นตอนสุดท้ายนี้ เครื่องยนต์อาจตัดสินใจทาสีหน้าในครั้งเดียว หรือแบ่งออกเป็นหลายชั้น ระบายสีทีละหน้า แล้วจัดองค์ประกอบภาพสุดท้ายจากพวกมัน” Brosset กล่าว “มีคุณสมบัติ CSS และองค์ประกอบ HTML เฉพาะที่ทำให้เอ็นจิ้นตัดสินใจสร้างเลเยอร์แยกต่างหาก ตัวอย่างเช่น การใช้คุณสมบัติการแปลง 3 มิติหรือคุณสมบัติการเปลี่ยนแปลงจะทำให้เอ็นจิ้นสร้างเลเยอร์ ด้วยวิธีนี้ เมื่อเนื้อหาในเลเยอร์เหล่านี้เปลี่ยนไป เครื่องยนต์จะต้องทาสีใหม่ทีละเลเยอร์เท่านั้น ไม่ใช่วิวพอร์ตทั้งหมด”

การคลิกแท็บ Composited Layers จะแสดงให้ผู้ใช้เห็นเลเยอร์ที่สร้างขึ้น โดยรายการจะแสดงในแถบด้านข้างทางด้านซ้ายมือ เครื่องมือนี้จะเน้นให้เห็นสิ่งต่าง ๆ ในฉาก 3 มิติ และการคลิกเลเยอร์จะทำให้ผู้ใช้ได้รับข้อมูลอันมีค่าเกี่ยวกับสิ่งเหล่านี้ เช่น ขนาด

“ในฐานะนักพัฒนาเว็บ การรู้ว่าส่วนหนึ่งของหน้าเว็บที่คุณตั้งใจจะทำให้เคลื่อนไหวนั้นอยู่ในเลเยอร์ของตัวเองจริงๆ หรือไม่” เขากล่าวเสริม “ถ้าเป็นเช่นนั้น คุณสามารถมั่นใจได้ว่าในขณะที่กำลังเล่นแอนิเมชั่น ส่วนที่เหลือของหน้าก็ไม่จำเป็นต้องทาสีใหม่เช่นกัน แต่การตรวจสอบว่าคุณไม่ได้สร้างเลเยอร์มากเกินไปโดยไม่ได้ตั้งใจก็สำคัญไม่แพ้กัน เนื่องจากแต่ละเลเยอร์ต้องการหน่วยความจำ”