نگاهی به مرورگر وب مدرن (قسمت 1)

Mariko Kosaka

CPU، GPU، حافظه و معماری چند فرآیندی

در این مجموعه وبلاگ 4 قسمتی، ما به داخل مرورگر کروم از معماری سطح بالا تا مشخصات خط لوله رندر نگاه خواهیم کرد. اگر تا به حال فکر کرده اید که چگونه مرورگر کد شما را به یک وب سایت کاربردی تبدیل می کند، یا مطمئن نیستید که چرا یک تکنیک خاص برای بهبود عملکرد پیشنهاد شده است، این سری برای شما مناسب است.

به عنوان قسمت 1 این مجموعه، نگاهی به اصطلاحات محاسباتی اصلی و معماری چند فرآیندی Chrome خواهیم داشت.

توجه: اگر با ایده CPU/GPU و process/thread آشنا هستید، می توانید به معماری مرورگر بروید.

در هسته کامپیوتر CPU و GPU قرار دارند

برای درک محیطی که مرورگر در حال اجرا است، باید چند قسمت کامپیوتر و کارهایی که انجام می دهند را بشناسیم.

CPU

شکل 1: 4 هسته CPU به عنوان کارمندان اداری که در هر میز نشسته اند و وظایف خود را هنگام ورود انجام می دهند.

اول C entral P پردازش U nit - یا CPU است. CPU را می توان مغز کامپیوتر شما در نظر گرفت. یک هسته CPU، که در اینجا به عنوان یک کارمند اداری نشان داده شده است، می تواند بسیاری از وظایف مختلف را یک به یک انجام دهد. این هسته می تواند همه چیز را از ریاضی تا هنری انجام دهد و در عین حال می داند که چگونه به تماس مشتری پاسخ دهد. در گذشته اکثر CPU ها یک تراشه واحد بودند. یک هسته مانند CPU دیگری است که در همان تراشه زندگی می کند. در سخت افزار مدرن، شما اغلب بیش از یک هسته دریافت می کنید که قدرت محاسباتی بیشتری به تلفن ها و لپ تاپ های شما می دهد.

پردازنده گرافیکی

شکل 2: بسیاری از هسته‌های GPU با آچار نشان می‌دهد که کار محدودی را انجام می‌دهند

G raphics P rocessing U nit - یا GPU بخشی دیگر از کامپیوتر است. برخلاف CPU، GPU در انجام وظایف ساده اما همزمان در چندین هسته خوب است. همانطور که از نام آن پیداست، برای اولین بار برای مدیریت گرافیک توسعه یافت. به همین دلیل است که در زمینه گرافیک، "استفاده از GPU" یا "GPU-backed" با رندر سریع و تعامل روان همراه است. در سال‌های اخیر، با محاسبات شتاب‌دهی شده توسط GPU، محاسبات بیشتر و بیشتری تنها بر روی GPU امکان‌پذیر شده است.

هنگامی که برنامه ای را روی رایانه یا تلفن خود راه اندازی می کنید، CPU و GPU آنهایی هستند که برنامه را تغذیه می کنند. معمولاً برنامه ها با استفاده از مکانیزم های ارائه شده توسط سیستم عامل بر روی CPU و GPU اجرا می شوند.

شکل 3: سه لایه معماری کامپیوتر. سخت افزار ماشین در پایین، سیستم عامل در وسط، و برنامه در بالا.

برنامه را روی Process و Thread اجرا کنید

شکل 4: فرآیند به عنوان یک جعبه مرزی، رشته ها به عنوان ماهی انتزاعی در حال شنا در داخل یک فرآیند

مفهوم دیگری که قبل از فرو رفتن در معماری مرورگر باید درک کرد Process و Thread است. یک فرآیند را می توان به عنوان برنامه اجرای برنامه توصیف کرد. یک نخ رشته ای است که در داخل فرآیند زندگی می کند و هر بخشی از برنامه فرآیند خود را اجرا می کند.

هنگامی که یک برنامه کاربردی را راه اندازی می کنید، یک فرآیند ایجاد می شود. این برنامه ممکن است رشته(هایی) را برای کمک به انجام کار ایجاد کند، اما این اختیاری است. سیستم عامل به فرآیند یک "slab" از حافظه می دهد تا با آن کار کند و تمام وضعیت برنامه در آن فضای حافظه خصوصی نگهداری می شود. هنگامی که برنامه را می بندید، فرآیند نیز از بین می رود و سیستم عامل حافظه را آزاد می کند.

شکل 5: نمودار یک فرآیند با استفاده از فضای حافظه و ذخیره داده های برنامه

یک فرآیند می تواند از سیستم عامل بخواهد تا فرآیند دیگری را برای اجرای وظایف مختلف شروع کند. هنگامی که این اتفاق می افتد، بخش های مختلفی از حافظه برای فرآیند جدید اختصاص داده می شود. اگر دو فرآیند نیاز به گفتگو داشته باشند، می توانند با استفاده از ارتباطات فرآیند C ( IPC ) این کار را انجام دهند. بسیاری از برنامه ها طوری طراحی شده اند که به این روش کار کنند، به طوری که اگر یک فرآیند کارگری پاسخگو نباشد، می توان آن را بدون توقف سایر فرآیندهایی که در بخش های مختلف برنامه اجرا می کنند، راه اندازی مجدد کرد.

شکل 6: نمودار فرآیندهای جداگانه که از طریق IPC در ارتباط هستند

معماری مرورگر

بنابراین چگونه یک مرورگر وب با استفاده از فرآیندها و موضوعات ساخته می شود؟ خوب، این می تواند یک فرآیند با موضوعات مختلف یا بسیاری از فرآیندهای مختلف با چند رشته ارتباطی از طریق IPC باشد.

شکل 7: معماری های مختلف مرورگر در نمودار فرآیند/رشته

نکته مهمی که در اینجا باید به آن اشاره کرد این است که این معماری های مختلف جزییات پیاده سازی هستند. هیچ مشخصات استانداردی در مورد نحوه ساخت یک مرورگر وب وجود ندارد. رویکرد یک مرورگر ممکن است کاملاً متفاوت از دیگری باشد.

به خاطر این سری وبلاگ، از معماری اخیر کروم که در شکل 8 توضیح داده شده است استفاده می کنیم.

در بالا، فرآیند مرورگر هماهنگ با سایر فرآیندهایی است که از بخش‌های مختلف برنامه مراقبت می‌کنند. برای فرآیند رندر، چندین پردازش ایجاد شده و به هر تب اختصاص داده می شود. تا همین اواخر، کروم به هر تبی که می‌توانست فرآیندی را ارائه می‌کرد. اکنون سعی می کند به هر سایتی فرآیند خاص خود را بدهد، از جمله iframes (به جداسازی سایت مراجعه کنید).

شکل 8: نمودار معماری چند فرآیندی کروم. لایه‌های متعددی در زیر فرآیند رندر نشان داده می‌شوند تا کروم چندین فرآیند رندر را برای هر برگه اجرا کند.

کدام فرآیند چه چیزی را کنترل می کند؟

جدول زیر هر فرآیند کروم و آنچه را که کنترل می‌کند توضیح می‌دهد:

فرآیند و آنچه که آن را کنترل می کند
مرورگر	بخش «کروم» برنامه شامل نوار آدرس، نشانک‌ها، دکمه‌های برگشت و جلو را کنترل می‌کند. همچنین بخش های نامرئی و دارای امتیاز یک مرورگر وب مانند درخواست های شبکه و دسترسی به فایل را کنترل می کند.
رندر	هر چیزی را در داخل برگه ای که یک وب سایت نمایش داده می شود، کنترل می کند.
پلاگین	هر پلاگین مورد استفاده توسط وب سایت، به عنوان مثال، فلش را کنترل می کند.
پردازنده گرافیکی	وظایف GPU را جدا از سایر فرآیندها انجام می دهد. به فرآیندهای مختلفی تقسیم می‌شود، زیرا پردازنده‌های گرافیکی درخواست‌های چندین برنامه را مدیریت می‌کنند و آنها را در یک سطح می‌کشند.

شکل 9: فرآیندهای مختلف که به بخش‌های مختلف رابط کاربری مرورگر اشاره می‌کنند

حتی فرآیندهای بیشتری مانند فرآیند Extension و فرآیندهای ابزار وجود دارد. اگر می‌خواهید ببینید چند فرآیند در Chrome شما در حال اجرا است، روی نماد منوی گزینه‌ها در گوشه سمت راست بالا کلیک کنید، ابزارهای بیشتر را انتخاب کنید و سپس Task Manager را انتخاب کنید. با این کار پنجره ای باز می شود که فهرستی از فرآیندهایی که در حال حاضر در حال اجرا هستند و میزان CPU/حافظه ای که آنها استفاده می کنند باز می شود.

مزایای معماری چند فرآیندی در کروم

قبلاً اشاره کردم که کروم از فرآیند رندر چندگانه استفاده می کند. در ساده ترین حالت، می توانید تصور کنید که هر برگه فرآیند رندر مخصوص به خود را دارد. فرض کنید 3 تب باز دارید و هر تب توسط یک فرآیند رندر مستقل اجرا می شود.

اگر یکی از برگه‌ها پاسخگو نشد، می‌توانید برگه‌ای که پاسخ نمی‌دهد را ببندید و در حالی که سایر برگه‌ها را زنده نگه دارید، ادامه دهید. اگر همه برگه ها در یک فرآیند اجرا می شوند، وقتی یک برگه پاسخگو نمی شود، همه برگه ها پاسخگو نیستند. این غم انگیز است.

شکل 10: نموداری که چندین فرآیند در حال اجرا در هر تب را نشان می دهد

یکی دیگر از مزایای تفکیک کار مرورگر به چندین فرآیند، امنیت و سندباکس است. از آنجایی که سیستم‌عامل‌ها راهی برای محدود کردن امتیازات فرآیندها ارائه می‌کنند، مرورگر می‌تواند فرآیندهای خاصی را از ویژگی‌های خاص جعبه سندباکس کند. برای مثال، مرورگر کروم دسترسی به فایل دلخواه را برای فرآیندهایی که ورودی دلخواه کاربر مانند فرآیند رندر را مدیریت می‌کنند، محدود می‌کند.

از آنجایی که فرآیندها فضای حافظه خصوصی خود را دارند، اغلب حاوی کپی هایی از زیرساخت مشترک هستند (مانند V8 که موتور جاوا اسکریپت کروم است). این به معنای استفاده بیشتر از حافظه است زیرا نمی‌توان آن‌ها را همانطور که اگر رشته‌هایی در داخل یک فرآیند بودند به اشتراک گذاشت. به منظور صرفه جویی در حافظه، کروم محدودیتی برای تعداد فرآیندهایی که می تواند بچرخد تعیین می کند. این محدودیت بسته به میزان حافظه و قدرت CPU دستگاه شما متفاوت است، اما وقتی Chrome به حد مجاز رسید، شروع به اجرای چندین برگه از یک سایت در یک فرآیند می‌کند.

صرفه جویی در حافظه بیشتر - سرویس دهی در کروم

همین رویکرد برای فرآیند مرورگر اعمال می شود. کروم برای اجرای هر بخش از برنامه مرورگر به عنوان یک سرویس که امکان تقسیم به فرآیندهای مختلف یا تجمیع در یکی را فراهم می کند، دستخوش تغییرات معماری است.

ایده کلی این است که وقتی کروم روی سخت‌افزار قدرتمند اجرا می‌شود، ممکن است هر سرویس را به فرآیندهای مختلف تقسیم کند و پایداری بیشتری را به همراه داشته باشد، اما اگر روی دستگاهی با محدودیت منابع باشد، کروم سرویس‌ها را در یک فرآیند ادغام می‌کند و ردپای حافظه را ذخیره می‌کند. رویکرد مشابهی از یکپارچه سازی فرآیندها برای استفاده کمتر از حافظه، قبل از این تغییر در پلتفرمی مانند اندروید استفاده شده است.

شکل 11: نمودار سرویس دهی کروم، خدمات مختلف را به چندین فرآیند و یک فرآیند مرورگر واحد منتقل می کند.

فرآیندهای رندر هر فریم - جداسازی سایت

Site Isolation یک ویژگی اخیراً معرفی شده در کروم است که یک فرآیند رندر جداگانه برای هر iframe متقاطع سایت اجرا می کند. ما در مورد یک فرآیند رندر در هر مدل تب صحبت کرده‌ایم که به iframe‌های متقابل سایت اجازه می‌دهد در یک فرآیند رندر واحد با به اشتراک گذاشتن فضای حافظه بین سایت‌های مختلف اجرا شوند. اجرای a.com و b.com در فرآیند رندر یکسان ممکن است مشکلی به نظر برسد. همان خط مشی مبدا ، مدل اصلی امنیتی وب است. این اطمینان حاصل می کند که یک سایت نمی تواند بدون رضایت به داده های سایت های دیگر دسترسی پیدا کند. دور زدن این سیاست هدف اصلی حملات امنیتی است. جداسازی فرآیند مؤثرترین راه برای جداسازی سایت‌ها است. با Meltdown و Spectre ، حتی بیشتر آشکار شد که باید سایت‌ها را با استفاده از فرآیندها جدا کنیم. با فعال کردن Site Isolation به‌طور پیش‌فرض روی دسک‌تاپ از Chrome 67، هر iframe متقابل سایت در یک برگه یک فرآیند رندر جداگانه دریافت می‌کند.

شکل 12: نمودار جداسازی سایت. چندین فرآیند رندر که به iframe در یک سایت اشاره می کند

فعال کردن جداسازی سایت یک تلاش مهندسی چند ساله بوده است. جداسازی سایت به سادگی تخصیص فرآیندهای رندرهای مختلف نیست. اساساً نحوه صحبت iframe ها با یکدیگر را تغییر می دهد. باز کردن ابزارهای توسعه‌یافته در صفحه‌ای با iframe‌هایی که روی فرآیندهای مختلف اجرا می‌شوند به این معنی است که ابزارهای توسعه‌دهنده باید کارهای پشت صحنه را پیاده‌سازی کنند تا یکپارچه به نظر برسد. حتی اجرای یک Ctrl+F ساده برای یافتن یک کلمه در یک صفحه به معنای جستجو در فرآیندهای مختلف رندر است. می توانید دلیل صحبت مهندسان مرورگر را در مورد انتشار Site Isolation به عنوان یک نقطه عطف بزرگ ببینید!

بسته شدن

در این پست، نمای سطح بالایی از معماری مرورگر را پوشش داده ایم و مزایای معماری چند فرآیندی را پوشش می دهیم. ما همچنین سرویس و جداسازی سایت را در کروم که عمیقاً با معماری چند فرآیندی مرتبط است پوشش دادیم. در پست بعدی شروع می کنیم به بررسی اتفاقاتی که بین این فرآیندها و موضوعات برای نمایش یک وب سایت می افتد.

آیا از پست لذت بردید؟ اگر سؤال یا پیشنهادی برای پست آینده دارید، مایلم از شما در @kosamari در توییتر بشنوم.

بعدی: آنچه در ناوبری اتفاق می افتد