كيف تعمل المتصفحات
لفهم وتحسين أداء أي موقع ، لا بدّ من البداية فهم كيف تقوم المتصفحات بعرض الصفحات ومعالجتها
المقدمة
لتحسين الـperformance،يجب على المطور أن يكون مُلماً مسبقاً بـكيفية عمل المتصفحات.
خطوات عرض الصفحات
- Navigation
- Fetching & Parsing Resources
- Render
- Layout
- Paint
- Composition
1- Navigation
والمقصود بـ الـ navigation هو عندما تفتح المتصفح وتقوم بكتابة رابط أو URL الصفحة في عنوان البحث، في الواقع أنت تطلب من الـ server أن يقوم بعرض تلك الصفحة لك،وهذا يُعتبر أول خطوة عملية في عرض الصفحة،
2- Fetching & Parsing Resources
يبدأ المتصفح بالقيام بالعمليتين على التوازي ، ويبدأ بـ عملية الـ Fetch ، وأول العمليات هي :
Domain Name System (DNS) Lookup
وهي العملية التي يتم فيها البحث عن الـIP address للموقع، من خلال الـDNS.
الـ DNS أشبه بقائمة أسماء الهاتف، حيث كل اسم على قائمة الإسماء له رقم هاتف، كذلك كل موقع يمتلك IP address خاص به ، وله domain name خاص به ، مثلاً عندما تقوم بكتابة https://google.com فإن المتصفح يقوم بالبحث في السيرفر عن صفحة الـ HTML التي لها العنوان 142.251.32.46 ،
TCP Handshake
بعد الحصول على عنوان الـIP يقوم المتصفح بالتواصل مع السيرفر عبر TCP (Transmission Control Protocol) والذي يستخدم Three way handshake (وتُعرف بـ SYN, SYN-ACK, & ACK) والذي يسمح للطرفين (المتصفح أو الـ client مع الـ server) بالتواصل والإستعداد لتبادل البيانات ، وتحدث العملية بإختصار كالآتي :
- يرسل الـ client حزمة SYN والتي تعرف بـ SYNchronize packet.
- يستقبل الـ server الحزمة المرسلة من قبل الـ client ويقوم بـالرد بـ إقرار للمزامنة SYNchronize-ACKnowledgement
- يستقبل الـ client إقرار المزامنة القادم من السيرفر ويقوم بإرسال موافقة للمزامنة (ACKnowledge). لمعرفة المزيد عن TCP handshae
Transport Layer Secure Negotiation
بروتوكول الـTLS هو البروتوكل المسؤول عن تأمين التواصل بين الclient & server. والذي يتم في عملية الـNegotiation التوافق على الطريقة التي سيتم بها حماية البيانات ونوع التشفير المستخدم، وأهمية هذه العملية في أنها تضمن أن البيانات ستظل آمنة في رحلتها بين الـ server & client . لمعرفة المزيد عن TLS
بعد اتصال الـ client مع الserver وتأمين الإتصال وحمايته، يقوم الـ client بإرسال HTTP GET Request وهي عملية طلب من السيرفر بالحصول على ملف الـ HTML.
يستلم الـserver الطلب ويقوم بإرسال ملف الـ HTML ، كما يُرسل أيضاً معلومات عن الـ HTTP Response تُعرف بـ Response Header.
يحتوي الـ Response على first byte of data received ، وثمة عامل مهم جداً في موضوع الـPerformance وهو : الوقت بين طلب الـclient للموقع وبين إستجابة الـserver ووصول أول Packet للـ HTML ، ويعرف هذا الوقت بـ Time To First Byte (TTFB).
ثمة عملية مهمة يجب الإشارة إليها تحدث عند بداية إرسال البيانات بعد اتصال الـTCP ، وهي عملية Congestion control - أو التحكم في الإزدحام. ومصطلح الإزدحام - Congestion يعود إلى أن : حزمة الـ TCP لا تُرسل دفعة واحدة، وإنما تُقسّم إلى قطع - segment وتُرسل ، وكما ذُكر مسبقاً في مرحلة الـ Handshake يستقبل السيرفر موافقة - ACK من الClient في شكل ACK packet بعد إرسال عدد من الـsegments.
- في حالة كان السيرفر ينتظر الـ ACK بعد كل segment فإن وقت العملية سيزيد، وهذه هي الحالة الأولى.
- في حالة قررنا أن نُرسل عدداً من الـ segments دفعة واحدة ، هذا سيؤدي إلى أن الـ client لن يكون قابلاً لإستقبالها لإنه سيكون مشغول بإرسال الـACKs وهذا يحدث في حالة الـ busy network.
وهنا جاء حل استخدام خوارزمية TCP Slow Start والتي تقوم بتحقيق توازن في عدد القطع المرسلة ، ويحدث التوازن كالآتي : تتم بزيادة كمية البيانات المرسلة تدريجياً حتى يتم تحديد أقصى حد للـ newtwork bandwidth ، كما تقوم بتقليل كمية البيانات في حالة الـhigh load للشبكة.
Parsing
أثناء عملية الـ Fetch إذا وصل أول chunk من البيانات ، ستبدأ عملية الـ parsing . يقوم الـHTML Parser بقراءة أكواد الـHTML على شكل stream ومن ثم يقوم ببناء شجرة Document Object Model (DOM) ، وإذا صادف كود يتعلق بـCSS يقوم أيضاً ببناء شجرة CSS Object Model (CSSOM) ، أما إذا صادف <script> وكان لا يحتوي على خاصية async أو defer فإنه يقوم بإيقاف عملية الـHTML parsing ، لتحميل أكواد الـJS ، وهنا تظهر أهمية الـpreload scanner والـ preload scanner عبارة عن parser ثاني ، يعمل بجانب الـparser الرئيسي ، والدور المهم الذي يلعبه هو أنه يقوم بإكتشاف وجلب الـ important resources مبكراً ، حتى لا يحدث blocking.
Building The DOM & CSSOM Tree
وشجرة الـ DOM توضح محتوى الـ document ، ويعتبر الـ <html> هو الجذز الرئيسي لهذه الشحرة، ومنه تتفرع بقية الصفحة وأبناء كل عنصر.
وكلما كان عدد العناصر أكبر ، كلما كان الوقت أطول في عملية البناء.
Building The CSSOM Tree
اثناء بناء شجرة الـDOM يقوم المتصفح ببناء شجرة الـ CSSOM ، يقوم المتصفح بتحويل الـ CSS rules إلى map styles ، يقوم المتصفح ببناء شجرة rules لكل خاصية معينة، مثلاً :
css1.header { 2 color:red 3 }
يقوم المتصفح بـبناء شجرة خاصة بـالعنصر الذي له header class ، والذي له أبناء ويقوم بإعطاء كل ابن - إذا كان نصاً - اللون الأحمر.
بعض العمليات الآخرى : تحدث عمليات آخرى مثل JS compilation ، أثناء ما يقوم الـparser ببناء شجرة الـCSSOM يقوم الـpreload scanner بجلب ملفات الـ JS ومن ثم تحدث عملية الـ compiling & interpreting . مقال مهم عن هذه العمليات : A Closer Look at Compilation and Interpretation
كما تحدث عملية ثانية هي : Building The Accessibility Tree .
Render
بعد اكتمال بناء كل من الـDOM & CSSOM تأتي عملية الـRender حيث يقوم المتصفح بضم كل منهما ، لتكوين Render Tree. تبدأ عملية التكوين بالنظر لشجرة الـDOM وبدءاً من أعلاها ، ويتجاهل عناصر مثل meta script title ، كما يتجاهل أي عنصر له خاصية display : none . وأي عنصر يتم تطبيق خاصية CSS الخاصة به ، حسب شجرة الـCSSOM ، وتُسمى هذه بعملية الـStyle Calculations .
الـRender Tree تقوم بتحديد أي العناصر التي سيتم عرضها، وأي خاصية سيتم تطبيقها على هذه العنصر، لكن لا تحدد أبعاد كل عنصر وموقعه في الشاشة. وهنا يأتي دور المرحلة القادمة.
Layout
ينشئ المتصفح Layout boxes لكل عنصر ، حيث يتم حساب موقع وأبعاد كل عنصر ، و يأخذ في الإعتبار حجم الـviewport حسب الشاشة التي يتم عرض الصفحة منها،
Paint
يقوم المتصفح بتحويل كل box تم إنشاءه في المرحلة السابقة إلى pixels ، حيث يتم رسم كل عنصر مرئي على الشاشة وبكل خصائصه من حيث الحجم،واللون،والظلال،والحواف … الخ.
عملية الـPainting تُقسم إلى عدة Layers .
Composition
يقوم الـمتصفح بدمج كل الـLayers إلى شكل الصفحة النهائي الذي يظهر على الشاشة.
تقوم المتصفحات الحديثة بفصل أجزاء من الصفحة إلى عدة Layers ، مثل العناصر التي لها خاصية position : fixed أو opacity أو transform أو animation ، بحيث يتم التعامل مع هذه الـLayers دون الحاجة إلى إعادة رسم الصفحة مرة ثانية.
