领保科技 前端 秋招一面

一面

自我介绍
介绍一下项目
移动端适配方案
html5语义化
SEO怎么进行优化
webpack怎么做性能优化
img图片假如修改了大小为什么会不会影响性能,怎么影响的(重排)
ES6+新特性
介绍一下Generator,怎么使用的,假如有return语句的话返回什么
介绍一下Reflect
Vue3中ref和reactive区别在哪里,两者一般用于哪些类型
ref内部是怎么实现的
React类组件中setState设置的值能否直接获取到,setState同步还是异步
React合成事件的优点,可不可以通过时间捕获触发
React类组件中unSafe生命周期
React Hooks中模拟哪些生命周期
useEffect模拟ComponentWillUnmount的返回函数会每一次都调用吗
TS中的泛型介绍一下
TS中的重载和继承
全部评论
听都没听过的小公司问这么难???闹呢,一看薪资呵呵了,上万块钱都给不到,不愧是小公司
3 回复 分享
发布于 2024-08-19 12:54 浙江
感觉好难
1 回复 分享
发布于 2024-08-17 23:31 黑龙江
金八银九
点赞 回复 分享
发布于 2024-08-16 17:33 山东
哥们,我面的后端,这难度真的顶,计网面了我https以及对称和非对称加密,还问我一些场景题,我当时面完感觉奔溃了,现在小公司的面试那么难
点赞 回复 分享
发布于 2024-08-21 10:30 河南

相关推荐

实习时候的库存了 往牛可也发一遍---一、埋点之痛:前端工程师的「不能承受之重」// 传统埋点开发典型场景function handleButtonClick() {  // 业务逻辑...  logTracker.send({    event: 'share_click',  // 参数名冲突?是否带下划线?    params: {       type: 1,            // 1代表图文?还是2代表图文?      page: 'detail'      // 页面命名和产品文档不一致?    }  });}行业现状:- 沟通黑盒:PRD中"点击分享时上报"的模糊描述,导致5轮需求确认- 代码腐化:不同业务线埋点方法命名冲突、参数结构混乱- 调试地狱:真机抓包验证埋点耗时占开发总时长40%以上---二、破局之道:标准化埋点开发SOP2.1 元数据治理:给埋点办「身份证」(KPN)技术价值:- 数据血缘溯源:通过kpn=com.company.product.module定义埋点归属层级- 版本兼容性:自动关联SDK版本与埋点参数变更记录- 权限隔离:基于KPN粒度控制埋点读写权限2.2 需求结构化:PRD转译机器可读规范标准化模板示例:## 埋点事件: share_button_click- **触发时机**: DOM点击事件冒泡阶段  - **参数清单**:  | 参数名 | 类型   | 枚举值               | 采集策略 |  |--------|--------|----------------------|----------|  | type   | number | 1:图文 2:视频 3:链接 | 必传     |  | source | string | 当前页面路由path     | 自动注入 |2.3 代码生成:从人工到自动化(Team平台实践)技术实现路径:1. DSL解析器:将PRD转换为JSON Schema描述文件2. 脚手架生成:基于模板引擎自动输出带TS类型提示的代码片段// 自动生成的tracker.tstype ShareType = 1 | 2 | 3;interface ShareEventParams {  type: ShareType;  source?: string; // 自动从路由获取}class Tracker {  static trackShareClick(params: ShareEventParams) {    window.__tracker?.send({      event: 'share_click',      params: { ...params, source: params.source || getCurrentRoute() }    });  }}3. IDE插件:在VSCode中通过代码补全提示可用埋点方法---三、核心架构:高可用埋点SDK设计3.1 分层架构设计                          +----------------+                          | 业务调用层      |                          | (trackXxx())   |                          +----------------+                                    ↓                          +----------------+                          | 逻辑聚合层      |                          | (参数校验/过滤)|                          +----------------+                                    ↓                          +----------------+                          | 传输调度层      |                          | (节流/失败重试)|                          +----------------+                                    ↓                          +----------------+                          | 底层适配层      |                          | (Web/小程序/RN)|                          +----------------+3.2 关键技术实现// 核心能力封装示例class TrackerCore {  private queue: Event[] = [];  private readonly MAX_RETRY = 3;  // 防抖+批量上报  send(event: Event) {    this.queue.push(event);    clearTimeout(this.timer);    this.timer = setTimeout(() => this.flush(), 1000);  }  private async flush() {    const events = this.queue.splice(0, 50);    try {      await navigator.sendBeacon('/log', JSON.stringify(events));    } catch (err) {      if (this.retryCount < this.MAX_RETRY) {        setTimeout(() => this.flush(), 2000);      }    }  }}---四、质量保障:埋点验证体系4.1 自动化测试方案// 基于Puppeteer的埋点校验describe('分享埋点测试', () => {  it('点击图文分享按钮应触发埋点', async () => {    await page.click('#share-btn');    const logs = await getMockServerLogs(); // 对接mock服务    expect(logs).toContainEvent({      event: 'share_click',      params: { type: 1 }    });  });});4.2 可视化验证工具- 实时热力图:在Team平台重现用户操作路径,标注埋点触发位置- Diff检测:对比预期埋点列表与实际采集结果的差异- 数据血缘图:可视化展示KPN->PRD->代码->日志的完整链路---五、实战案例:某电商大促活动埋点提效背景:需要3天内上线包含12个新埋点的活动页暂时无法在飞书文档外展示此内容关键动作:1. 使用DSL生成埋点参数校验函数2. 在Storybook中集成埋点触发预览3. 通过流量回放验证历史埋点兼容性---六、未来演进方向1. 智能化监控:基于历史数据自动检测埋点异常波动2. 无痕埋点:结合MutationObserver自动捕获DOM变化3. 全链路追踪:打通前端埋点与服务端日志的TraceID(注:文中所提技术方案已脱敏,可根据实际业务需求二次定制)
点赞 评论 收藏
分享
一面 2024.11.12知道什么语义化标签块级元素和行级元素是什么,有什么区别页面布局,答了瀑布流css 有哪些选择器瀑布流怎么布局的比如设置等高的三列布局怎么实现tailwindcss 是个什么 css 框架要是有一个属性没有设置类名怎么办除了自己手动写 css 文件,有什么 tailwindcss 的解决方式遇到问题怎么解决,答查文档、掘金 + StackOverflow 、AI 工具,接着问用过哪些 AI 工具var let const 的区别js 基础数据类型number 等基础数据类型和 object 等数据类型有什么区别const a 是一个对象,改变 a 里面的属性会报错吗,比如 a.xxx = yyy有哪些比较两个值是否相等的办法双等和三等的区别两个空数组在双等号的情况下的相等的吗js 原生 click 和 react 的 onClick 有什么区别知道什么是事件冒泡吗react 常用 hookuseEffect 用来干啥依赖数组为空是什么情况,不写依赖数组是什么情况useEffect 里面依赖了两个,但是依赖数组只写了一个,会发生什么情况遇到过什么 react 报错useState 为什么只能在顶层作用域有什么块级作用域react 组件之间通信方式,兄弟组件怎么传git 操作,怎么解决冲突包管理器手写一个对象的深比较二面 2024.11.21一面挂了以后换部门了。。。怎么实现类似微信一样上下固定中间滚动的布局,说出具体的标签、属性怎么实现九宫格布局localStorage sessionStorage 区别react 组件通信GET POST 有什么区别场景题,两个列表,一个是用户信息列表,一个是几个用户的 id 列表,怎么找到这几个 id 对应的用户信息有没有 ai 经验三面 2024.11.25聊了一会就oc了
点赞 评论 收藏
分享
评论
3
12
分享

创作者周榜

更多
牛客网
牛客企业服务