一、CSS 篇

1. CSS 盒模型

CSS 盒模型可以把页面中的每个元素理解成一个盒子，它由四部分组成：

content 内容
padding 内边距
border 边框
margin 外边距

盒模型分为两种：

/* 标准盒模型 */
box-sizing: content-box;

/* IE 盒模型，也叫怪异盒模型 */
box-sizing: border-box;

区别是：

content-box:
元素设置的 width / height 只包含 content

border-box:
元素设置的 width / height 包含 content + padding + border

实际开发中更常用：

* {
  box-sizing: border-box;
}

因为这样布局更直观，写响应式页面时也更容易控制宽度。

---

2. CSS 选择器优先级

优先级大致如下：

!important > 行内样式 > ID 选择器 > 类 / 属性 / 伪类 > 标签选择器 > 通配符

常见优先级：

/* 0,0,1 */
div {}

/* 0,1,0 */
.box {}

/* 1,0,0 */
#app {}

/* 行内样式优先级更高 */
<div style="color: red;"></div>

现代 CSS 中还要补充两个选择器：

:where(.card .title) {
  color: red;
}

:where() 的优先级永远是 0，适合写基础样式，方便后续覆盖。

:is(.card, .panel) h2 {
  font-size: 20px;
}

:is() 的优先级取参数中最高的那个选择器。

---

3. 隐藏元素的方式有哪些？

常见方式：

display: none;
visibility: hidden;
opacity: 0;
position: absolute;
left: -9999px;
clip-path: inset(100%);

区别：

方式	是否占位	是否触发点击	是否影响布局
display: none	不占位	否	会影响布局
visibility: hidden	占位	否	不改变布局
opacity: 0	占位	是	不改变布局
移出屏幕	可能占位	可能	视情况而定

面试常问：

display: none 会触发回流和重绘；
visibility: hidden 通常只触发重绘；
opacity: 0 通常可以走合成层，性能更好，但元素仍然能响应事件。

---

4. px、em、rem、vw、vh 的区别

px：绝对单位，固定像素
em：相对于当前元素或父元素字体大小
rem：相对于 html 根元素字体大小
vw：视口宽度的 1%
vh：视口高度的 1%

示例：

html {
  font-size: 16px;
}

.box {
  font-size: 2rem; /* 32px */
}

移动端适配中，常见做法是：

html {
  font-size: calc(100vw / 37.5);
}

不过现在更推荐结合：

clamp()
min()
max()

例如：

.title {
  font-size: clamp(18px, 4vw, 32px);
}

这样可以实现更自然的响应式字号。

---

5. 重绘和重排

重排，也叫回流，指浏览器重新计算元素的几何信息，例如宽高、位置。

会触发重排的操作：

修改 width / height
修改 margin / padding
修改 display
添加或删除 DOM
读取 offsetWidth / offsetHeight / getBoundingClientRect()

重绘是元素几何信息不变，只是样式变了，例如：

color
background-color
visibility
box-shadow

性能优化思路：

1. 批量修改 DOM
2. 使用 transform 代替 top / left
3. 使用 opacity 做动画
4. 避免频繁读取布局信息
5. 使用 content-visibility 优化长页面渲染

content-visibility 已经进入 Baseline 2025，可以让浏览器跳过屏幕外内容的渲染，适合长列表和复杂页面。(web.dev)

.card-list {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

---

6. 水平垂直居中方式

最常用的是 Flex：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid 更简洁：

.parent {
  display: grid;
  place-items: center;
}

绝对定位方式：

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

---

7. Flex 和 Grid 的区别

Flex 是一维布局，适合处理一行或一列。

.container {
  display: flex;
}

Grid 是二维布局，适合同时控制行和列。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

面试回答可以这样说：

Flex 更适合组件内部布局，例如导航栏、按钮组、卡片内容排列。
Grid 更适合整体页面布局，例如后台管理系统、瀑布流、仪表盘。

---

8. 现代 CSS 新特性：@scope

@scope 用来限制 CSS 的作用范围，减少样式污染。它已经进入 Baseline 2025。(web.dev)

@scope (.card) {
  h2 {
    color: red;
  }

  p {
    color: #666;
  }
}

它的作用类似“原生 CSS 作用域”，适合组件化场景。

---

9. 现代 CSS 新特性：View Transitions API

View Transitions 可以用更简单的方式实现页面切换动画。它也是 2025 年 Web 平台重点推进的能力之一。(Chrome for Developers)

document.startViewTransition(() => {
  updatePage();
});

CSS 中可以配合：

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
}

在 SPA 中，它可以用来做路由切换动画、列表详情页过渡、主题切换动画等。

---

10. 现代 CSS 新特性：锚点定位 Anchor Positioning

传统 tooltip、popover、dropdown 经常需要 JS 计算位置。Anchor Positioning 的目标是让 CSS 也能根据某个元素定位另一个元素。

示例思路：

.button {
  anchor-name: --btn;
}

.tooltip {
  position-anchor: --btn;
  top: anchor(bottom);
  left: anchor(left);
}

它适合回答这类问题：

如果让你实现 tooltip / popover，你除了 JS 计算位置，还有什么现代 CSS 方案？

---

二、JavaScript 篇

1. var、let、const 的区别

var 有变量提升，函数作用域，可以重复声明
let 有块级作用域，不允许重复声明
const 有块级作用域，声明时必须赋值，不能重新赋值

注意：

const obj = {
  name: '前端'
};

obj.name = 'Vue'; // 可以
obj = {}; // 不可以

const 限制的是变量绑定关系，不是对象本身不可变。

---

2. 原型和原型链

每个函数都有 prototype，每个对象都有隐式原型 __proto__。

function Person(name) {
  this.name = name;
}

Person.prototype.say = function () {
  console.log(this.name);
};

const p = new Person('Tom');
p.say();

查找属性时，会先从对象自身查找，如果找不到，就沿着原型链继续向上查找，直到 Object.prototype，最后是 null。

---

3. this 指向

this 的指向取决于调用方式：

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

示例：

const obj = {
  name: 'Vue',
  say() {
    console.log(this.name);
  }
};

obj.say(); // Vue

---

4. 闭包

闭包指的是函数可以访问其外部作用域中的变量，即使外部函数已经执行完。

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

闭包常见应用：

1. 数据私有化
2. 防抖节流
3. 函数柯里化
4. 保存函数执行上下文

可能的问题：

闭包会导致变量一直被引用，无法被垃圾回收，使用不当可能造成内存泄漏。

---

5. 防抖和节流

防抖：事件触发后等待一段时间再执行，如果期间再次触发，则重新计时。

function debounce(fn, delay = 300) {
  let timer = null;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

适用场景：

搜索框输入
窗口 resize
表单校验

节流：一段时间内只执行一次。

function throttle(fn, delay = 300) {
  let last = 0;

  return function (...args) {
    const now = Date.now();

    if (now - last >= delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}

适用场景：

滚动加载
按钮防连点
拖拽移动

---

6. Promise

Promise 有三种状态：

pending
fulfilled
rejected

状态一旦改变，就不可逆。

const p = new Promise((resolve, reject) => {
  resolve('success');
});

p.then(res => {
  console.log(res);
});

常见静态方法：

Promise.resolve()
Promise.reject()
Promise.all()
Promise.race()
Promise.allSettled()
Promise.any()

---

7. async / await 原理

async / await 是 Promise 的语法糖，本质上是 Generator + 自动执行器的封装。

async function getData() {
  try {
    const res = await fetch('/api/list');
    return await res.json();
  } catch (err) {
    console.error(err);
  }
}

面试回答：

await 后面的代码会被放到微任务队列中执行。
async 函数始终返回一个 Promise。

---

8. 事件循环 Event Loop

JS 是单线程的，但浏览器提供了异步能力。

执行顺序：

1. 执行同步代码
2. 执行当前宏任务中的所有微任务
3. 执行下一个宏任务
4. 重复以上过程

宏任务：

script
setTimeout
setInterval
setImmediate
I/O
UI rendering

微任务：

Promise.then
MutationObserver
queueMicrotask
process.nextTick，Node.js 中

经典题：

console.log(1);

setTimeout(() => {
  console.log(2);
});

Promise.resolve().then(() => {
  console.log(3);
});

console.log(4);

输出：

1
4
3
2

---

9. ES2025 新特性：Promise.try

Promise.try() 是 ES2025 中进入标准的新能力，它可以把同步函数、异步函数、抛错函数统一包装成 Promise。MDN 标注它从 2025 年 1 月开始进入 Baseline Newly Available。(MDN Web Docs)

以前可能这样写：

Promise.resolve()
  .then(() => maybeSyncFn())
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });

现在可以这样：

Promise.try(() => maybeSyncFn())
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });

面试可以这样答：

Promise.try 的价值是统一同步异常和异步异常的处理，减少手动 try/catch 和 Promise.resolve().then() 的样板代码。

---

10. ES2025 新特性：RegExp.escape

RegExp.escape() 用来转义用户输入，让字符串可以安全地拼进正则表达式。它从 2025 年 5 月开始进入 Baseline Newly Available。(MDN Web Docs)

问题场景：

const keyword = 'a+b';
const reg = new RegExp(keyword);

这里的 + 会被当成正则语法。

更安全的写法：

const keyword = 'a+b';
const reg = new RegExp(RegExp.escape(keyword));

console.log(reg.test('a+b')); // true

面试回答：

当搜索关键词来自用户输入时，RegExp.escape 可以避免特殊字符被当作正则语法解析，减少匹配错误和潜在安全问题。

---

11. ES2025 新特性：Set 方法增强

ES2025 中新增了一批 Set 集合操作方法，TC39 已将相关提案列入 2025 finished proposals。(GitHub)

常见方法包括：

const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);

a.union(b);              // 并集 Set {1,2,3,4,5}
a.intersection(b);       // 交集 Set {3}
a.difference(b);         // 差集 Set {1,2}
a.symmetricDifference(b);// 对称差集 Set {1,2,4,5}
a.isSubsetOf(b);         // 是否是子集
a.isSupersetOf(b);       // 是否是超集
a.isDisjointFrom(b);     // 是否无交集

以前我们经常手写：

const intersection = new Set([...a].filter(x => b.has(x)));

现在可以直接使用原生 API。

应用场景：

权限判断
标签筛选
菜单交集
角色资源匹配

---

12. ES2025 新特性：Iterator Helpers

Iterator Helpers 让迭代器可以像数组一样链式调用：

function* nums() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
}

const result = nums()
  .filter(n => n % 2 === 0)
  .map(n => n * 10)
  .toArray();

console.log(result); // [20, 40]

它的优势是：

1. 惰性计算
2. 适合大数据流
3. 不需要中间数组

和数组方法的区别：

数组 map / filter 会立即生成新数组；
Iterator Helpers 可以边取边算，更适合流式数据。

---

13. ES2025 新特性：Import Attributes 和 JSON Modules

ES2025 标准中还包含 Import Attributes 和 JSON Modules，ECMAScript 2025 是 2025 年 6 月发布的第 16 版语言规范。(Ecma International)

示例：

import data from './data.json' with { type: 'json' };

console.log(data);

它让 JSON 模块导入更加标准化，也让运行时知道导入资源的类型。

---

三、Vue 篇

1. Vue2 和 Vue3 的区别

常见区别：

Vue2 使用 Object.defineProperty 实现响应式
Vue3 使用 Proxy 实现响应式

Vue2 使用 Options API
Vue3 推荐 Composition API

Vue3 支持 Fragment、Teleport、Suspense
Vue3 Tree-shaking 更好
Vue3 TypeScript 支持更好
Vue3 性能更好

Vue3 响应式示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

---

2. Vue3 响应式原理

Vue3 使用 Proxy 代理对象，通过 get 收集依赖，通过 set 触发更新。

简化版：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key);
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key);
      return true;
    }
  });
}

相比 Vue2：

Proxy 可以监听对象新增属性和删除属性；
Proxy 可以监听数组索引和 length 变化；
Object.defineProperty 需要递归劫持对象属性。

---

3. ref 和 reactive 的区别

const count = ref(0);

const state = reactive({
  name: 'Vue'
});

区别：

ref 适合基本类型，也可以包对象
reactive 适合对象、数组、Map、Set 等复杂数据
ref 在 JS 中访问需要 .value
reactive 解构会丢失响应式，需要 toRefs

示例：

const state = reactive({
  name: 'Vue',
  age: 3
});

const { name, age } = toRefs(state);

---

4. computed 和 watch 的区别

computed 是计算属性，有缓存，依赖变化才会重新计算。

const fullName = computed(() => {
  return firstName.value + lastName.value;
});

watch 用来监听数据变化并执行副作用。

watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal);
});

区别：

computed 适合根据已有数据计算新数据；
watch 适合监听变化后执行异步请求、DOM 操作、缓存更新等副作用。

---

5. Vue 的 nextTick

Vue 更新 DOM 是异步的，数据变化后不会立刻更新真实 DOM。

count.value++;

await nextTick();

console.log(document.querySelector('.count').textContent);

nextTick 的作用：

等待下一次 DOM 更新完成后再执行回调。

---

6. Vue3 生命周期

Composition API 中常见生命周期：

onBeforeMount(() => {});
onMounted(() => {});
onBeforeUpdate(() => {});
onUpdated(() => {});
onBeforeUnmount(() => {});
onUnmounted(() => {});

和 Options API 对应关系：

beforeCreate / created：setup 阶段
mounted：onMounted
updated：onUpdated
beforeUnmount：onBeforeUnmount
unmounted：onUnmounted

---

7. Vue3 组件通信方式

常见方式：

props / emits
v-model
provide / inject
ref / defineExpose
Pinia
事件总线，Vue3 中不推荐

父传子：

<Child :title="title" />

子传父：

const emit = defineEmits(['change']);

emit('change', value);

暴露子组件方法：

defineExpose({
  open
});

---

8. Vue 3.5 新特性：响应式 Props 解构

Vue 3.5 对响应式系统做了优化，并带来了响应式 Props 解构等改进。官方发布说明中提到，Vue 3.5 对响应式系统进行了重构，内存占用显著降低，并优化了大型深层响应式数组的追踪性能。(blog.vuejs.org)

以前解构 props 容易丢失响应式：

const props = defineProps({
  count: Number
});

const { count } = props;

Vue 3.5 之后，编译器可以让这种写法保持响应式：

<script setup>
const { count = 0 } = defineProps({
  count: Number
});
</script>

面试回答：

Vue 3.5 的响应式 Props 解构减少了 withDefaults 和 props.xxx 的样板代码，让 script setup 写法更自然。

---

9. Vue 3.5 新特性：useTemplateRef

以前模板 ref 经常这样写：

<script setup>
const inputRef = ref(null);
</script>

<template>
  <input ref="inputRef" />
</template>

Vue 3.5 提供了更明确的写法：

<script setup>
const inputRef = useTemplateRef('input');
</script>

<template>
  <input ref="input" />
</template>

优势：

1. 语义更清晰
2. TypeScript 推导更友好
3. 多 ref 场景更容易维护

---

10. Vue 3.5 新特性：onWatcherCleanup

onWatcherCleanup 可以在 watch 副作用失效时做清理。

watch(id, async newId => {
  const controller = new AbortController();

  onWatcherCleanup(() => {
    controller.abort();
  });

  const res = await fetch(`/api/user/${newId}`, {
    signal: controller.signal
  });
});

适用场景：

取消过期请求
清除定时器
清理事件监听
避免竞态问题

---

11. Vue 3.5 新特性：懒激活 Lazy Hydration

Vue 3.5 支持异步组件控制何时进行 hydration，官方文档说明，在 SSR 场景中，异步组件可以通过 hydration strategy 控制何时激活。(vuejs.org)

示例：

import {
  defineAsyncComponent,
  hydrateOnVisible
} from 'vue';

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
});

常见策略：

hydrateOnIdle：浏览器空闲时激活
hydrateOnVisible：组件进入视口时激活
hydrateOnMediaQuery：匹配媒体查询时激活
hydrateOnInteraction：用户交互时激活

面试回答：

Lazy Hydration 的核心价值是减少首屏 JS 执行压力，尤其适合 SSR / SSG 项目中的非首屏组件。

---

12. Pinia 和 Vuex 的区别

Pinia 是 Vue 官方推荐的新一代状态管理库。

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Tom'
  }),
  actions: {
    setName(name) {
      this.name = name;
    }
  }
});

区别：

Pinia 更轻量
Pinia 没有 mutation
Pinia TypeScript 支持更好
Pinia 支持组合式 API
Pinia 模块化更自然

---

13. Nuxt 4 值得关注什么？

Nuxt 4 于 2025 年 7 月正式发布，官方称它是一次偏向稳定性和开发体验的主版本升级，重点包括更好的项目组织、数据获取和类型安全。(Nuxt)

面试可以关注：

1. Nuxt 是基于 Vue 的全栈框架
2. 支持 SSR / SSG / ISR
3. 自动路由
4. 自动导入
5. 服务端 API
6. 更好的 SEO
7. Nuxt 4 改进了目录结构、数据获取和类型体验

适合回答：

如果项目需要 SEO、首屏性能、服务端渲染、全栈开发能力，可以考虑 Nuxt。

---

四、TypeScript 篇

1. TypeScript 的优势

静态类型检查
更好的 IDE 提示
更利于大型项目维护
更容易重构
减少运行时错误

示例：

function add(a: number, b: number): number {
  return a + b;
}

---

2. interface 和 type 的区别

interface User {
  name: string;
  age: number;
}

type UserType = {
  name: string;
  age: number;
};

区别：

interface 可以重复声明并自动合并
type 不能重复声明
type 可以定义联合类型、交叉类型、条件类型
interface 更适合对象结构
type 更适合复杂类型表达

---

3. 泛型

泛型可以让类型像参数一样传递。

function identity<T>(value: T): T {
  return value;
}

identity<string>('hello');
identity<number>(123);

常用于：

封装请求函数
封装组件 props
封装 hooks
封装工具函数

---

4. TypeScript 5.8：erasableSyntaxOnly

TypeScript 5.8 引入了 --erasableSyntaxOnly，用来约束代码只使用可以被“擦除”的类型语法，避免 enum、namespace、参数属性等需要额外转换的语法。(typescriptlang.org)

简单理解：

如果你的运行时或构建工具只是擦除类型，而不是完整编译 TS，那么这个选项可以帮助你避免写出不能直接擦除的 TypeScript 语法。

不推荐：

enum Direction {
  Up,
  Down
}

更推荐：

const Direction = {
  Up: 'UP',
  Down: 'DOWN'
} as const;

---

5. TypeScript 5.9：import defer

TypeScript 5.9 支持 ECMAScript 的 import defer 提案，用于延迟模块求值。官方说明它允许导入模块但不立即执行模块及其依赖的副作用。(typescriptlang.org)

示例：

import defer * as feature from './feature.js';

它适合：

延迟加载副作用较重的模块
优化首屏启动
控制模块执行时机

注意：

import defer 仍属于较新的能力，真实项目中要关注运行时和打包工具支持情况。

---

五、工程化篇

1. Vite 为什么快？

Vite 快主要因为：

开发环境基于原生 ESM
按需编译
依赖预构建使用 esbuild
生产环境使用 Rollup
HMR 更新粒度更细

传统 Webpack 开发启动时通常要先打包整个项目，而 Vite 是浏览器请求哪个模块，就编译哪个模块。

---

2. Vite 7 有什么变化？

Vite 7 于 2025 年 6 月发布，官方说明 Vite 7 要求 Node.js 20.19+ 或 22.12+，并且放弃了 Node.js 18，因为 Node 18 已在 2025 年 4 月结束生命周期。(vitejs)

面试可以回答：

Vite 7 更强调现代运行时和 ESM-only 生态。
如果项目升级 Vite 7，需要先检查 Node 版本、插件兼容性和 CI/CD 环境。

另外，Vite 7 的默认浏览器目标也迁移到更现代的 Baseline 兼容策略，这意味着前端工程化开始越来越依赖 Web Platform Baseline 来判断特性可用性。(vitejs)

---

3. 什么是 Web Platform Baseline？

Baseline 是 Web 平台提出的一套特性可用性标准，用来告诉开发者哪些浏览器能力已经可以比较放心地使用。web.dev 的 Baseline 2025 页面列出了 2025 年进入 Baseline 的 HTML、CSS、JS 等特性。(web.dev)

简单理解：

以前我们经常问：这个 CSS / JS 特性兼容吗？
现在可以看：它是不是 Baseline Newly Available 或 Baseline Widely Available。

面试回答：

Baseline 可以帮助团队制定浏览器兼容策略，减少单纯依赖 caniuse 或经验判断的成本。

---

4. 前端性能优化

常见方向：

资源体积优化
首屏加载优化
渲染性能优化
缓存优化
网络优化
代码执行优化

具体手段：

1. 路由懒加载
2. 组件懒加载
3. 图片懒加载
4. 使用 WebP / AVIF
5. 使用 CDN
6. Tree Shaking
7. 代码分包
8. 使用 HTTP 缓存
9. 减少主线程长任务
10. 使用 content-visibility
11. SSR / SSG
12. Lazy Hydration

现代回答可以加一句：

2025 之后，性能优化不只是减少包体积，还包括减少 hydration 成本、减少主线程阻塞、利用浏览器原生能力优化渲染。

---

5. 前端安全

常见安全问题：

XSS
CSRF
点击劫持
中间人攻击
依赖供应链风险
敏感信息泄露

XSS 防护：

1. 不直接使用 innerHTML
2. 对用户输入进行转义
3. 使用 CSP
4. Cookie 设置 HttpOnly
5. 框架模板默认转义

CSRF 防护：

1. SameSite Cookie
2. CSRF Token
3. 验证 Referer / Origin
4. 重要操作使用二次校验

---

六、综合面试题

1. 输入 URL 到页面渲染发生了什么？

大致流程：

1. URL 解析
2. DNS 解析
3. TCP 连接
4. TLS 握手，HTTPS 场景
5. 发送 HTTP 请求
6. 服务端处理请求并返回响应
7. 浏览器解析 HTML
8. 构建 DOM 树
9. 构建 CSSOM 树
10. 合成 Render Tree
11. Layout 布局
12. Paint 绘制
13. Composite 合成
14. 执行 JS，可能修改 DOM 并触发更新

可以补充：

现代前端项目中，还可能涉及 SSR、CDN、HTTP 缓存、Service Worker、资源预加载、模块加载、hydration 等过程。

---

2. SPA、SSR、SSG 的区别

SPA：单页应用，首次加载后由前端路由切换页面
SSR：服务端渲染，每次请求由服务端生成 HTML
SSG：静态站点生成，构建时生成 HTML

区别：

类型	优点	缺点
SPA	交互体验好，前后端分离清晰	SEO 较弱，首屏可能慢
SSR	SEO 好，首屏快	服务端压力大，架构复杂
SSG	访问快，部署简单	动态内容处理较复杂

---

3. 什么是 Hydration？

Hydration 指的是服务端已经返回 HTML，浏览器加载 JS 后，把静态 HTML “激活”为可交互应用的过程。

SSR 返回的是可见内容；
Hydration 让这些内容绑定事件、恢复状态、变成可交互组件。

问题：

Hydration 会增加首屏 JS 执行成本。

优化：

Lazy Hydration
Partial Hydration
Islands Architecture
Server Components
减少非必要客户端组件

---

七、2026 前端面试复习建议

如果你时间有限，可以按这个顺序复习：

第一优先级：
HTML / CSS 基础、JS 基础、事件循环、Promise、闭包、原型链、Vue3 响应式、组件通信、路由、Pinia

第二优先级：
性能优化、浏览器渲染机制、工程化、Vite、TypeScript、前端安全

第三优先级：
ES2025、现代 CSS、SSR、Nuxt、Lazy Hydration、Baseline、View Transitions

面试中不要只背定义，最好用这种结构回答：

1. 是什么
2. 为什么需要它
3. 怎么使用
4. 有什么坑
5. 项目中怎么落地

例如问 Promise.try，可以这样答：

Promise.try 是 ES2025 新增的 Promise 静态方法，它可以把同步函数或异步函数统一包装成 Promise。它的价值是统一错误处理，避免同步异常和异步异常分开处理。在业务中，如果一个函数可能同步返回，也可能返回 Promise，就可以用 Promise.try 包一层。

---

八、总结

2026 年的前端面试已经不只是传统的“三件套 + Vue 八股”了。传统基础仍然重要，但越来越多面试官会关注：

1. 你是否理解浏览器渲染和性能优化
2. 你是否熟悉 Vue3 Composition API 和响应式原理
3. 你是否了解现代工程化，例如 Vite、TypeScript、ESM
4. 你是否关注新标准，例如 ES2025、现代 CSS、Baseline
5. 你是否能把知识落到项目实践中

所以，准备前端面试时，不能只背答案，更要能结合项目讲清楚：为什么这样做、解决了什么问题、有没有更好的方案。

---