记录一下第一次面试💩

第一次面试有点紧张说实话，有点被拷打的意思。

面试题：

一、HTML5新特性

1. ​语义化标签：新增<header>、<nav>、<article>等结构化标签
2. ​媒体支持：原生支持<audio>和<video>标签
3. ​Canvas绘图：<canvas>元素实现动态图形绘制
4. ​本地存储：localStorage和sessionStorage替代Cookie
5. ​WebSocket：全双工通信协议
6. ​地理位置：Geolocation API获取用户位置
7. ​表单增强：新增email、date等输入类型

二、CSS3新特性

1. ​选择器增强：:nth-child()、::before/after
2. ​过渡动画：transition和@keyframes动画
3. ​Flex/Grid布局：弹性盒与网格布局系统
4. ​视觉效果：box-shadow、border-radius、gradient
5. ​媒体查询：@media实现响应式设计
6. ​变形处理：transform实现旋转、缩放等效果

三、Vue2 vs Vue3核心差异

特性	Vue2	Vue3
响应式原理	Object.defineProperty	Proxy
组合式API	Mixins	Composition API
生命周期	Options API	setup() + 生命周期钩子
性能优化	-	Tree-shaking支持
片段组件	单根节点	多根节点支持
TypeScript	兼容性一般	原生支持

四、CSS盒模型解析

css
/* 标准盒模型（默认） */
box-sizing: content-box;  /* 宽高=内容区域 */

/* IE盒模型 */
box-sizing: border-box;   /* 宽高=内容+padding+border */

五、水平垂直居中方案

1. ​Flex方案

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

2. ​Grid方案

css
.container {
  display: grid;
  place-items: center;
}

3. table方案

.parent { 
    display: table; 
} 
.child { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

4. ​绝对定位 + Transform

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

5. 绝对定位 + Margin

.child { 
    position: absolute; 
    width: 200px; 
    height: 100px; 
    margin: auto; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

六、Vue生命周期详解

1. ​创建阶段：setup() → beforeCreate → created
2. ​挂载阶段：beforeMount → mounted（DOM就绪）
3. ​更新阶段：beforeUpdate → updated
4. ​销毁阶段：beforeUnmount → unmounted（Vue3）
   关键作用：数据初始化、DOM操作、资源释放

七、首屏加载优化策略

1. ​代码分割：Vue Router懒加载

const routes = [{ 
  path: '/home', 
  component: () => import('./Home.vue')
}]

2. ​资源压缩：Brotli/Gzip压缩
3. ​CDN加速：静态资源分发
4. ​预加载：<link rel="prefetch">关键资源
5. ​SSR/SSG：服务端渲染提升首屏速度

八、Vue组件通信

1. ​Props/Emits：父子组件数据流

<!-- 父组件 -->
<Child :msg="parentMsg" @update="handleUpdate"/>

<!-- 子组件 -->
props: ['msg'],
emits: ['update']

2. ​provide/inject：跨层级传递
3. ​Vuex/Pinia：状态管理库

九、Vue SSR原理

1. ​服务端：将Vue实例渲染为HTML字符串
2. ​客户端：混合(Hydration)过程激活交互
3. ​优势：SEO友好、首屏性能提升
4. ​框架：Nuxt.js封装最佳实践

十、主流UI组件库

1. ​Element Plus：桌面端中后台系统
2. ​Ant Design Vue：企业级应用
3. ​Vuetify：Material Design风格
4. ​Quasar：全平台支持框架

十一、AI Coze工作流

字节Coze平台的核心流程：

1. ​意图识别：NLU解析用户输入
2. ​技能编排：通过插件连接API服务
3. ​知识增强：接入私有知识库
4. ​多轮对话：上下文记忆管理
5. ​多模态输出：生成图文、卡片等内容

十二、SSE流式生成实现

1. ​服务端：

res.writeHead(200, {
  'Content-Type': 'text/event-stream',
  'Cache-Control': 'no-cache'
});

setInterval(() => {
  res.write(`data: ${JSON.stringify(chunk)}\n\n`);
}, 1000);

2. ​客户端：

const es = new EventSource('/stream');
es.onmessage = e => {
  const data = JSON.parse(e.data);
  // 增量更新DOM
};

优势：单工通信、自动重连，适用于实时日志、股票行情等场景

总结

还是准备的不够充分，继续努力吧孩子