第一次面试有点紧张说实话,有点被拷打的意思。
面试题:
一、HTML5新特性
- 语义化标签:新增
<header>
、<nav>
、<article>
等结构化标签 - 媒体支持:原生支持
<audio>
和<video>
标签 - Canvas绘图:
<canvas>
元素实现动态图形绘制 - 本地存储:
localStorage
和sessionStorage
替代Cookie - WebSocket:全双工通信协议
- 地理位置:Geolocation API获取用户位置
- 表单增强:新增
email
、date
等输入类型
二、CSS3新特性
- 选择器增强:
:nth-child()
、::before/after
- 过渡动画:
transition
和@keyframes
动画 - Flex/Grid布局:弹性盒与网格布局系统
- 视觉效果:
box-shadow
、border-radius
、gradient
- 媒体查询:
@media
实现响应式设计 - 变形处理:
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 */
五、水平垂直居中方案
- Flex方案
css
.container {
display: flex;
justify-content: center;
align-items: center;
}
- Grid方案
css
.container {
display: grid;
place-items: center;
}
- table方案
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
- 绝对定位 + Transform
css
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 绝对定位 + Margin
.child {
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
六、Vue生命周期详解
- 创建阶段:setup() → beforeCreate → created
- 挂载阶段:beforeMount → mounted(DOM就绪)
- 更新阶段:beforeUpdate → updated
- 销毁阶段:beforeUnmount → unmounted(Vue3)
关键作用:数据初始化、DOM操作、资源释放
七、首屏加载优化策略
- 代码分割:Vue Router懒加载
const routes = [{
path: '/home',
component: () => import('./Home.vue')
}]
- 资源压缩:Brotli/Gzip压缩
- CDN加速:静态资源分发
- 预加载:
<link rel="prefetch">
关键资源 - SSR/SSG:服务端渲染提升首屏速度
八、Vue组件通信
- Props/Emits:父子组件数据流
<!-- 父组件 -->
<Child :msg="parentMsg" @update="handleUpdate"/>
<!-- 子组件 -->
props: ['msg'],
emits: ['update']
- provide/inject:跨层级传递
- Vuex/Pinia:状态管理库
九、Vue SSR原理
- 服务端:将Vue实例渲染为HTML字符串
- 客户端:混合(Hydration)过程激活交互
- 优势:SEO友好、首屏性能提升
- 框架:Nuxt.js封装最佳实践
十、主流UI组件库
- Element Plus:桌面端中后台系统
- Ant Design Vue:企业级应用
- Vuetify:Material Design风格
- Quasar:全平台支持框架
十一、AI Coze工作流
字节Coze平台的核心流程:
- 意图识别:NLU解析用户输入
- 技能编排:通过插件连接API服务
- 知识增强:接入私有知识库
- 多轮对话:上下文记忆管理
- 多模态输出:生成图文、卡片等内容
十二、SSE流式生成实现
- 服务端:
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache'
});
setInterval(() => {
res.write(`data: ${JSON.stringify(chunk)}\n\n`);
}, 1000);
- 客户端:
const es = new EventSource('/stream');
es.onmessage = e => {
const data = JSON.parse(e.data);
// 增量更新DOM
};
优势:单工通信、自动重连,适用于实时日志、股票行情等场景
总结
还是准备的不够充分,继续努力吧孩子