面试复盘（一）：网站性能、Vue 3、计算机网络与 MySQL

第一次真实技术面，这几个问题我几乎都没答出来。逐个补上理解，作为下一次面试前的复习笔记。

1. 如何排查一个网站加载过慢？#

先分清楚慢在哪里#

“加载慢”可能是打开后一直白屏、图片迟迟不出现，也可能是页面已经出现，但点击按钮没反应。不同现象对应不同检查方向。

我会先确认：哪个页面、什么操作、首次访问还是再次访问、所有用户还是特定地区或设备。记录一次可复现的过程，再比较正常和异常情况。

先理解一次 HTTPS 请求的过程#

排查之前，先知道请求经历了哪些阶段。下面以通过新建 TCP 连接访问 HTTPS 网站为例，把 DNS、TLS、TTFB 等术语串起来；Initiator 则用于追踪请求由谁触发。

按请求和渲染链路排查#

打开 DevTools 的 Network，重新加载页面，查看瀑布图和请求的 Timing。首次访问可以禁用缓存测试，但也要保留正常缓存下的对照。

TTFB 高不能直接判定为 SQL 慢，它还受网络往返和服务器其他处理影响。浏览器证据只能帮助缩小范围，具体后端原因需要服务端证据。Network Timing 说明 ↗

如果主要资源已经下载完，就录制 Performance，看时间花在 JavaScript、布局还是绘制上。例如：同步计算阻塞主线程、大量 DOM 同时渲染、反复读取布局后写样式，都可能让用户觉得页面卡住。

用指标验证效果#

修复后用相同设备、网络和操作复测。实验室测试适合复现问题，线上真实用户数据能判断问题是否普遍存在。

2. Vue 3 相对于 Vue 2 有哪些变化？#

Vue 3 的 ref 通过 .value 的 getter/setter 跟踪访问，不能笼统地说所有响应式都只用 Proxy。Vue 2 响应式说明 ↗、Vue 3 响应式原理 ↗

// 简化示意，非源码
function defineReactive(obj, key, val) {
  observe(val) // 值是对象就继续递归，初始化时一次性转完
  Object.defineProperty(obj, key, {
    get() {
      dep.depend() // 收集依赖
      return val
    },
    set(newVal) {
      val = newVal
      dep.notify() // 通知更新
    }
  })
}

// 简化示意，非源码
function reactive(target) {
  return new Proxy(target, {
    get(t, key, receiver) {
      track(t, key) // 收集依赖
      const res = Reflect.get(t, key, receiver)
      return isObject(res) ? reactive(res) : res // 访问到嵌套对象时才代理（懒代理）
    },
    set(t, key, value, receiver) {
      const ok = Reflect.set(t, key, value, receiver)
      trigger(t, key) // 新增属性同样会走到这里
      return ok
    },
    deleteProperty(t, key) {
      const ok = Reflect.deleteProperty(t, key)
      trigger(t, key) // 删除属性也能检测
      return ok
    }
  })
}

两个容易答错的点#

• Vue 3 仍然支持 Options API，不要求全部改成 Composition API。
• Composition API 不是 Vue 3 独占，Vue 2.7 也内置了它。比较版本时要说明具体版本，而不是只比较写法。

Composition API 的重点是逻辑组织与复用。例如，把搜索词、请求、加载状态和取消请求放在一个 useSearch() 中，比把同一功能分散在多个选项里更容易维护，但它不会自动让业务代码变快。Composition API FAQ ↗

// mouseMixin.js
export default {
  data() {
    return { x: 0, y: 0 }
  },
  methods: {
    update(e) {
      this.x = e.pageX
      this.y = e.pageY
    }
  },
  mounted() {
    window.addEventListener('mousemove', this.update)
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.update)
  }
}

// 组件中：mixins: [mouseMixin]，模板里直接用 x、y，但看不出它们从哪来

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  const update = (e) => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

// 组件中：来源清楚，冲突时可以重命名
// const { x, y } = useMouse()
// const { x: scrollX } = useScroll()

迁移细节参考：Vue 3 Breaking Changes ↗。

3. Vue 3 的响应式有哪些限制或容易踩的坑？#

Vue 3 只有通过代理对象（或 ref.value）读写才会被追踪，原理见第 2 题的折叠块。下面前三个坑本质上都是读写绕开了代理；后两个则和更新调度、编译处理有关。

解构基本类型属性后，普通变量不会继续跟随更新#

import { reactive, toRefs } from 'vue'

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

state.count++
console.log(count) // 0：这只是解构时得到的数字

const { count: countRef } = toRefs(state)
state.count++
console.log(countRef.value) // 2：仍然通过 ref 关联 state.count

不是 state 失去响应式，而是普通数字变量不再通过代理读取属性。解构出的值如果是一个响应式对象，对该对象的嵌套修改仍可以被追踪；但父属性被替换后，旧变量不会自动指向新对象。

替换局部变量，不等于通知原来的依赖#

import { reactive, ref, watchEffect } from 'vue'

let state = reactive({ count: 0 })
watchEffect(() => console.log(state.count))

state = reactive({ count: 1 }) // 普通变量赋值，本身不会触发上面的 effect

// 需要整体替换时，用 ref 作为稳定的响应式入口
const form = ref({ name: '' })
form.value = { name: 'LZWcc' }

reactive() 适用于对象、数组、集合，不能直接把一个数字变成响应式。基本类型或需要整体替换的状态可以用 ref()。响应式基础与限制 ↗

代理对象和原始对象不是同一个引用#

import { reactive } from 'vue'

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

console.log(state === raw) // false
raw.count++ // 绕过代理，不会由这次写入触发响应式更新
state.count++ // 通过代理修改

raw.count++ 确实修改了底层数据，只是没有触发通知；以后发生其他更新时可能读到这个新值，因此更容易造成误解。业务里应尽量统一使用代理，避免混用原始对象和代理对象。响应式深入 ↗

状态更新不等于 DOM 已更新#

修改响应式状态后立即读取 DOM，可能还是旧结果。需要读取更新后的 DOM 时使用 await nextTick()，而不是凭感觉加一个 setTimeout()。这是批量更新的调度机制，不是响应式失效。

注意 Vue 3.5 的 props 解构例外#

在 Vue 3.5+ 的同一个 <script setup> 中，编译器会对从 defineProps() 解构出的变量访问进行处理，使其保持响应性。这个能力不适用于任意 reactive() 解构。

<script setup>
import { watch } from 'vue'

const { title } = defineProps(['title'])

// 传入 getter，watch 才能追踪读取；不是传入当前字符串值
watch(() => title, (value) => console.log(value))
</script>

所以，“Vue 3 解构一定丢失响应式”说得过于绝对，要区分对象、值类型、编译上下文与版本。Reactive Props Destructure ↗

4. Vue 3 框架自身做了哪些性能优化？#

这道题先讲框架原理。第五题再讲我写项目时可以采取的措施。

编译阶段识别哪些内容会变#

<template>
  <section>
    <h2>面试复习</h2>
    <p>{{ count }}</p>
  </section>
</template>

当 count 更新时，标题并没有变化。Vue 编译器可以分析模板，把这些信息留给运行时，减少重复工作。

重点是 Vue 3 进一步利用编译信息，缩小运行时 diff 需要处理的范围。Vue 渲染机制 ↗

构建体积与更新调度#

支持 tree-shaking 的 API 配合构建工具，可以移除未使用的功能，减少下载和执行的 JavaScript。

Vue 会批量处理组件更新，同一轮同步代码连续修改状态，不会每次都立刻更新 DOM。注意这在 Vue 2 中就已存在，不算 Vue 3 新增。Vue 性能指南 ↗、Vue 2 更新队列 ↗

5. 开发 Vue 3 项目时有哪些性能优化手段？#

先测量瓶颈，再分别考虑加载性能和更新性能。

加载阶段：少下载、少阻塞#

• 路由按需加载，把暂时不用的页面代码拆出去；大型非首屏组件按需异步加载。
• 检查打包产物，减少重复或过大的依赖，确认按需导入是否有效。
• 图片使用适当尺寸和格式，非首屏图片可延迟加载；首屏关键图片不应盲目懒加载。
• 根据业务考虑 SSG 或 SSR，并衡量服务端成本与客户端 hydration 成本。

// Vue Router 的路由懒加载
const routes = [
  {
    path: '/interview',
    component: () => import('./pages/Interview.vue')
  }
]

这些措施影响不同阶段，应结合请求与渲染关键路径判断优先级。Vue 性能指南 ↗、理解关键渲染路径 ↗

更新阶段：减少不必要的工作#

v-once 适用于确定不再更新的内容，v-memo 可以按依赖跳过子树更新，但依赖遗漏会导致显示陈旧。先确认有收益，再使用这些优化。Vue 更新性能优化 ↗

例如列表选中态，把“是否选中”算好后传给行组件：

<Row
  v-for="item in items"
  :key="item.id"
  :item="item"
  :active="item.id === activeId"
/>

在 item 引用稳定等条件下，切换 activeId 时，大多数行的 props 不变，有助于跳过其更新。key 要表达稳定身份，不要用随机值强迫重建。

6. 计算机网络的五层是什么？#

从上往下记：应用、传输、网络、数据链路、物理。传输层在部分教材中也叫运输层。

用一次 HTTP 请求串起来#

以 HTTP/1.1 over TCP 为例，先省略加密细节：应用生成 HTTP 请求，传输层通过 TCP 提供可靠、有序的字节流，网络层用 IP 寻址并经路由器转发，链路层在每一跳封装成帧，物理层把比特变成信号发送。

接收端逐层处理，最终把请求交给服务器应用。经过路由器时，链路帧会按下一跳重新封装，不是一个以太网帧原封不动穿过整个互联网。

不要混淆三种模型#

• 五层模型是常见的教学划分。
• OSI 是七层，多出会话层、表示层等划分。
• TCP/IP 通常按四层描述，把物理与链路相关内容归入链路层。

RFC 1122 描述了互联网协议族的分层结构，可用来对照 TCP/IP 模型，不能把它直接称为“五层标准”。RFC 1122 ↗

7. MySQL 有哪些存储引擎？#

存储引擎负责表数据的存储、索引和访问等工作。它是表级别的选择，同一个数据库可以有使用不同引擎的表。

实际可用引擎应在当前实例检查：MySQL 8.4 存储引擎文档 ↗。

-- 查看当前实例支持的引擎
SHOW ENGINES;

-- 查看已有表的引擎
SHOW CREATE TABLE your_table;

为什么一般业务选择 InnoDB？#

订单、库存这类数据通常需要事务的一致性保障；InnoDB 的事务、崩溃恢复和并发控制能力适合这类需求。MVCC 让一致性读可以读取合适的数据版本，但不表示所有读操作都不加锁，例如锁定读和普通快照读不同。

“支持行锁”也不意味着任何语句都只锁一行。实际锁定范围受索引、查询条件和隔离级别影响，不能只看 SQL 表面写了一个条件。InnoDB 简介 ↗