推荐聊城做网站,北京住建网,怎样进入当地建设局网站,痘痘怎么去除效果好字节面试题目 下面是对您提供的前端面试题的逐题详细回答。我会按照面试官的视角构造完整的回答#xff0c;语言尽量专业清晰#xff0c;便于他们理解你的思考方式和实际经验。 ✅ 一、项目经验与3D相关 1. 第一个项目人数#xff0c;如何分工#xff0c;主要负责的功能 我…字节面试题目 下面是对您提供的前端面试题的逐题详细回答。我会按照面试官的视角构造完整的回答语言尽量专业清晰便于他们理解你的思考方式和实际经验。 ✅ 一、项目经验与3D相关 1. 第一个项目人数如何分工主要负责的功能 我们团队一共5人分为前端3人后端2人。 我主要负责的模块包括 3D地图视图模块开发数据可视化热力图、柱状图、轨迹线与后端联调接口数据动态加载渲染前端组件封装与性能优化
团队其他成员分别负责界面设计实现、权限管理模块和测试部署。 2. 使用到的三维地图库的底层实现原理汗流浃背
我们使用的是 Cesium.js。底层主要通过 WebGL 实现三维渲染其实现核心有
加载瓦片数据3D Tiles、Terrain、Imagery使用 地理坐标转为笛卡尔坐标系 进行三维计算GPU加速渲染地形、建筑、模型等利用帧循环render loop实时更新场景
Cesium本质上是对WebGL封装并做了空间几何/图层的数据管理用户操作缩放、旋转通过摄像机Camera系统来处理。 3. 使用了什么Web技术实现3D效果
我们主要使用以下技术实现3D效果
WebGL低层图形接口通过Cesium封装Canvas用于某些2D覆盖图层绘制Three.js试用补充展示某些轻量模型如glTFrequestAnimationFrame实现动画帧控制着色器语言GLSL通过Cesium Shader语法控制光照/材质等 4. Canvas 和 WebGL 有没有了解裂
有一定了解
Canvas 是2D绘图上下文适用于图表、图形等WebGL 是基于OpenGL ES的JavaScript API可操作GPU绘制3D图形Canvas绘制是像素级CPU计算多、性能差WebGL可以实现3D、粒子系统通过GPU加速效率高 5. 参与这个项目之后技术上的成长有哪些
技术成长包括
掌握了 WebGL 渲染机制 和地图相关三维坐标系变换理解了异步数据渲染和 大规模模型加载优化提升了组件复用能力抽象了若干通用组件图层控制、图例、模型动画控制对前端性能优化如懒加载、资源裁剪更有体系化理解 ✅ 二、前端工程化与构建优化 6. 前端工程化上有什么方案解决吗有哪些流程标准或者规范吗
我们采用了以下工程化方案
使用 monorepo pnpm workspace 管理多个模块自动化构建Vite/Webpack GitHooks CI代码规范ESLint Prettier Commitlint Husky分支规范采用 GitFlow自动部署GitLab-CI Docker单元测试Vitest / Jest Vue Testing Library 7. git merge 有多少种形式裂
常见的 merge 形式有
普通合并merge commit保留历史生成新的commitgit merge 默认行为快进合并fast-forward如果目标分支在源分支之后没有分叉可以直接指向源git merge --ff-onlysquash 合并将一组提交压缩成一个提交git merge --squashrebase 合并不是 merge但常用于“线性合并”流程中git rebase 8. 对 Webpack 的优化
使用 splitChunks 拆分第三方库配置 cache-loader / thread-loader / babel cache启用 tree-shaking使用 CDN 引入大库开启 source-map 选择性生产关闭或设为 cheap使用 image-webpack-loader 对图片压缩减少构建体积alias / externals / dynamic import 9. webpack 构建慢怎么分析并解决
分析手段
使用 webpack-bundle-analyzer 查看包体大小查看 loader 配置是否重复执行或未命中规则检查是否配置了 缓存机制是否开启了 过多的 sourceMap使用 profiling 模式输出性能数据
优化方法
loader 缓存 (cache: true)exclude node_modules 避免不必要编译利用 thread-loader / happyPack 并行构建拆分构建任务DLLPlugin、ModuleFederation 10. 怎么拆包比如Vue、Router等公共库
利用 Webpack 的 externals 配置将 Vue、Vue-Router 等从打包中剔除通过 CDN 引入使用 splitChunks 拆分第三方库使用 动态 import 按需加载某些模块使用 Vite 的 预构建优化pre-bundling ✅ 三、Vue相关 11. Vuex 的理解
Vuex 是一个 集中式状态管理模式包括
state响应式数据mutations同步修改actions异步操作getters派生状态modules模块化拆分
优点
数据集中、易调试和Vue的响应式系统深度集成 13. Vue2 vs Vue3 响应式的差异与优劣
特性Vue2Vue3响应式实现Object.definePropertyProxy数据追踪静态需预定义动态可新增属性追踪性能更重嵌套数据不友好更轻代理更灵活兼容性IE支持好IE不兼容Proxy
Vue3优点性能更好类型支持更强组合式API更易维护 Vue2老项目兼容性更强 14. 响应式性能差异
Vue3 使用 Proxy 拦截整对象更适合深层次数据变更和频繁响应 Vue2 的 defineProperty 每个属性需单独劫持嵌套结构性能下降严重。 ✅ 四、图形与动画 15. Proxy 兼容性
Proxy 在 IE 全系不支持主流现代浏览器支持良好若需要兼容IE需降级为Vue2或使用 polyfill但不完全可靠 16. Flowable 底层原理
Flowable 是基于 BPMN 2.0 的流程引擎核心
使用 XML 描述流程图结构前端解析为流程图后端保存为BPMN模型事件驱动执行流程节点、网关、事件支持任务状态流转配合数据库保存状态机 17. 流程编辑功能支持什么能力
拖拽添加任务/分支/网关自定义节点属性连接线逻辑控制校验流程合法性导出/导入 BPMN 18. 是用SVG画的还是Canvas区别
我们使用的是 SVG基于BPMN-js。
区别
SVG基于DOM易交互适合静态图Canvas像素操作性能好但事件处理复杂 19. SVG 使用场景
图标流程图、组织图矢量图形展示地图覆盖层 20. 实现高帧率JS动画
使用 requestAnimationFrame精确控制帧率逻辑通过时间戳计算避免 DOM 重排使用 transform将计算移出主线程如 WebWorker 21. 元素左右移动减少DOM操作
使用 transform: translateX改变 transform 不触发布局重排仅重绘使用 class 切换样式避免频繁DOM API调用 22. transform 为啥提高性能
transform 是 合成层compositing layer操作不影响其他 DOM 布局不触发布局回流GPU 加速绘制更流畅 ✅ 五、WebSocket、网络协议、加密 23. WebSocket 如何握手
客户端发起 HTTP 请求带有 Upgrade: websocket 请求头服务器返回 101 Switching Protocols握手成功后建立持久连接 24. WebSocket 协议细节
基于 HTTP 1.1 升级协议握手客户端发 Sec-WebSocket-Key服务端返回Sec-WebSocket-Accept握手完成后进入 WebSocket 协议开始帧结构传输opcode, mask等 25. 后端推送一定要 WebSocket 吗
不一定
WebSocket双向通信实时性强SSEServer-Sent Events服务器单向推送兼容性好轮询 / 长轮询兼容广但效率低 26. SSE 和 WebSocket 区别
特性SSEWebSocket通信方向单向双向协议HTTP自定义帧结构重连自动支持手动实现兼容性更好IE10用途价格推送、通知聊天、游戏、股票 27. WebSocket 文本 vs 二进制
文本适合人类阅读开发方便二进制体积小传输快适合高频率通信如视频流 28. 压缩比例文本 vs 二进制
一般来说二进制压缩比例更大因为没有编码开销如Base64可直接 gzip / deflate ✅ 六、网络协议底层 29. 基于UDP的协议
DNSQUICHTTP/3基础DHCPTFTP简单文件传输 30. DNS解析过程
浏览器缓存操作系统缓存本地DNS服务器根域名服务器顶级域名服务器如 .com权威域名服务器返回结果并缓存 31. DNS解析优化方法
启用 DNS预获取dns-prefetch使用 连接池 / HTTP2 多路复用配置 CDN / 域名合并本地 DNS 优化配置 32. TCP多路复用能否优化DNS
不能直接优化 DNS 查询但 HTTP2 的多路复用 能减少 DNS 引发的连接数量从而间接减少耗时 33. keep-alive vs 多路复用
keep-alive复用同一TCP连接但仍是串行多路复用HTTP2并行多个请求提升吞吐 34. HTTP2 特性
多路复用头部压缩HPACKServer Push二进制分帧 35. 头部压缩怎么做HPACK
利用字典表压缩重复字段编码字段名称和内容为索引编号动态表静态表组合压缩 36. 压缩算法了解HPACK
HPACK针对HTTP Header设计的压缩算法结合哈夫曼编码 表索引 字典动态同步 37. HTTPS 加密过程
客户端发起请求含公钥协商信息服务端返回证书和加密参数客户端验证证书并生成对称密钥使用公钥加密对称密钥并发送后续使用对称密钥进行通信更快 38. 为什么用对称加密
非对称加密安全但慢对称加密速度快适合大量数据传输 39. XSS 防范
输出时转义 HTML 特殊字符, , , 使用 CSP内容安全策略防止动态拼接 HTML过滤用户输入内容 ✅ 七、算法题 算法 1带障碍的最短路径
用 BFS 解决方向为右/下记录访问过的坐标时间复杂度 O(m*n)
function shortestPath(grid) {const m grid.length, n grid[0].length;const queue [[0, 0, 0]]; // x, y, stepsconst visited Array.from({ length: m }, () Array(n).fill(false));const dirs [[0, 1], [1, 0]];while (queue.length) {const [x, y, step] queue.shift();if (x m - 1 y n - 1) return step;for (let [dx, dy] of dirs) {const nx x dx, ny y dy;if (nx m ny n !grid[nx][ny] !visited[nx][ny]) {queue.push([nx, ny, step 1]);visited[nx][ny] true;}}}return -1;
}算法 2遍历二叉树计算每个节点的和
function computeSums(root) {const result [];function dfs(node) {if (!node) return 0;const left dfs(node.left);const right dfs(node.right);const sum node.val left right;result.push(sum);return sum;}dfs(root);return result;
}算法 3去除’b’以及连续的a和c
function cleanStr(str) {let res ;for (let i 0; i str.length; i) {if (str[i] b) continue;if ((str[i] a str[i 1] a) || (str[i] c str[i 1] c)) {while (str[i 1] str[i]) i;continue;}res str[i];}return res;
}
