رندر کردن یک صفحه وب فرآیند تبدیل کدهای HTML، CSS و جاوا اسکریپت به یک صفحه تعاملی است که بازدیدکنندگان وب سایت انتظار دارند هنگام کلیک کردن روی یک لینک، آن را ببینند. هر صفحه وب سایت با در نظر گرفتن کاربر نهایی طراحی شده است. و قطعاً نمی‌خواهید بازدیدکننده صفحه شما با مشکلاتی مواجه شود.
از آنجایی که بیشتر کارهای رندرینگی که امروز در مورد آن بحث می کنیم توسط مرورگرها انجام می شود، منطقی است که در مورد آنها با جزئیات بیشتری صحبت کنیم. مرورگر وب یکی از آشناترین انواع نرم افزار برای کاربران مدرن اینترنت است. این نرم افزار وظیفه بازیابی فایل ها از یک سرور راه دور یا یک دیسک محلی و نمایش آنها را برای کاربر به شیوه ای خاص دارد که تعامل آسان و موثر با کاربر را فراهم می کند.
اکثر کاربران در مورد مرورگرهای وب ترجیحات قوی دارند: افراد گوگل کروم، موزیلا فایرفاکس، اپل سافاری خود را نگه می دارند تا زمانی که دلیل قوی برای رفتن به گزینه دیگری پیدا کنند.
با این حال، افراد زیادی در مورد نرم افزار کوچکتر در مرورگر مورد علاقه خود که در واقع مسئول اکثر عملیات است، نمی دانند. این قسمت به عنوان موتور مرورگر شناخته می شود و در واقع تعداد موتورهای کمتری نسبت به مرورگرها وجود دارد. نمونه‌هایی از موتورهای مرورگر عبارتند از Blink برای Google Chrome، Gecko برای Mozilla Firefox و WebKit برای Apple Safari.
روشی که موتورهای مرورگر مختلف HTML، CSS، XML و انواع دیگر داده‌ها را پردازش می‌کنند نیز می‌تواند کمی متفاوت باشد. به همین دلیل است که تست بین مرورگرها بخش مهمی از توسعه وب با کیفیت است. با اطمینان از اینکه صفحه وب شما به درستی در مرورگرها و موتورهای مرورگر مختلف ارائه می شود، از مشکلات رندر جلوگیری می کنید و از حفظ کاربر اطمینان می دهید.
قبل از اینکه به توضیح نحوه عملکرد رندر صفحه وب و نحوه بهینه سازی آن برای عملکرد بهتر ادامه دهیم، بیایید سه اصطلاح اساسی را که بیش از یک بار در راهنمای ما با آنها مواجه خواهید شد، مرور کنیم. DOM، CSSOM و Render Tree سه مورد از اساسی ترین مفاهیم رندر صفحه وب هستند.
و DOM یا Document Object Model یک رابط برنامه نویسی کاربردی است که ساختار و محتوای یک سند وب را معمولاً به شکل HTML نشان می دهد. DOM عناصر یک صفحه وب را به عنوان Node و اشیاء مجزا ارائه می کند و به زبان های برنامه نویسی مختلف اجازه می دهد تا با محتوای صفحه تعامل داشته باشند. DOM یک نمایش شی گرا از یک صفحه وب را ارائه می دهد و به یک زبان برنامه نویسی مانند جاوا اسکریپت اجازه می دهد تا به راحتی به ساختار سند دسترسی پیدا کند.
و CSSOM یا CSS Object Model مجموعه‌ای از رابط‌های برنامه‌نویسی کاربردی برای دسترسی و اصلاح اطلاعات مربوط به استایل یک صفحه وب است. CSSOM شامل تمام Selectors و ویژگی های انتخابگر مورد نیاز برای ارائه صحیح صفحه است. CSSOM برای CSS همان چیزی است که DOM برای HTML است، با این تفاوت که به جای ساختار آن، به استایل یک صفحه وب می پردازد.
درخت رندر مجموعه ای از Objects است که باید توسط مرورگر رندر شوند تا اطلاعات را به روشی آسان ارائه کند. درخت رندر از چندین عنصر کوچکتر تشکیل شده است که باید رندر شوند. موتورهای مرورگرهای مختلف می‌توانند به این عناصر به طور متفاوتی اشاره کنند: برای مثال، WebKit آنها را یک رندر یا یک شی رندر می‌نامد در حالی که Gecko به آنها به عنوان یک Frame اشاره می‌کند.
ساختار یک درخت رندر با ساختار DOM سازگار است: هر رشته متن با یک عنصر جداگانه نشان داده می شود که شی DOM مربوطه و style محاسبه شده خود را دارد. تنها عناصری که در درخت رندر گنجانده نشده‌اند، عناصری هستند که برای نامرئی بودن تنظیم شده‌اند، مانند تگ‌ها یا عناصر دارایdisplaynone
رندر کردن یک صفحه وب کاری است که مرورگر به صورت روزانه انجام می دهد و یک روش استاندارد برای انجام آن وجود دارد که هر بار که صفحه ای برای رندر وجود دارد مرورگر آن را طی می کند. در اینجا مراحلی وجود دارد که برای تبدیل چند هزار خط کد به یک صفحه وب که کاربر انتظار دارد ببیند، طی می شود.
هر بار که کاربر با صفحه تعامل می‌کند یا اسکریپت‌ها آن را به هر نحوی تغییر می‌دهند، مراحل بیشتری لازم است، زیرا ساختار و سبک سند احتمالاً قابل تغییر است و نیاز به به‌روزرسانی دارد. در بسیاری از موارد، رندر مجدد کامل لازم نیست و صفحه وب را می توان با یکی از دو تکنیک زیر به روز کرد.
در اینجا Repaint تکنیکی است که به مرورگر اجازه می‌دهد تا ظاهر عناصر صفحه وب را بدون تغییر LayOut به‌روزرسانی کند. RePaint می‌تواند به رنگ پس‌زمینه، طرح کلی عنصر یا نمایان بودن آن مربوط باشد.
در اینجا Reflow زمانی اتفاق می افتد که تغییر در صفحه وب روی layOut صفحه و موقعیت عناصر آن تأثیر بگذارد. Reflow موقعیت همه عناصر را در DOM، از جمله فرزند و مؤلفه‌های والد، دوباره محاسبه می‌کند، حتی اگر تغییرات مربوط به یک عنصر باشد. Reflow می تواند توسط:
هم Repaintو هم Refow تمایل به کند کردن عملکرد یک صفحه وب دارند، حتی بیشتر از Repaint. بسته به قدرت پردازش دستگاه، ReFlow می تواند به طور قابل توجهی سرعت آن را کاهش دهد، و مقدار تغییراتی که باید توسط ReFlow پوشش داده شود، اغلب آنقدر زیاد است که می تواند معادل رندر مجدد کل صفحه باشد. به همین دلیل است که مرورگرها سهم خود را برای بهینه سازی فرآیند رندر انجام می دهند.
