前言

很多人初學前端，往往是從「依葫蘆畫瓢」開始的：記標籤、背屬性、抄組件、跑腳手架。剛開始似乎也能湊出幾個頁面，可越往後學越覺得吃力——看別人的示例覺得都懂，讓自己從頭寫卻無從下手，遇到 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

引用类型主要是对象：

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

常见情况：

普通函数调用：非严格模式下指向 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 解析完成后按顺序执行
适合大多数外部脚本

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 编译器。它主要做一件事：

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

它的大致流程：

Parse：把代码解析成 AST
Transform：基于插件修改 AST
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
設計模式與工程實踐

2. 入門階段要避免的坑

只背面試題，不理解上下文

背得再多，如果不知道它們之間的連接，換個問法就會亂。

只會跟著影片敲，不會自己獨立做

教學專案只是開始。真正成長發生在你自己搭結構、查資料、定位問題、獨立完成的過程裡。

一上來就沉迷框架，忽略基礎

基礎不牢，框架只是 API 使用說明書。稍微換個場景就不會了。

過度追新

今天這個框架火、明天那個庫火，追熱點本身沒錯，但沒有底層基礎，越追越散。

3. 學前端最重要的能力是什麼

不是「記憶力」，也不是「會不會調庫」，而是這幾件事：

把問題拆開
能定位錯誤
能查資料並驗證
能理解瀏覽器和語言執行機制
能寫出可維護程式碼
能站在使用者體驗角度看頁面

要把散落的知識煉成體系

Web 前端技術發展非常快，但它的核心脈絡其實一直很清晰：

用 HTML 描述內容結構
用 CSS 控制樣式表現
用 JavaScript 處理邏輯和互動
透過瀏覽器把程式碼變成介面
透過 HTTP 與伺服器交換資源和資料
透過工程化把複雜專案組織起來
透過框架提升開發效率和可維護性
透過效能最佳化、安全意識和規範實踐，把專案真正做好

學習程式設計，最忌諱「盲人摸象」。真正拉開差距的，是建立起一張屬於你的全局知識腦圖：

知道每個知識點在整個體系裡處在什麼位置，知道它解決什麼問題，知道它和上下游知識如何連接。

如果把前端比作一棟樓，那麼基礎知識是地基，框架是中層結構，工程化和效能最佳化是承重系統，真正的專案實踐才是你住進去之後的日常使用體驗。

先把地基打穩，再往上蓋，才不容易半路散架。