> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/frontend/01-ji-chu-00-qian-duan-chang-jian-wen-ti-01.md).

# 基础 00 前端常见问题01

### SPA 和 MPA 的区别？

SPA（single-page application）单页应用，是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间跳转，所有必要的代码（HTML、JavaScript 和 CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源。

MPA（MultiPage-page application）多页应用，即每个页面都是一个主页面，都是独立的。每次访问另一个页面都需要重新加载 html、css、js 等文件。

SPA 实现 SEO 的三种方式：

* SSR 服务端渲染：将组件或页面通过服务器生成 html，再返回给浏览器，如，nuxt.js。
* **静态化：** 目前主流的静态化主要有两种：一种是通过程序将动态页面抓取并保存为静态页面，实际存在于服务器的硬盘中；另外一种是通过 Web 服务器的 URL Rewrite 的方式，其原理是通过 Web 服务器内部模块按一定规则将外部的 URL 请求转化为内部的文件地址，也就是，把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。
* 使用 Phantomjs 针对爬虫处理：原理是通过 Nginx 配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个 node server，再通过 PhantomJS 来解析完整的 HTML，返回给爬虫。

### SPA 有哪些优缺点？

* **首屏加载慢（最突出问题）**：一次性加载大量 JS、路由、组件、资源，路由、状态管理、框架运行时都会增加初始加载开销。
* **SEO 不友好**：只有一个 HTML 文件，所有页面共用一套标题 / 关键词/描述；初始 HTML 是空壳，内容全靠 JS 渲染。
* **history 模式：浏览器的访问地址是**JS 模拟\*\*的，**服务器上根本没有这个文件**，一刷新就 404，必须后端指定加载哪个 html 文件。
* **hash 模式**：浏览器的访问地址栏带 `#`，观感差，还有锚点冲突、第三方服务不兼容等问题。
* **浏览器前进 / 后退体验问题**：表单输入保留、滚动位置记录、弹窗状态等原生行为需要额外代码兼容。
* 内存泄漏风险更高：页面**不会真正刷新销毁**，长页面、频繁路由切换、第三方插件叠加，极易造成内存持续上涨、页面卡顿。

**优点**：页面切换无刷新，用户体验流畅。

**缺点**：首屏加载慢、SEO 不友好，路由地址和浏览器原生机制有冲突。

### 网站域名分类

#### 按级别和结构分类

* **顶级域名（Top-Level Domain, TLD）**：位于域名最右边的部分，也就是最后一个“点”之后的部分。例如，在 `www.example.com` 中，`.com` 就是顶级域名。
  * **通用顶级域名（gTLD - Generic Top-Level Domain）**：面向全球所有用户开放注册。
    * **传统gTLD**：`.com`（商业机构）、`.net`（网络服务机构）、`.org`（非营利组织）、`.edu`（教育机构，通常限美国）、`.gov`（政府部门，通常限美国）、`.mil`（军事机构，通常限美国）、`.int`（国际组织）。
    * **新gTLD**：2012年后ICANN批准的大量新后缀，极大丰富了选择，如：`.app`, `.shop`, `.xyz`, `.online`, `.ai`, `.io`, `.club` 等上千种。
  * **国家和地区代码顶级域名（ccTLD - Country Code Top-Level Domain）**：代表特定的国家或地区，通常由两个字母组成。
    * `.cn`（中国）、`.us`（美国）、`.uk`（英国）、`.jp`（日本）、`.de`（德国）、`.hk`（香港）、`.tw`（台湾）、`.mo`（澳门）。
    * 许多ccTLD也被广泛用于其字面含义之外的用途，例如：`.io`（英属印度洋领地）常用于科技和初创公司（Input/Output的缩写）、`.ai`（安圭拉）常用于人工智能（Artificial Intelligence）领域、`.tv`（图瓦卢）常用于视频、直播（Television）行业。
* **二级域名（Second-Level Domain, SLD）**：这是用户在注册时**自定义**的主要部分，位于顶级域名的左边。例如，在 `www.example.com` 中，`example` 就是二级域名。在某些ccTLD中，二级域名有其特殊结构。例如，在中国的 `.cn` 域名下，常见有 `.com.cn`、 `.net.cn`、 `.org.cn` 等，这里的 `com`、 `net`、 `org` 实际上是二级域名，而 `.cn` 才是顶级域名。
* **三级域名（Third-Level Domain）**：位于二级域名的左边，通常由域名所有者自行免费设置，用于划分网站的不同部分或服务。
  * `www.example.com` 中的 `www` 就是一个最常见的三级域名，通常代表主网站。
  * `mail.example.com`（用于邮件服务）
  * `blog.example.com`（用于博客）
  * `shop.example.com`（用于在线商店）
  * 也可以设置其他名字，如 `abc.example.com`。

#### 按用途和主题分类

这种分类方式与上述的gTLD紧密相关，用户通过选择不同的后缀来表明网站的主题或性质。

* **商业类**：`.com` (主流)、`.biz`, `.company`, `.shop`, `.store`
* **组织与非营利类**：`.org`, `.ngo`, `.foundation`
* **科技与网络类**：`.net`, `.tech`, `.io`, `.ai`, `.app`
* **信息类**：`.info`
* **个人类**：`.me`, `.name`, `.id`
* **行业特定类**：`.law`, `.medical`, `.edu`, `.gov`, `.mil`
* **地理相关类**：所有ccTLD（如 `.cn`, `.us`）和城市域名（如 `.london`, `.nyc`）

#### 一级域名是什么概念呢？

**严格来说，在官方和技术标准中，并没有“一级域名”这个正式分类。** 通常所说的“一级域名”，其实就是指**顶级域名（TLD）**。

**官方标准术语 vs. 民间说法：**

| 官方和技术标准术语 (Official Terminology)     | 民间/教学常用说法 (Common Parlance) | 以 `www.example.com.cn` 为例 |
| ------------------------------------ | --------------------------- | ------------------------- |
| **顶级域名 (TLD)** (Top-Level Domain)    | **一级域名**                    | `.cn`                     |
| **二级域名 (SLD)** (Second-Level Domain) | **二级域名**                    | `.com` (在 `.cn` 下)        |
| **（主机/）子域名** (Subdomain)             | **三级域名**                    | `example`                 |
| **（主机/）子域名** (Subdomain)             | **四级域名**                    | `www`                     |

在专业的技术文档、ICANN（互联网名称与数字地址分配机构）标准或域名注册商的后台中，都会使用**顶级域名（TLD）、二级域名（SLD）、子域名（Subdomain）** 这套标准术语。