记录一下第一次面试💩

2,488 阅读3分钟

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

面试题:

一、HTML5新特性

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

二、CSS3新特性

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

三、Vue2 vs Vue3核心差异

特性Vue2Vue3
响应式原理Object.definePropertyProxy
组合式APIMixinsComposition API
生命周期Options APIsetup() + 生命周期钩子
性能优化-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;
}
  1. Grid方案
css
.container {
  display: grid;
  place-items: center;
}
  1. table方案
.parent { 
    display: table; 
} 
.child { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
  1. 绝对定位 + Transform
css
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  1. 绝对定位 + 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')
}]
  1. 资源压缩:Brotli/Gzip压缩
  2. CDN加速:静态资源分发
  3. 预加载<link rel="prefetch">关键资源
  4. SSR/SSG:服务端渲染提升首屏速度

八、Vue组件通信

  1. Props/Emits:父子组件数据流
<!-- 父组件 -->
<Child :msg="parentMsg" @update="handleUpdate"/>

<!-- 子组件 -->
props: ['msg'],
emits: ['update']
  1. provide/inject:跨层级传递
  2. 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);
  1. 客户端
const es = new EventSource('/stream');
es.onmessage = e => {
  const data = JSON.parse(e.data);
  // 增量更新DOM
};

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

总结

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