前言

初學前端者，多始於依樣畫葫蘆：記標籤、背屬性、抄組件、跑腳手架。初時或能湊成數頁，然學之愈深，愈覺喫力——觀他人示例，自以為通曉；及至親手撰寫，竟無從下筆；遇 Bug 更茫然無緒。

蓋真正之難，非「寫不出代碼」，實「不解代碼」也。

試自問以下數問：

何以輸入一 URL，頁面即能顯示？
HTML、CSS、JS 於瀏覽器中各經歷何事？
何以有回流與重繪？
何以有時 this 指向甚奇？
何以 Promise.then 先於 setTimeout 執行？
何以 Vue 之 nextTick 能取更新後之 DOM？
何以 React 中 key 不可妄寫？
何以項目一大，構建即慢得令人心煩？

此等問題看似零散，其後實隱藏一整套嚴密之 Web 前端知識體系。前端開發，乃瀏覽器、網絡協議、語言機制、頁面渲染、工程化、框架思想、性能優化等多線共構之工程實踐。

此文旨在助君打破「只見樹木，不見森林」之困局。吾將盡力將前端核心之底層脈絡由淺入深串聯，帶君重新認識真正之前端。

一、前端究竟何為

1. 何謂 Web

Web，本質乃一套基於互聯網進行信息傳遞、資源訪問與交互之系統。用戶藉瀏覽器訪問網頁，瀏覽器向伺服器請求資源，伺服器返回 HTML、CSS、JavaScript、圖片、音視頻等內容，瀏覽器再將此等資源解析並渲染成吾人所見之頁面。

Web 前端體系實圍繞以下六個核心環節展開：

資源定位：藉 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
空值
符号
大整数

引用类型主要是对象：

对象
数组
函数
日期
正则表达式
其他基于对象构建的结构

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

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 里最容易让人困惑的点之一。它不是定义时绑定，而是调用时决定，箭头函数例外。

常见情况：

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

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

8. 原型与原型链

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

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

这就是原型链。

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

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

9. new 做了什么

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

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

所以 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

执行顺序可以概括为：

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

所以通常 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 大致过程

简化理解：

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

现代 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 三次握手

建立连接大致过程：

客户端发送 SYN
服务端返回 SYN + ACK
客户端再回 ACK

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

3. TCP 四次挥手

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

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

4. TCP 如何保证可靠传输

主要靠这些机制：

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

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

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

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

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

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

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

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 解析既毕，依序执行
宜于多数外部脚本

异步

异步下载
下载既成，即刻执行
不保与 HTML 解析之序一致
宜于独立脚本，如统计代码

五、首屏性能何以重要

用户不关心汝用何框架、何状态管理，彼等只关心一事：页面是否迅捷。

首屏性能受诸多因素影响：

HTML 返回之速
CSS 是否阻塞渲染
JS 是否过大
图片是否过重
字体资源是否阻塞
是否合理用缓存
是否行懒加载与资源拆分

前端优化，终皆为令用户更快见内容、更快成交互。

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

一、表单何以重要

真正之网站非仅展示内容，须令用户登录、搜索、留言、下单、上传、筛选、提交。

此等交互，本质上皆不离表单。

二、常见表单元素

input
textarea
select
option
button
label
form

三、input 之常见类型

text
password
email
number
radio
checkbox
file
submit
reset
date

HTML5 予表单大量更具语义之输入类型，此亦利于浏览器原生校验与移动端键盘优化。

四、label 何以甚为重要

label 非仅“写个文字说明”。其可提升可点击区域，增强可访问性。

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

五、表单提交方式

表单常见提交方法：

GET
POST

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

POST 更宜于提交数据。

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

六、前端校验与后端校验

前端校验之意义：

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

然前端校验不能代后端校验。

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

十一、前端性能优化

一、性能优化应优化何物

前端性能一般关注：

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

二、常见优化方向

网络层

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

资源层

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

渲染层

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

代码层

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

三、首屏优化常见手段

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

四、性能分析工具

不能凭感觉优化，须会看数据。

常用工具：

Chrome Performance
Lighthouse
Network 面板
Web Vitals
框架 Devtools

优化非“吾觉如此更快”，而是“吾能证其更快”。

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

一、本地存储如何选

若仅简单存少量字符串配置：

localStorage
sessionStorage

若欲做更复杂之前端数据库能力：

IndexedDB

二、Service Worker 是何物

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

其可做：

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

PWA（渐进式 Web 应用）诸多能力皆赖之。

虽入门阶段不必即刻深入，然知其解决何问题甚有必要。

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

一、前端何以必会 Git

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

其非仅“保存代码”，更重要者：

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

二、常用 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

三、常见分支模型

常见实践中，或有：

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

代码写得再好，若不会协作流程，入团队后亦难真正发挥全部实力。

十四、模块化与工程化

一、何以需模块化

项目小时，一 HTML 引多 JS 文件亦能跑。然项目一大，便会遇：

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

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

二、模块化之发展

前端历史上经历过：

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

今日主流标准是 ES Module。

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

三、何以需构建工具

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

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

四、Webpack 做了何事

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

常见能力：

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

五、常见优化思路

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

六、Babel 是何物

Babel 本质上是一 JavaScript 编译器。其主做一事：

将新语法转换成旧环境亦能运行之代码。

其大致流程：

Parse：将代码解析成 AST
Transform：基于插件修改 AST
Generate：生成新代码

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

七、Vite 何以愈趋流行

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

此亦是何以如今诸多新项目更偏向用 Vite 而非传统 Webpack 脚手架。

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

一、前端何以要学 Node.js

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

因：

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

故前端学 Node.js，不必为写后端，而是为理解与使用工程化生态。

二、npm 是何物

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

常见操作：

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

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

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

三、package.json 里常见内容

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

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

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

一、前端何以有框架

纯原生 JavaScript 当然能写页面，然一旦页面复杂起来，会遇此等问题：

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

故前端框架之核心目标，是：

更高效地组织 UI 与状态。

二、Vue 之核心思想

Vue 是典型之 MVVM 思想实践。

汝可将其理解为：

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

此即是“数据驱动视图”。

三、Vue 之常见能力

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

四、组件化是何物

组件即是一可复用、可组合、职责相对独立之 UI 单元。

譬如：

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

组件化非“将文件拆小”，而是令界面结构与逻辑边界更清晰。

五、生命周期何以重要

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

其重要性在于：

何时请求数据
何时能访问 DOM
何时要解绑事件、清除定时器

此与组件副作用管理密切相关。

六、computed 与 watch

computed

更宜于基于已有状态推导一值，有缓存。

watch

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

诸多时候，能用 computed 就优先用 computed，因其更偏声明式。

七、nextTick 何以常被问

Vue 更新 DOM 是异步批量更新。nextTick 之作用，是令汝在 DOM 更新完成后执行回调。

此解释了何以修改数据后立刻取 DOM，可能取到旧值，而放在 nextTick 里能取到更新后之结果。

八、keep-alive、mixin、Vuex

此等皆是 Vue 生态里常见概念：

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

学框架时，非仅会用 API，更要理解其解决之是何问题。

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

一、React 之核心思想

React 亦是组件化框架，然其更强调：

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

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

二、JSX 是何物

JSX 令汝可在 JavaScript 里写类似 HTML 之语法。

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

三、函数组件与类组件

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

函数组件优势明显：

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

四、Hooks 之意义

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

常见 Hooks：

useState
useEffect
useMemo
useCallback
useRef
useContext
useReducer

五、useEffect 与副作用

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

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

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

六、key 何以重要

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

好之 key 应：

唯一
稳定
不随渲染变化

勿随手用数组下标，尤在列表或增删、重排时，会带来错误复用问题。

七、setState 何以看似有时同步有时异步

此是 React 更新批处理机制带来之表象差异。汝真正应理解者是：

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

八、Fiber 是何物

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

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

汝不必即刻深入源码，然须知：其是 React 性能与并发能力演进之重要基础。

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

一、SPA 是何物

SPA，单页应用。特点是：

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

常见框架项目几皆属 SPA 或混合模式。

二、前端路由原理

前端路由常见两种模式：

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

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

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

三、状态管理何以出现

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

于是才有：

Vuex / Pinia
Redux / Zustand / Jotai 等
Context

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

十九、前端安全

一、XSS

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

常见防御思路：

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

二、CSRF

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

常见防御思路：

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

三、前端何以亦要懂安全

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

汝不必一开始就成为安全专家，然至少要有此等意识：

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

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

一、移动端何以不能照搬 PC

手机屏幕小、像素密度高、交互方式不同、网络环境更复杂，故移动端页面非将 PC 页面缩小即可。

二、常见适配思路

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

三、viewport 之作用

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

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

四、移动端常见注意点

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

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

诸多初学者最大之问题非不努力，而是路线混乱。

一、一相对合理之学习顺序

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

HTML
層疊樣式表
頁面佈局
盒模型、定位、Flex、Grid
語義化、表單、響應式

第二階段：JavaScript 核心

變量、類型、作用域
函數、對象、數組
原型、this、閉包
DOM、事件
異步、Promise、事件循環

第三階段：瀏覽器與網絡

HTTP/HTTPS
緩存
跨域
URL 至頁面渲染
重排重繪
瀏覽器調試工具

第四階段：工程化

Git
npm
Node.js 基礎
模塊化
Babel
打包工具

第五階段：框架

Vue 或 React 擇一深入
組件化
路由
狀態管理
項目結構與規範

第六階段：進階能力

性能優化
安全基礎
SSR / SSG
測試
TypeScript
設計模式與工程實踐

二、入門階段當避之坑

徒背面試題，不解上下文

記誦雖多，若不知其關聯，問法稍易，則思緒紛亂。

僅隨視頻敲碼，不能獨立為之

教程項目僅為開端。真成長在於自搭結構、查閱資料、定位問題、獨立完成之過程。

初學即沉迷框架，忽略基礎

基礎不固，框架僅為 API 使用手冊。場景稍變，便無所措手足。

過度追新

今日此框架火，明日彼庫熱，追熱點本無過，然無底層根基，愈追愈散。

三、學前端最要之能力為何

非「記憶力」，亦非「會否調庫」，乃此數事：

能析問題
能定錯誤
能查資料並驗證
能解瀏覽器與語言運行機制
能撰可維護代碼
能立用戶體驗視角觀頁面

須將散落知識煉為體系

Web 前端技術發展甚速，然其核心脈絡實則清晰：

以 HTML 述內容結構
以 CSS 控樣式表現
以 JavaScript 理邏輯與交互
藉瀏覽器化代碼為界面
藉 HTTP 與伺服器交換資源數據
藉工程化組織複雜項目
藉框架提開發效率與可維護性
藉性能優化、安全意識與規範實踐，將項目真正做好

學習編程，最忌「盲人摸象」。真拉開差距者，乃建立一張屬汝之全局知識腦圖：

知每知識點於體系中所處之位，知其所解何題，知其與上下游知識如何連接。

若喻前端為一樓，則基礎知識為地基，框架為中層結構，工程化與性能優化為承重系統，真項目實踐乃汝入住後之日常使用體驗。

先固地基，再向上建，方不易半途散架。