前端常见问题

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. 民间说法：

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