نظرة من الداخل على متصفح الويب الحديث (الجزء 1)

ماريكو كوساكا

وحدة المعالجة المركزية (CPU) ووحدة معالجة الرسومات (GPU) والذاكرة والبنية المتعدّدة العمليات

في سلسلة المدونات هذه المؤلفة من 4 أجزاء، سنلقي نظرة على متصفِّح Chrome، بدءًا من البنية عالية المستوى وصولاً إلى تفاصيل مسار العرض. إذا تساءلت يومًا كيف يحوّل المتصفح الرمز البرمجي إلى موقع ويب يعمل بشكل سليم، أو إذا كنت غير متأكد من سبب اقتراح أسلوب معيّن لتحسين الأداء، فإن هذه السلسلة تناسبك.

في الجزء الأول من هذه السلسلة، سنلقي نظرة على مصطلحات الحوسبة الأساسية وبنية Chrome المتعددة العمليات.

توجد وحدة المعالجة المركزية (CPU) ووحدة معالجة الرسومات (GPU) في قلب الكمبيوتر.

لفهم البيئة التي يعمل بها المتصفح، نحتاج إلى فهم بعض أجزاء أجهزة الكمبيوتر ووظيفتها.

وحدة المعالجة المركزية (CPU)

وحدة المعالجة المركزية (CPU)
الشكل 1: وحدة معالجة مركزية (CPU) رباعية النواة يجلسون في كل مكتب لمعالجة المهام فور توفّرها

الأولى هي C Cالمراقبة C أو C. يمكن اعتبار وحدة المعالجة المركزية (CPU) دماغ الكمبيوتر. لنفترض أن هناك نواة في وحدة المعالجة المركزية (CPU)، كما تظهر في صورة موظف مكتبي، يمكنها التعامل مع العديد من المهام المختلفة واحدًا تلو الآخر فور حصولها. ويمكنه التعامل مع كل المسائل بدءًا من الرياضيات وحتى الفن مع معرفة كيفية الردّ على مكالمة العميل. في الماضي، كانت معظم وحدات المعالجة المركزية (CPU) عبارة عن شريحة واحدة. النواة تشبه وحدة المعالجة المركزية نفسها التي تعيش في نفس الشريحة. في الأجهزة الحديثة، تحصل غالبًا على أكثر من نواة واحدة، ما يمنح الهواتف وأجهزة الكمبيوتر المحمولة قدرة أكبر على الحوسبة.

وحدة معالجة الرسومات

وحدة معالجة الرسومات
الشكل 2: العديد من نوى وحدة معالجة الرسومات مزوّدة بمفتاح ربط يشير إلى أنّها ستعالج مهمة محدودة

وحدة معالجة الرسومات أو وحدة معالجة الرسومات هي جزء آخر من جهاز الكمبيوتر. على عكس وحدة المعالجة المركزية (CPU)، ت نجاح وحدة معالجة الرسومات في معالجة المهام البسيطة ولكن على وحدات نوى متعددة في الوقت نفسه. وكما يوحي الاسم، تم تطوير اللعبة لأول مرة للتعامل مع الرسومات. ولهذا السبب، في سياق الرسومات، يرتبط "استخدام وحدة معالجة الرسومات" أو "المستندة إلى وحدة معالجة الرسومات" بالعرض السريع والتفاعل السلس. في السنوات الأخيرة، ومع الحوسبة السريعة لوحدة معالجة الرسومات، أصبح المزيد من العمليات الحسابية أمرًا ممكنًا على وحدة معالجة الرسومات وحدها.

عند بدء تشغيل تطبيق على جهاز الكمبيوتر أو الهاتف، تكون وحدة المعالجة المركزية (CPU) ووحدة معالجة الرسومات هما الجهازان اللذان يتم تشغيل التطبيق عليه. عادةً ما يتم تشغيل التطبيقات على وحدة المعالجة المركزية (CPU) ووحدة معالجة الرسومات باستخدام آليات يوفّرها نظام التشغيل.

الأجهزة ونظام التشغيل والتطبيق
الشكل 3: ثلاث طبقات من بنية الكمبيوتر. أجهزة الجهاز في الأسفل، ونظام التشغيل في الوسط، والتطبيق في الأعلى.

تنفيذ برنامج على Process and Thread

العملية وسلاسل المحادثات
الشكل 4: المعالجة كمربع إحاطة، خيوط على شكل سمكة مجردة تسبح داخل عملية ما

مفهوم آخر يجب استيعابه قبل التعمق في بنية المتصفح هو Process and Thread. يمكن وصف العملية بأنها برنامج تنفيذي للتطبيق. السلسلة هي تلك التي تتواجد داخل العملية وتنفذ أي جزء من برنامج عمليتها.

عند بدء تشغيل تطبيق، يتم إنشاء عملية. قد ينشئ البرنامج سلسلة(سلاسل) لمساعدته في العمل، لكن هذا اختياري. يمنح نظام التشغيل العملية "شريحة" من الذاكرة للعمل بها ويتم الاحتفاظ بجميع حالات التطبيق في مساحة الذاكرة الخاصة تلك. عند إغلاق التطبيق، تختفي العملية أيضًا ويحرر نظام التشغيل الذاكرة.

العملية والذاكرة
الشكل 5: رسم بياني لعملية تستخدم مساحة الذاكرة وتخزين بيانات التطبيق

يمكن أن تطلب العملية من نظام التشغيل بدء عملية أخرى لتشغيل مهام مختلفة. عند حدوث ذلك، يتم تخصيص أجزاء مختلفة من الذاكرة للعملية الجديدة. إذا كانت هناك عمليتان بحاجة إلى التحدّث، يمكنهما إجراء ذلك من خلال استخدام التواصل عبر الوصول (IPC). تم تصميم العديد من التطبيقات لتعمل بهذه الطريقة، بحيث إذا لم تستجيب عملية العامل، يمكن إعادة تشغيلها بدون إيقاف العمليات الأخرى التي تعمل في أجزاء مختلفة من التطبيق.

عملية العامل والبروتوكول IPC
الشكل 6: رسم بياني للعمليات المنفصلة التي تتصل عبر IPC

بنية المتصفّح

إذًا، كيف يتم إنشاء متصفح الويب باستخدام العمليات وسلاسل البيانات؟ حسنًا، يمكن أن تكون عملية واحدة بها العديد من السلاسل المختلفة أو العديد من العمليات المختلفة مع بعض السلاسل التي تتواصل عبر IPC.

بنية المتصفّح
الشكل 7: بُنى مختلفة للمتصفِّح في المعالجة / الرسم التخطيطي لسلسلة المحادثات

من المهم أن نلاحظ هنا أن هذه البِنى الأساسية المختلفة هي تفاصيل التنفيذ. ولا توجد مواصفات قياسية حول كيفية إنشاء متصفح الويب. قد يكون نهج أحد المتصفحات مختلفًا تمامًا عن متصفح آخر.

من أجل سلسلة المدونات هذه، نستخدم بنية Chrome الحديثة، الموضحة في الشكل 8.

في الجزء العلوي، تكمن عملية المتصفح في التنسيق مع العمليات الأخرى التي تعتني بأجزاء مختلفة من التطبيق. بالنسبة لعملية العارض، يتم إنشاء عمليات متعددة وتعيينها لكل علامة تبويب. منذ وقت قريب جدًا، أعطى Chrome عمليةً لكل علامة تبويب عند الإمكان، والآن يحاول منح كل موقع إلكتروني عملية خاصة به، بما في ذلك إطارات iframe (راجع عزل الموقع).

بنية المتصفّح
الشكل 8: رسم توضيحي لبنية Chrome المتعددة العمليات. تظهر طبقات متعددة ضمن "عملية العارض" لتمثيل Chrome وهو يشغِّل عمليات عارض متعددة لكل علامة تبويب.

ما العملية التي تتحكم في ماذا؟

يصف الجدول التالي كل عملية من عمليات Chrome وعناصر التحكم فيها:

العملية وما تتحكم فيها
المتصفح يتحكم هذا الإعداد في جزء "chrome" من التطبيق، بما في ذلك شريط العناوين والإشارات المرجعية وأزرار الرجوع والأمام.
تتعامل أيضًا مع الأجزاء غير المرئية والمميزة من متصفح الويب، مثل طلبات الشبكة والوصول إلى الملفات.
العارض تتحكّم هذه السياسة في أي عنصر داخل علامة التبويب التي يتم فيها عرض الموقع الإلكتروني.
المكوّن الإضافي للتحكُّم في أي مكونات إضافية يستخدمها موقع الويب، مثل الفلاش.
وحدة معالجة الرسومات تعالج مهام وحدة معالجة الرسومات بمعزل عن العمليات الأخرى. يتم فصلها إلى عمليات مختلفة لأن وحدات معالجة الرسومات تعالج الطلبات من تطبيقات متعددة وترسمها على السطح نفسه.
عمليات Chrome
الشكل 9: عمليات مختلفة تشير إلى أجزاء مختلفة من واجهة مستخدم المتصفح

هناك المزيد من العمليات مثل عملية الإضافة وعمليات الأداة. إذا أردت معرفة عدد العمليات الجارية في Chrome، يُرجى النقر على رمز قائمة الخيارات في أعلى يسار الصفحة، واختيار "مزيد من الأدوات"، ثم اختيار "إدارة المهام". سيؤدي ذلك إلى فتح نافذة تعرض قائمة بالعمليات قيد التشغيل حاليًا وحجم وحدة المعالجة المركزية (CPU)/الذاكرة المستخدمة.

فائدة البنية متعددة العمليات في Chrome

ذكرت سابقًا أن Chrome يستخدم عملية عارض متعددة. ببساطة، يمكنك أن تتخيل أن لكل علامة تبويب عملية عارض خاصة بها. لنفترض أن لديك 3 علامات تبويب مفتوحة وأن كل علامة تبويب تعمل من خلال عملية عارض مستقلة.

إذا توقفت إحدى علامات التبويب عن الاستجابة، يمكنك إغلاقها والمضي قدمًا مع إبقاء علامات التبويب الأخرى نشطة. إذا كانت كل علامات التبويب تعمل في عملية واحدة، وعندما تتوقف إحدى علامات التبويب عن الاستجابة، تصبح جميع علامات التبويب غير مستجيبة. هذا محزن.

عارض متعدد لعلامات التبويب
الشكل 10: رسم بياني يوضّح عمليات متعددة تعمل كل علامة تبويب

فائدة أخرى لتقسيم عمل المتصفح إلى عمليات متعددة هي الأمان ووضع الحماية. بما أنّ أنظمة التشغيل توفّر وسيلةً لتقييد امتيازات العمليات، يمكن للمتصفّح وضع حماية لعمليات معيّنة من ميزات معيّنة. على سبيل المثال، يقيّد متصفّح Chrome الوصول العشوائي إلى الملفات للعمليات التي تعالج إدخالاً عشوائيًا من المستخدم، مثل عملية العارض.

ونظرًا لأن للعمليات مساحة خاصة بها من الذاكرة، فغالبًا ما تحتوي على نُسخ من البنية الأساسية الشائعة (مثل V8 وهو محرك JavaScript في Chrome). ويعني هذا زيادة استخدام الذاكرة لأنه لا يمكن مشاركتها بالطريقة نفسها كما لو كانتا سلاسل محادثات ضمن العملية نفسها. يضع Chrome حدًا لعدد العمليات التي يمكن أن يؤدي إلى توفير الذاكرة. يختلف هذا الحدّ استنادًا إلى مقدار طاقة الذاكرة ووحدة المعالجة المركزية (CPU) في جهازك، ولكن عندما يصل Chrome إلى الحدّ الأقصى، يبدأ تشغيل علامات تبويب متعدّدة من الموقع الإلكتروني نفسه في عملية واحدة.

توفير المزيد من الذاكرة - الخدمة في Chrome

يتم تطبيق النهج نفسه على عمليات المتصفح. يُجري Chrome تغييرات في البنية لتشغيل كل جزء من برنامج المتصفح كخدمة تسمح بالتقسيم إلى عمليات مختلفة أو تجميع البيانات في عملية واحدة.

الفكرة العامة هي أنه عند تشغيل Chrome على جهاز قوي، قد يؤدي ذلك إلى تقسيم كل خدمة إلى عمليات مختلفة مما يؤدي إلى مزيد من الاستقرار، ولكن إذا كان الجهاز ذو موارد محدودة، فإن Chrome يدمج الخدمات في عملية واحدة توفر بصمة الذاكرة. قبل هذا التغيير، تم استخدام نهج مشابه لدمج العمليات لتقليل استخدام الذاكرة على أنظمة أساسية مثل Android.

خدمة Chrome
الشكل 11: رسم بياني لخدمة Chrome التي تنقل خدمات مختلفة إلى عمليات متعددة وعملية واحدة للمتصفّح

عمليات العرض لكل إطار - عزل الموقع

ميزة عزل الموقع هي ميزة تم طرحها مؤخرًا في Chrome تشغّل عملية عارض منفصلة لكل إطار iframe في جميع المواقع. تحدثنا عن عملية عارض واحدة لكل نموذج علامة تبويب، وهو ما أتاح تشغيل إطارات iframe من مواقع إلكترونية متعددة في عملية عارض واحدة مع مشاركة مساحة الذاكرة بين مواقع إلكترونية مختلفة. قد يبدو تشغيل a.com وb.com في عملية العرض نفسها. سياسة المصدر نفسه هي نموذج الأمان الأساسي على الويب، وهي تضمن عدم وصول موقع إلكتروني واحد إلى البيانات من مواقع إلكترونية أخرى بدون الحصول على موافقة. يعد تجاوز هذه السياسة هدفًا رئيسيًا للهجمات الأمنية. عزل العملية هو الطريقة الأكثر فعالية لفصل المواقع. باستخدام Meltdown وSpectre، أصبح من الواضح أكثر أننا بحاجة إلى فصل المواقع الإلكترونية باستخدام العمليات. عند تفعيل ميزة "عزل المواقع الإلكترونية" على سطح المكتب تلقائيًا بدءًا من إصدار 67 من Chrome، يحصل كل إطار iframe في جميع المواقع الإلكترونية في علامة تبويب على عملية عارض منفصلة.

عزل المواقع الإلكترونية
الشكل 12: رسم بياني لعزل المواقع الإلكترونية، وعمليات عارض متعددة تشير إلى إطارات iframe ضمن الموقع الإلكتروني

استغرق تفعيل عزل الموقع جهدًا هندسيًا لعدة سنوات. إن عزل الموقع ليس بسيطًا كتعيين عمليات عارض مختلفة؛ فهو يغير جوهريًا الطريقة التي تتواصل بها إطارات iframe مع بعضها البعض. إنّ فتح أدوات مطوّري البرامج على صفحة تحتوي على إطارات iframe تعمل على عمليات مختلفة يعني أنّ أدوات مطوّري البرامج اضطروا إلى تنفيذ أعمال من وراء الكواليس لكي تبدو بسلاسة. حتى تشغيل Ctrl+F بسيط للعثور على كلمة في الصفحة يعني البحث عبر عمليات العرض المختلفة. يمكنك أن ترى السبب الذي يجعل مهندسي المتصفح يتحدثون عن إصدار عزل الموقع باعتباره معلمًا رئيسيًا!

الخاتمة

في هذه المشاركة، تناولنا عرضًا عالي المستوى لبنية المتصفح وتناولنا فوائد البنية متعددة العمليات. تناولنا أيضًا الخدمة وعزل الموقع في Chrome والذي يرتبط ارتباطًا وثيقًا بالبنية متعددة العمليات. في المشاركة التالية، سنبدأ في التعمق فيما يحدث بين هذه العمليات وسلاسل البيانات من أجل عرض موقع ويب.

هل استمتعت بالمشاركة؟ إذا كانت لديك أي أسئلة أو اقتراحات للمشاركة في المستقبل، تسرّني مساعدتك على الحساب @kosamari على Twitter.

التالي: ما يحدث في التنقّل