Lesson 15 / الدرس 15

How a page is built / كيف تُبنى الصفحة

The response arrived and it is a wall of text. What the browser does between that text and the picture on your screen explains most of what makes a site feel fast or slow.

وصلت الاستجابة وهي جدار من النص. وما يفعله المتصفح بين ذلك النص والصورة على شاشتك يفسّر معظم ما يجعل الموقع يبدو سريعًا أو بطيئًا.

The body of the response is HTML — the same text you wrote by hand for a whole course. The browser reads it from the top, and as it reads it builds a tree in memory: this element is inside that one, which is inside the body. That tree is the DOM, and everything afterwards works on the tree rather than on the text.

Five steps from text to picture

Parse the HTML into the tree of elements.
Parse the CSS into a matching set of rules, and work out which rule wins for each element — the cascade from the CSS course, happening here.
Lay out — decide where every box goes and how big it is. This is what the box model was describing.
Paint — draw the pixels: colours, text, borders, shadows.
Composite — stack the painted layers into the final image you see.

The browser does not wait for the whole file before starting — it parses as the bytes arrive, which is why a slow page appears in pieces rather than all at once. But two things interrupt that flow, and they are the reason a page can be blank for a second while it is clearly still loading.

What blocks, and why

In the head	Effect	Why
A stylesheet	Blocks painting	Painting before the rules arrive would show unstyled text
A script, plain	Blocks parsing	It might rewrite the page, so parsing stops until it runs
A script, defer	Does not block	Runs after parsing, in order
A script, async	Does not block	Runs whenever it arrives — order not guaranteed
An image	Does not block	Layout leaves a gap and fills it later

This table is most of web performance advice, compressed. Stylesheets belong in the head so they arrive early; scripts belong at the end of the body, or in the head with defer.

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

والصورة بلا width وheight تجعل خطوة التخطيط تخمّن. فلا تُحجز المساحة إلا حين تصل الصورة أخيرًا، فيقفز كل ما تحتها إلى أسفل — عادةً في اللحظة التي كان القارئ يوشك أن ينقر فيها شيئًا. وإعطاء السمتين، حتى حين تعيد CSS تحجيم الصورة بعدها، يتيح للتخطيط أن يحجز المساحة الصحيحة من أول مرة.

<img src="photo.jpg" width="600" height="400" alt="A photo">

Run it. The two dashed boxes are what layout has to work with before an image arrives: the first was given dimensions and holds its space, the second was not and is flat. Watch where the line of text under each one sits. When the picture finally loads, the second box inflates and that text is shoved down the page — the jump you have felt on news sites.

Try it live / جرّب بنفسك

<h1>From text to picture</h1>

<h2>1. Parse the HTML</h2>
<p><strong>In:</strong> … <strong>Out:</strong> …</p>

<h2>2. Parse the CSS</h2>
<p>…</p>

<h2>What blocks</h2>
<ul>
    <li>…</li>
</ul>

<h2>Two things I would fix first</h2>
<ol>
    <li>…</li>
</ol>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Why does a stylesheet in the head delay the first paint?

2. The page content jumps down as it loads. Most likely cause?

3. Which step turns the rules and the tree into positions and sizes?

Your task / مهمتك

Draw the five steps as a page, one section each, saying in your own words what goes in and what comes out. Then add a short section listing what blocks and what does not, and finish with the two changes you would make to a slow page first.

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

All five steps, in order, in your own words الخطوات الخمس كلها بالترتيب وبكلماتك
A list of what blocks and what does not قائمة بما يعطّل وما لا يعطّل
Two concrete first changes for a slow page تغييران محددان يبدأ بهما لصفحة بطيئة