DOM های واقعی و DOM های مجازی و DOM های سایه دار، اوه من! بیایید شیرجه بزنیم تا ببینیم چگونه همه آنها با هم کار می کنند تا یک مدل شی سند تمیز و کارآمد ایجاد کنند.
این DOM (مدل شیء سند) دقیقاً همانطور که بیان می کند است. درخت HTML یک وب سایت با یک شی به نام نمایش داده می شود document. در این شی مدلی از عناصر درخت HTML وجود دارد که به راحتی با نماد نقطه شی قابل دسترسی است.
-
document.headرا برمی گرداند<head></head>بخش درخت،document.bodyرا برمی گرداند<body></body>بخش درخت و غیره همچنین می توانید از این علامت نقطه برای دستکاری DOM استفاده کنید. مثلا:document.body.style.background = ‘red’رنگ پس زمینه بدن را به قرمز تغییر می دهد. می‌توانید اطلاعات بیشتری درباره DOM API در اسناد وب موزیلا ببینید.
این DOM به عنوان صفحه نامیده می شود خانه واقعی. DOM واقعی، به خودی خود، تنها قادر است هر بار که تغییری در DOM ایجاد می شود، کل DOM را به طور همزمان به روز کند. این باعث می شود که به روز رسانی صفحه بسیار کند و گران باشد. اینجاست که DOM مجازی می آید تا روز را نجات دهد!
این DOM مجازی یک نمایش مجازی از DOM واقعی است. این DOM مجازی در حافظه نگهداری می شود و با DOM واقعی همگام سازی می شود. React DOM واقعی را در جاوا اسکریپت کامپایل می‌کند، که اولین گام در ایجاد به‌روزرسانی‌های کارآمدتر است. سپس DOM مجازی از خود یک کپی می سازد (بیایید آن را DOM مجازی 2 بنامیم). هنگامی که یک به روز رسانی در صفحه ایجاد می شود، ابتدا روی DOM مجازی 2 اعمال می شود. React سپس DOM مجازی 2 را با DOM مجازی اصلی، یک کپی دقیق از DOM واقعی مقایسه می کند. React از این مقایسه استفاده می کند تا به سرعت تشخیص دهد که DOM واقعی کجا باید به روز شود و به روز شود فقط آن عناصر به جای کل DOM. اینجاست که جادو اتفاق می افتد، به روز رسانی فقط مواردی که باید به روز شوند بسیار سریعتر و کم هزینه تر است.
اگر می‌خواهید DOM مجازی را در عمل ببینید، می‌توانید یک نمایش بصری با ویژگی «چشمک‌زن رنگ» در ابزار بازرسی Google Chrome ببینید:
آن کادر را علامت بزنید و سپس با صفحه بازی کنید، هر تغییر DOM با یک کادر سبز برجسته می شود.
آخرین اما نه کم اهمیت، ما گریزان است سایه DOM. این اجازه می دهد تا درختان DOM پنهان به عناصر موجود در درخت DOM معمولی متصل شوند. عناصر سفارشی را می توان با Web API ایجاد کرد، این عناصر صرفاً توسط سایه DOM کنترل می شوند. مهم است که به یاد داشته باشید که DOM واقعی و DOM سایه، قلمروهای کاملاً متفاوتی هستند. تغییرات ایجاد شده در عناصر در DOM واقعی برای عناصر در DOM سایه اعمال نمی شود و بالعکس.
- اگر در حال بررسی عناصر HTML در ابزار بازرسی هستید و هنگامی که دقیقاً در صفحه به آن نگاه می کنید چیزی فهرست شده را نمی بینید، احتمالاً در سایه DOM است. بهترین مثال پخش کننده های ویدئویی است. به صورت بصری در صفحه می‌توانید رابط کاربری داخلی را ببینید: دکمه پخش، دکمه پرش، دکمه اشتراک‌گذاری و غیره، اما آن را در DOM واقعی نمی‌بینید. توسط سایه DOM کنترل می شود.
گریزان است، شما در واقع می توانید DOM سایه را در صورت نیاز آشکار کنید! در ابزار بازرسی گوگل کروم: به تنظیمات بروید، Preferences را انتخاب کنید و به بخش Elements بروید. “Show user agent shadow DOM” را انتخاب کنید تا هر DOM سایه در کنار DOM واقعی در برگه Elements ابزار بازرسی نشان داده شود.
این هر سه! امیدواریم این وبلاگ درک بهتری از تفاوت‌های DOM واقعی، DOM مجازی و DOM سایه‌دار برای شما به ارمغان آورده باشد. نظر خود را در نظرات به من بگویید!
