Shadow DOM เร็วเหมือน Virtual DOM ใน React.js หรือไม่

Question 1

การนำ Shadow DOM ไปใช้ในโครงการของฉันจะทำให้เร็วขึ้นเหมือน DOM เสมือนที่ React ใช้หรือไม่

Question 2

DOM เสมือน

Virtual DOM เป็นเรื่องเกี่ยวกับการหลีกเลี่ยงการเปลี่ยนแปลงที่ไม่จำเป็นใน DOM ซึ่งเป็นการเพิ่มประสิทธิภาพที่มีราคาแพงเนื่องจากการเปลี่ยนแปลง DOM มักจะทำให้เกิดการแสดงผลหน้าเว็บซ้ำ Virtual DOM ยังอนุญาตให้รวบรวมการเปลี่ยนแปลงหลายอย่างเพื่อนำไปใช้ในครั้งเดียวดังนั้นการเปลี่ยนแปลงทุกครั้งไม่ทำให้เกิดการแสดงผลซ้ำ แต่การแสดงผลใหม่จะเกิดขึ้นเพียงครั้งเดียวหลังจากใช้ชุดการเปลี่ยนแปลงกับ DOM

Shadow DOM

Shadow dom ส่วนใหญ่เกี่ยวกับการห่อหุ้มการใช้งาน องค์ประกอบแบบกำหนดเองเดียวสามารถใช้ตรรกะที่ซับซ้อนมากขึ้นหรือน้อยลงรวมกับ DOM ที่ซับซ้อนมากขึ้นหรือน้อยลง แอพลิเคชันเว็บทั้งหมดของความซับซ้อนโดยพลสามารถเพิ่มไปยังหน้าโดยการนำเข้าและ<body><my-app></my-app>แต่ยังนำมาใช้ใหม่ที่เรียบง่ายและส่วนประกอบ composable สามารถนำมาใช้เป็นองค์ประกอบที่กำหนดเองที่แสดงภายในถูกซ่อนอยู่ใน DOM <date-picker></date-picker>เงาเหมือน

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

Shadow DOM และประสิทธิภาพ

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

นี่คือเหตุผลที่>>>, /deep/และ::shadowCSS combinators ซึ่งได้รับอนุญาตให้ใช้รูปแบบข้ามเขตแดนเงา DOM ถูกเลิกใช้และอาจจะถูกลบออกในเร็ว ๆ นี้จาก Chrome (เบราว์เซอร์อื่น ๆ ที่ไม่เคยมีพวกเขา AFAIK) การมีอยู่ของตัวผสมเหล่านี้ป้องกันการเพิ่มประสิทธิภาพที่กล่าวถึงในย่อหน้าก่อนหน้า

Angular2ใช้ข้อดีของทั้งสองโลก

ใช้โฟลว์ข้อมูลทิศทางเดียวและรันการตรวจจับการเปลี่ยนแปลงบนโมเดลเท่านั้น หากตรวจพบการเปลี่ยนแปลงที่จะเกิด DOM ที่จะได้รับการปรับปรุงโดยการผูกปรับปรุงและให้คำสั่งมีโครงสร้างเหมือน*ngFor, *ngIf... ปรับปรุง DOM ดังนั้น DOM จะอัปเดตเมื่อโมเดลมีการเปลี่ยนแปลงจริงเท่านั้น

Angular2 ใช้ shadow DOM ( ViewEncapsulation.Nativeซึ่งปัจจุบันไม่ใช่ค่าเริ่มต้นเท่านั้น) เพื่อใช้ความสามารถในการห่อหุ้มรูปแบบที่เบราว์เซอร์จัดเตรียมไว้หรือ (ค่าเริ่มต้นปัจจุบัน) เพียงแค่จำลองการห่อหุ้มสไตล์โดยการเขียนรูปแบบใหม่ที่เพิ่มลงในคอมโพเนนต์เป็นวิธีแก้ปัญหาจนกว่าตัวแปร DOM และ CSS ของเงาดั้งเดิม (สำหรับการเปลี่ยนแปลงรูปแบบส่วนกลางแบบไดนามิก) สามารถใช้ได้อย่างกว้างขวาง

Question 3

ไม่ Shadow DOM และ Virtual DOM ไม่เกี่ยวข้องกันแม้ว่าจะมีชื่อคล้ายกันบ้างก็ตาม:

Virtual DOM:ตอบสนองแนวคิดในการเก็บสำเนา DOM ไว้สองชุด (ต้นฉบับและที่อัปเดต) ด้วยเหตุผลที่แตกต่างกัน ก่อนที่จะแสดงผล React จะทำให้วัตถุทั้งสองแตกต่างกันเพื่อพิจารณาว่าควรใช้การอัปเดตกับโครงสร้าง DOM จริงหรือไม่ สิ่งนี้ส่งผลให้ประสิทธิภาพเพิ่มขึ้นเนื่องจากเราอัปเดตเฉพาะบางส่วนของมุมมองที่ต้องการไม่ใช่ทั้งหน้าจอ

Shadow DOM: ข้อมูลจำเพาะบางส่วนของWeb Componentsตามที่เสนอโดย W3C ซึ่งโดยทั่วไปจะช่วยให้การห่อหุ้มองค์ประกอบ DOM ขนาดเล็กและสไตล์ CSS เป็นองค์ประกอบ DOM เดียว:

ตัวอย่าง Shadow DOM Element

<video width="300" height="150" />

อย่างไรก็ตาม<video>จริงๆแล้วสรุปองค์ประกอบต่อไปนี้:

<div>
   <input type="button" style="color: blue;">Play
   <input type="button" style="color: red;">Pause
   <source src="myVideo.mp4">
</div>

ดังนั้นโดยใช้เงา DOM, เราสามารถที่จะซ่อนรายละเอียดการดำเนินงานขององค์ประกอบเว็บของเราและมีเพียงผ่านพร้อมข้อมูลที่จำเป็นไปยังองค์ประกอบย่อย (เช่นheight, width) ซึ่งอาจจะทำให้เกิดความสับสนอย่างรุนแรงคล้าย ReactJS สำนวนผ่านpropsไปยังส่วนประกอบ .

ข้อมูลให้ทาง :