前言

很多人初学前端，往往是从“依葫芦画瓢”开始的：记标签、背属性、抄组件、跑脚手架。刚开始似乎也能凑出几个页面，可越往后学越觉得吃力——看别人的示例觉得都懂，让自己从头写却无从下手，遇到 Bug 更是毫无头绪。

这是因为真正的困难的往往不是“写不出代码”，而是“不理解代码”。

试着问问自己以下这几个问题：

为什么输入一个 URL，页面就能显示出来？
HTML、CSS、JS 分别在浏览器里经历了什么？
为什么会有回流和重绘？
为什么有时候 this 指向很奇怪？
为什么 Promise.then 比 setTimeout 先执行？
为什么 Vue 的 nextTick 能拿到更新后的 DOM？
为什么 React 里 key 不能乱写？
为什么项目一大，构建就会慢得让人心烦？

这些问题看似零散，背后却隐藏着一整套严密的 Web 前端知识体系。前端开发是浏览器、网络协议、语言机制、页面渲染、工程化、框架思想、性能优化等多条线共同组成的工程实践。

这篇文章，旨在帮你打破“只见树木，不见森林”的困局。我会尽量把前端核心的底层脉络由浅入深地串联起来，带你重新认识一遍真正的前端。

一、前端到底在做什么

1. 什么是 Web

Web，本质上是一套基于互联网进行信息传递、资源访问和交互的系统。用户通过浏览器访问网页，浏览器向服务器请求资源，服务器返回 HTML、CSS、JavaScript、图片、音视频等内容，浏览器再把这些资源解析并渲染成我们看到的页面。

Web 前端体系其实就是围绕以下 6 个核心环节展开的：

资源定位：通过 URL 找到资源
网络通信：通过 HTTP/HTTPS 传输资源
内容描述：通过 HTML 描述结构
样式表现：通过 CSS 控制外观
行为交互：通过 JavaScript 实现逻辑
浏览器渲染：把代码变成人可见、可操作的界面

前端开发，做的就是“用户能看到和直接交互的那一部分系统”。

2. 网页由什么组成

一个最基础的网页，通常包含三部分：

HTML：负责结构。页面里有什么。
CSS：负责表现。页面长什么样。
JavaScript：负责行为。页面会发生什么。

可以用一个简单类比来理解：

HTML 像房子的钢筋和墙体结构
CSS 像房子的装修、灯光、颜色和布局
JavaScript 像房子的电路系统、门禁、按钮、自动化控制

这三者共同组成了前端页面。

3. 浏览器是什么

浏览器不是“搜索网页的软件”这么简单。它本质上是一个复杂的运行环境，至少承担了这些职责：

发起网络请求
解析 HTML / CSS / JavaScript
构建 DOM 树和 CSSOM 树
生成渲染树并完成布局与绘制
执行 JavaScript 代码
维护事件循环、定时器、网络回调等机制
提供大量 Web API，比如 localStorage、fetch、history、canvas

常见浏览器包括：

Chrome
Edge
Firefox
Safari
Opera

4. 浏览器内核是什么

浏览器内核通常指渲染引擎和 JS 引擎相关部分。前端开发里提到浏览器内核，更多是在说它如何解析页面和执行代码。

常见内核包括：

Blink：Chrome、Edge、Opera 等主流 Chromium 系浏览器使用
WebKit：Safari 使用
Gecko：Firefox 使用
Trident：旧版 IE 使用

历史上很多“兼容性问题”，本质上就是不同浏览器内核对标准支持程度不同导致的。

5. 为什么要有 Web 标准

如果没有统一标准，不同浏览器就会各写各的实现。你写的一个页面，可能在 Chrome 正常，在 Firefox 变形，在 Safari 又出问题。

所以才需要像 W3C、WHATWG 这样的标准组织，推动 HTML、CSS、DOM、URL、Fetch 等标准的发展。

Web 标准的意义很实际：

降低兼容成本
让网页更容易被维护
让不同设备都能访问
让页面更利于搜索引擎理解
让工程协作有共同规则

在今天写前端，标准意识非常重要。因为很多问题不是“这样能不能跑”，而是“这样是不是正确、稳定、可维护”。

二、前端开发环境与基础工具

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：看 cookie、storage、缓存
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
更利于无障碍访问
对后续团队协作更友好

前端写结构时，一个很朴素的原则是：先想标签表达的含义，再去写样式。

5. 常用标签梳理

标题和段落

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

h1 通常用于页面最重要的主标题。一个页面不一定强制只能有一个 h1，但从内容组织角度，应该克制使用。

链接和图片

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

图片的 alt 很重要，它既是图片加载失败时的替代说明，也与无障碍、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 注释：

<!-- 这是注释 -->

常见字符实体：

< 表示 <
> 表示 >
  表示空格
& 表示 &

基本规范包括：

标签名和属性名尽量小写
合理缩进
属性值加引号
保持结构清晰
不要滥用无语义标签

四、CSS：页面为什么能变好看

1. CSS 是什么

CSS 全称 Cascading Style Sheets，层叠样式表。它控制页面的样式表现，比如：

字体
颜色
间距
边框
布局
动画
响应式适配

如果 HTML 负责“页面有什么”，那么 CSS 负责“页面看起来怎样”。

2. CSS 的三种引入方式

行内样式

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

内部样式

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

外部样式

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

实际开发几乎都推荐外部样式，便于复用和维护。

3. 选择器

CSS 的核心是“选中元素并给它样式”。

常见选择器包括：

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

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

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

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

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

/* 伪类 */
a:hover {}

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

写 CSS 不是选择器越复杂越厉害，而是越清晰、越可维护越好。

4. 优先级

不同样式作用于同一元素时，浏览器需要决定最终用哪条规则。这就涉及优先级。

大致顺序：

!important
行内样式
ID 选择器
类 / 属性 / 伪类
标签 / 伪元素
通配符 / 继承 / 默认样式

但实际开发里，不建议靠疯狂堆优先级解决问题。更推荐：

控制选择器复杂度
规范命名
保持样式组织有层级
少用 !important

5. 盒模型

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. 浮动与清除浮动

浮动曾经是做布局的重要方式，现在主要用于图文环绕等场景。由于浮动会脱离普通文档流，父元素容易高度塌陷，所以常需要清除浮动。

常见清除方式：

.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. 响应式布局

前端页面不是只在电脑上显示。手机、平板、桌面设备、横屏竖屏、不同分辨率，都要求页面有适配能力。

响应式布局常见手段：

百分比
rem
vw / vh
媒体查询 @media
Flex / Grid 自适应布局
图片和容器的弹性缩放

例如：

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

13. 重排与重绘

这是前端性能里非常高频的概念。

重排（回流）

当元素几何属性发生变化，浏览器需要重新计算布局。

例如：

改宽高
改位置
增删 DOM
改字体大小
改窗口尺寸

重绘

当元素外观变化但不影响布局时，只需要重新绘制。

例如：

改颜色
改背景
改可见性

结论是：

重排一定会引起重绘
重绘不一定触发重排
重排成本通常更高

优化方向包括：

集中修改样式
减少频繁读写布局属性
使用 transform / opacity 做动画
适度使用合成层和 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 是 Web 前端的核心编程语言。它最初被设计出来，是为了给网页增加交互能力。后来发展到今天，JavaScript 不只是浏览器脚本语言，也是 Node.js 服务端、工程化工具、桌面应用、移动端跨平台方案的重要基础。

在前端里，JavaScript 负责：

操作 DOM
响应事件
发送网络请求
处理数据
控制页面状态
驱动组件和框架运行

2. 基本数据类型与引用类型

JavaScript 常见基础类型包括：

number
string
boolean
undefined
null
symbol
bigint

Les types de référence sont principalement des objets :

Object
Array
Function
Date
RegExp
Autres structures construites à partir d'objets

Comprendre la différence entre « types valeur » et « types référence » est crucial pour l'affectation de variables, le passage de paramètres, la copie et la comparaison.

3. Détection du type de données

Il existe trois méthodes courantes.

typeof

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

L'avantage est la simplicité, l'inconvénient est qu'il ne distingue pas assez finement null, les tableaux et les objets.

instanceof

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

Convient pour juger les instances de types référence, mais ne peut pas bien juger les types primitifs littéraux.

Object.prototype.toString.call

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

C'est une méthode de jugement plus fiable et plus fine.

4. Déclaration de variables : var, let, const

var

Portée de fonction
Sujet au hoisting
Peut être déclaré plusieurs fois
Un var global sera attaché à window

let

Portée de bloc
Sujet à la zone morte temporaire
Ne peut pas être déclaré plusieurs fois
Plus adapté pour déclarer des variables qui changeront

const

Portée de bloc
Doit être initialisé lors de la déclaration
Ne peut pas être réassigné
Plus adapté pour les liaisons constantes

Dans le développement moderne, il est généralement recommandé de :

Privilégier const
par défaut, utiliser let
quand une réassignation est nécessaire, et éviter autant que possible var

5. Portée et chaîne de portée

La portée détermine la plage d'accessibilité des variables et des fonctions.

Portées courantes :

Portée globale
Portée de fonction
Portée de bloc

Lorsqu'une variable n'est pas trouvée dans la portée actuelle, JavaScript remonte la portée lexicale jusqu'à la portée globale. Ce chemin de recherche est la chaîne de portée.

Ce mécanisme est la base pour comprendre les closures, this, la modularisation et le contexte d'exécution.

6. Closure

Une closure n'est pas un concept isolé, mais le résultat naturel de la portée lexicale de JavaScript en cours d'exécution.

Compréhension simple :Une fonction peut se souvenir et accéder aux variables de la portée dans laquelle elle a été définie, même après que la fonction externe a fini de s'exécuter.

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

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

Valeur des closures :

Préserver l'état
Implémenter des variables privées
Prolonger le cycle de vie des variables locales
Base de certains modèles d'encapsulation de modules

Risques des closures :

Une utilisation incorrecte peut facilement augmenter l'occupation mémoire
La lisibilité diminue lorsque la hiérarchie logique devient complexe

7. Liaison de this

this est l'un des points les plus déroutants de JavaScript. Il n'est pas lié à la définition, mais déterminé au moment de l'appel, à l'exception des fonctions fléchées.

Cas courants :

Appel de fonction simple : pointe vers window en mode non strict, et undefined
en mode strict.
Appel de méthode d'objet : pointe vers l'objet qui l'appelle.
Appel de constructeur : pointe vers la nouvelle instance créée.call/apply/bind
Liaison explicite : pointe vers l'objet spécifié.Fonction fléchée : n'a pas son propre this, hérite du

this de l'environnement lexical englobant.Pour comprendre this, ne récitez pas de règles par cœur, l'essentiel est de voir comment la fonction est appelée.

8. Prototype et chaîne de prototypes

JavaScript n'est pas basé sur l'héritage de classe traditionnel, mais sur les prototypes.

Chaque objet fonction a prototype, et chaque objet a un lien prototype interne pointant vers l'objet prototype de son constructeur. Lors de la recherche d'une propriété, si l'objet lui-même ne la possède pas, la recherche remonte le long de la chaîne de prototypes.

C'est la chaîne de prototypes.

Comprendre la chaîne de prototypes aide à comprendre :

Pourquoi une instance peut accéder aux méthodes sur le prototype du constructeur
La logique de jugement de instanceof
La nature sous-jacente des classes et de l'héritage en JS

9. Ce que fait new

Le mot-clé new

fait approximativement ceci :
Crée un nouvel objetPointe le prototype du nouvel objet vers
prototype du constructeurExécute le constructeur avec le nouvel objet comme
this

Si le constructeur retourne explicitement un objet, retourne cet objet ; sinon, retourne le nouvel objet.Ainsi, new

n'est pas une « décoration syntaxique », mais une partie du mécanisme d'instanciation d'objet.

10. Tableaux, objets et méthodes courantes

Dans le développement front-end, le traitement des données est presque indissociable des tableaux et des objets.

Méthodes courantes des tableaux :push /
popshift /
unshift
map
filter
reduce
findsome /
every
forEach
sortslice /

splice

Opérations courantes sur les objets :
Lecture et modification de propriétés
Object.keys
Object.values
Object.entries
Object.assignOpérateur de décomposition
...

Problèmes de copie profonde et superficielle

Ces contenus, bien que fondamentaux, sont utilisés presque quotidiennement.

11. DOM et BOM

JavaScript dans le navigateur n'est pas seulement le langage lui-même, il peut aussi manipuler la page et l'environnement via les API fournies par le navigateur.

DOM

Le Document Object Model, utilisé pour représenter la structure du document HTML.

Opérations courantes :
Rechercher des éléments
Modifier le texte et les attributs
Modifier les styles
Ajouter/supprimer des nœuds

Écoute d'événements

BOM

Le Browser Object Model, représente l'environnement de la fenêtre du navigateur.

Objets courants :
window
location
history
navigator
screen

localStorage

12. Mécanisme d'événement

Les interactions front-end dépendent fortement des événements, comme le clic, la saisie, le défilement, la soumission, les actions au clavier.

Le flux d'événements comprend généralement trois phases :
Phase de capture
Phase cible

Phase de bouillonnement

element.addEventListener('click', handler);

Méthodes courantes :

Propriétés et méthodes courantes dans l'objet événement :
target
currentTarget
preventDefault()

stopPropagation()

Comprendre la propagation des événements est utile pour la délégation, l'interaction des composants et l'optimisation des performances.

13. Throttle et Debounce

Ces deux techniques apparaissent souvent dans l'optimisation des événements à haute fréquence.

Debounce

Exécute seulement la dernière fois après la fin du déclenchement pendant un certain temps.

Adapté pour :
Saisie de recherche
Validation de formulaire

Traitement après resize

Throttle

Exécute au maximum une fois dans un intervalle de temps donné.

Adapté pour :
Écoute du défilement
Mouvement de la souris

Contrôle des clics à haute fréquence

Elles contrôlent essentiellement toutes deux la fréquence d'appel des fonctions, la différence résidant dans la stratégie de déclenchement.

VI. Asynchrone, Promise, Boucle d'événements : Le passage le plus bloquant en front-end

1. Pourquoi l'asynchrone existe

JavaScript s'exécute dans le thread principal du navigateur. Si toutes les tâches étaient exécutées de manière synchrone et bloquante, la page pourrait facilement se figer.

Par exemple :
Une requête réseau doit attendre la réponse du serveur
Un minuteur doit se déclencher à un moment futur
Les clics et saisies utilisateur sont imprévisibles

La lecture de fichiers, les rappels d'images d'animation ne peuvent pas non plus bloquer le thread principal de manière synchrone à attendre indéfiniment.

C'est pourquoi l'environnement d'exécution JavaScript a besoin d'un mécanisme pour coordonner le code synchrone et les tâches asynchrones, c'est le sens de la boucle d'événements.

2. Synchrone et Asynchrone

Synchrone

Le code s'exécute ligne par ligne dans l'ordre, la suivante ne peut pas commencer tant que la précédente n'est pas terminée.

Asynchrone

Après avoir lancé une tâche, le flux d'exécution actuel n'est pas bloqué. Une fois les conditions remplies, le rappel est placé dans la file d'attente d'exécution.

3. Macro-tâches et Micro-tâches

C'est la clé pour comprendre la boucle d'événements.

Macro-tâches courantes :
setTimeout
setInterval
script
Rappels I/O

Événements UI

Micro-tâches courantes :
Promise.then/catch/finally
queueMicrotask

MutationObserver

L'ordre d'exécution peut se résumer ainsi :
Exécuter le code synchrone actuel
Vider la file d'attente des micro-tâches actuelle
Prendre une macro-tâche et l'exécuter
Vider à nouveau la file d'attente des micro-tâches

Boucler continuellementAinsi, généralement Promise.then s'exécute plus tôt que setTimeout

.

4. Promise

Promise est l'une des solutions standard de JavaScript pour gérer l'asynchrone. Elle est utilisée pour représenter le résultat futur d'une opération asynchrone.

Une Promise a trois états :
pending
fulfilled

rejectedUne fois que l'état passe de pending

à succès ou échec, il ne changera plus.

Méthodes courantes :
then
catch
finally
Promise.all
Promise.race
Promise.allSettled

Promise.any

L'apparition de Promise a résolu le problème de l'imbrication massive de rappels, permettant d'organiser le flux asynchrone en chaîne.

5. async / awaitasync/await est un sucre syntaxique construit au-dessus de Promise. Il ne rend pas l'asynchrone synchrone, mais fait ressembler le code asynchrone davantage à un flux synchrone

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

Il rend le code plus lisible et plus adapté à l'écriture de logique asynchrone séquentielle.

Points à noter :await
est généralement suivi d'une PromiseUne fonction
async retourne une Promiseawait suspend l'exécution ultérieure de la fonction
async actuelle, mais ne bloque pas l'ensemble du thread

La gestion des erreurs doit être associée à

try/catch6. Différences entre minuteurs, Promise et async/await
setTimeout est une planification de macro-tâche fournie par le navigateur
Promise.then est une micro-tâche

Le fonctionnement sous-jacent de

async/await

repose toujours sur Promise

Comprendre l'ordre d'exécution entre ces trois éléments est presque une question fréquente en entretien front-end.

VII. HTTP, HTTPS et les bases du réseau : Pourquoi la page peut demander des données

1. Qu'est-ce que HTTP

HTTP est le protocole de transfert hypertexte, utilisé pour transférer des ressources entre le client et le serveur.

À l'origine, il était principalement utilisé pour transmettre des pages web, mais il prend désormais également en charge le transfert de données d'interface, d'images, de contenu audio et vidéo, etc.

HTTP est un protocole sans état, ce qui signifie que le serveur ne se souvient pas par défaut du contexte métier entre deux requêtes. Il est nécessaire de recourir à des mécanismes comme les Cookies, les Sessions, les Tokens pour aider à la gestion de l'état.

2. Qu'est-ce que HTTPS
HTTPS peut être compris comme « HTTP + couche de chiffrement TLS/SSL ».
Il ajoute, sur la base de HTTP :

Chiffrement des données

Authentification de l'identité

Vérification de l'intégrité

L'importance de HTTPS n'est pas seulement « plus sécurisé », c'est une exigence par défaut de l'infrastructure Web moderne. Sans HTTPS, de nombreuses capacités des navigateurs modernes sont limitées, par exemple certaines fonctionnalités comme la géolocalisation, la caméra, les Service Workers seront restreintes.
3. Différences entre HTTP et HTTPS
Différences fondamentales :
HTTP transmet en clair ; HTTPS transmet de manière chiffrée

Port par défaut HTTP : 80 ; Port par défaut HTTPS : 443

HTTPS nécessite un certificat

Le coût de la poignée de main HTTPS est plus élevé, mais dans l'environnement réseau moderne, ce surcoût en vaut généralement la peine
4. Processus général de HTTPS
Compréhension simplifiée :
Le client initie une requête HTTPS
Le serveur renvoie le certificat numérique

Le client vérifie la validité du certificat

Les deux parties négocient l'algorithme de chiffrement et la clé de session

Les communications ultérieures utilisent la clé de session pour le chiffrement

Le TLS moderne est bien plus complexe que ce processus, mais maîtriser cette ligne directrice est suffisant pour débuter.5. URL, Requête et Réponse
Une URL contient généralement :Protocole :
https://Nom de domaine :
yizhimiao.blogPort :
:443Chemin :
/api/userParamètres de requête :

?id=1

Hash :

#section1Lorsque le navigateur envoie une requête, il inclut la ligne de requête, les en-têtes de requête et le corps de la requête ; lorsque le serveur répond, il renvoie la ligne d'état, les en-têtes de réponse et le corps de la réponse.
6. Méthodes HTTP courantesGET
: Obtenir une ressourcePOST
: Soumettre des donnéesPUT
: Mise à jour complètePATCH
: Mise à jour partielleDELETE

: Supprimer une ressource

OPTIONS

: Voir les méthodes supportées par le serveur, courant pour la vérification préalable CORS
7. Codes d'état courants
2xx Succès

200 OK

201 Created
204 No Content
3xx Redirection

301 Moved Permanently

302 Found
304 Not Modified
4xx Erreur client
400 Bad Request

401 Unauthorized

403 Forbidden
404 Not Found
5xx Erreur serveur

500 Internal Server Error

502 Bad Gateway

503 Service Unavailable

Les codes d'état ne sont pas à apprendre par cœur, mais constituent des indices importants pour diagnostiquer les problèmes de requête.

8. Cache : Pourquoi parfois la requête n'est pas réellement envoyée

Le cache du navigateur se divise en deux grandes catégories :

Cache fort
Le navigateur utilise directement le cache local, sans envoyer de requête.

Contrôlé par ces champs :

Cache-Control

Expires

Cache de négociationLe navigateur envoie un identifiant de cache pour demander au serveur : « Puis-je continuer à utiliser cette ressource ? »Contrôlé par ces champs :
ETag / If-None-Match

Last-Modified / If-Modified-Since

Si la ressource n'a pas changé, le serveur retourne

304

, et le navigateur continue d'utiliser le cache.

Le mécanisme de cache est une pierre angulaire importante de l'optimisation des performances front-end.

9. Cookie, localStorage, sessionStorage
Ces trois éléments sont souvent demandés ensemble.
Cookie
Est automatiquement inclus dans les en-têtes de requête

Capacité faible

Peut avoir une date d'expiration définie
Souvent utilisé pour l'état de connexion, l'identification côté serveur
localStorage
Stocké localement dans le navigateur

Conservé à long terme, sauf suppression manuelle

N'est pas automatiquement envoyé au serveur
Adapté au stockage persistant de certaines données front-end
sessionStorage

Valide uniquement pour la fenêtre de session actuelleEffacé à la fermeture de la fenêtre

N'est pas automatiquement envoyé au serveur

Leur différence réside essentiellement dans :

l'emplacement de stockage, le cycle de vie, et la participation automatique aux requêtes.
10. Qu'est-ce que le Cross-Origin (CORS)
Le navigateur applique une politique de même origine. Par même origine, on entend :

Même protocole

Même nom de domaineMême portSi l'un de ces éléments diffère, cela peut constituer une situation de cross-origin.

Le cross-origin ne signifie pas que « la requête ne peut pas être envoyée », mais que

le navigateur empêche le script front-end de lire le résultat de la réponse

11. Solutions courantes pour le cross-origin

CORS

La solution la plus répandue, le serveur indique via les en-têtes de réponse au navigateur quelles requêtes cross-origin sont autorisées.

Proxy

Courant en environnement de développement avec un proxy front-end, par exemple Vite / Webpack Dev Server / Nginx pour la redirection.

JSONP

Ancienne solution, ne supporte que GET, rarement utilisée comme premier choix dans les projets modernes.

postMessage

Adapté à la communication entre fenêtres, communication iframe.

VIII. TCP, UDP et de la saisie de l'URL à l'affichage de la page
1. TCP et UDP
TCP
Orienté connexion

Transmission fiable

Garantie de l'ordre
Mécanismes d'accusé de réception et de retransmission
UDP
Sans connexion

Rapide

Ne garantit pas la fiabilité

Ne garantit pas l'ordre

Les requêtes Web courantes en front-end reposent principalement sur HTTP/HTTPS, au-dessus de TCP.
2. Handshake en trois étapes de TCP
Processus général d'établissement de la connexion :

Le client envoie SYN

Le serveur répond SYN + ACK

Le client renvoie ACK

Le but est de permettre aux deux parties de confirmer mutuellement que leurs capacités d'envoi et de réception sont normales.

3. Déconnexion en quatre étapes de TCP

Lors de la libération de la connexion, les deux parties doivent confirmer séparément la fin de l'envoi, ce qui implique généralement quatre étapes de clôture.

Ce processus n'est pas quelque chose que le codage quotidien en front-end manipule directement, mais le comprendre aide à saisir le processus sous-jacent d'établissement et de fermeture des connexions réseau.
4. Comment TCP garantit une transmission fiable
Repose principalement sur ces mécanismes :
Segmentation et numérotation
Accusé de réception ACK
Retransmission sur expiration du délai
Somme de contrôle

Fenêtre glissante

Contrôle de flux

Contrôle de congestion

5. De la saisie de l'URL au chargement complet de la page
C'est l'une des questions les plus classiques et les plus adaptées pour relier les connaissances du système front-end.
Un processus simplifié peut être compris ainsi :
Saisie de l'URL dans la barre d'adresse du navigateur
Le navigateur vérifie le cache
Effectue la résolution DNS pour obtenir l'adresse IP
Établit une connexion TCP avec le serveur
Si c'est HTTPS, effectue également la poignée de main TLS
Le navigateur envoie la requête HTTP
Le serveur renvoie le contenu de la réponse
Le navigateur analyse le HTML
Rencontre le CSS, le télécharge et l'analyse en CSSOM
Rencontre le JS, le télécharge et l'exécute (peut bloquer l'analyse)
Construit l'arbre DOM
Combine le DOM et le CSSOM pour générer l'arbre de rendu

Layout (mise en page)

Paint (peinture)

Une fois la page interactive, continue à traiter les ressources asynchrones, les liaisons d'événements, le rendu des données d'interface

L'important pour cette question n'est pas de réciter l'ordre, mais de pouvoir relier le réseau, le cache, le rendu du navigateur et l'exécution des scripts.

IX. Principes de rendu du navigateur : Pourquoi la page peut finalement s'afficher

1. Arbre DOM et arbre CSSOM

Après avoir reçu le HTML, le navigateur ne le « dessine » pas directement, mais l'analyse d'abord en un arbre DOM.

Après l'analyse du fichier CSS, un arbre CSSOM est formé.

Ensuite, le navigateur combine les deux pour générer l'arbre de rendu.

2. L'arbre de rendu n'est pas égal à l'arbre DOML'arbre DOM décrit la structure du document, mais tous les nœuds DOM n'apparaissent pas dans l'arbre de rendu.
Par exemple :Les éléments avec

display: none

n'entrent pas dans l'arbre de rendu

Le contenu de l'élément

head

ne participe généralement pas au rendu

3. Layout et Paint

Layout

Calcule la position géométrique et les dimensions de chaque élément visible.PaintDessine les pixels des éléments à l'écran.

Les navigateurs modernes effectuent également des optimisations supplémentaires comme la superposition et la composition.

4. Pourquoi le JS peut bloquer l'analyse de la page

Lorsque le navigateur analyse le HTML, s'il rencontre une balise

<script>
Exécution séquentielle après l'analyse HTML
Convient à la plupart des scripts externes

async

Téléchargement asynchrone
Exécution immédiate dès la fin du téléchargement
Ne garantit pas l'ordre d'exécution par rapport à l'analyse HTML
Convient aux scripts indépendants, comme les codes de statistiques

5. Pourquoi la performance du premier écran est importante

Les utilisateurs ne se soucient pas du framework ou de la gestion d'état que vous utilisez, ils se soucient d'une seule chose : la page est-elle rapide ?

La performance du premier écran est influencée par de nombreux facteurs :

Vitesse de retour du HTML
Si le CSS bloque le rendu
Si le JS est trop volumineux
Si les images sont trop lourdes
Si les ressources de polices bloquent
Si le cache est utilisé de manière appropriée
Si le chargement différé et le fractionnement des ressources sont mis en œuvre

L'optimisation frontale vise finalement à permettre aux utilisateurs de voir le contenu et d'interagir plus rapidement.

X. Formulaires, validation et traitement des entrées utilisateur

1. Pourquoi les formulaires sont importants

Un vrai site web ne se contente pas d'afficher du contenu, il doit permettre aux utilisateurs de se connecter, rechercher, laisser des messages, passer des commandes, télécharger, filtrer et soumettre.

Ces interactions reposent essentiellement sur les formulaires.

2. Éléments de formulaire courants

input
textarea
select
option
button
label
form

3. Types courants d'input

text
password
email
number
radio
checkbox
file
submit
reset
date

HTML5 a apporté de nombreux types d'entrée plus sémantiques aux formulaires, ce qui favorise également la validation native du navigateur et l'optimisation du clavier sur mobile.

4. Pourquoi le label est très important

label ne sert pas seulement à "écrire une description textuelle". Il peut agrandir la zone cliquable et améliorer l'accessibilité.

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

5. Méthodes de soumission de formulaire

Méthodes de soumission courantes pour les formulaires :

GET
POST

GET est généralement utilisé pour récupérer des données, les paramètres apparaissent souvent dans l'URL.

POST est plus adapté pour soumettre des données.

Le front-end moderne intercepte souvent la soumission par défaut du formulaire via JavaScript, puis utilise fetch ou axios pour envoyer des requêtes asynchrones.

6. Validation frontale et validation back-end

L'intérêt de la validation frontale :

Améliorer l'expérience utilisateur
Réduire les requêtes invalides
Fournir un retour plus immédiat à l'utilisateur

Mais la validation frontalene remplace pas la validation back-end.

Car la logique frontale peut être totalement contournée, la véritable frontière de sécurité se situe côté serveur.

XI. Optimisation des performances frontales

1. Que faut-il optimiser dans l'optimisation des performances ?

Les performances frontales concernent généralement :

La vitesse de chargement de la page
La vitesse d'affichage du premier écran
L'absence de saccades lors des interactions
La fluidité des animations
La taille excessive des ressources
Le nombre excessif de requêtes
La fréquence excessive des rendus répétés

2. Axes d'optimisation courants

Couche réseau

Activer la compression (gzip / brotli)
Utiliser un CDN
Mise en cache appropriée
Réduire le nombre de requêtes
Utiliser HTTP/2

Couche ressources

Compression d'images
Chargement différé des images
Fractionnement du code
Tree Shaking
Chargement à la demande
Supprimer le code inutile

Couche de rendu

Réduire les reflux et repeints
Optimiser le rendu des longues listes
Utiliser des listes virtuelles
Éviter les opérations DOM synchrones à grande échelle
Contrôler les performances des animations

Couche code

Throttle et debounce
Réduire les calculs répétés
Mettre en cache les résultats de manière appropriée
Contrôler les effets de bord
Éviter les re-rendus inutiles

3. Moyens courants d'optimisation du premier écran

SSR / SSG
Écran squelette
CSS critique en ligne
Chargement différé des images
Chargement différé des scripts non essentiels
Fractionnement du code au niveau des routes
Préchargement des ressources critiques

4. Outils d'analyse de performance

On ne peut pas optimiser au feeling, il faut savoir lire les données.

Outils courants :

Chrome Performance
Lighthouse
Panneau Network
Web Vitals
Devtools du framework

L'optimisation n'est pas "je pense que c'est plus rapide", mais "je peux prouver que c'est plus rapide".

XII. Stockage navigateur, cache et capacités hors ligne

1. Comment choisir le stockage local ?

Si vous stockez simplement une petite quantité de chaînes de configuration :

localStorage
sessionStorage

Si vous avez besoin de capacités de base de données frontales plus complexes :

IndexedDB

2. Qu'est-ce qu'un Service Worker ?

Un Service Worker peut être compris comme une couche de proxy programmable entre le navigateur et le réseau.

Il peut faire :

Cache hors ligne
Interception de requêtes
Stratégies de cache de ressources
Fonctionnalités de push de messages, etc.

De nombreuses capacités des PWA (Progressive Web Apps) en dépendent.

Bien qu'il ne soit pas nécessaire de l'approfondir immédiatement au début, il est essentiel de savoir quel problème il résout.

XIII. Git et collaboration de projet : savoir coder ne signifie pas savoir mener un projet

1. Pourquoi un développeur front-end doit absolument connaître Git

Le développement front-end moderne est presque impossible sans collaboration d'équipe. Git est le standard de facto pour la gestion de versions.

Il ne s'agit pas seulement de "sauvegarder le code", mais plus important encore :

Enregistrer l'historique des modifications
Supporter la collaboration multi-utilisateurs
Supporter le développement par branches
Supporter le retour en arrière du code
Supporter la gestion des fusions et des processus de publication

2. Commandes Git courantes

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. Modèles de branches courants

Dans les pratiques courantes, on peut trouver :

main/master : branche de production stable
develop : branche d'intégration pour le développement quotidien
feature/* : branche de fonctionnalité
release/* : branche de publication
hotfix/* : branche de correction urgente

Même avec un excellent code, sans maîtrise des processus de collaboration, il est difficile de donner sa pleine mesure une fois dans une équipe.

XIV. Modularité et ingénierie

1. Pourquoi la modularité est nécessaire

Quand le projet est petit, un fichier HTML référençant plusieurs fichiers JS peut fonctionner. Mais quand le projet grandit, on rencontre :

Pollution des variables
Dépendances chaotiques
Duplication de code
Difficulté de maintenance

La modularité consiste à diviser le code en unités aux responsabilités claires, aux frontières bien définies et réutilisables.

2. Évolution de la modularité

Le front-end a connu historiquement :

L'ère des fonctions globales
Les IIFE (fonctions auto-exécutantes) pour isoler la portée
CommonJS
AMD / CMD
ES Module

Aujourd'hui, le standard dominant est ES Module.

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

3. Pourquoi les outils de build sont nécessaires

Les navigateurs ne sont pas naturellement capables de gérer efficacement de grands projets modulaires, donc les outils d'ingénierie frontale sont responsables de :

Regroupement de modules
Transformation de code
Gestion de la compatibilité
Optimisation des ressources
Serveur de développement
Rechargement à chaud
Minification du livrable

4. Ce que fait Webpack

L'idée centrale de Webpack est :À partir d'un ou plusieurs points d'entrée, regrouper toutes les dépendances du projet en un ensemble de ressources exécutables par le navigateur.

Capacités courantes :

Identifier les dépendances JS, CSS, images, polices, etc.
Les Loaders transforment différents types de ressources
Les Plugins étendent le processus de build
Fractionnement de code
Minification et optimisation

5. Stratégies d'optimisation courantes

include / exclude pour réduire la portée du traitement
Utiliser le cache de manière appropriée
thread-loader pour le traitement multithread des tâches lourdes
TerserPlugin pour la minification
Tree Shaking pour éliminer le code mort
Fractionnement par route
Séparation appropriée des dépendances tierces

6. Qu'est-ce que Babel ?

Babel est essentiellement un compilateur JavaScript. Il fait principalement une chose :

Convertir la nouvelle syntaxe en code pouvant s'exécuter dans des environnements plus anciens.

Son flux général :

Parse : analyser le code en AST
Transform : modifier l'AST via des plugins
Generate : générer le nouveau code

La clé pour comprendre Babel n'est pas de mémoriser les noms des phases, mais de savoir que beaucoup de "sucre syntaxique" et de "compatibilité" du front-end moderne ne sont pas directement compris par le navigateur, mais traités en amont lors de la phase de build.

7. Pourquoi Vite devient de plus en plus populaire

Contrairement à l'approche traditionnelle de regroupement, Vite exploite davantage les ESM natifs du navigateur dans l'environnement de développement, démarrant et compilant à la demande, ce qui rend le démarrage à froid très rapide.

C'est pourquoi de nombreux nouveaux projets préfèrent désormais utiliser Vite plutôt que les scaffolds Webpack traditionnels.

XV. Node.js, npm et les fondamentaux de l'écosystème front-end

1. Pourquoi un développeur front-end doit apprendre Node.js

Bien que le front-end s'exécute principalement dans le navigateur, le front-end moderne est indissociable de Node.js.

Parce que :

Les outils de build s'exécutent sur Node.js
La gestion des paquets dépend de Node.js
Le serveur de développement local dépend de Node.js
De nombreuses tâches d'automatisation par script dépendent de Node.js

Ainsi, apprendre Node.js pour le front-end n'est pas nécessairement pour écrire du back-end, mais pour comprendre et utiliser l'écosystème d'ingénierie.

2. Qu'est-ce que npm ?

npm est l'un des outils de gestion de paquets les plus répandus dans le monde JavaScript.

Opérations courantes :

Installer des dépendances
Mettre à jour des dépendances
Gérer les scripts du projet
Publier un paquet

package.json est un fichier de configuration important pour les projets front-end, contenant généralement :

Nom et version du projet
Liste des dépendances
Commandes de script
Point d'entrée de configuration de build

3. Contenu courant de package.json

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

L'ingénierie frontale consiste essentiellement en un ensemble d'outils orchestrés via npm scripts pour former un flux de travail.

XVI. Introduction à Vue : un représentant typique de la vue pilotée par les données

1. Pourquoi les frameworks front-end existent

Le JavaScript natif pur peut bien sûr écrire des pages, mais dès que la page devient complexe, on rencontre ces problèmes :

Manipulation du DOM fastidieuse
État difficile à gérer
Réutilisation des composants difficile
Logique d'interaction de plus en plus dispersée
Coût de maintenance qui augmente rapidement

Ainsi, l'objectif central des frameworks front-end est de :

Organiser plus efficacement l'UI et l'état.

2. L'idée centrale de Vue

Vue est une mise en pratique typique de la pensée MVVM.

Vous pouvez le comprendre comme :

Décrire l'interface avec des données
Quand les données changent, la vue se met à jour automatiquement
Le développeur manipule le moins possible le DOM directement

C'est ce qu'on appelle la "vue pilotée par les données".

3. Capacités courantes de Vue

Syntaxe de template
Rendu conditionnel
Rendu de liste
Liaison d'événements
Liaison bidirectionnelle
Propriétés calculées
Observateurs
Composants
Cycle de vie
Gestion d'état
Gestion de route

4. Qu'est-ce que la composantisation ?

Un composant est une unité UI réutilisable, composable, avec une responsabilité relativement indépendante.

Par exemple :

Composant bouton
Composant champ de saisie
Composant fenêtre modale
Composant liste
Composant de niveau page

La composantisation ne consiste pas à "découper les fichiers en plus petits", mais à rendre la structure de l'interface et les frontières logiques plus claires.

5. Pourquoi le cycle de vie est important

Le cycle de vie est une série d'étapes allant de la création, du montage, de la mise à jour à la destruction d'un composant.

Son importance réside dans :

Quand demander des données
Quand on peut accéder au DOM
Quand il faut détacher les événements, effacer les minuteurs

Ceci est étroitement lié à la gestion des effets de bord du composant.

6. computed et watch

computed

est plus adapté pour dériver une valeur à partir d'un état existant, avec mise en cache.

watch

est plus adapté pour surveiller un changement d'état, puis exécuter une logique d'effet de bord supplémentaire.

Souvent, quand on peut utiliser computed, on le privilégie par rapport à computed, car il est plus déclaratif.

7. Pourquoi nextTick est souvent demandé

Vue met à jour le DOM de manière asynchrone et par lots.nextTick sert à exécuter un callback une fois la mise à jour du DOM terminée.

Cela explique pourquoi, si on lit le DOM immédiatement après avoir modifié une donnée, on peut obtenir l'ancienne valeur, alors qu'en le plaçant dans nextTick, on obtient le résultat mis à jour.

8. keep-alive, mixin, Vuex

Ce sont des concepts courants dans l'écosystème Vue :

keep-alive : mettre en cache l'état du composant
mixin : une des solutions de réutilisation de logique, mais peut entraîner des conflits de noms et un manque de clarté sur l'origine
Vuex : gestion d'état centralisée (Pinia est également courant dans les projets Vue 3)

Lors de l'apprentissage d'un framework, il ne s'agit pas seulement de savoir utiliser l'API, mais surtout de comprendre quel problème il résout.

XVII. Introduction à React : une autre voie pour l'UI fonctionnelle

1. L'idée centrale de React

React est aussi un framework basé sur les composants, mais il met davantage l'accent sur :

L'UI est une projection de l'état
Tout est composant
Flux de données unidirectionnel
Décrire l'interface de manière déclarative

React n'est pas "plus avancé que Vue", il a simplement emprunté une autre voie de conception.

2. Qu'est-ce que JSX ?

JSX vous permet d'écrire une syntaxe similaire à HTML dans JavaScript.

Ce n'est pas du vrai HTML, mais il est compilé en appels React.createElement ou en une nouvelle forme d'appel d'exécution.

3. Composants fonctionnels et composants de classe

Au début de React, les composants de classe étaient nombreux. Après l'apparition des Hooks, les composants fonctionnels sont devenus la norme.

Les avantages des composants fonctionnels sont évidents :

Plus concis
Plus conforme à l'esprit de la logique de composition
Organisation plus naturelle de l'état et des effets de bord
Réduit la charge mentale liée à this

4. La signification des Hooks

Les Hooks ne sont pas là pour "ajouter des fonctionnalités aux composants fonctionnels", mais constituent une manière importante pour React d'organiser la logique d'état.

Hooks courants :

useState
useEffect
useMemo
useCallback
useRef
useContext
useReducer

5. useEffect et les effets de bord

Le composant fonctionnel lui-même doit être aussi pur que possible. Les opérations qui ne sont pas liées au rendu mais qui doivent se produire, par exemple :

Demander des données
S'abonner à des événements
Manipuler le DOM
Démarrer des minuteurs

appartiennent toutes aux effets de bord, généralement traitées dans useEffect.

6. Pourquoi la clé (key) est importante

Lors du diff de liste, React a besoin de la key pour identifier de manière stable l'identité des nœuds.

Une bonne key doit être :

Unique
Stable
Ne pas changer au fil des rendus

N'utilisez pas l'index du tableau à la légère, surtout si la liste est susceptible d'être modifiée (ajout, suppression, réorganisation), cela peut entraîner des problèmes de réutilisation erronée.

7. Pourquoi setState semble parfois synchrone et parfois asynchrone

C'est une différence apparente due au mécanisme de traitement par lots des mises à jour de React. Ce que vous devez vraiment comprendre, c'est :

React ne garantit pas que la mise à jour de l'état prenne effet immédiatement de manière synchrone
Les mises à jour d'état sont généralement traitées par lots
Pour lire l'état, il faut comprendre la fermeture du rendu actuel et le moment de l'ordonnancement

8. Qu'est-ce que Fiber ?

Fiber est une nouvelle architecture interne de React pour la coordination et l'ordonnancement des mises à jour. Le problème central qu'elle résout est que la mise à jour récursive synchrone traditionnelle a tendance à bloquer le thread principal dans les grandes pages.

Fiber rend le travail de rendu plus interruptible, reprenable et ordonnançable, améliorant ainsi la réactivité des interactions.

Vous n'avez pas nécessairement besoin de plonger immédiatement dans le code source, mais il faut savoir que c'est une base importante pour l'évolution des performances et de la concurrence de React.

XVIII. Routage front-end, gestion d'état et mentalité SPA

1. Qu'est-ce qu'une SPA ?

SPA, Single Page Application. Ses caractéristiques sont :

Après le chargement initial, le corps de la page est pris en charge par le front-end
Le changement de page est davantage un changement au niveau des composants plutôt qu'un rafraîchissement complet de la page
Le routage et l'état sont davantage gérés côté front-end

Les projets basés sur des frameworks courants appartiennent presque tous au mode SPA ou à un mode hybride.

2. Principe du routage front-end

Il existe deux modes courants de routage front-end :

Routage par hash : basé sur location.hash
Routage par History : basé sur l'API History

Ce que fait le routage front-end, essentiellement, c'est :

Écouter les changements d'URL, puis décider quel composant de page afficher.

3. Pourquoi la gestion d'état est apparue

Quand l'application grandit, le partage de données entre composants, le passage de valeurs à travers les niveaux et la synchronisation de l'état des pages deviennent de plus en plus complexes.

C'est ainsi qu'apparaissent :

Vuex / Pinia
Redux / Zustand / Jotai, etc.
Context

La gestion d'état n'est pas obligatoire, mais quand le flux de données devient suffisamment complexe, elle réduit considérablement le coût de maintenance.

XIX. Sécurité front-end

1. XSS

Cross-Site Scripting. L'attaquant injecte un script malveillant dans la page, qui s'exécute lorsque d'autres utilisateurs la consultent.

Stratégies de défense courantes :

Échapper les entrées utilisateur
Éviter de concaténer du HTML de manière arbitraire
Utiliser avec prudence innerHTML
Utiliser CSP
Filtrer strictement le contenu riche

2. CSRF

Cross-Site Request Forgery. Exploite la session authentifiée existante de l'utilisateur pour l'inciter à effectuer une requête non désirée.

Stratégies de défense courantes :

Jeton CSRF
Cookie SameSite
Double confirmation
Vérifier Referer / Origin

3. Pourquoi le front-end doit aussi comprendre la sécurité

Beaucoup pensent que la sécurité est l'affaire du back-end, mais en réalité, le front-end fait également partie de la surface d'attaque.

Vous n'avez pas besoin de devenir un expert en sécurité tout de suite, mais au moins d'avoir ces consciences :

Ne pas faire confiance aveuglément aux entrées utilisateur
Ne pas exécuter arbitrairement des scripts externes concaténés
Avoir une conscience des limites dans la gestion de l'état de connexion
Être prudent avec les téléchargements de fichiers, le contenu riche, les requêtes cross-origin et les scripts tiers

XX. Adaptation mobile et expérience multi-appareils

1. Pourquoi on ne peut pas transposer le PC tel quel sur mobile

L'écran du téléphone est petit, la densité de pixels est élevée, le mode d'interaction est différent, l'environnement réseau est plus complexe, donc une page mobile ne consiste pas simplement à réduire une page PC.

2. Stratégies d'adaptation courantes

Mise en page flexible
rem
vw
Media queries
Points de rupture responsives
Adaptation des images
Optimisation de l'interaction tactile

3. Le rôle du viewport

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

C'est l'une des configurations de base d'une page mobile, déterminant le comportement de zoom de la fenêtre d'affichage.

4. Points d'attention courants sur mobile

La zone cliquable ne doit pas être trop petite
Attention à l'occultation par le clavier lors de l'interaction avec les champs de saisie
La zone de défilement doit être claire
Les images et les polices doivent concilier netteté et volume
En environnement réseau lent, il faut encore plus se soucier de l'expérience du premier écran

XXI. Comment apprendre le front-end de manière systématique

Le plus gros problème de nombreux débutants n'est pas le manque d'effort, mais un parcours d'apprentissage chaotique.

1. Un ordre d'apprentissage relativement raisonnable

Première phase : Structure et style de base

HTML
CSS
Mise en page
Modèle de boîte, positionnement, Flex, Grid
Sémantique, formulaires, responsive

Phase 2 : JavaScript – notions fondamentales

Variables, types, portée
Fonctions, objets, tableaux
Prototype, this, fermetures
DOM, événements
Asynchrone, Promise, boucle d'événements

Phase 3 : Navigateur et réseau

HTTP/HTTPS
Cache
Cross-origin
De l'URL au rendu de la page
Reflow et repaint
Outils de développement du navigateur

Phase 4 : Ingénierie

Git
npm
Bases de Node.js
Modularisation
Babel
Outils de bundling

Phase 5 : Frameworks

Approfondir Vue ou React (au choix)
Composants
Routage
Gestion d'état
Structure et conventions du projet

Phase 6 : Compétences avancées

Optimisation des performances
Bases de la sécurité
SSR / SSG
Tests
TypeScript
Patrons de conception et pratiques d'ingénierie

2. Pièges à éviter lors de la phase d'initiation

Mémoriser uniquement les questions d'entretien sans comprendre le contexte

Peu importe la quantité mémorisée, si vous ignorez les liens entre les concepts, une question formulée différemment vous déstabilisera.

Se contenter de suivre des tutoriels vidéo sans pratiquer de manière autonome

Les projets tutoriels ne sont qu'un début. La véritable progression survient lorsque vous structurez par vous-même, cherchez de la documentation, identifiez les problèmes et menez un projet à terme de façon indépendante.

Se précipiter sur les frameworks en négligeant les fondamentaux

Sans bases solides, un framework n'est qu'un manuel d'utilisation d'API. Au moindre changement de contexte, vous serez bloqué.

Courir après les dernières tendances

Aujourd'hui tel framework est à la mode, demain telle bibliothèque. Suivre l'actualité n'est pas un problème en soi, mais sans fondations solides, vous vous éparpillerez de plus en plus.

3. Quelle est la compétence la plus importante pour apprendre le front-end ?

Ce n'est ni la « mémoire », ni « savoir utiliser une bibliothèque », mais plutôt les capacités suivantes :

Décomposer un problème
Savoir localiser une erreur
Savoir chercher de l'information et la vérifier
Comprendre le fonctionnement du navigateur et du langage
Écrire du code maintenable
Envisager la page du point de vue de l'expérience utilisateur

Transformer des connaissances éparses en un système cohérent

Les technologies web front-end évoluent très vite, mais leur fil conducteur reste en réalité très clair :

Décrire la structure du contenu avec HTML
Contrôler l'apparence et le style avec CSS
Gérer la logique et les interactions avec JavaScript
Transformer le code en interface via le navigateur
Échanger des ressources et des données avec le serveur via HTTP
Organiser des projets complexes grâce à l'ingénierie
Améliorer l'efficacité de développement et la maintenabilité grâce aux frameworks
Réussir véritablement un projet grâce à l'optimisation des performances, la sensibilisation à la sécurité et les bonnes pratiques

En programmation, le pire est d'avancer « comme un aveugle qui touche un éléphant ». Ce qui fait vraiment la différence, c'est de construire votre proprecarte mentale globale des connaissances :

Savoir où chaque notion se situe dans l'ensemble du système, quel problème elle résout et comment elle se connecte aux connaissances en amont et en aval.

Si l'on compare le front-end à un immeuble, les connaissances fondamentales sont les fondations, les frameworks la structure intermédiaire, l'ingénierie et l'optimisation des performances le système porteur, et la véritable pratique en projet est l'expérience quotidienne une fois que vous y habitez.

Consolidez d'abord les fondations avant de construire les étages, ainsi la structure risque moins de s'effondrer à mi-chemin.