DOM یک استاندارد W3C (کنسرسیوم وب جهانی) است. این یک استاندارد رابط مستقل از پلتفرم و زبان است که به برنامه‌ها و اسکریپت‌ها اجازه می‌دهد به صورت پویا به محتوا، ساختار و سبک یک سند دسترسی پیدا کرده و به‌روزرسانی کنند.
هنگامی که یک صفحه وب بارگذاری می شود، مرورگر درخت DOM صفحه را می سازد. به این ترتیب می‌توانیم تمام ویژگی‌های HTML در صفحه را تغییر دهیم، عناصر و ویژگی‌های HTML موجود را حذف کنیم، عناصر و ویژگی‌های HTML جدید اضافه کنیم یا تمام سبک‌های CSS را در صفحه با زبان‌های برنامه‌نویسی مانند جاوا اسکریپت تغییر دهیم.
)](https://nabfollower.com/blog/wp-content/uploads/2023/03/DOM-چیست-و-چگونه-رندر-HTML-در-مرورگرها-اتفاق-می.gif "DOM چیست و چگونه رندر HTML در مرورگرها اتفاق می افتد؟ 1")
درخت DOM چیست؟
درخت DOM نوعی درخت است که گره‌های آن محتوای سند HTML و XML را نشان می‌دهند. هر سند HTML یا XML یک نمایش درخت DOM منحصر به فرد دارد. به عنوان مثال، کد زیر را بررسی می کنیم:
<html>
<head>
<title>My document</title>
</head>
<body>
<h1>Header</h1>
<p>Paragraph</p>
</body>
</html>
درخت DOM بلوک کد بالا به شرح زیر است:
چگونه مرورگر HTML را رندر می کند؟
مرورگر وب نرم افزاری است که فایل ها را از یک سرور راه دور دانلود کرده و به شما نمایش می دهد و امکان تعامل کاربر را فراهم می کند. فرآیند کامپایل فایل های دانلود شده از یک سرور راه دور و نمایش آنها به کاربر توسط موتورهای مرورگر انجام می شود. اگر علاقه مند هستید، می توانید موتورهای مرورگر و مقایسه های مختلف را بررسی کنید.
داده ها از طریق اینترنت به صورت بسته های بایتی ارسال می شوند. مرورگر باید این بایت های داده را به شکلی تبدیل کند که آن را درک می کند. ابتدا بایت ها به کاراکترهای HTML و سپس به Tokens تبدیل می شوند. در مرحله بعد توکن ها به گره ها تبدیل می شوند. گره ها اشیاء مختلف با ویژگی های خاص هستند. پس از ایجاد گره ها، درخت DOM ایجاد می شود.
)](https://nabfollower.com/blog/wp-content/uploads/2023/03/1678043863_683_DOM-چیست-و-چگونه-رندر-HTML-در-مرورگرها-اتفاق-می.png "DOM چیست و چگونه رندر HTML در مرورگرها اتفاق می افتد؟ 3")
هنگام ایجاد درخت DOM، ابتدا گره “سند” ایجاد می شود. Document یک گره است که کل سند HTML را نشان می دهد. گره ای که یک تگ HTML را مشخص می کند “عناصر” نامیده می شود. ما می توانیم نوع هر گره در درخت DOM را با “nodeType” یاد بگیریم. ویژگی NodeType یک عدد را برمی گرداند. می توانید سند مربوطه را بررسی کنید تا متوجه شوید که این عدد نشان دهنده کدام نوع گره است.
درخت DOM با موفقیت ایجاد شد، اما مرورگر به اطلاعاتی در مورد نحوه ظاهر شدن عناصر برای ارائه صفحه نیاز دارد. این مسئولیت CSSOM است که بداند عناصر یک صفحه چگونه باید ظاهر شوند.
CSSOM چیست؟
هنگام ایجاد درخت DOM، یک درخواست به پیوند CSS در قسمت ارسال می شود
و سبک های CSS در نتیجه این درخواست برگردانده می شوند. مانند تگ‌های HTML، اطلاعات CSS در بایت می‌آید و مدل شیء CSS (CSSOM) با گذراندن مراحل خاصی ایجاد می‌شود.
)](https://nabfollower.com/blog/wp-content/uploads/2023/03/1678043864_451_DOM-چیست-و-چگونه-رندر-HTML-در-مرورگرها-اتفاق-می.png "DOM چیست و چگونه رندر HTML در مرورگرها اتفاق می افتد؟ 5")
بایت های CSS به کاراکترها، سپس توکن ها و گره ها تبدیل می شوند. در نهایت، یک ساختار درختی معروف به مدل شی CSS یا به اختصار CSSOM ایجاد می شود.
)](https://nabfollower.com/blog/wp-content/uploads/2023/03/1678043864_974_DOM-چیست-و-چگونه-رندر-HTML-در-مرورگرها-اتفاق-می.png "DOM چیست و چگونه رندر HTML در مرورگرها اتفاق می افتد؟ 6")
درخت رندر چیست؟
ساختار درختی DOM و CSSOM دو ساختار مستقل هستند. DOM حاوی تمام اطلاعات مربوط به روابط عنصر HTML صفحه است، در حالی که CSSOM حاوی اطلاعاتی در مورد نحوه استایل دادن به عناصر است.
)](https://nabfollower.com/blog/wp-content/uploads/2023/03/1678043864_20_DOM-چیست-و-چگونه-رندر-HTML-در-مرورگرها-اتفاق-می.png "DOM چیست و چگونه رندر HTML در مرورگرها اتفاق می افتد؟ 7")
درخت رندر حاوی اطلاعاتی در مورد تمام محتوای DOM قابل مشاهده در صفحه و تمام اطلاعات CSSOM لازم برای گره های مختلف است. اگر یک عنصر توسط CSS پنهان شده باشد (به عنوان مثال، نمایش: هیچ، به این معنی است که گره در درخت Render نمایش داده نخواهد شد.
عنصر پنهان (به عنوان مثال، نمایش: هیچ) در DOM وجود دارد، اما در درخت Render وجود ندارد. این به این دلیل است که Render Tree اطلاعات را از DOM و CSSOM ترکیب می کند.
وقتی مرورگر یک Render Tree را رندر می‌کند، ابتدا هر گره قابل مشاهده را از ریشه درخت DOM شروع می‌کند (برچسب‌هایی مانند اسکریپت، متا در درخت رندر گنجانده نمی‌شوند و گره‌های پنهان شده توسط CSS در رندر گنجانده نمی‌شوند. درخت).
دید: پنهان و **نمایش: هیچکدام **متفاوت هستند. اولی آیتم را نامرئی می کند، اما آیتم در درخت رندر (به عنوان یک گره خالی) قرار می گیرد، در حالی که دومی (نمایش: هیچ) آیتم را از درخت رندر حذف می کند.
مراحل چیدمان و رنگ آمیزی
ما تمام اطلاعات محتوا و سبکی را داریم که با درخت رندر روی صفحه نمایش داده می شود، اما تصویر هنوز روی صفحه ظاهر نشده است. در ابتدا، مرورگر باید اندازه و موقعیت دقیق هر شی در صفحه را محاسبه کند.
برای تعیین اندازه و موقعیت دقیق هر شی، مرورگر از ریشه درخت رندر شروع می شود و هر شی را در صفحه محاسبه می کند. در نتیجه این محاسبه، مکان و اندازه دقیق هر عنصر مشخص می شود. در مرحله بعد مرورگر گره ها را یکی یکی روی صفحه رنگ می کند.
)](https://nabfollower.com/blog/wp-content/uploads/2023/03/1678043865_919_DOM-چیست-و-چگونه-رندر-HTML-در-مرورگرها-اتفاق-می.png "DOM چیست و چگونه رندر HTML در مرورگرها اتفاق می افتد؟ 8")
رندر مسدود کردن منابع
DOM و CSSOM باید قبل از نقاشی ایجاد شوند. دریافت HTML و CSS در اسرع وقت به مشتری برای بهینه سازی زمان اولین رندر برنامه های وب مهم است.
حتی یک صفحه وب ساده احتمالاً از JS استفاده کرده است. هنگامی که مرورگر در حین خواندن اسکریپت ها با یک تگ اسکریپت مواجه می شود، فرآیند رندر DOM متوقف می شود و تا زمانی که اجرای فایل اسکریپت به پایان برسد متوقف می شود. این به این دلیل است که جاوا اسکریپت می تواند هم DOM و هم CSSOM را تغییر دهد. از آنجایی که مرورگر مطمئن نیست جاوا اسکریپت چه کاری انجام خواهد داد، با متوقف کردن کامل ساختار DOM اقدامات احتیاطی را انجام می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Örnek</title>
<link rel="stylesheet" href="https://dev.to/muhammederdinc/style.css">
**<script src="app.js"></script>**
</head>
<body>
.....
</body>
</html>
در مثال کد بالا، وقتی مرورگر به تگ اسکریپت می‌رسد، فرآیند رندر DOM متوقف می‌شود تا زمانی که فایل اسکریپت به پایان برسد. به عنوان یک سناریوی متفاوت، اگر فایل app.js به جای محلی از یک سرور کشیده می‌شد و واکشی app.js به دلیل اتصال به شبکه چند ثانیه طول می‌کشید، فرآیند ساخت DOM نیز برای همان زمان متوقف می‌شد.
بیایید با سناریوی دیگری ادامه دهیم، به عنوان مثال، هنگامی که مرورگر با یک تگ اسکریپت مواجه می شود، اگر CSSOM هنوز آماده نباشد، اجرای JS تا آماده شدن CSSOM منتظر می ماند.
به‌طور پیش‌فرض، هر زمان که مرورگر با تگ اسکریپت مواجه شود، فرآیند ساخت DOM متوقف می‌شود. اگر کلمه کلیدی “async” را به تگ اسکریپت خود اضافه کنید، رندر DOM متوقف نخواهد شد و زمانی که فایل اسکریپت دانلود و آماده شد اجرا خواهد شد.
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1">
<title>Örnek</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”https://random-app.js" async></script>
</head>
<body>
....
</body>
</html>
منابع:
