浏览器面试题

本文最后更新于 2025年10月31日中午

前端路由

https://juejin.cn/post/6844903890278694919

SPA

定义

SPA（Single Page Application）单页应用的核心特点是：

整个网站只有一个 HTML 文件（通常是 index.html）
前端路由（如 React Router、Vue Router）控制页面切换
页面切换时不会重新请求 HTML，而是通过 JavaScript 动态更新视图
数据请求走 API（AJAX / Fetch / Axios），不会整页刷新

👉 例如：当访问 /home → /profile，浏览器地址变化，但页面不重新加载，这就是 SPA。

框架

React 和 Vue 本身只是前端视图库/框架，它们本身并不强制是 SPA。关键在于的方式。

✅ 如果这样用，是 SPA：

create-react-app、vite create vue 默认会生成 SPA；
使用 React Router 或 Vue Router；
页面切换不重新加载；

❌ 但如果这样用，就不是纯粹的 SPA，而是多页应用（MPA）或混合应用：

使用 Next.js（React）或 Nuxt.js（Vue）；
每个页面对应一个独立 HTML；
服务端渲染（SSR）或静态生成（SSG）；

对比

特性	SPA (单页应用)	MPA (多页应用)	混合架构
页面加载	资源首次全加载，后续无刷新	每次页面跳转都重加载	按需加载，部分页不刷新
路由	客户端路由	服务器端路由	混合路由
SEO	相对复杂	原生支持良好	灵活可控
开发体验	接近桌面应用	传统Web开发	两者结合

示例

// 1️⃣典型的 SPA 使用 React Router
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

// 2️⃣传统 MPA - 每个页面是独立的 React 应用
// 通过不同的 HTML 文件分别加载

// home.jsx
function HomePage() {
  return <div>首页内容</div>;
}

// about.jsx  
function AboutPage() {
  return <div>关于我们</div>;
}

// 3️⃣ 微前端
// 主应用
const App = () => (
  <div>
    <Header />
    <MicroFrontend 
      host="https://app1.example.com" 
      name="app1" 
    />
    <MicroFrontend
      host="https://app2.example.com"
      name="app2"
    />
  </div>
);

// 4️⃣ SSR/SSG
// Next.js 页面 - 服务端渲染
export async function getServerSideProps() {
  const data = await fetchAPI();
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data}</div>;
}

// 5️⃣ Islands 架构
// 静态内容 + 交互式"岛屿"
function ProductPage() {
  return (
    <div>
      {/* 静态内容 */}
      <h1>产品标题</h1>
      <p>产品描述</p>
      
      {/* 交互式岛屿 */}
      <ProductGallery client:load />
      <AddToCart client:idle />
    </div>
  );
}

场景

适合 SPA 的场景：

✅ 后台管理系统
✅ 仪表板应用
✅ 需要丰富交互的 Web 应用
✅ 对 SEO 要求不高的应用

适合 MPA 的场景：

✅ 内容型网站（博客、新闻站）
✅ 电商网站
✅ 对 SEO 要求高的应用
✅ 渐进增强的项目

适合混合架构的场景：

✅ 大型企业应用
✅ 需要良好 SEO 的复杂交互应用
✅ 微前端项目
✅ 需要最佳首屏性能的应用

路由方式

参考：

通过一定的机制，监听用户的行为动作，从而做出对应的变化（渲染不同的页面组件）。

hash 模式
- 不需要服务器配置，兼容性好，通过监听 hashchange 事件来处理前端业务逻辑
- 改变路由通过 window.location.hash 属性获取和设置 hash 值
- 监听路由 window.addEventListener('hashchange',function(e){ /* 监听改变 */})
history 模式
- 需要服务器做简单的配置，通过监听 pushState 和 replaceState 事件来处理前端业务逻辑
- 改变路由 history.pushState(state, title, path)
- 监听路由 window.addEventListener('popstate',function(e){ /* 监听改变 */})

渲染方式

构建 (Build)：指在代码部署前，通过工具（如 Webpack/Vite）将源代码转换为生产环境文件的过程。这可能包括打包、压缩、编译（如 Svelte/TS）、以及预生成 HTML
渲染 (Rendering)：指将 React/Vue 等组件代码转换成用户最终看到的实际 HTML 内容的过程。这个过程可以发生在不同时机和不同地点

CSR（Client Side Rendering，客户端渲染）

构建过程

工具将所有组件代码打包成一系列的 JS 文件（如 app.js, vendor.js）。

渲染过程

用户请求一个几乎为空的 HTML 文件和一个巨大的 JS 包。
浏览器下载并解析 JS。
JS（如 React）运行，接管页面，开始渲染组件。
通常需要再发起 API 请求获取数据，然后重新渲染，最终填充内容。

优势

前后端分离，开发效率高，架构简单（纯前端负责 UI，后端只提供 API）。
首屏后交互体验极佳，页面切换快，用户交互体验好。
服务器压力小。
前端工程化生态成熟（React、Vue、SPA）。

劣势

首屏渲染慢（FCP 慢）。
SEO 不友好（爬虫可能看不到完整 DOM）。

适用场景

后台管理系统（SEO 无要求）。
注重交互体验的 SPA 应用。

SSR（Server Side Rendering，服务端渲染）

构建过程

构建出可在 Node.js 服务器上运行的组件代码。

渲染过程

用户请求一个页面。
服务器即时运行 React 等框架，请求数据，并将组件渲染成完整的 HTML 字符串。
服务器将这个“注入了数据和内容”的 HTML 发送给浏览器。用户立即看到内容。
浏览器同时下载 JS 包，然后“接管”HTML（ hydration - 注水），使其变得可交互。

优势

首屏渲染快（直接拿到 HTML）。
SEO 友好（爬虫可直接抓 HTML）。

劣势

服务端压力大（每次请求都要渲染）。
构建部署复杂度高。

适用场景

电商、新闻门户等需要 SEO 的网站。
追求首屏速度的页面。

SSG（Static Site Generation，静态站点生成）

构建过程

在构建时，预先生成所有页面的静态 HTML 文件。每个页面都会提前调用数据接口，渲染好 HTML。

渲染过程

用户请求一个页面。
CDN 或服务器直接返回预先生成好的 HTML 文件。速度极快。
同样会进行注水，变为可交互的 SPA。

优势

性能极佳（直接从 CDN 拿静态文件）。
安全性高（没有动态服务端逻辑）。
SEO 友好，且服务器压力为零，成本低（静态文件好缓存）。

劣势

内容不灵活，无法渲染用户相关动态内容（必须等构建完成才能更新）。
数据变化时需重新构建整个站点。
构建速度慢（大站点可能要几十分钟）。

适用场景

博客、文档站、营销落地页。
内容更新频率低的网站。

ISR（Incremental Static Regeneration，增量静态生成）

构建过程

类似 SSG，先构建关键页面。其他页面可以按需生成或延迟生成。

渲染过程

用户请求一个已生成的页面，直接返回静态 HTML（极快）。
用户请求一个未生成的页面，服务器首次渲染它（SSR），并缓存为静态文件供后续使用。
每个页面可以设置一个 revalidate 时间（比如 10 秒）。超过这个时间后，下一个用户会收到旧的静态页面，同时服务器在后台触发一次重新构建和缓存，更新该页面。

优势

结合了 SSG 的快和 SSR 的新鲜。
不需要每次都全量构建。

劣势

实现和配置更复杂，需要框架支持（主要是 Next.js）。
数据非完全实时（有最长延迟时间）。

适用场景

内容更新较频繁的大型内容站点（电商目录、资讯门户）。

归纳对比

方式	构建阶段	首屏性能	SEO	服务端压力	适用场景
CSR	客户端执行	慢	差	低	后台系统、SPA
SSR	服务端每次渲染	快	好	高	电商、新闻门户
SSG	构建时生成静态文件	非常快	好	无	博客、文档
ISR	SSG + SSR	快且新鲜	好	中等	内容频繁更新的大型站点

输入 URL 按下回车发生什么

参考

https://juejin.cn/post/6935232082482298911

流程

输入网址并解析
TCP 三次握手建立连接
浏览器发送 HTTP 请求报文
服务器处理 HTTP 请求报文并返回 HTTP 响应报文
浏览器处理 HTTP 响应报文
浏览器渲染页面
- 解析 HTML 文件，构建 DOM Tree；并行解析 CSS 文件，构建 CSSOM Tree
- 等 DOM Tree 和 CSSOM Tree 都完成后，根据两者开始构建 Render Tree
- 布局计算 Render Tree 中每个节点的尺寸、位置等信息
- 绘制 Render Tree 中每个节点的像素信息并渲染到屏幕
- 将默认图层和复合图层交给 GPU 进程进行合成，最后显示出页面
TCP 四次挥手断开连接

总结

https://juejin.cn/post/6935232082482298911#heading-49

运行环境 > 浏览器

#面试题 #浏览器

浏览器面试题

https://xuekeven.github.io/2021/09/08/浏览器面试题/

作者

Keven

发布于

2021年9月8日

更新于

2025年10月31日

许可协议

JavaScript之String方法属性上一篇

动态规划和贪心下一篇