前端—西安平AN银行面试问题

问题一css实现动画效果为什么比js实现动画效果好。1. 线程分离不阻塞页面最大优势1transform / opacity 的CSS动画浏览器自动把元素提升到合成层交给 GPU独立线程 运行。JS主线程做接口、循环、DOM操作、定时器卡顿完全不会影响动画流畅度。2JS动画setInterval / requestAnimationFrame全部跑在JS主线程。主线程一旦有大量逻辑阻塞动画就掉帧、卡顿。2. 浏览器底层原生优化性能更强1浏览器C底层计算缓动、插值、帧画面速度远快于JS逐帧计算数值。2页面切后台、最小化时浏览器自动暂停CSS animation/transition节省CPU/GPU资源。2JS定时器/raf后台依旧持续执行浪费性能。3. 无DOM频繁读写开销JS动画逻辑不断修改 element.style → 浏览器重新计算布局/绘制重排重绘。CSS动画只操作合成层跳过重排、重绘只合并图层开销极低。4. 代码简洁无内存泄漏风险1CSS只写样式不需要手动维护定时器、清除计时器2hover、active自动触发动画不用JS监听事件3关键帧样式可全局复用不用封装JS函数。问题二animation底层原理1. 帧插值浏览器底层自动计算每一帧中间状态不用JS逐帧计算数值性能更高。2. 分层GPU加速动画属性为 transform / opacity 时浏览器生成独立合成层交给GPU线程渲染• 不阻塞JS主线程• 不触发重排(reflow)、重绘(repaint)只做图层合并3. 浏览器自动节能页面切后台/最小化自动暂停 animation释放硬件资源JS动画不会自动暂停。问题三dpr移动端用得多web端没用过回答不上来DPR是window.devicePixelRatio的简写形式DPR 屏幕物理像素 ÷ CSS逻辑像素CSS像素代码写的 width:100px物理像素屏幕真实发光点特点整理1. DPR由屏幕硬件决定只读JS无法修改2. 设计稿尺寸 页面展示尺寸 × DPRDPR3设备出3倍图3. 三大适配场景1px细线、高清图片、清晰Canvas4. dppx 是CSS标准单位1dppx DPR15. 高DPI屏幕动画优先用transform/opacity避免重排重绘。问题四es6箭头函数存在意义1. 解决 ES5 普通函数 this 指向混乱、需要手动保存上下文的历史痛点2. 给数组遍历、定时器、Promise 等场景提供极简的匿名回调语法3. 区分轻量回调与完整业务函数通过阉割特性减少代码错误4. 跟上主流语言 Lambda 设计适配函数式编程趋势。问题五项目比较大打包慢体积大怎么办vite分包配置怎么配Vue3分段打包两种方式路由动态import懒加载、rollup manualChunks拆分第三方依赖其中rollup manualChunks 拆分第三方依赖vite.config.js的作用是把 node_modules 第三方库拆分独立文件框架、UI、图表库分开打包利用浏览器缓存修改业务代码不用重新下载大型第三方包。配置分为两步一是在vite.config的rollupOptions.output中配置文件输出格式二是通过manualChunks函数识别node_modules里的第三方库按库名分组打包。核心属性manualChunks用来拆分稳定第三方依赖实现浏览器缓存优化搭配路由懒加载共同完成分段打包优化。完整配置操作步骤1. 打开项目根目录 vite.config.js 文件引入 defineConfig、vue插件2. 在顶层 build 配置项内部找到 rollupOptionsVite打包底层依靠Rollup3. 在 rollupOptions 中新增 output 配置对象用于控制打包输出文件规则4. 在 output 内定义三类文件命名规则入口文件、chunk分包JS、图片/字体等静态资源5. 新增核心配置 manualChunks 函数参数为模块id用来识别node_modules第三方依赖6. 通过 id.includes() 判断文件路径按库分类返回自定义chunk名称实现分库打包7. 保存文件执行 npm run build 打包dist中会生成拆分后的独立js文件。核心重点属性1. output 下三个文件命名属性1entryFileNames项目入口主js文件输出路径与命名2chunkFileNames分包产生的异步/第三方chunk文件命名3assetFileNames图片、css、字体等静态资源输出目录。作用统一归类打包资源区分js、图片、样式方便部署维护hash保证缓存更新。