مقدمة

كثير من المبتدئين في تطوير الواجهات الأمامية يبدؤون عادةً بالتقليد دون فهم: حفظ الوسوم، استظهار الخصائص، نسخ المكونات، وتشغيل السقالات. في البداية قد يتمكنون من تجميع بعض الصفحات، لكن كلما تقدموا في التعلم شعروا بصعوبة متزايدة - يرون أمثلة الآخرين ويظنون أنهم يفهمونها، لكنهم يعجزون عن كتابة شيء من الصفر بأنفسهم، ويشعرون بالحيرة التامة عند مواجهة أي خطأ برمجي.

السبب هو أن الصعوبة الحقيقية لا تكمن غالباً في "عدم القدرة على كتابة الكود"، بل في "عدم فهم الكود".

حاول أن تسأل نفسك الأسئلة التالية:

  • لماذا عند إدخال رابط URL، تظهر الصفحة؟
  • ما الذي يحدث بالضبط لـ HTML و CSS و JS داخل المتصفح؟
  • لماذا يحدث إعادة التدفق وإعادة الرسم؟
  • لماذا يشير المؤشرthisبشكل غريب أحياناً؟
  • لماذاPromise.thenيُنفذ قبلsetTimeout؟
  • لماذا يستطيعnextTickفي Vue الحصول على DOM المُحدث؟
  • لماذا لا يمكن كتابةkeyبشكل عشوائي في React؟
  • لماذا يصبح بناء المشروع بطيئاً ومزعجاً عندما يكبر حجمه؟

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

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

أولاً: ماذا تفعل الواجهات الأمامية بالضبط

1. ما هو الويب

الويب، في جوهره، هو نظام يعتمد على الإنترنت لنقل المعلومات، الوصول إلى الموارد، والتفاعل. يصل المستخدم إلى صفحات الويب من خلال المتصفح، ويطلب المتصفح الموارد من الخادم، ويرسل الخادم محتويات مثل HTML و CSS و JavaScript والصور والفيديوهات والصوتيات، ثم يقوم المتصفح بتحليل هذه الموارد وعرضها لتصبح الصفحة التي نراها.

نظام الواجهات الأمامية للويب يدور فعلياً حول هذه المحاور الستة الأساسية:

  • تحديد موقع الموارد: العثور على الموارد عبر عنوان URL
  • الاتصال الشبكي: نقل الموارد عبر HTTP/HTTPS
  • وصف المحتوى: وصف الهيكل عبر HTML
  • المظهر والتنسيق: التحكم بالمظهر عبر CSS
  • التفاعل والسلوك: تنفيذ المنطق عبر JavaScript
  • عرض المتصفح: تحويل الكود إلى واجهة مرئية وقابلة للتفاعل للمستخدم

ما يفعله مطور الواجهات الأمامية هو تحديداً "ذلك الجزء من النظام الذي يراه المستخدم ويتفاعل معه مباشرة".

2. مم تتكون صفحة الويب

أبسط صفحة ويب تتكون عادة من ثلاثة أجزاء:

  • HTML: مسؤول عن الهيكل. ما يوجد في الصفحة.
  • CSS: مسؤول عن المظهر. كيف تبدو الصفحة.
  • JavaScript: مسؤول عن السلوك. ماذا يحدث في الصفحة.

يمكننا فهم ذلك بتشبيه بسيط:

  • HTML كالهيكل الحديدي والجدران للمنزل
  • CSS كالديكور والإضاءة والألوان والتخطيط الداخلي للمنزل
  • JavaScript كنظام الكهرباء، بوابات الدخول، الأزرار، وأنظمة التحكم الآلي في المنزل

هذه العناصر الثلاثة تشكل معاً صفحة الواجهة الأمامية.

3. ما هو المتصفح

المتصفح ليس مجرد "برنامج لتصفح صفحات الويب". إنه في جوهره بيئة تشغيل معقدة، يتحمل على الأقل هذه المسؤوليات:

  • بدء طلبات الشبكة
  • تحليل (تفسير) HTML / CSS / JavaScript
  • بناء شجرة DOM وشجرة CSSOM
  • توليد شجرة العرض وإكمال التخطيط والرسم
  • تنفيذ كود JavaScript
  • صيانة آليات مثل حلقة الأحداث، المؤقتات، واستدعاءات الشبكة الراجعة
  • توفير عدد كبير من واجهات برمجة تطبيقات الويب (Web APIs)، مثلlocalStorage،fetch،history،canvas

المتصفحات الشائعة تشمل:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

4. ما هو نواة المتصفح

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

الأنوية الشائعة تشمل:

  • Blink: تستخدمه متصفحات عائلة Chromium السائدة مثل Chrome و Edge و Opera
  • WebKit: يستخدمه Safari
  • Gecko: يستخدمه Firefox
  • Trident: كانت تستخدمه الإصدارات القديمة من IE

تاريخياً، الكثير من "مشاكل التوافق" كان سببها الأساسي اختلاف درجة دعم أنوية المتصفحات المختلفة للمعايير.

5. لماذا توجد معايير الويب

بدون معايير موحدة، سيكتب كل متصفح تطبيقه الخاص. صفحة تكتبها قد تعمل بشكل طبيعي في Chrome، وتظهر مشوهة في Firefox، وتواجه مشاكل أخرى في Safari.

لهذا السبب توجد منظمات معايير مثل W3C و WHATWG، التي تدفع بتطوير معايير HTML و CSS و DOM و URL و Fetch وغيرها.

أهمية معايير الويب عملية جداً:

  • تقليل تكلفة التوافق
  • جعل صفحات الويب أسهل في الصيانة
  • إتاحة الوصول للأجهزة المختلفة
  • جعل الصفحات أكثر قابلية للفهم من قبل محركات البحث
  • إيجاد قواعد مشتركة للتعاون الهندسي

في وقتنا الحالي، الوعي بالمعايير مهم جداً في كتابة كود الواجهات الأمامية. لأن الكثير من المشاكل لا تتعلق بـ "هل هذا يعمل؟"، بل بـ "هل هذا صحيح، مستقر، وقابل للصيانة؟".

ثانياً: بيئة تطوير الواجهات الأمامية والأدوات الأساسية

1. ماذا تحتاج كحد أدنى

لبدء تعلم الواجهات الأمامية، أول مجموعة أدوات أساسية هي عادةً:

  • جهاز كمبيوتر
  • متصفح (يُفضل Chrome)
  • محرر أكواد (يُفضل VS Code)
  • خادم ثابت محلي أو أداة تطوير

إذا كنت تتعلم HTML و CSS فقط، فقد يكفيك متصفح ومحرر. لكن بمجرد أن يشمل الأمر نمطية JavaScript و npm وأدوات البناء وتطوير أطر العمل، ستحتاج لبيئة Node.js.

2. لماذا المحرر مهم

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

المزايا الشائعة لـ VS Code:

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

أفكار الإضافات الشائعة تشمل:

  • تنسيق الكود
  • تلوين بناء الجملة
  • اقتراح المسارات
  • ESLint / Stylelint
  • تنبيهات تغييرات Git
  • التحديث التلقائي للمتصفح

3. تعلم أدوات مطور المتصفح مبكراً

كثير من المبتدئين يكتبون الصفحة ويكتفون بـ "تعديل الكود -> تحديث الصفحة -> رؤية النتيجة". هذا بطيء جداً وغير فعال.

أدوات مطور المتصفح (DevTools) هي أداة يجب على كل مطور واجهات أمامية إتقانها. على الأقل يجب الإلمام بـ:

  • Elements: لفحص وتصحيح DOM / CSS
  • Console: لتشغيل JS، رؤية الأخطاء، وطباعة السجلات
  • Network: لعرض الطلبات، أكواد الحالة، زمن الاستجابة، وحالة التخزين المؤقت
  • Sources: لتصحيح أخطاء JavaScript بنقاط التوقف
  • Application: لعرض الكوكيز، التخزين، والذاكرة المؤقتة
  • Performance: لتحليل اختناقات الأداء

لتتقدم في مجال تطوير الواجهات الأمامية، القدرة على تصحيح الأخطاء مهمة جداً.

ثالثاً: HTML: أساس هيكل الصفحة

1. ما هي HTML

HTML اختصار لـ HyperText Markup Language، أي لغة ترميز النص التشعبي. هي ليست لغة برمجة، بل لغة ترميز تستخدم لوصف هيكل المستندات.

مصطلح "النص التشعبي" يحمل معنيين:

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

المهمة الأساسية لـ HTML هي وصف "ماذا يوجد" في الصفحة.

2. الهيكل الأساسي لصفحة HTML

صفحة HTML حديثة تبدو عادةً هكذا:

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>一只喵博客</title>
  </head>
  <body>
    页面内容
  </body>
</html>

هنا بضع نقاط أساسية:

  • <!doctype html>: يخبر المتصفح أن يحلل الصفحة بوضع معايير HTML5
  • <html>: العنصر الجذري
  • <head>: يحتوي على المعلومات الوصفية، لا يعرض محتوى مباشراً
  • <body>: جسم الصفحة، معظم المحتوى الذي يراه المستخدم موجود هنا
  • <meta charset="UTF-8">: يحدد ترميز المحارف لتجنب ظهور رموز مشوهة
  • <meta name="viewport">: الإعداد الأساسي لتوافق أجهزة الجوال

3. وسوم وعناصر HTML

صفحة HTML تتكون من وسوم متنوعة، وتنقسم الوسوم إلى:

  • وسوم مزدوجة: لها بداية ونهاية، مثل<p></p>
  • وسوم مفردة: تغلق ذاتياً، مثل<img>، ،<input>

الوسم مضافاً إليه المحتوى والخصائص يكون عنصراً.

مثلاً:

<a href="/about" target="_blank">关于一只喵博客</a>

هنا:

  • aهو اسم الوسم
  • href،targetهي خصائص
  • عن الشركةهو المحتوى
  • المجموع الكلي هو عنصر رابط تشعبي

4. دلالات HTML

كثير من المبتدئين يحبون ملء الشاشة بوسمdiv. الصفحة قد تعمل، لكن هذا لا يُسمى كتابة جيدة.

المقصود بالدلالات هواستخدام الوسم الصحيح للتعبير عن بنية المحتوى الصحيحة.

مثلاً:

  • للعناوين نستخدمh1~h6
  • للفقرات نستخدمp
  • للقوائم الملاحية نستخدمnav
  • لجسم المقال نستخدمarticle
  • للمحتوى الرئيسي للصفحة نستخدمmain
  • لرأس وتذييل الصفحة نستخدمheader،footer
  • للقوائم نستخدمul/ol
  • للأزرار نفضل استخدامbutton

فوائد الالتزام بالدلالات كثيرة:

  • هيكل أوضح
  • أسهل في الصيانة
  • أفضل لتحسين محركات البحث (SEO)
  • أفضل لدعم سهولة الوصول (Accessibility)
  • أكثر ملاءمة للتعاون الجماعي لاحقاً

عند كتابة الهيكل في الواجهات الأمامية، هناك مبدأ بسيط جداً وهو:فكر أولاً في المعنى الذي يعبر عنه الوسم، ثم اكتب التنسيق.

5. تنظيم الوسوم الشائعة

العناوين والفقرات

<h1>主标题</h1>
<p>这是一个段落。</p>

h1يُستخدم عادةً للعنوان الرئيسي الأهم في الصفحة. ليس بالضرورة إجبارياً أن تحتوي الصفحة علىh1واحد فقط، لكن من منظور تنظيم المحتوى، يجب استخدامه بتعقل.

الروابط والصور

<a href="https://example.com">访问一只喵博客</a>
<img src="avatar.jpg" alt="易喵的头像"/>

الخاصيةaltللصور مهمة جداً، فهي النص البديل عند فشل تحميل الصورة، ومرتبطة بسهولة الوصول (Accessibility) وتحسين محركات البحث (SEO).

القوائم

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

القوائم الملاحية، القوائم، قوائم الأخبار، وقوائم التعليقات، كلها مناسبة جداً لاستخدام وسوم القوائم للتعبير عنها.

وسوم الحاويات

<div></div>
<span></span>

هذه الوسوم ليس لها دلالة بحد ذاتها، هي مجرد حاويات عامة.divيُستخدم غالباً للتخطيط على مستوى الكتلة،spanيُستخدم غالباً لتغليف النصوص داخل السطر.

الجداول

الجداول مناسبة لعرض البيانات، وليست مناسبة لتخطيط الصفحات.

<table>
  <caption>一只喵博客前端学习名单</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>分数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

النماذج

النماذج هي مدخل مهم لتفاعل المستخدم مع الصفحة.

<form action="/login" method="post">
  <label for="username">用户名</label>
  <input id="username" name="username" type="text" placeholder="请输入一只喵博客账号"/>

  <label for="password">密码</label>
  <input id="password" name="password" type="password"/>

  <button type="submit">登录</button>
</form>

في التطوير الفعلي، موضوع النماذج كبير وسيتم التوسع فيه لاحقاً.

6. مسارات HTML والإشارة إلى الموارد

لمسارات الموارد طريقتان شائعتان في الكتابة:

  • المسار النسبي
  • المسار المطلق

مثلاً:

<img src="./images/logo.png" alt="logo"/>
<img src="../assets/banner.jpg" alt="banner"/>

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

7. التعليقات، كيانات المحارف، والمعايير الأساسية

تعليقات HTML:

<!-- 这是注释 -->

كيانات المحارف الشائعة:

  • &lt;تمثل<
  • &gt;تمثل>
  • &nbsp;تمثل مسافة
  • &amp;تمثل&

المعايير الأساسية تشمل:

  • كتابة أسماء الوسوم والخصائص بحروف صغيرة قدر الإمكان
  • استخدام مسافات بادئة بشكل معقول
  • وضع قيم الخصائص بين علامتي اقتباس
  • الحفاظ على هيكل واضح
  • عدم الإفراط في استخدام الوسوم غير الدلالية

رابعاً: CSS: لماذا تصبح الصفحة جميلة

1. ما هي CSS

CSS اختصار لـ Cascading Style Sheets، أو صفحات الأنماط المتتالية. هي تتحكم في المظهر التنسيقي للصفحة، مثل:

  • الخطوط
  • الألوان
  • المسافات
  • الحدود
  • التخطيط
  • الرسوم المتحركة
  • التكيف المتجاوب

إذا كانت HTML مسؤولة عن "ماذا يوجد في الصفحة"، فإن CSS مسؤولة عن "كيف تبدو الصفحة".

2. طرق إدراج CSS الثلاث

نمط داخل السطر (Inline style)

<p style="color: red;">你好，一只喵博客</p>

نمط داخلي (Internal style)

<style>
  p {
    color: red;
  }
</style>

نمط خارجي (External style)

<link rel="stylesheet" href="style.css"/>

في التطوير الفعلي، يُوصى غالباً باستخدام النمط الخارجي لسهولة إعادة الاستخدام والصيانة.

3. المُحددات (Selectors)

جوهر CSS هو "تحديد العنصر وإعطاؤه تنسيقاً".

المُحددات الشائعة تشمل:

/* 一只喵博客：标签选择器 */
p {}

/* 类选择器 */
.card {}

/* ID 选择器 */
#app {}

/* 后代选择器 */
.nav a {}

/* 子选择器 */
.list > li {}

/* 伪类 */
a:hover {}

/* 属性选择器 */
input[type="text"] {}

كتابة CSS لا تعني أنه كلما كان المُحدد أكثر تعقيداً كان أفضل، بل كلما كان أوضح وأكثر قابلية للصيانة كان أفضل.

4. الأولوية (Specificity)

عندما تؤثر أنماط مختلفة على نفس العنصر، يحتاج المتصفح لتحديد القاعدة التي سيستخدمها في النهاية. هذا يتعلق بالأولوية.

الترتيب التقريبي:

  • !important
  • نمط داخل السطر
  • محدد ID
  • محددات الفئة / الخصائص / الفئات الزائفة
  • محددات الوسم / العناصر الزائفة
  • محدد النجمة / الوراثة / النمط الافتراضي

لكن في التطوير الفعلي، لا يُنصح بحل المشاكل عبر تكديس الأولوية بشكل جنوني. الأفضل هو:

  • التحكم في تعقيد المُحددات
  • تسمية معيارية
  • الحفاظ على تنظيم هرمي للتنسيقات
  • تقليل استخدام!important

5. نموذج الصندوق (Box Model)

في CSS، يمكن فهم كل عنصر تقريباً على أنه صندوق. يتكون نموذج الصندوق من أربعة أجزاء:

  • content: منطقة المحتوى
  • padding: الهامش الداخلي
  • border: الإطار
  • margin: الهامش الخارجي

في نموذج الصندوق القياسي،widthتحسب عرض منطقة المحتوى فقط.

.box {
  width: 200px;
  padding: 20px;
  border: 10px solid #333;
  margin: 16px;
  /* 示例盒子 */
}

إذا كان نموذج الصندوق قياسياً، العرض الكلي = 200 + 202 + 102 + 16*2.

بينما الخاصيةbox-sizing: border-box;تجعلwidthتشمل padding و border، وهذا شائع جداً في التطوير الحديث.

* {
  box-sizing: border-box;
}

6. الخاصية display وأنواع العناصر

أنواع العرض الشائعة:

  • block: عنصر على مستوى الكتلة، يحتل سطراً كاملاً
  • inline: عنصر سطري، لا يمكن ضبط عرضه وارتفاعه مباشرة
  • inline-block: يمكن عرضه في نفس السطر مع إمكانية ضبط العرض والارتفاع
  • none: لا يظهر، ويخرج من تدفق المستند
  • flex: حاوية تخطيط مرنة
  • grid: حاوية تخطيط شبكي

divافتراضياً على مستوى الكتلة،spanافتراضياً سطري.

7. الخاصية position للموضع

تحديد الموضع هو أحد أساسيات التخطيط في الواجهات الأمامية.

static

القيمة الافتراضية، يحدد الموضع حسب تدفق المستند العادي.

relative

موضع نسبي، إزاحة نسبة لموقعه الأصلي، مع بقاء مكانه الأصلي محفوظاً.

absolute

موضع مطلق، يتموضع بالنسبة لأقرب عنصر سلف تم تحديد موضعه؛ إذا لم يوجد، يتموضع نسبة لنافذة العرض أو الكتلة الحاوية الأولية.

fixed

موضع ثابت، يتموضع نسبة لنافذة المتصفح ولا يتحرك عند التمرير.

sticky

موضع لاصق، يتصرف كعنصر عادي قبل الوصول لعتبة تمرير معينة، وبعدها يلتصق مثل fixed.

8. الطفو (Float) وإلغاء الطفو

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

طرق إلغاء الطفو الشائعة:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

رغم أن Flex و Grid قد حلا محل تخطيطات الطفو بشكل كبير، إلا أن فهم الطفو يظل مفيداً لقراءة المشاريع القديمة وفهم تدفق المستند.

9. ما هو BFC

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

طرق التفعيل الشائعة:

  • العنصر الجذري
  • floatبقيمة غيرnone
  • position: absolute/fixed
  • overflowبقيمة غيرvisible
  • display: inline-block/table-cell/flex/grid

استخدامات BFC الشائعة:

  • إلغاء الطفو
  • منع تداخل هوامش margin
  • تجنب التفاف النص حول العناصر العائمة

10. تخطيط Flex

Flex هي طريقة تخطيط يجب على كل مطور واجهات أمامية حديث إتقانها.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 居中布局示例 */
}

خصائص الحاوية الشائعة:

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-content

خصائص العناصر الفرعية الشائعة:

  • flex
  • order
  • align-self

Flex مناسب جداً لـ:

  • التوسيط الأفقي/العمودي
  • تخطيطات الترتيب أحادية البعد
  • القوائم الملاحية، مجموعات الأزرار، صفوف البطاقات
  • الهياكل اليمنى-اليسرى

11. تخطيط Grid

إذا كان Flex بارعاً أكثر في التخطيطات أحادية البعد، فـ Grid أكثر ملاءمة للتخطيطات ثنائية البعد.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

تخطيط Grid مفيد جداً في أنظمة الإدارة الخلفية، التخطيطات الشبكية المتتالية، وترتيب المناطق المعقدة.

12. التخطيط المتجاوب (Responsive Layout)

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

وسائل التخطيط المتجاوب الشائعة:

  • النسب المئوية
  • rem
  • vw/vh
  • استعلامات الوسائط@media
  • التخطيط التكيفي بـ Flex / Grid
  • التحجيم المرن للصور والحاويات

مثلاً:

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

13. إعادة التدفق (Reflow) وإعادة الرسم (Repaint)

هذان مفهومان شائعان جداً في أداء الواجهات الأمامية.

إعادة التدفق (Reflow)

يحدث عندما تتغير الخصائص الهندسية لعنصر ما، مما يضطر المتصفح لإعادة حساب التخطيط.

مثلاً:

  • تغيير العرض والارتفاع
  • تغيير الموضع
  • إضافة أو حذف عناصر DOM
  • تغيير حجم الخط
  • تغيير حجم النافذة

إعادة الرسم (Repaint)

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

مثلاً:

  • تغيير اللون
  • تغيير الخلفية
  • تغيير الظهور

الخلاصة هي:

  • إعادة التدفق يسبب دائماً إعادة رسم
  • إعادة الرسم لا تسبب بالضرورة إعادة تدفق
  • تكلفة إعادة التدفق أعلى عادةً

اتجاهات التحسين تشمل:

  • تجميع تعديلات الأنماط
  • تقليل القراءة والكتابة المتكررة لخصائص التخطيط
  • استخدامtransform/opacityللرسوم المتحركة
  • الاستخدام المعتدل لطبقات التركيب (Composite Layers) وتسريع GPU

14. الرسوم المتحركة والانتقالات في CSS

الطريقتان الشائعتان هما:

transition

مناسب لرسوم تغيير الحالة البسيطة.

.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: translateY(-2px);
}

animation + keyframes

مناسب للرسوم المتحركة الأكثر تعقيداً واستمرارية.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

خامساً: JavaScript: جعل الصفحة "حية" حقاً

1. ما هي JavaScript

JavaScript هي لغة البرمجة الأساسية لتطوير واجهات الويب الأمامية. صُممت في الأصل لإضافة قدرات تفاعلية لصفحات الويب. وتطورت لاحقاً حتى يومنا هذا، وأصبحت JavaScript ليست فقط لغة برمجة للمتصفح، بل أيضاً أساساً هاماً لـ Node.js في جانب الخادم، أدوات هندسة البرمجيات، تطبيقات سطح المكتب، وحلول المنصات المتعددة للجوال.

في الواجهات الأمامية، JavaScript مسؤولة عن:

  • التعامل مع DOM
  • الاستجابة للأحداث
  • إرسال طلبات الشبكة
  • معالجة البيانات
  • التحكم في حالة الصفحة
  • تشغيل المكونات وأطر العمل

2. أنواع البيانات الأساسية والأنواع المرجعية

أنواع JavaScript الأساسية الشائعة تشمل:

  • number
  • string
  • boolean
  • undefined
  • null
  • symbol
  • bigint

引用类型主要是对象：

  • Object
  • Array
  • Function
  • Date
  • RegExp
  • 其他基于对象构建的结构

理解“值类型”和“引用类型”的区别，对变量赋值、参数传递、拷贝、比较都很重要。

3. 数据类型检测

常见方式有三种。

typeof

typeof 1; // 'number'
typeof 'abc'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof function(){}; // 'function'
typeof null; // 'object'

优点是简单，缺点是对 null、数组、对象区分不够细。

instanceof

[] instanceof Array; // true
{} instanceof Object; // true

适合判断引用类型实例，但不能很好判断字面量基础类型。

Object.prototype.toString.call

Object.prototype.toString.call([]); // [object Array]
Object.prototype.toString.call(null); // [object Null]

这是更稳妥的细粒度判断方式。

4. 变量声明：var、let、const

var

  • 函数作用域
  • 存在变量提升
  • 可以重复声明
  • 全局 var 会挂到 window

let

  • 块级作用域
  • 存在暂时性死区
  • 不能重复声明
  • 更适合声明会变化的变量

const

  • 块级作用域
  • 声明时必须初始化
  • 不能重新赋值
  • 更适合常量绑定

现代开发里，一般推荐：

  • 默认优先 const
  • 需要重新赋值时再用 let
  • 尽量避免使用 var

5. 作用域与作用域链

作用域决定了变量和函数的可访问范围。

常见作用域：

  • 全局作用域
  • 函数作用域
  • 块级作用域

当在当前作用域找不到变量时，JavaScript 会沿着词法作用域向上查找，直到全局。这条查找路径就是作用域链。

这个机制是理解闭包、this、模块化、执行上下文的基础。

6. 闭包

闭包不是一个孤立知识点，而是 JavaScript 词法作用域在实际运行中的自然结果。

简单理解：函数可以记住并访问其定义时所在作用域中的变量，即使外层函数已经执行结束。

function outer() {
  let articleCount = 0;
  return function inner() {
    articleCount++;
    return articleCount;
  };
}

const nextArticle = outer();
nextArticle(); // 1
nextArticle(); // 2

闭包的价值：

  • 保存状态
  • 实现私有变量
  • 延长局部变量生命周期
  • 某些模块封装模式的基础

闭包的风险：

  • 使用不当容易造成内存占用增加
  • 逻辑层级变复杂时，可读性下降

7. this 指向

this 是 JavaScript 里最容易让人困惑的点之一。它不是定义时绑定，而是调用时决定，箭头函数例外。

常见情况：

  1. 普通函数调用：非严格模式下指向 window，严格模式下是 undefined
  2. 对象方法调用：指向调用它的对象
  3. 构造函数调用：指向新创建的实例
  4. call/apply/bind 显式绑定：指向指定对象
  5. 箭头函数：没有自己的 this，继承外层词法环境的 this

理解 this 不要背口诀，关键是看函数怎么被调用。

8. 原型与原型链

JavaScript 不是传统基于类的继承，而是基于原型。

每个函数对象都有 prototype，每个对象都有内部原型链接到其构造函数的原型对象。属性查找时，如果对象本身没有，就会沿着原型链向上找。

这就是原型链。

理解原型链，有助于理解：

  • 实例为什么能访问构造函数原型上的方法
  • instanceof 的判断逻辑
  • 类与继承在 JS 中的底层本质

9. new 做了什么

new 关键字大致做了这些事：

  1. 创建一个新对象
  2. 把新对象的原型指向构造函数的 prototype
  3. 用新对象作为 this 执行构造函数
  4. 如果构造函数显式返回对象，则返回该对象；否则返回新对象

所以 new 并不是“语法装饰”，而是对象实例化机制的一部分。

10. 数组、对象与常见方法

前端开发里，数据处理几乎离不开数组和对象。

数组常用方法：

  • push / pop
  • shift / unshift
  • map
  • filter
  • reduce
  • find
  • some / every
  • forEach
  • sort
  • slice / splice

对象常见操作：

  • 属性读取与修改
  • Object.keys
  • Object.values
  • Object.entries
  • Object.assign
  • 展开运算符 ...
  • 深拷贝与浅拷贝问题

这些内容虽然基础，但几乎天天都在用。

11. DOM 与 BOM

JavaScript 在浏览器中，不只是语言本身，还可以通过浏览器提供的 API 去操作页面和环境。

DOM

文档对象模型，用来表示 HTML 文档结构。

常见操作：

  • 查找元素
  • 修改文本和属性
  • 修改样式
  • 新增/删除节点
  • 事件监听

BOM

浏览器对象模型，表示浏览器窗口环境。

常见对象：

  • window
  • location
  • history
  • navigator
  • screen
  • localStorage

12. 事件机制

前端交互大量依赖事件，比如点击、输入、滚动、提交、键盘操作。

事件流一般包括三个阶段：

  • 捕获阶段
  • 目标阶段
  • 冒泡阶段

常见方法：

element.addEventListener('click', handler);

事件对象里常见属性和方法：

  • target
  • currentTarget
  • preventDefault()
  • stopPropagation()

理解事件传播，对委托、组件交互和性能优化都有帮助。

13. 节流与防抖

这两个经常出现在高频事件优化中。

防抖

触发结束后一段时间只执行最后一次。

适合：

  • 搜索输入
  • 表单校验
  • resize 后处理

节流

规定时间内只执行一次。

适合：

  • 滚动监听
  • 鼠标移动
  • 高频点击控制

它们本质上都是在控制函数调用频率，区别在于触发策略不同。

六、异步、Promise、事件循环：前端最容易卡住的一关

1. 为什么会有异步

JavaScript 在浏览器主线程里执行。如果所有任务都同步阻塞执行，页面很容易卡死。

比如：

  • 网络请求需要等待服务器响应
  • 定时器要在未来某个时间触发
  • 用户点击、输入是不可预测的
  • 文件读取、动画帧回调也不可能同步阻塞主线程一直等

所以 JavaScript 运行时需要一套机制来协调同步代码和异步任务，这就是事件循环的意义。

2. 同步与异步

同步

代码按顺序一行一行执行，前面的没结束，后面的不能开始。

异步

发起任务后不阻塞当前执行流程，等条件满足后，再把回调放到待执行队列。

3. 宏任务与微任务

这是理解事件循环的关键。

常见宏任务：

  • setTimeout
  • setInterval
  • script
  • I/O 回调
  • UI 事件

常见微任务：

  • Promise.then/catch/finally
  • queueMicrotask
  • MutationObserver

执行顺序可以概括为：

  1. 执行当前同步代码
  2. 清空当前微任务队列
  3. 取一个宏任务执行
  4. 再清空微任务队列
  5. 持续循环

所以通常 Promise.then 会比 setTimeout 更早执行。

4. Promise

Promise 是 JavaScript 处理异步的标准方案之一。它用来表示一个异步操作未来的结果。

Promise 有三种状态：

  • pending
  • fulfilled
  • rejected

一旦状态从 pending 变为成功或失败，就不会再改变。

常见方法：

  • then
  • catch
  • finally
  • Promise.all
  • Promise.race
  • Promise.allSettled
  • Promise.any

Promise 的出现，解决了大量回调嵌套问题，让异步流程可以链式组织。

5. async / await

async/await 是建立在 Promise 之上的语法糖。它不是让异步变成同步，而是让异步代码看起来更像同步流程。

async function getData() {
  const blogUser = await fetchUser();
  const articles = await fetchPosts(blogUser.id);
  return { blogUser, articles };
}

它让代码更可读，也更适合写串行异步逻辑。

需要注意：

  • await 后面通常跟 Promise
  • async 函数返回 Promise
  • await 会暂停当前 async 函数后续执行，但不会阻塞整个线程
  • 错误处理要搭配 try/catch

6. 定时器、Promise、async/await 的差异

  • setTimeout 是浏览器提供的宏任务调度
  • Promise.then 是微任务
  • async/await 的底层仍然基于 Promise

理解这三者之间的执行顺序，几乎是前端面试高频题。

七、HTTP、HTTPS 与网络基础：页面为什么能请求到数据

1. HTTP 是什么

HTTP 是超文本传输协议，用来在客户端和服务器之间传输资源。

它最早主要用于传输网页，但现在也承担了接口数据、图片、音视频等资源传输工作。

HTTP 本身是无状态协议，也就是说服务器默认不会记住两次请求之间的业务上下文，需要借助 Cookie、Session、Token 等机制辅助状态管理。

2. HTTPS 是什么

HTTPS 可以理解为“HTTP + TLS/SSL 加密层”。

它在 HTTP 的基础上，增加了：

  • 数据加密
  • 身份认证
  • 完整性校验

HTTPS 的意义不只是“更安全”，而是现代 Web 基础设施的默认要求。没有 HTTPS，很多现代浏览器能力都受限，比如某些定位、摄像头、Service Worker 等能力会被限制使用。

3. HTTP 和 HTTPS 的区别

核心差异：

  • HTTP 明文传输；HTTPS 加密传输
  • HTTP 默认端口 80；HTTPS 默认端口 443
  • HTTPS 需要证书
  • HTTPS 握手成本更高，但现代网络环境下这个额外开销大多是值得的

4. HTTPS 大致过程

简化理解：

  1. 客户端发起 HTTPS 请求
  2. 服务器返回数字证书
  3. 客户端验证证书合法性
  4. 双方协商加密算法与会话密钥
  5. 后续使用会话密钥进行加密通信

现代 TLS 远比这个过程复杂，但入门阶段掌握这条主线就够了。

5. URL、请求与响应

一个 URL 通常包含：

  • 协议：https://
  • 域名：yizhimiao.blog
  • 端口：:443
  • 路径：/api/user
  • 查询参数：?id=1
  • 哈希：#section1

浏览器发请求时，会带上请求行、请求头、请求体；服务器响应时，会返回状态行、响应头、响应体。

6. 常见 HTTP 方法

  • GET：获取资源
  • POST：提交数据
  • PUT：整体更新
  • PATCH：部分更新
  • DELETE：删除资源
  • OPTIONS：查看服务器支持的方法，CORS 预检常见

7. 常见状态码

2xx 成功

  • 200 OK
  • 201 Created
  • 204 No Content

3xx 重定向

  • 301 Moved Permanently
  • 302 Found
  • 304 Not Modified

4xx 客户端错误

  • 400 Bad Request
  • 401 Unauthorized
  • 403 Forbidden
  • 404 Not Found

5xx 服务端错误

  • 500 Internal Server Error
  • 502 Bad Gateway
  • 503 Service Unavailable

状态码不是死记硬背，而是排查请求问题时的重要线索。

8. 缓存：为什么有时请求没有真正发出去

浏览器缓存分成两大类：

强缓存

浏览器直接使用本地缓存，不发请求。

由这些字段控制：

  • Cache-Control
  • Expires

协商缓存

浏览器会带缓存标识去问服务器：“我这个资源还能继续用吗？”

由这些字段控制：

  • ETag / If-None-Match
  • Last-Modified / If-Modified-Since

如果资源没变，服务器返回 304，浏览器继续用缓存。

缓存机制是前端性能优化的重要基石。

这几个经常一起被问到。

  • 会自动带到请求头里
  • 容量小
  • 可设置过期时间
  • 常用于登录态、服务端识别

localStorage

  • 存在浏览器本地
  • 长期保存，除非主动清理
  • 不会自动带给服务器
  • 适合持久化存储一些前端数据

sessionStorage

  • 只在当前会话窗口有效
  • 窗口关闭就清空
  • 不会自动带给服务器

它们的差别，本质在于：存储位置、生命周期、是否自动参与请求。

10. 跨域是什么

浏览器有同源策略限制。所谓同源，指：

  • 协议相同
  • 域名相同
  • 端口相同

任意一个不同，都可能构成跨域。

跨域不是“请求发不出去”，而是浏览器限制前端脚本读取响应结果。

11. 跨域常见解决方案

CORS

最主流方案，由服务器通过响应头告诉浏览器允许哪些跨域请求。

代理

开发环境里常见前端代理，例如 Vite / Webpack Dev Server / Nginx 转发。

JSONP

老方案，只支持 GET，现代项目已经很少作为首选。

postMessage

适合窗口间通信、iframe 通信。

八、TCP、UDP 与从输入 URL 到页面展示

1. TCP 和 UDP

TCP

  • 面向连接
  • 可靠传输
  • 有顺序保证
  • 有确认与重传机制

UDP

  • 无连接
  • 速度快
  • 不保证可靠性
  • 不保证顺序

前端常见 Web 请求主要基于 TCP 之上的 HTTP/HTTPS。

2. TCP 三次握手

建立连接大致过程：

  1. 客户端发送 SYN
  2. 服务端返回 SYN + ACK
  3. 客户端再回 ACK

目的，是让双方都确认彼此的发送和接收能力正常。

3. TCP 四次挥手

释放连接时，双方需要分别确认发送结束，因此通常会经历四次挥手。

这个过程不是前端日常编码会直接操作的内容，但理解它有助于理解网络连接建立和关闭的底层过程。

4. TCP 如何保证可靠传输

主要靠这些机制：

  • 分段与编号
  • ACK 确认应答
  • 超时重传
  • 校验和
  • 滑动窗口
  • 流量控制
  • 拥塞控制

5. 从输入 URL 到页面加载完成

这是最经典也最适合串联前端知识体系的问题之一。

一个简化流程可以这样理解：

  1. 在浏览器地址栏输入 URL
  2. 浏览器检查缓存
  3. 进行 DNS 解析，得到 IP 地址
  4. 与服务器建立 TCP 连接
  5. 如果是 HTTPS，还会进行 TLS 握手
  6. 浏览器发送 HTTP 请求
  7. 服务器返回响应内容
  8. 浏览器解析 HTML
  9. 遇到 CSS 下载并解析成 CSSOM
  10. 遇到 JS 下载并执行（可能阻塞解析）
  11. 构建 DOM 树
  12. 合并 DOM 和 CSSOM，生成渲染树
  13. Layout 布局
  14. Paint 绘制
  15. 页面可交互后继续处理异步资源、事件绑定、接口数据渲染

这道题真正重要的不是背顺序，而是你能否把网络、缓存、浏览器渲染、脚本执行串起来。

九、浏览器渲染原理：页面为什么最后能显示出来

1. DOM 树与 CSSOM 树

浏览器拿到 HTML 后，不是直接“照着画”，而是先解析成 DOM 树。

CSS 文件解析后，会形成 CSSOM 树。

之后浏览器会把两者结合，生成渲染树。

2. 渲染树不等于 DOM 树

DOM 树描述的是文档结构，但并不是所有 DOM 节点都会出现在渲染树中。

比如：

  • display: none 的元素不会进入渲染树
  • head 元素内容通常不参与渲染

3. Layout 与 Paint

Layout

计算每个可见元素的几何位置和尺寸。

Paint

把元素的像素画到屏幕上。

现代浏览器还会进一步做分层、合成等优化。

4. JS 为什么会阻塞页面解析

浏览器解析 HTML 时，如果遇到普通 <script>，默认会暂停 HTML 解析，先下载并执行脚本，再继续后面的文档解析。

原因很简单：因为 JS 可能会修改当前 DOM 结构，浏览器必须保证执行顺序的正确性。

所以脚本加载策略很重要。

defer

  • 异步下载
  • HTML 解析完成后按顺序执行
  • 适合大多数外部脚本

async

  • 异步下载
  • 下载完成立即执行
  • 不保证与 HTML 解析顺序一致
  • 适合独立脚本，比如统计代码

5. 为什么首屏性能重要

用户不关心你用了什么框架、什么状态管理，他们只关心一件事：页面是不是快。

首屏性能受到很多因素影响：

  • HTML 返回速度
  • CSS 是否阻塞渲染
  • JS 是否过大
  • 图片是否过重
  • 字体资源是否阻塞
  • 是否合理使用缓存
  • 是否做了懒加载和资源拆分

前端优化，最终都是为了用户更快看到内容、更快完成交互。

十、表单、校验与用户输入处理

1. 表单为什么重要

真正的网站不是只展示内容，它要让用户登录、搜索、留言、下单、上传、筛选、提交。

这些交互，本质上都离不开表单。

2. 常见表单元素

  • input
  • textarea
  • select
  • option
  • button
  • label
  • form

3. input 的常见类型

  • text
  • password
  • email
  • number
  • radio
  • checkbox
  • file
  • submit
  • reset
  • date

HTML5 给表单带来了大量更语义化的输入类型，这也有利于浏览器原生校验和移动端键盘优化。

4. label 为什么很重要

label 不只是“写个文字说明”。它可以提升可点击区域，增强可访问性。

<label for="username">用户名</label>
<input id="username" type="text"/>

5. 表单提交方式

表单常见提交方法：

  • GET
  • POST

GET 一般用于获取数据，参数常显示在 URL 中。

POST 更适合提交数据。

现代前端更多时候会通过 JavaScript 拦截表单默认提交，然后用 fetch 或 axios 发异步请求。

6. 前端校验与后端校验

前端校验的意义：

  • 提升体验
  • 减少无效请求
  • 给用户更即时反馈

但前端校验不能代替后端校验。

因为前端逻辑完全可能被绕过，真正的安全边界在服务端。

十一、前端性能优化

1. 性能优化应该优化什么

前端性能一般关注：

  • 页面加载快不快
  • 首屏展示快不快
  • 交互有没有卡顿
  • 动画顺不顺滑
  • 资源是不是太大
  • 请求是不是太多
  • 重复渲染是不是太频繁

2. 常见优化方向

网络层

  • 开启压缩（gzip / brotli）
  • 使用 CDN
  • 合理缓存
  • 减少请求数
  • 使用 HTTP/2

资源层

  • 图片压缩
  • 图片懒加载
  • 代码分包
  • Tree Shaking
  • 按需加载
  • 去掉无用代码

渲染层

  • 减少重排重绘
  • 优化长列表渲染
  • 使用虚拟列表
  • 避免大面积同步 DOM 操作
  • 控制动画性能

代码层

  • 节流防抖
  • 减少重复计算
  • 合理缓存结果
  • 控制副作用
  • 避免无意义重新渲染

3. 首屏优化常见手段

  • SSR / SSG
  • 骨架屏
  • 关键 CSS 内联
  • 图片懒加载
  • 延迟加载非核心脚本
  • 路由级代码拆分
  • 预加载关键资源

4. 性能分析工具

不能靠感觉优化，要会看数据。

常用工具：

  • Chrome Performance
  • Lighthouse
  • Network 面板
  • Web Vitals
  • 框架 Devtools

优化不是“我觉得这样更快”，而是“我能证明它更快”。

十二、浏览器存储、缓存与离线能力

1. 本地存储怎么选

如果只是简单存少量字符串配置：

  • localStorage
  • sessionStorage

如果要做更复杂的前端数据库能力：

  • IndexedDB

2. Service Worker 是什么

Service Worker 可以理解为浏览器和网络之间的一层可编程代理。

它可以做：

  • 离线缓存
  • 请求拦截
  • 资源缓存策略
  • 消息推送等能力配合

PWA（渐进式 Web 应用）很多能力都依赖它。

虽然入门阶段不一定要立刻深入，但知道它解决什么问题很有必要。

十三、Git 与项目协作：会写代码，不代表会做项目

1. 为什么前端一定要会 Git

现代前端开发几乎不可能脱离团队协作。Git 是版本管理事实标准。

它不只是“保存代码”，更重要的是：

  • 记录变更历史
  • 支持多人协作
  • 支持分支开发
  • 支持代码回滚
  • 支持合并和发布流程管理

2. 常用 Git 命令

  • git init
  • git clone
  • git add
  • git commit
  • git status
  • git log
  • git branch
  • git checkout
  • git switch
  • git merge
  • git pull
  • git push

3. 常见分支模型

常见实践里，可能会有：

  • main/master：稳定生产分支
  • develop：日常开发集成分支
  • feature/*：功能分支
  • release/*：发布分支
  • hotfix/*：紧急修复分支

代码写得再好，如果不会协作流程，进团队后也很难真正发挥全部实力。

十四、模块化与工程化

1. 为什么需要模块化

项目小的时候，一个 HTML 引多个 JS 文件也能跑。但项目一大，就会遇到：

  • 变量污染
  • 依赖混乱
  • 代码重复
  • 难以维护

模块化就是把代码拆分成职责清晰、边界明确、可复用的单元。

2. 模块化的发展

前端历史上经历过：

  • 全局函数时代
  • IIFE 自执行函数隔离作用域
  • CommonJS
  • AMD / CMD
  • ES Module

今天主流标准是 ES Module。

import { sum } from './utils.js';
export function add() {}

3. 为什么需要构建工具

浏览器并不是天然就能高效处理大型模块化项目，所以前端工程化工具负责：

  • 模块打包
  • 代码转换
  • 兼容性处理
  • 资源优化
  • 开发服务器
  • 热更新
  • 产物压缩

4. Webpack 做了什么

Webpack 的核心思想是：从一个或多个入口出发，把项目里所有依赖打成浏览器可运行的资源包。

常见能力：

  • 识别 JS、CSS、图片、字体等依赖
  • Loader 转换不同类型资源
  • Plugin 扩展构建过程
  • 代码拆分
  • 压缩优化

5. 常见优化思路

  • include / exclude 缩小处理范围
  • 合理使用缓存
  • thread-loader 多线程处理重任务
  • TerserPlugin 压缩
  • Tree Shaking 去掉死代码
  • 按路由拆包
  • 合理做第三方依赖分离

6. Babel 是什么

Babel 本质上是一个 JavaScript 编译器。它主要做一件事：

把新语法转换成旧环境也能运行的代码。

它的大致流程：

  1. Parse：把代码解析成 AST
  2. Transform：基于插件修改 AST
  3. Generate：生成新代码

理解 Babel 的关键，不在于背阶段名，而在于知道：现代前端很多“语法糖”和“兼容性”并不是浏览器直接懂，而是构建阶段提前处理过。

7. Vite 为什么越来越流行

和传统打包思路不同，Vite 在开发环境里更多利用浏览器原生 ESM，按需启动、按需编译，冷启动速度很快。

这也是为什么现在很多新项目更偏向用 Vite 而不是传统 Webpack 脚手架。

十五、Node.js、npm 与前端生态基础

1. 前端为什么要学 Node.js

虽然前端主要跑在浏览器，但现代前端离不开 Node.js。

因为：

  • 构建工具运行在 Node.js 上
  • 包管理依赖 Node.js
  • 本地开发服务器依赖 Node.js
  • 很多脚本自动化任务依赖 Node.js

所以前端学 Node.js，不一定是为了写后端，而是为了理解和使用工程化生态。

2. npm 是什么

npm 是 JavaScript 世界最主流的包管理工具之一。

常见操作：

  • 安装依赖
  • 更新依赖
  • 管理项目脚本
  • 发布包

package.json 是前端项目的重要配置文件，里面通常包含：

  • 项目名称和版本
  • 依赖列表
  • 脚本命令
  • 构建配置入口

3. package.json 里常见内容

{
  "name": "yizhimiao-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

前端工程化，本质上是一堆工具通过 npm scripts 串起来形成工作流。

十六、Vue 入门：数据驱动视图的典型代表

1. 为什么前端会有框架

纯原生 JavaScript 当然能写页面，但一旦页面复杂起来，会遇到这些问题：

  • DOM 操作繁琐
  • 状态难管理
  • 组件复用困难
  • 交互逻辑越来越散
  • 维护成本迅速上升

所以前端框架的核心目标，是：

更高效地组织 UI 和状态。

2. Vue 的核心思想

Vue 是典型的 MVVM 思想实践。

你可以把它理解为：

  • 用数据描述界面
  • 当数据变化时，视图自动更新
  • 开发者尽量少直接操作 DOM

这就是“数据驱动视图”。

3. Vue 的常见能力

  • 模板语法
  • 条件渲染
  • 列表渲染
  • 事件绑定
  • 双向绑定
  • 计算属性
  • 侦听器
  • 组件化
  • 生命周期
  • 状态管理
  • 路由管理

4. 组件化是什么

组件就是一个可复用、可组合、职责相对独立的 UI 单元。

比如：

  • 按钮组件
  • 输入框组件
  • 弹窗组件
  • 列表组件
  • 页面级组件

组件化不是“把文件拆小”，而是让界面结构和逻辑边界更清晰。

5. 生命周期为什么重要

生命周期是组件从创建、挂载、更新到销毁的一系列阶段。

它的重要性在于：

  • 什么时候请求数据
  • 什么时候能访问 DOM
  • 什么时候要解绑事件、清除定时器

这和组件副作用管理密切相关。

6. computed 与 watch

computed

更适合基于已有状态推导一个值，有缓存。

watch

更适合监听某个状态变化，然后执行额外副作用逻辑。

很多时候，能用 computed 就优先用 computed，因为它更偏声明式。

7. nextTick 为什么常被问

Vue 更新 DOM 是异步批量更新的。nextTick 的作用，是让你在 DOM 更新完成后执行回调。

这解释了为什么修改数据后立刻拿 DOM，可能拿到的是旧值，而放在 nextTick 里能拿到更新后的结果。

8. keep-alive、mixin、Vuex

这些都是 Vue 生态里常见概念：

  • keep-alive：缓存组件状态
  • mixin：逻辑复用方案之一，但可能带来命名冲突和来源不清的问题
  • Vuex：集中式状态管理（Vue 3 项目中也常见 Pinia）

学习框架时，不只是会用 API，更要理解它解决的是什么问题。

十七、React 入门：函数式 UI 的另一条路线

1. React 的核心思想

React 也是组件化框架，但它更强调：

  • UI 是状态的映射
  • 一切皆组件
  • 单向数据流
  • 用声明式方式描述界面

React 不是“比 Vue 更高级”，它只是走了另一条设计路线。

2. JSX 是什么

JSX 让你可以在 JavaScript 里写类似 HTML 的语法。

它并不是真正的 HTML，而是会被编译成 React.createElement 或新的运行时调用形式。

3. 函数组件与类组件

React 早期类组件很多，Hooks 出现后，函数组件成为主流。

函数组件优势明显：

  • 更简洁
  • 更符合组合逻辑的思路
  • 状态与副作用组织更自然
  • 减少 this 相关心智负担

4. Hooks 的意义

Hooks 不是“给函数组件补功能”，而是 React 组织状态逻辑的重要方式。

常见 Hooks：

  • useState
  • useEffect
  • useMemo
  • useCallback
  • useRef
  • useContext
  • useReducer

5. useEffect 与副作用

函数组件本身应该尽量纯粹。那些和渲染无关、但必须发生的操作，例如：

  • 请求数据
  • 订阅事件
  • 操作 DOM
  • 启动定时器

都属于副作用，通常放在 useEffect 中处理。

6. key 为什么重要

React 在做列表 diff 时，需要 key 来稳定识别节点身份。

好的 key 应该：

  • 唯一
  • 稳定
  • 不随渲染变化

不要随手用数组下标，尤其是在列表可能增删、重排时，会带来错误复用问题。

7. setState 为什么看起来有时同步有时异步

这是 React 更新批处理机制带来的表象差异。你真正应该理解的是：

  • React 不承诺状态更新是立即同步生效
  • 状态更新通常会被批量处理
  • 读取状态要理解当前渲染闭包与调度时机

8. Fiber 是什么

Fiber 是 React 内部协调和调度更新的一套新架构。它解决的核心问题，是传统同步递归更新在大型页面里容易阻塞主线程。

Fiber 让渲染工作更可中断、可恢复、可调度，从而提升交互响应性。

你不一定需要马上深入源码，但要知道：它是 React 性能和并发能力演进的重要基础。

十八、前端路由、状态管理与 SPA 思维

1. SPA 是什么

SPA，单页应用。特点是：

  • 首次加载后，页面主体在前端接管
  • 页面切换更多是组件级切换，而不是整页刷新
  • 路由和状态在前端管理更多

常见框架项目几乎都属于 SPA 或混合模式。

2. 前端路由原理

前端路由常见两种模式：

  • Hash 路由：基于 location.hash
  • History 路由：基于 History API

前端路由做的事，本质上是：

监听 URL 变化，然后决定渲染哪个页面组件。

3. 状态管理为什么会出现

当应用变大，组件之间共享数据、跨层级传值、页面状态同步会越来越复杂。

于是才有：

  • Vuex / Pinia
  • Redux / Zustand / Jotai 等
  • Context

状态管理不是必须，但当数据流复杂到一定程度，它会极大降低维护成本。

十九、前端安全

1. XSS

跨站脚本攻击。攻击者把恶意脚本注入页面，在其他用户浏览时执行。

常见防御思路：

  • 对用户输入做转义
  • 避免随意拼接 HTML
  • 谨慎使用 innerHTML
  • 使用 CSP
  • 富文本做严格过滤

2. CSRF

跨站请求伪造。利用用户已有登录态，诱导发起非本人意愿请求。

常见防御思路：

  • CSRF Token
  • SameSite Cookie
  • 二次确认
  • 验证 Referer / Origin

3. 前端为什么也要懂安全

很多人觉得安全是后端的事，其实前端同样是攻击面的一部分。

你不需要一开始就成为安全专家，但至少要有这些意识：

  • 不要轻信用户输入
  • 不要随意执行外部拼接脚本
  • 登录态管理要有边界意识
  • 文件上传、富文本、跨域、第三方脚本都要谨慎

二十、移动端适配与多端体验

1. 移动端为什么不能照搬 PC

手机屏幕小、像素密度高、交互方式不同、网络环境更复杂，所以移动端页面不是把 PC 页面缩小就行。

2. 常见适配思路

  • 弹性布局
  • rem
  • vw
  • 媒体查询
  • 响应式断点
  • 图片适配
  • 触控交互优化

3. viewport 的作用

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

这是移动端页面基础配置之一，决定视口缩放行为。

4. 移动端常见注意点

  • 点击区域不能太小
  • 输入框与键盘交互要注意遮挡
  • 滚动区域要清晰
  • 图片和字体要兼顾清晰度与体积
  • 慢网环境下更要关注首屏体验

二十一、如何系统学习前端

很多初学者最大的问题不是不努力，而是路线混乱。

1. 一个相对合理的学习顺序

第一阶段：基础结构与样式

  • HTML
  • CSS
  • تخطيط الصفحة
  • نموذج الصندوق، التموضع، Flex، Grid
  • الدلالات، النماذج، التجاوب

المرحلة الثانية: أساسيات JavaScript

  • المتغيرات، الأنواع، النطاق
  • الدوال، الكائنات، المصفوفات
  • النموذج الأولي، this، الإغلاقات
  • DOM، الأحداث
  • البرمجة غير المتزامنة، Promise، حلقة الأحداث

المرحلة الثالثة: المتصفح والشبكة

  • HTTP/HTTPS
  • التخزين المؤقت
  • النطاقات المتقاطعة
  • من عنوان URL إلى عرض الصفحة
  • إعادة التدفق وإعادة الرسم
  • أدوات تصحيح المتصفح

المرحلة الرابعة: الهندسة البرمجية

  • Git
  • npm
  • أساسيات Node.js
  • النمطية
  • Babel
  • أدوات التجميع

المرحلة الخامسة: أطر العمل

  • اختر إما Vue أو React وتعمق فيه
  • المكونات
  • التوجيه
  • إدارة الحالة
  • هيكل المشروع والمعايير

المرحلة السادسة: القدرات المتقدمة

  • تحسين الأداء
  • أساسيات الأمان
  • SSR / SSG
  • الاختبار
  • TypeScript
  • أنماط التصميم وممارسات الهندسة

٢. المزالق التي يجب تجنبها في مرحلة البدء

حفظ أسئلة المقابلات فقط دون فهم السياق

مهما حفظت، إن لم تعرف الروابط بينها، ستضطرب عند تغيير طريقة السؤال.

متابعة الفيديوهات والكتابة معها فقط، دون القدرة على العمل بشكل مستقل

مشاريع الدروس هي مجرد بداية. النمو الحقيقي يحدث عندما تبني الهيكل بنفسك، وتبحث عن المعلومات، وتحدد المشكلات، وتكمل العملية باستقلالية.

الانغماس في أطر العمل منذ البداية وإهمال الأساسيات

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

اللهاث وراء الجديد

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

٣. ما هي أهم قدرة لتعلم الواجهة الأمامية

ليست "الذاكرة"، ولا "إجادة استدعاء المكتبات"، بل هذه الأمور:

  • تقسيم المشكلة
  • القدرة على تحديد الأخطاء
  • القدرة على البحث عن المعلومات والتحقق منها
  • فهم آلية عمل المتصفح واللغة
  • كتابة كود قابل للصيانة
  • النظر إلى الصفحة من منظور تجربة المستخدم

صهر المعرفة المبعثرة في نظام متكامل

تتطور تقنيات واجهة الويب الأمامية بسرعة كبيرة، لكن جوهرها الأساسي كان ولا يزال واضحاً:

  • استخدام HTML لوصف هيكل المحتوى
  • استخدام CSS للتحكم في المظهر والتنسيق
  • استخدام JavaScript لمعالجة المنطق والتفاعلات
  • تحويل الكود إلى واجهة عبر المتصفح
  • تبادل الموارد والبيانات مع الخادم عبر HTTP
  • تنظيم المشاريع المعقدة عبر الهندسة البرمجية
  • رفع كفاءة التطوير وقابلية الصيانة عبر أطر العمل
  • إنجاز المشروع بشكل جيد حقاً عبر تحسين الأداء، والوعي الأمني، والممارسات المعيارية

أكثر ما يُنهى عنه في تعلم البرمجة هو "معرفة جزء دون الكل". ما يصنع الفارق الحقيقي هو بناءخريطة ذهنية معرفية شاملةتخصك:

أن تعرف موقع كل نقطة معرفية في النظام الكلي، والمشكلة التي تحلها، وكيف ترتبط بالمعرفة السابقة واللاحقة.

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

ثبّت الأساسات أولاً، ثم ابنِ فوقها، كي لا ينهار البناء في منتصف الطريق.