الجزء الثالث من سلسلة مقالات الأداء، وهو مقال من أهم المقالات من وجهة نظري لتأثيرها المهم والمباشر على فهم المبرمج أثناء تعامله مع الحلول التقنية لحل المشاكل المتعلقة بالأداء

1. ‫الرحيم‬ ‫الرحمن‬ ‫الله‬ ‫بسم‬
‫منه‬ ‫كان‬ ‫من‬ ُ‫د‬‫ويزي‬ ،
ً ‫ّا‬‫جي‬‫ن‬ ‫ناداه‬ ‫من‬ ‫ُجيب‬‫ي‬‫و‬ ،
ً ‫خفيا‬ ‫دعاه‬ ‫من‬ ‫ُحب‬‫ي‬ ،‫العالمين‬ ّ
‫رب‬ ‫لله‬ ‫حمد‬‫ل‬‫ا‬
.‫العالمين‬ ّ
‫رب‬ ‫لله‬ ‫حمد‬‫ل‬‫ا‬ ،
ً ‫ّا‬‫رضي‬ ‫الوعد‬ ‫صادق‬ ‫كان‬ ‫من‬ ‫ويهدي‬ ،
ً ‫ّا‬‫وفي‬ ‫له‬ ‫كان‬ ‫من‬ ‫يكرم‬‫و‬ ،
ً ‫ّا‬‫ي‬ِ‫حي‬
Web performance - 3
‫(كيف‬
‫يعمل‬
،‫المتصفح‬
‫دورة‬
‫حياة‬
‫ال‬
Request
‫من‬
‫وإلى‬
)‫المستخدم‬
‫في‬
‫الثاني‬ ‫جزء‬‫ل‬‫ا‬
‫من‬ ‫مجموعة‬ ‫عن‬ ‫حدثنا‬‫ت‬ ‫السلسلة‬ ‫هذه‬ ‫من‬
‫تقع‬ ‫والتي‬ ‫المهمة‬ ‫والأجزاء‬ ‫العناوين‬
‫ضمن‬
‫دائرة‬
‫ال‬
Web Performance
،
‫والتي‬
‫تؤثر‬
‫بشكل‬
‫مباشر‬
‫وحقيقي‬
‫أو‬
‫بشكل‬
‫خيلي‬‫ت‬
‫على‬
…‫بالأداء‬ ‫المتعلقة‬ ‫المشاكل‬ ‫بعض‬ ‫جة‬‫ل‬‫معا‬ ‫يمكن‬ ‫وكيف‬ ،‫الأداء‬
‫كيف‬ ‫ندرك‬ ‫أن‬ ‫دون‬ ‫ومواضيع‬ ‫مصطلحات‬ ‫من‬ ‫عنه‬ ‫حدثنا‬‫ت‬ ‫ما‬ ‫نفهم‬ ‫أن‬ ‫يمكن‬ ‫كيف‬ ،‫لكن‬
‫يتعامل‬
‫المتصفح‬
‫مع‬
‫ال‬
content
،‫؟‬
‫إن‬
‫إدراك‬
‫ما‬
‫حدث‬‫ي‬
‫من‬
‫عمليات‬
‫مهم‬
‫لفهم‬
‫ما‬
‫حدث‬‫ي‬
‫عند‬
‫ال‬
content render
،
‫وبناء‬
‫على‬
‫ذلك‬
‫يمكنك‬
‫فهم‬
‫المشاكل‬
‫المتعلقة‬
‫بالأداء‬
‫بشكل‬
:‫يلي‬ ‫ما‬ ‫يشمل‬ ‫وهذا‬ ،‫أفضل‬
How the browser works
:
‫عند‬
‫قيامك‬
‫بوضع‬
‫رابط‬
‫الموقع‬
‫الذي‬
‫ترغب‬
‫في‬
‫الذهاب‬
‫إليه‬
‫في‬
‫المتصفح‬
‫ومن‬
‫ثم‬
‫ضغط‬
Enter
،
‫فإن‬
‫ما‬
‫حدث‬‫ي‬
‫هو‬
‫أن‬
‫المتصفح‬
‫سيقوم‬
‫بالبحث‬
‫عن‬
‫ال‬
server
‫الذي‬
‫يملك‬
‫الملفات‬
‫خاصة‬‫ل‬‫ا‬
‫بالموقع‬
،‫المطلوب‬
‫ثم‬
‫سيقوم‬
‫بفتح‬
connection
‫مع‬
‫هذا‬
‫ال‬
server
،
‫ثم‬
‫يقوم‬
‫بطلب‬
‫ال‬
files
‫التي‬
‫حتاجها‬‫ي‬
‫لعرض‬
‫الموقع‬
‫على‬
،‫المتصفح‬
‫وهذا‬
‫يقودنا‬
‫تطبيق‬ ‫عن‬ ‫عبارة‬ ‫المتصفحات‬ ‫أولا‬ ،‫ندركها‬ ‫أن‬ ‫لنا‬ ‫ينبغي‬ ‫والتي‬ ‫المهمة‬ ‫التفاصيل‬ ‫لبعض‬

2. single threaded
‫(ونقصد‬
‫بهذا‬
‫العمليات‬
‫التي‬
‫حدث‬‫ت‬
‫حتى‬
‫إنشاء‬
‫حتوى‬‫م‬‫ال‬
‫في‬
‫الصفحة‬
‫أو‬
‫العمليات‬
‫التي‬
‫تتم‬
‫على‬
‫ال‬
frontend
،)
‫وهذه‬
‫نقطة‬
‫مهمة‬
‫جدا‬
‫للتعامل‬
‫مع‬
‫مشاكل‬
،‫الأداء‬
‫فمشاكل‬
‫الأداء‬
‫الرئيسية‬
‫تنقسم‬
‫إلى‬
،‫جزئين‬
‫الأول‬
‫متعلق‬
‫بال‬
Latency
‫والثاني‬
‫المشاكل‬
‫مع‬ ‫تعامله‬ ‫يقة‬‫وطر‬ ‫المتصفح‬ ‫إلى‬ ‫النظر‬ ‫خلال‬ ‫من‬ ‫المتصفح‬ ‫على‬ ‫العمليات‬ ‫تنفيذ‬ ‫يقة‬‫بطر‬ ‫المتعلقة‬
‫الأوامر‬
‫والفعاليات‬
‫على‬
frontend
‫باعتباره‬
single threaded
،
‫ما‬‫ك‬‫و‬
‫حدثنا‬‫ت‬
‫في‬
‫جزء‬‫ل‬‫ا‬
‫السابق‬
‫عن‬
‫ل‬
latency
،
‫فإننا‬
‫جب‬‫ي‬
‫أن‬
‫نهتم‬
‫بتقليل‬
‫وقت‬
‫ال‬
latency
‫قدر‬
‫الإمكان‬
‫لتحسين‬
،‫الأداء‬
‫يكون‬‫و‬
‫الهدف‬
‫عن‬
‫المطور‬
‫هو‬
‫إرسال‬
information request
‫أسرع‬
‫ما‬
،‫يمكن‬
‫يكون‬‫و‬
‫دور‬
‫المطور‬
‫في‬
‫التعامل‬
‫مع‬
‫المتصفح‬
‫باعتباره‬
single thread
‫وهدفه‬
‫ضمان‬
‫جودة‬
‫التفاعل‬
‫وكفاءتها‬
‫مع‬
‫الموقع‬
،‫الإلكتروني‬
‫وهذا‬
‫يشمل‬
‫عدة‬
‫أجزاء‬
‫أهمها‬
‫التأكد‬
‫من‬
‫أن‬
‫ال‬
main
thread
‫ستقوم‬
‫جاز‬‫ن‬‫بإ‬
‫جميع‬
‫الأعمال‬
‫المطلوبة‬
‫منها‬
‫ومستعدة‬
‫ًا‬‫م‬‫دو‬
‫للتجاوب‬
‫مع‬
‫العمليات‬
‫التي‬
‫عدد‬ ‫تقليل‬ ‫على‬ ‫القدرة‬ ‫هو‬ ،‫جزئية‬‫ل‬‫ا‬ ‫هذه‬ ‫فهم‬ ‫في‬ ‫هنا‬ ‫جميلة‬‫ل‬‫ا‬ ‫النقطة‬ ‫وتكمن‬ ،‫المستخدم‬ ‫بها‬ ‫يقوم‬
‫العمليات‬
‫والمسؤوليات‬
‫الموجودة‬
‫على‬
‫ال‬
main thread
‫إن‬
‫أمكن‬
،‫ذلك‬
‫وذلك‬
‫سيضمن‬
‫حسين‬‫ت‬
‫الأداء‬
‫من‬
‫خلال‬
‫التأكد‬
‫من‬
‫أن‬
‫ال‬
render
‫سيكون‬
‫سلس‬
‫والوقت‬
‫اللازم‬
‫للتفاعل‬
‫عمل‬ ‫يقة‬‫طر‬ ‫على‬ ‫العامة‬ ‫النظرة‬ ‫هذه‬ ‫بعد‬ ‫والآن‬ ،…‫ية‬‫فور‬ ‫جاوب‬‫ت‬ ‫سرعة‬ ‫يوفر‬ ‫مما‬ ‫أفضل‬
:‫أكثر‬ ‫التفاصيل‬ ‫ببعض‬ ‫لندخل‬ ،‫المتصفح‬
i
.
‫هو‬ ‫الكتروني‬ ‫موقع‬ ‫يارة‬‫ز‬ ‫في‬ ‫ورغبتك‬ ‫المتصفح‬ ‫مع‬ ‫تعاملك‬ ‫أثناء‬ ‫تتم‬ ‫عملية‬ ‫أول‬
‫عمل‬
Navigation
‫للموقع‬
،‫المطلوب‬
‫أكان‬
‫ذلك‬
‫من‬
‫خلال‬
‫ال‬
url
‫أو‬
‫من‬
‫خلال‬
‫رابط‬
‫موجود‬
‫في‬
‫صفحة‬
‫ما‬
‫أو‬
‫من‬
‫خلال‬
form
‫…إلى‬
،‫آخره‬
‫عادة‬
‫هذه‬
‫خلال‬ ‫من‬ ‫يتم‬ ‫غالبا‬ ‫عليها‬ ‫السلبي‬ ‫والتأثير‬ ،‫كبيرا‬ ‫وقتا‬ ‫تستغرق‬ ‫ولا‬ ‫يعة‬‫سر‬ ‫العملية‬
‫مشاكل‬
‫ال‬
bandwidth
‫وال‬
latency
.

3. ii
.
DNS Lookup
:
‫ال‬
DNS
‫هي‬
‫اختصار‬
‫ل‬
Domain Name System
،
‫مبسط‬ ‫وبشكل‬ ،‫للويب‬ ‫التحتية‬ ‫بالبنية‬ ‫خاصة‬‫ل‬‫ا‬ ‫المهمة‬ ‫البروتوكولات‬ ‫أحد‬ ‫وهو‬
‫فيه‬ ‫نكتب‬ ‫كنا‬ ‫الذي‬ ‫(الدفتر‬ ‫الهاتف‬ ‫دفتر‬ ‫بوظيفة‬ ‫يقوم‬ ‫البروتوكول‬ ‫هذا‬ ‫فإن‬
‫الذهاب‬ ‫حاول‬‫ن‬ ‫والذي‬ ‫معين‬ ‫موقع‬ ‫بطلب‬ ‫المتصفح‬ ‫يقوم‬ ،)‫الهاتف‬ ‫ورقم‬ ‫الإسم‬
،‫إليه‬
‫هذا‬
‫الموقع‬
‫له‬
‫عنوان‬
‫على‬
‫شبكة‬
،‫الإنترنت‬
‫هذا‬
‫العنوان‬
‫يسمى‬
IP
address
،
‫هذا‬
‫ال‬
IP
‫لنحصل‬
‫عليه‬
‫يتم‬
‫التواصل‬
‫مع‬
‫ال‬
DNS
،
‫يقوم‬‫و‬
‫ال‬
DNS
‫بدوره‬
‫بإرجاع‬
‫العنوان‬
‫خاص‬‫ل‬‫ا‬
‫بهذا‬
،‫الموقع‬
‫هذا‬
‫ال‬
request
‫هو‬
‫ال‬
initial request
،
‫بعد‬
‫ذلك‬
‫يتم‬
‫خزين‬‫ت‬
‫ال‬
ip address
‫لبعض‬
،‫الوقت‬
‫وذلك‬
‫من‬ ‫جلبه‬ ‫يكفي‬ ‫بل‬ ،‫أخرى‬ ‫مرة‬ ‫العنوان‬ ‫لطلب‬ ‫داعي‬ ‫فلا‬ ،‫الأداء‬ ‫من‬ ‫حسن‬‫ي‬
‫ال‬
cache
…
iii
.
TCP Handshake
:
‫يعد‬
‫ال‬
TCP
‫بروتوكول‬
‫واحد‬
‫من‬
‫أهم‬
‫البروتوكولات‬
‫بعضهما‬ ‫مع‬ ‫الاتصال‬ ‫من‬ ‫مضيفين‬ ‫أو‬ ‫جهازين‬ ‫يمكن‬ ‫لأنه‬ ،‫الشبكة‬ ‫على‬ ‫الموجودة‬
‫وتبادل‬
‫البيانات‬
‫فيما‬
،‫بينهم‬
‫ويحترم‬
‫ال‬
TCP
‫الترتيب‬
‫خاص‬‫ل‬‫ا‬
‫بالبيانات‬
‫التي‬
‫يتم‬
،‫إرسالها‬
‫لذلك‬
‫فهو‬
‫يضمن‬
‫أن‬
‫تكون‬
‫ال‬
packets
‫دائما‬
‫بنفس‬
‫الترتيب‬
‫الذي‬
‫أرسلت‬
،‫به‬
‫لكنك‬
‫تتسائل‬
،‫الآن‬
‫ما‬
‫هو‬
‫ال‬
handshake
،‫؟‬
‫جواب‬‫ل‬‫وا‬
‫هو‬
‫أنها‬
‫عملية‬
‫يستخدمها‬
‫ال‬
TCP
‫كوسيلة‬
‫تفاوض‬
‫بين‬
‫جهازين‬‫ل‬‫ا‬
‫أو‬
‫المضيفين‬
‫على‬
‫ال‬
parameters
‫خاصة‬‫ل‬‫ا‬
،‫بالإتصال‬
‫حيث‬‫ب‬
‫يعرف‬
‫ويمرر‬
‫كل‬
‫واحد‬
‫منهما‬
‫العملية‬ ‫هذه‬ ‫وتسمى‬ ،‫البيانات‬ ‫إرسال‬ ‫قبل‬ ‫وإيابا‬ ‫ذهابا‬ ‫الآخر‬ ‫إلى‬ ‫المعلومات‬
three-way handshake
،
‫يتم‬‫و‬
‫تبادل‬
‫ال‬
messages
‫من‬
‫خلال‬
‫ثلاث‬
،‫عمليات‬
‫ويشار‬
‫إليها‬
‫ب‬
SYN, SYN-ACK, ACK
،
‫حيث‬‫ب‬
‫تشير‬
‫ال‬
SYN

4. ‫إلى‬
Synchronize
،
‫وتشير‬
‫ال‬
SYN-ACK
‫إلى‬
Synchronize-ACKnowledgement
‫وتشير‬
‫ال‬
ACK
‫إلى‬
ACKnowledge
،…
‫كمثال‬
‫و‬
‫عملي‬
‫على‬
‫ما‬
،‫سبق‬
‫فإن‬
‫ما‬
‫حدث‬‫ي‬
‫هو‬
‫أن‬
‫المتصفح‬
‫سيقوم‬
‫بإرسال‬
‫رسالة‬
SYN
‫إلى‬
‫ال‬
server
،
‫ثم‬
‫سيقوم‬
‫ال‬
server
‫بعد‬
‫استقباله‬
‫للرسالة‬
‫بالرد‬
‫برسالة‬
SYN-ACK
‫إلى‬
،‫المتصفح‬
‫ثم‬
‫سيستقبل‬
‫المتصفح‬
‫ما‬
‫أرسله‬
‫السيرفر‬
‫ومن‬
‫ثم‬
‫سيقوم‬
‫بإخبار‬
‫السيرفر‬
‫جددا‬‫م‬
‫بأنه‬
‫قد‬
‫استلم‬
ACK
،
‫قد‬ ‫الاتصال‬ ‫سيكون‬ ،‫المتصفح‬ ‫من‬ ‫الأخيرة‬ ‫الرسالة‬ ‫لهذه‬ ‫السيرفر‬ ‫استقبال‬ ‫وعند‬
‫نشئ‬‫ُأ‬
،…‫بالفعل‬
‫هذه‬
‫العملية‬
‫حدث‬‫ت‬
‫قبل‬
‫ال‬
TLS handshake
‫وبعد‬
‫ال‬
DNS
،
‫وهذا‬
‫أمر‬
‫مهم‬
‫جب‬‫ي‬
‫أن‬
…‫كره‬
‫تتذ‬
iv
.
TLS handshake
:
‫ال‬
TLS
‫هو‬
‫اختصار‬
‫ل‬
Transport Layer Security
،
‫وحل‬
‫مكان‬
‫ال‬
SSL
‫الإصدار‬
‫الثالث‬
‫آخر‬-
‫إصدار‬
‫تم‬
‫إطلاقه‬
‫لل‬
SSL
‫من‬
‫قبل‬
netscape
‫عام‬
1996
،-
‫وال‬
TLS
‫بروتوكول‬
‫مهم‬
‫على‬
،‫الشبكة‬
‫فهو‬
‫يستخدم‬
‫للتواصل‬
‫بشكل‬
‫آمن‬
‫بين‬
‫التطبيقات‬
‫من‬
‫خلال‬
‫ال‬
network
،
‫وهو‬
‫يمنع‬
‫حاولات‬‫م‬
‫العبث‬
‫والتخريب‬
‫على‬
‫ال‬
email
‫والمتصفحات‬
‫والرسائل‬
‫المرسلة‬
‫بين‬
‫الأجهزة‬
‫حو‬‫ن‬‫و‬
،‫ذلك‬
‫وهو‬
‫بروتوكول‬
‫يقوم‬
‫على‬
‫مبدأ‬
‫وجود‬
client / server
‫خلال‬ ‫من‬ ‫بينهم‬ ‫فيما‬ ‫الاتصال‬ ‫تشفير‬ ‫خلال‬ ‫من‬ ‫لهما‬ ‫الآمن‬ ‫الاتصال‬ ‫ليضمن‬
‫بروتوكول‬
‫مصمم‬
‫لهذه‬
،‫العملية‬
‫وبكل‬
‫بساطة‬
‫فإن‬
‫ما‬
‫حصل‬‫ي‬
‫هو‬
‫تبادل‬
digital
certificates
‫فيما‬
‫بينهم‬
‫ومن‬
‫ثم‬
‫التحقق‬
‫من‬
‫هذه‬
‫ال‬
certificates
‫فيما‬
،‫بعد‬
،‫لذلك‬
‫لو‬
‫حاول‬
‫خص‬‫ش‬
‫ثالث‬
،‫الدخول‬
‫سيكون‬
‫لديه‬
certificate
‫ختلفة‬‫م‬
‫وبهذا‬
،‫الطرفين‬ ‫لدى‬ ‫مفضوحا‬ ‫سيكون‬ ‫ذلك‬ ‫لأن‬ ‫تبادله‬ ‫يتم‬ ‫بما‬ ‫البعث‬ ‫يستطيع‬ ‫لن‬

5. ‫والآن‬
‫نعود‬
‫جزئية‬‫ل‬‫ل‬
‫المهمة‬
‫في‬
‫هذه‬
،‫النقطة‬
handshake
‫يطلق‬‫(و‬
‫عليها‬
‫أيضا‬
TLS negotiation
،)
‫إن‬
‫ما‬
‫حدث‬‫ي‬
‫هنا‬
‫بكل‬
‫بساطة‬
‫هو‬
‫إضافة‬
‫خطوة‬
‫جديدة‬
‫بعد‬
‫ال‬
SYN-SYN-ACK-ACK
،
‫وهي‬
‫أن‬
‫ال‬
client
‫سيقوم‬
‫بإرسال‬
‫إلى‬
‫ال‬
server
،
‫وسيقوم‬
‫السيرفر‬
‫بالرد‬
‫عليها‬
‫مضافا‬
‫لها‬
‫ال‬
Certificate
‫خاصة‬‫ل‬‫ا‬
،‫به‬
‫ثم‬
‫يقوم‬
‫ال‬
client
‫بعد‬
‫أن‬
‫يستقبل‬
‫ال‬
certificate
‫بإرسال‬
‫ال‬
key
‫خاص‬‫ل‬‫ا‬
،‫به‬
‫وبهذا‬
‫تكون‬
‫العملية‬
‫قد‬
،…‫اكتملت‬
‫وهذا‬
‫يعني‬
8
‫خطوات‬
‫تقريبا‬
‫ليصبح‬
‫المتصفح‬
‫جاهزا‬
‫للقيام‬
‫بأي‬
request
‫على‬
،‫الموقع‬
‫ونشير‬
‫هنا‬
‫إلى‬
‫نقطة‬
،‫مهمة‬
‫وهي‬
‫أن‬
‫إضافة‬
‫ال‬
TLS handshake
‫ستقوم‬
‫بإضافة‬
‫بعض‬
‫من‬
‫الوقت‬
‫إلى‬
‫في‬ ‫الأمان‬ ‫لأن‬ ‫به‬ ‫نقبل‬ ‫أن‬ ‫جب‬‫ي‬ ‫أمر‬ ‫هذا‬ ‫لكن‬ ،‫الصفحة‬ ‫حميل‬‫ت‬‫ب‬ ‫خاص‬‫ل‬‫ا‬ ‫الزمن‬
‫الكلي‬ ‫الوقت‬ ‫إلى‬ ‫المضاف‬ ‫بالوقت‬ ‫مقارنة‬ ‫بالغة‬ ‫أهمية‬ ‫له‬ ‫الأطراف‬ ‫بين‬ ‫الاتصال‬
:‫كاملة‬‫الصورة‬ ‫لك‬ ‫لتتضح‬ ‫الصورة‬ ‫شاهد‬ ‫والآن‬ …،‫الصفحة‬ ‫تحميل‬ ‫لزمن‬

6. v
.
Response
:
‫في‬
‫هذه‬
،‫خطوة‬‫ل‬‫ا‬
‫الاتصال‬
‫يكون‬
‫قد‬
‫بدأ‬
‫بالفعل‬
‫بين‬
‫ال‬
web
server
‫وال‬
client
،
‫وما‬
‫يقوم‬
‫به‬
‫المتصفح‬
‫في‬
‫هذه‬
‫خطوة‬‫ل‬‫ا‬
‫هو‬
‫إرسال‬
Initial
HTTP GET Request
،
‫ومن‬
‫ثم‬
‫يقوم‬
‫ال‬
server
‫بالرد‬
‫على‬
‫هذا‬
‫ال‬
request
‫مع‬
‫معلومات‬
‫مفيدة‬
‫في‬
‫ال‬
response header
‫أي‬..
‫أن‬
‫ال‬
response
‫حتوي‬‫ي‬
Header & Body
،…
‫وهنا‬
‫نأتي‬
‫إلى‬
‫نقطة‬
،‫مهمة‬
‫وهي‬
‫أن‬
‫الوقت‬
‫المستغرق‬
‫من‬
‫حظة‬‫ل‬
‫إنشاء‬
‫ال‬
request
‫(يشمل‬
‫ال‬
DNS, TCP,
TLS
)
‫واستقبال‬
‫أول‬
packet
‫يطلق‬
‫عليه‬
TTFB
،
‫وهي‬
‫اختصار‬
‫ل‬
Time
to First Byte
،
‫يتم‬‫و‬
‫حسابها‬
‫بال‬
milliseconds
،
‫والمعادلة‬
‫خاصة‬‫ل‬‫ا‬
‫بها‬
‫بناء‬
‫على‬
‫المعطيات‬
‫التي‬
‫طرحناها‬
‫بالأعلى‬
:‫هي‬
TTFB = responseStart -
navigationStart
،
‫ومن‬
‫المعلومات‬
‫جميلة‬‫ل‬‫ا‬
‫التي‬
‫يمكنك‬
‫معرفتها‬
‫هي‬
‫أن‬
‫هناك‬
‫خوارزمية‬
‫يطلق‬
‫عليها‬
TCP slow start
،
‫هذه‬
‫خوارزمية‬‫ل‬‫ا‬
‫تقوم‬
‫على‬
‫يادة‬‫ز‬
‫وضبط‬
‫سرعة‬
‫نقل‬
‫البيانات‬
‫بناء‬
‫على‬
‫ال‬
bandwidth
‫خاص‬‫ل‬‫ا‬
‫بالشبكة‬
‫وسرعة‬
،‫بالشبكة‬ ‫خاصة‬‫ل‬‫ا‬ ‫القدرة‬ ‫لمعرفة‬ ‫حاجة‬‫ب‬ ‫لست‬ ‫أنك‬ ‫ببساطة‬ ‫والفكرة‬ ،‫البيانات‬ ‫نقل‬
‫وإنما‬
‫تقوم‬
‫هذه‬
‫خوارزمية‬‫ل‬‫ا‬
‫بدلا‬
‫من‬
‫ذلك‬
‫بإرسال‬
packet
‫تبدأ‬
‫حجم‬‫ب‬
‫صغير‬
‫ومن‬
‫ثم‬
‫تبدأ‬
‫المضاعفة‬
‫حجم‬‫ل‬‫ل‬
‫مع‬
‫كل‬
packet
،
‫مثلا‬
14KB
‫أول‬
packet
،
‫الثانية‬
‫ستكون‬
28KB
‫والثالثة‬
56KB
‫…وهكذا‬
‫حتى‬
‫يتم‬
‫حديد‬‫ت‬
‫أكبر‬
‫جم‬‫ح‬
‫يمكن‬
‫التي‬ ‫البيانات‬ ‫بمعدل‬ ‫التحكم‬ ‫للشبكة‬ ‫تتيح‬ ‫أنها‬ ‫خوارزمية‬‫ل‬‫ا‬ ‫هذه‬ ‫في‬ ‫جميل‬‫ل‬‫ا‬ ،‫إرساله‬
‫يمكن‬
‫نقلها‬
‫مع‬
‫اختلاف‬
‫الأوقات‬
‫وانشغال‬
‫ال‬
server
‫مثلا…إلى‬
‫آخره‬
vi
.
Parsing
:
‫جرد‬‫م‬‫ب‬
‫أن‬
‫يستلم‬
‫المتصفح‬
‫أول‬
‫حزمة‬
‫من‬
،‫البيانات‬
‫فإن‬
‫عملية‬
‫ال‬
Parsing
‫للمعلومات‬
‫التي‬
‫تم‬
‫استقبالها‬
،‫تبدأ‬
‫وال‬
Parsing
‫هي‬
‫عملية‬
‫حليل‬‫ت‬

7. ‫يل‬‫حو‬‫ت‬‫و‬
‫البرنامج‬
‫إلى‬
format
‫تستطيع‬
‫من‬
‫خلاله‬
‫ال‬
runtime environment
‫عمل‬
run
،‫له‬
‫بشكل‬
،‫مبسط‬
‫حليل‬‫ت‬
‫يل‬‫حو‬‫ت‬‫و‬
‫البيانات‬
‫من‬
‫شكل‬
‫إلى‬
‫شكل‬
‫آخر‬
‫تستطيع‬
‫بيئة‬
‫العمل‬
‫التي‬
‫تتعامل‬
‫معها‬
‫من‬
‫فهمه‬
‫ومن‬
‫ثم‬
‫عمل‬
run
‫لما‬
‫تم‬
،‫فهمه‬
‫وأوضح‬
‫مثال‬
‫هو‬
JS engine
‫الموجود‬
‫داخل‬
،…‫المتصفح‬
‫والآن‬
‫عودة‬
‫لهذه‬
،‫النقطة‬
‫فإن‬
‫ما‬
‫سيحدث‬
‫هنا‬
‫بعد‬
‫استقبال‬
‫البيانات‬
‫هو‬
‫يلها‬‫حو‬‫ت‬
‫إلى‬
DOM
‫و‬
CSSOM
،
‫واللذان‬
‫يستخدمان‬
‫لرسم‬
‫ووصف‬
‫البيانات‬
‫على‬
،!‫الشاشة‬
‫وال‬
DOM
‫هو‬
‫التمثيل‬
‫أو‬
‫الوصف‬
‫خاص‬‫ل‬‫ا‬
‫بالمعلومات‬
‫التي‬
‫تبتغي‬
،‫عرضها‬
‫ويمكن‬
،‫وقت‬ ‫من‬ ‫وبأكثر‬ ‫شكل‬ ‫من‬ ‫بأكثر‬ ‫سكربت‬ ‫جافا‬‫ل‬‫ا‬ ‫باستخدام‬ ‫عليه‬ ‫التعديل‬
‫بشكل‬
،‫أدق‬
‫هي‬
API
‫تقوم‬
‫بعمل‬
represents
‫أو‬
interacts
‫مع‬
‫أي‬
‫ملف‬
HTML
‫أو‬
XML
،
،‫لهذا‬
‫فإن‬
‫المتصفح‬
‫يعرض‬
‫ال‬
node tree
،
‫حيث‬‫ب‬
‫تمثل‬
‫كل‬
node
‫عنصر‬
‫معين‬
‫في‬
‫ال‬
document
،
‫وال‬
CSSOM
‫هي‬
‫اختصار‬
‫لل‬
CSS Object Model
،
‫وهي‬
‫مجموعة‬
‫من‬
‫ال‬
APIs
‫التي‬
‫تستخدم‬
‫لقراءة‬
‫وتعديل‬
‫التنسيق‬
‫خاص‬‫ل‬‫ا‬
‫بال‬
documents
،
‫وهي‬
‫مشابهة‬
‫أو‬
‫قريبة‬
‫لما‬
‫كان‬
‫في‬
DOM
‫من‬
‫ناحية‬
،‫المبدأ‬
‫فال‬
CSSOM
‫يعطي‬
‫القدرة‬
‫والقابلية‬
‫للتعديل‬
‫على‬
‫ال‬
document
‫من‬
‫خلال‬
‫جافا‬‫ل‬‫ا‬
،‫سكربت‬
‫ومن‬
‫هذه‬
‫الأمثلة‬
CSSStyleSheet
،…
‫والآن‬
‫تأتي‬
‫النقطة‬
،‫المهمة‬
‫ففهم‬
‫النقاط‬
‫بهذا‬
‫التسلسل‬
،‫الأداء‬ ‫على‬ ‫هنا‬ ‫سيحصل‬ ‫ما‬ ‫وخطورة‬ ‫أهمية‬ ‫معرفة‬ ‫وهو‬ ،‫مهم‬ ‫لغرض‬ ‫كان‬
‫لاحظ‬
‫أن‬
‫في‬
‫هذه‬
‫العملية‬
‫سيقوم‬
‫المتصفح‬
‫بعمل‬
parsing
‫للمعلومات‬
‫التي‬
‫جب‬‫ي‬ ‫أننا‬ ‫يعني‬ ‫وهذا‬ ،‫الشاشة‬ ‫على‬ ‫رسمها‬ ‫أو‬ ‫النتائج‬ ‫إظهار‬ ‫يستطيع‬ ‫حتى‬ ‫حتاجها‬‫ي‬
‫لأول‬ ‫للتجهيز‬ ‫المتصفح‬ ‫يساعد‬ ‫ما‬ ‫هي‬ ‫البيانات‬ ‫أول‬ ‫تكون‬ ‫أن‬ ‫حرص‬‫ن‬ ‫أن‬

8. render
،‫للشاشة‬
‫على‬
‫الأقل‬
‫جب‬‫ي‬
‫أن‬
‫تضمن‬
‫أن‬
‫يكون‬
‫ال‬
css
‫وال‬
html
‫جاهزين‬
‫للاستخدام‬
‫في‬
‫أول‬
render
،
‫لاحظ‬
‫أهمية‬
‫الفهم‬
‫لما‬
‫حدث‬‫ي‬
،‫هنا‬
‫فما‬
‫ستكون‬ ،‫الأقل‬ ‫على‬ ‫أو‬ ،‫الآن‬ ‫مفهوما‬ ‫ستجده‬ ،‫السابقة‬ ‫المقالات‬ ‫في‬ ‫عنه‬ ‫حدثنا‬‫ت‬
…‫آخر‬ ‫أسلوب‬ ‫من‬ ‫بدلا‬ ‫الأداء‬ ‫لتحسين‬ ‫معين‬ ‫أسلوب‬ ‫باستخدام‬ ‫قمنا‬ ‫لماذا‬ ‫مدركا‬
vii
.
Render
:
‫في‬
‫هذه‬
‫خطوة‬‫ل‬‫ا‬
‫يتم‬
‫تضمين‬
‫ما‬
‫تم‬
‫إنتاجه‬
‫من‬
‫خطوات‬‫ل‬‫ا‬
،‫السابقة‬
‫أي‬
‫أن‬
‫ال‬
parse
‫خاص‬‫ل‬‫ا‬
‫بال‬
DOM
‫وال‬
CSSOM
‫سيتم‬
‫جها‬‫م‬‫د‬
‫داخل‬
‫ال‬
render tree
،
‫وذلك‬
‫لمشاهدة‬
‫النتائج‬
‫من‬
‫خلال‬
‫ال‬
style
‫وال‬
layout
‫وال‬
paint
‫وال‬
compositing
،
‫وال‬
style
‫هي‬
‫خطوة‬‫ل‬‫ا‬
‫الثالثة‬
‫من‬
‫ال‬
CRP
،
‫حيث‬‫ب‬
‫يتم‬
‫بناء‬
‫ال‬
render tree
‫والتي‬
‫ستقوم‬
‫بدورها‬
‫بإخفاء‬
‫أي‬
‫عنصر‬
‫غير‬
‫ظاهر‬
(
display none
،)
‫يلي‬
‫ذلك‬
‫ال‬
Layout
‫وهو‬
‫خطوة‬‫ل‬‫ا‬
،‫الرابعة‬
‫حيث‬‫ب‬
‫يقوم‬
‫ببناء‬
‫ال‬
layout
‫خاص‬‫ل‬‫ا‬
‫بال‬
render tree
،
‫ويشمل‬
‫ال‬
layout
‫ال‬
size
‫وال‬
position
‫خاص‬‫ل‬‫ا‬
‫بأي‬
node
،
‫يلي‬
‫ذلك‬
‫خطوة‬‫ل‬‫ا‬
‫خامسة‬‫ل‬‫ا‬
‫والأخيرة‬
‫لل‬
CRP
‫وهي‬
‫ال‬
Paint
،
‫وهي‬
‫عملية‬
‫رسم‬
‫ال‬
nodes
‫على‬
،‫الشاشة‬
‫جب‬‫ي‬‫و‬
‫أن‬
‫يتم‬
‫هذا‬
‫كله‬
‫من‬
‫قبل‬
‫المتصفح‬
‫في‬
‫زمن‬
‫أقل‬
‫من‬
16.67ms
،
‫يأتي‬
‫بعد‬
‫هذا‬
‫ال‬
Compositing
،
‫وهي‬
‫تأتي‬
‫في‬
‫حال‬
‫وجود‬
‫أكثر‬
‫من‬
layer
‫على‬
‫عدة‬
‫من‬ ‫فيكون‬ ،‫عليهم‬ ‫للرسم‬ ‫حاجة‬ ‫وهناك‬ ،‫بينها‬ ‫فيما‬ ‫تداخلات‬ ‫وهناك‬ ‫يات‬‫مستو‬
‫ال‬ ‫وظيفة‬ ‫وهذه‬ ،‫الصحيح‬ ‫بشكلها‬ ‫يات‬‫المستو‬ ‫هذه‬ ‫ترتيب‬ ‫ضمان‬ ‫هنا‬ ‫الضروري‬
compositing
.
viii
.
Interactivity
:
‫بعد‬
‫أن‬
‫يتم‬
‫رسم‬
‫ال‬
blocks
‫على‬
‫الشاشة‬
‫في‬
‫خطوة‬‫ل‬‫ا‬
،‫السابقة‬
‫ال‬ ‫مع‬ ‫والتعامل‬ ‫للتفاعل‬ ‫قابلة‬ ‫الصفحة‬ ‫هل‬ ‫وهي‬ ،‫أخيرة‬ ‫نقطة‬ ‫هناك‬ ‫يبقى‬

9. events
‫خاصة‬‫ل‬‫ا‬
‫بالمستخدم؟‬
‫كم‬
‫كانت‬
‫المدة‬
‫الزمنية‬
‫ليستطيع‬
‫المستخدم‬
‫التعامل‬
‫حتى‬ ‫يلا‬‫طو‬ ‫وقتا‬ ‫استغرق‬ ‫لكن‬ ،‫فعلا‬ ‫يع‬‫سر‬ ‫الموقع‬ ‫تحميل‬ ‫كان‬ ‫لو‬ ،‫الموقع؟‬ ‫مع‬
‫يستطيع‬
‫المستخدم‬
‫عمل‬
scroll
،
‫فهل‬
‫تظن‬
‫أن‬
‫هذه‬
good UX
،‫؟‬
‫بكل‬
‫تأكيد‬
‫جربة‬‫ت‬ ‫سيعطي‬ ‫فهو‬ ‫تأخر‬ ‫إذا‬ ‫التفاعل‬ ‫وقت‬ ‫أن‬ ‫خصوصا‬ ،‫مهمة‬ ‫الأسئلة‬ ‫هذه‬
‫الزمن‬ ‫هذا‬ ‫لقياس‬ ‫مفهوم‬ ‫هناك‬ ‫لذلك‬ ،!‫جدا‬ ‫يع‬‫سر‬ ‫الموقع‬ ‫تحميل‬ ‫كان‬ ‫وإن‬ ‫سيئة‬
‫يطلق‬
‫عليه‬
TTI
،
‫وهي‬
‫اختصار‬
‫ل‬
Time to Interactive
،
‫وقد‬
‫حدثنا‬‫ت‬
‫عنه‬
،…‫سابقا‬
‫وهناك‬
‫مفهوم‬
‫آخر‬
‫للقياس‬
‫ويرمز‬
‫له‬
‫ب‬
FCP
،
‫وهي‬
‫اختصار‬
‫ل‬
First Contentful Paint
،
‫وهو‬
‫الوقت‬
‫المستغرق‬
‫حتى‬
‫حظة‬‫ل‬
render
‫أول‬
bit
‫من‬
‫حتوى‬‫م‬‫ال‬
‫الموجود‬
‫بال‬
DOM
…
:‫ملاحظات‬
●
‫هناك‬
‫مفهوم‬
‫يسمى‬
‫ب‬
(
Critical rendering path (CRP
،
‫هذا‬
‫المفهوم‬
‫غالبا‬
‫قد‬
‫خطوات‬‫ل‬‫ا‬ ‫من‬ ‫مجموعة‬ ‫بأنه‬ ‫القول‬ ‫فيمكن‬ ،‫هو‬ ‫ما‬ ‫تتسائل‬ ‫كنت‬ ‫إن‬ ‫لكن‬ ،‫سابقا‬ ‫رأيته‬
‫التي‬
‫تمر‬
‫من‬
‫خلال‬
‫المتصفح‬
‫يل‬‫لتحو‬
‫ال‬
HTML
‫وال‬
CSS
‫وال‬
JS
‫إلى‬
pixels
‫على‬
‫حسين‬‫ت‬‫ب‬ ‫قمت‬ ‫إذا‬ ،‫وطولها‬ ‫خطوات‬‫ل‬‫ا‬ ‫سلسلة‬ ‫مع‬ ‫بقوة‬ ‫يرتبط‬ ‫الأداء‬ ‫حسين‬‫ت‬ ‫إن‬ ،‫الشاشة‬
‫يشمل‬ ‫المفهوم‬ ‫هذا‬ ،‫تأكيد‬ ‫وبكل‬ ،…‫ممتازا‬ ‫أداء‬ ‫ذلك‬ ‫سيعكس‬ ‫تأكيد‬ ‫فبكل‬ ،‫السلسلة‬
DOM, CSSOM
‫وال‬
render tree
‫وال‬
layout
،
،‫لكن‬
،‫احذر‬
‫إذا‬
‫كان‬
‫البناء‬
،‫سيئا‬
‫فإنك‬
‫ستقع‬
‫فيما‬
‫يطلق‬
‫عليه‬
Jank
،
‫وال‬
Jank
‫مصطلح‬
‫يشير‬
‫إلى‬
‫البطء‬
‫في‬
‫ال‬
user interface
،
‫وعادة‬
‫ما‬
‫ينتج‬
‫ذلك‬
‫من‬
‫خلال‬
‫تنفيذ‬
long task
‫على‬
‫ال‬
main
thread
،
‫أو‬
‫بسبب‬
‫وجود‬
block rendering
‫…إلى‬
،‫آخره‬
‫إن‬
‫خطوات‬‫ل‬‫ا‬
‫المستخدمة‬

10. ‫لتحسين‬
‫الأداء‬
‫خاص‬‫ل‬‫ا‬
‫بال‬
CRP
‫يمكن‬
‫تلخيصها‬
‫بتقليل‬
‫عدد‬
‫ال‬
resource
‫التي‬
‫يمكن‬
‫أن‬
‫توقف‬
‫من‬
‫تسلسل‬
،‫خطوات‬‫ل‬‫ا‬
‫مثل‬
‫استخدام‬
‫ال‬
async
‫للملفات‬
‫التي‬
‫لن‬
‫حتاجها‬‫ت‬
،‫مباشرة‬
‫وتقليل‬
‫عدد‬
‫ال‬
requests
‫وتصغير‬
‫جم‬‫ح‬
‫الملفات‬
‫قدر‬
،‫الإمكان‬
‫والاهتمام‬
‫بترتيب‬
‫ال‬
assets
‫التي‬
،‫حتاجها‬‫ن‬
‫وتقليل‬
‫عدد‬
‫خطوات‬‫ل‬‫ا‬
‫في‬
‫السلسلة‬
‫قدر‬
…‫الإمكان‬
●
‫يقصد‬
‫بال‬
render tree
‫هي‬
‫النسخة‬
‫جة‬‫ت‬‫النا‬
‫من‬
‫عملية‬
‫دمج‬
‫ال‬
DOM
‫وال‬
CSSOM
،‫معا‬
‫بمعنى‬
‫آخر‬
‫عملية‬
‫دمل‬
‫حتوى‬‫م‬‫ال‬
‫والتنسيق‬
‫معا‬
‫ليتشكل‬
‫لدينا‬
render tree
،
‫وتتم‬
‫هذه‬
‫العملية‬
‫فقط‬
‫للمحتوى‬
‫ال‬
visible
،
‫مثلا‬
‫أي‬
‫شيء‬
display: none
‫لن‬
‫يكون‬
‫موجودا‬
‫بال‬
render tree
‫لا‬
‫هو‬
‫ولا‬
‫ما‬
…‫يه‬‫حتو‬‫ي‬
●
Preload scanner
:
‫لفهم‬
‫ما‬
‫حصل‬‫ي‬
‫بشكل‬
‫أكثر‬
،‫تفصيلا‬
‫اعلم‬
‫أن‬
‫المتصفح‬
‫وهو‬
‫يقوم‬
‫ببناء‬
‫ال‬
DOM tree
‫سيكون‬
‫مسيطرا‬
‫على‬
‫ال‬
main thread
،
‫لذلك‬
‫يأتي‬
‫دور‬
‫مهم‬
‫لل‬
Preload scanner
،
‫فهو‬
‫يقوم‬
‫على‬
‫عمل‬
parse
‫لل‬
content
‫الذي‬
‫أصبح‬
‫متاحا‬
،‫مباشرة‬
‫يقوم‬‫و‬
‫جلب‬‫ب‬
‫أكثر‬
‫ال‬
resource
‫ية‬‫أولو‬
‫مثل‬
‫ال‬
css, web font
‫…إلى‬
،‫آخره‬
‫وهذا‬
‫أمر‬
‫جميل‬
،‫جدا‬
‫لأنك‬
‫لن‬
‫تكون‬
‫مضطرا‬
‫للانتظار‬
‫ال‬
parser
‫ليبحث‬
‫عن‬
‫ال‬
reference
‫خاصة‬‫ل‬‫ا‬
‫بال‬
external resource
،
‫يقة‬‫بطر‬
،‫أخرى‬
‫ال‬
HTML
‫يبنى‬
‫وال‬
resource
،!‫ُجلب‬‫ت‬
‫بفهمك‬
‫لهذا‬
‫ستفهم‬
‫الدور‬
‫الكبير‬
‫ل‬
async
‫وال‬
defer
‫عند‬
!‫كبير‬ ‫بشكل‬ ‫الأداء‬ ‫من‬ ‫حسن‬‫ت‬ ‫وكيف‬ ،‫استخدامها‬

11. ●
‫شكل‬ ‫على‬ ‫المتصفح‬ ‫عمل‬ ‫بآلية‬ ‫خاصة‬‫ل‬‫ا‬ ‫خطوات‬‫ل‬‫ا‬ ‫بوضع‬ ‫قمت‬ ،‫المقال‬ ‫في‬ ‫التعقيد‬ ‫لتقليل‬
‫نقاط‬
،‫منفصلة‬
‫لكن‬
‫اعلم‬
‫أن‬
Navigation
‫موضوع‬
‫يشمل‬
‫كل‬
‫من‬
‫ال‬
DNS, TCP,
TLS
،
‫كذلك‬
‫و‬
‫المواضيع‬
،…‫التالية‬
‫هذا‬
‫التبسيط‬
‫لن‬
‫يغير‬
،‫شيء‬
‫سوى‬
‫ضبط‬
…‫العناوين‬
…‫الله‬ ‫بإذن‬ ‫الرابع‬ ‫جزء‬‫ل‬‫ا‬ ‫في‬ ‫يتبع‬