去哪儿旅行

收藏
互联网
1000-9999人
不需要融资
北京
高校必争榜
查看官网
上传简历
职位类型
全部
最新
热门
让ai总结了一下问题和回答,心累了,面试官一直问优化相关的问题,多少也回答了一些出来,最后反问的时候,问有什么能加强的,说是觉得项目没什么亮点,一、代码问题的主动发现与预防主动发现方式静态代码分析:使用 ESLint、TSLint 等工具在编码阶段检测语法错误、代码规范问题、潜在逻辑漏洞(如未处理的空值、死循环)。自动化测试:通过单元测试(Jest)、集成测试(Cypress)覆盖核心逻辑,结合 CI/CD 流程在提交 / 部署前触发测试,提前暴露问题。代码审查:制定 Code Review 规范,重点检查边界条件、性能风险、安全性(如 XSS、CSRF)。监控告警:线上通过 Sentry 等工具捕获运行时错误(如 TypeError、Promise 未捕获异常),结合日志分析高频异常点。预防措施制定开发规范:明确命名规则、代码结构、错误处理方式(如统一使用 try/catch 或全局异常捕获)。技术选型管控:避免引入低维护性依赖,优先选择成熟库并控制版本。定期重构:针对耦合度高、可维护性差的代码进行重构,降低后续迭代风险。二、To C 项目的监控设计To C 项目需重点关注用户体验与稳定性,监控设计可从以下层面展开:前端性能监控核心指标:首屏加载时间(FCP)、交互响应时间(TTI)、白屏时间,通过 Performance API 或第三方工具(如 Lighthouse、阿里云 ARMS)采集。资源加载:监控 JS/CSS 加载耗时、图片加载失败率,设置阈值告警(如某资源加载超时 >3s)。用户行为与异常监控错误监控:捕获 JS 运行时错误、接口错误(4xx/5xx)、资源加载失败,关联用户 ID、设备信息便于定位。行为轨迹:记录用户点击、滑动等操作,分析卡顿、崩溃场景的触发路径(如某按钮点击后高频报错)。业务指标监控核心流程转化:如注册、支付步骤的成功率,异常中断时触发告警。设备兼容性:统计不同浏览器 / 机型的报错率,优先修复高占比问题。实现方式埋点系统:通过 SDK 主动上报监控数据,后端存储后用 Grafana 等工具可视化。实时告警:配置短信 / 钉钉通知,针对严重错误(如大面积白屏、支付失败)即时响应。三、虚拟列表优化实现虚拟列表核心是只渲染可视区域内的 DOM 元素,减少渲染压力,实现思路:核心原理计算可视区域高度、单个 item 高度,确定可见项数量(如可视区高度 500px,item 高 50px → 可见 10 项)。监听滚动事件,动态计算滚动偏移量,确定当前需渲染的 item 起始索引。通过容器内的 “占位元素” 撑起列表总高度,避免滚动条异常,可视区项通过绝对定位展示。关键优化缓存已渲染项:避免滚动时频繁销毁 / 创建 DOM,仅更新位置和内容。预渲染缓冲区:在可视区上下额外渲染 1-2 项,减少快速滚动时的空白闪烁。动态高度支持:若 item 高度不固定,可通过预估高度 + 滚动时修正位置解决。库选型:优先使用成熟库(如 react-virtualized、vue-virtual-scroller),减少自研成本。四、列表滑动卡顿的排查与优化排查方向性能分析:用 Chrome DevTools 的 Performance 面板录制滑动过程,查看是否有长任务(>50ms)、频繁重排(Layout)/ 重绘(Paint)。DOM 数量:检查列表是否渲染了过多 DOM(如未做虚拟列表),导致渲染线程阻塞。事件处理:滑动时是否绑定了高频事件(如 scroll、touchmove)且未做节流 / 防抖,导致 JS 线程繁忙。样式问题:是否使用复杂样式(如阴影、渐变)或强制同步布局(如频繁读取 offsetHeight 后修改样式)。优化措施实现虚拟列表:减少 DOM 数量(见上文)。优化事件:对 scroll/touchmove 事件节流(如 100ms 触发一次),避免高频执行。减少重排 / 重绘:将固定样式抽离为 CSS 类,避免 inline 样式;使用 will-change: transform 让浏览器单独分层渲染。数据处理:若滑动时需加载数据,提前预加载并缓存,避免同步阻塞。五、白屏的检测与解决检测方式前端埋点:在页面关键节点(如 DOMContentLoaded、首屏元素渲染完成)设置时间戳,若超过阈值(如 5s 未渲染)则上报白屏事件。图片监控:在页面顶部放一个 1x1 像素的 “探针图片”,若加载成功则证明页面正常,否则判定为白屏。错误关联:结合 JS 错误日志(如关键脚本加载失败、语法错误)定位白屏原因。解决思路加载问题:优化资源加载(如 CDN 加速、代码分割、懒加载),处理脚本加载失败(如重试机制、备用 CDN)。渲染阻塞:避免 JS 阻塞 HTML 解析(如用 defer/async),减少首屏不必要的 CSS/JS。数据依赖:若白屏因接口延迟,增加骨架屏、加载动画,避免用户感知空白;接口失败时显示错误提示并提供重试。兼容性:修复特定浏览器的渲染 bug(如 CSS 前缀缺失、ES6+ 语法未转译)。六、ECharts 性能问题及优化常见性能问题大数据量渲染卡顿(如万级以上数据点)。频繁更新(如实时数据)导致内存泄漏或 CPU 占用过高。图表容器大小频繁变化时重绘异常。折线图(多日期筛选)的优化与后端方案前端优化:数据采样:根据日期范围动态调整精度(如日级展示 24 点,周级展示 24*7 点,月级按天采样而非小时,避免数据量过大)。节流重绘:筛选日期时,通过防抖(如 300ms 延迟)避免频繁调用 setOption。销毁旧实例:切换筛选条件前,调用 dispose () 销毁旧图表,释放内存。懒加载:非首屏图表延迟初始化,避免阻塞首屏渲染。与后端沟通方案:动态返回精度:后端根据筛选的时间范围(天 / 周 / 月)返回对应粒度的数据(如周级返回按小时聚合的平均值,而非每小时原始数据)。分页 / 分段加载:若需保留细粒度,后端支持按时间段分段返回,前端滚动时再加载后续数据。数据压缩:后端用二进制或精简格式(如仅返回 [x,y] 数组而非完整对象)减少传输量。ECharts 适配方案响应式容器:监听窗口 resize 事件,调用 resize () 方法调整图表大小,结合 CSS 媒体查询适配不同屏幕。移动端优化:简化图表样式(如隐藏次要网格线、缩小字体),触摸交互适配(如支持双击放大、手势缩放)。七、图片优化方向资源优化格式选择:优先使用 WebP/AVIF(比 JPEG 小 30%+),降级兼容旧浏览器;简单图形用 SVG 替代位图。压缩处理:通过工具(如 TinyPNG)或后端服务(如七牛云)压缩图片,平衡质量与体积。合理尺寸:根据展示容器大小提供多分辨率图片(如 srcset 属性),避免大图小用。加载优化懒加载:使用 IntersectionObserver 监听图片进入视口后再加载,减少首屏请求。预加载:对首屏或即将展示的图片(如轮播图下一张)用 link [rel="preload"] 预加载。缓存策略:设置合理的 Cache-Control 头,复用缓存减少重复请求。体验优化占位符:加载前显示低分辨率缩略图或纯色占位,减少布局偏移(CLS)。错误处理:图片加载失败时显示默认图,避免破图影响体验。八、图片加载时间的检测前端检测监听事件:通过 img.onload 记录加载完成时间,减去 img.src 赋值时间,得到加载耗时。Performance API:使用 performance.getEntriesByType ('resource') 获取图片资源的加载详情(如 startTime、responseEnd),计算耗时 = responseEnd - startTime。埋点上报:将检测到的耗时结合图片 URL、用户设备信息上报,分析慢加载图片。工具辅助浏览器 DevTools:Network 面板筛选 img 类型资源,查看各阶段耗时(如 DNS、TCP、下载)。第三方监控:通过 Lighthouse 或监控平台(如 Datadog)批量分析页面图片加载性能。
查看8道真题和解析
点赞 评论 收藏
分享
1.讲一个项目里面的难点2.ES6的新特性getCashInfo(extParam = {}){const {orderBaseDetailData = {}, quserInfo = {}, isLogin12306}= this.viewstateconst {orderBaseResult = {}}= orderBaseDetailData;const {contactInfo, orderNo} = orderBaseResult;const {userUserID = '',userName = '',userID = ''} = qUserInfo;const param ={orderNo,contactPhone: contactInfo.contactPhone || '',uuid:userUserID,userId: userID,userName,hasLogin12306: isLogin12306,cashiersource: 'OCCUPY PAGE CASHIER',cashType: 'ORDER',...extParam}}3.这段代码有什么问题,典型场景,核心作用4.设置定时器延迟时间为100ms,实际延迟时间通常会大于等于 100ms,为什么5.宏任务与微任务6.浏览器的同源策略7.跨域的解决方案8.CORS是什么,具体如何设置9.跨域的post请求为什么会两次10.如果页面有多张图片 http是怎么加载的11.结合TCP连接方面讲一下图片数据请求,串行还是并行12.计算机网络五层常用协议13.用过http抓包嘛14.什么是中间人攻击15.浏览器的地址栏输入网址到界面显示的整个过程16.怎样减少重排重绘17.vue的响应式原理18.vue2和vue3的区别19.diff算法20.react hooks的优缺点21.学习起来遇到什么困难手撕:实现一个函数删除字符串中出现次数>=2的相邻字符:输入"abbbaca" ---> "ca"
查看21道真题和解析
点赞 评论 收藏
分享
10-21 09:10
门头沟学院 Java
查看28道真题和解析
点赞 评论 收藏
分享
一,网易雷火测开ab面a面:1,自我介绍 ,对测试开发的理解2,设计测试用例3,目前是在上段公司实习吧 实习主要做什么实习碰到最大的难题 以及怎么克服的收获了什么4,怎么去解决高并发网络请求答:缓存 多线程 异步操作5, 异步操作怎么做6, 多线程会产生哪些线程安全问题7, 内存泄露8, 项目里面的ui自动化使用的工具9, 算法题 处理字符串每次一个操作(增删改)到目标字符串的最小步骤反问面试官人很好 秋招第一个面试很紧张面试答的一般,面试官说没事没事继续问下一个问题 算法题也基本没怎么写出来b面主要就是聊游戏1,问我玩什么游戏。 永劫 游戏时常 段位2,玩什么角色 蓝梦3,你对这个角色的理解4,游戏的打法 我双排修罗 问我游戏对局内玩法5,新角色怎么测试他的技能6,评判一个角色的标准有哪方面7,介绍一下永劫无间这款游戏8,关于角色的平衡性怎么做9,对鼠标设计测试用例10,局内只剩你自己了,但是对句没结束 可能的原因反问已挂 面试官很好很好 第一次秋招大厂面就是这个太紧张了 很多会的问题答的不清楚二,去哪儿旅行一面前面还有笔试 ai面试傻鸟公司傻鸟面试官 给我气的受不了面试官迟到15min全局噜噜脸 一脸不耐烦 不想要我你让我进面试干啥上来一道手撕找到字符串中第二个只出现一次字符 全a了1,实习主要干了啥,有什么做的好的地方2,对发红包设计测试用例3,实习接触到测开这方面的工作吗4,对测试开发的理解5,测试用例设计方法反问她根本就不想回答 说两个字就没了面试结束秒挂演都不演了 lj公司
查看27道真题和解析
点赞 评论 收藏
分享
分享我的面试经验
模拟面试
真实面试体验,快速补齐短板
应聘感受
暂无应聘感受
牛客网
牛客网在线编程
牛客网题解
牛客企业服务