2024-简历

自我介绍

面试官你好，我叫丘伟康，有5年的前端开发经验，在多家科技公司任职过，熟悉Tob、Toc的项目，有做过短剧、小说、茶饮、供应链、指标系统、以及等业务，熟悉vue、react、多端框架，node也有相关经验，有丰富前端工程化、性能优化经验，也有开源经历，写过taro多端组件、脚手架、以及一些工具，具备业务分析能力，以及项目的把控能力，资源协调分配，确保项目正常进行，主要是这样情况

• 前端工程化？性能优化？说说你在项目里如何做？
• 项目把控能力，你是如何把控的？
• node经验？

面试官你好，我叫xxx，有5年的前端开发经验，在多家科技公司任职过，熟悉Tob、Toc的项目，有做过短剧、小说、茶饮、供应链、指标系统、以及等业务，熟悉vue、react、taro、uniapp，也有node相关经验，也有比较丰富前端工程化、性能优化方面经验，也有这个开源经历，写过taro多端组件、脚手架、浏览器插件都有， 具备分析业务需求、和团队沟通能力以及能够合理的需求工时评估排期 ，以及资源协调分配，有一定的项目管控能力，确保项目顺利进行，主要是这个情况。

技术官：

• 面试官您好，我叫xxx, 有5年的前端开发经验，在多家科技公司任职过，熟悉Tob、Toc的项目，有做过短剧、小说、茶饮、供应链、指标系统、以及等业务，用的技术栈涉及到vue,react，taro、uniapp都有

  • 熟悉对项目性能优化、工程化构建
  • 对常用的业务组件的封装
  • 推动项目组件库版本的升级，将antd组件库v3 升级到v4 （v3 =>3.26.18 升级到 v4 => 4.24.10）
    • 当时部门的几个系统组件库版本不一致，统一升级到v4版本，方便统一组件、以及统一样式
      • 比如菜单导航栏、tab标签切换页这种都是公用的组件、以及常用的统一业务组件。 统一升级版本之后，可以统一维护起来

  2、当时移动端项目上，涉及到一些报表的展示，图表和表格，在社区上没找到合适的物料组件，当时针对项目的特点，写了个 taro了多端的图表和表格组件，在项目生产线也稳定使用， 也开源了，在社区上也看到有部分人有使用。

  3、也有过node开发经验，在之前公司使用过egg和middway相关技术栈

  4、熟悉前端工程化和性能优化，能够使用webpack/vite根据项目来构建定制

• 主要是这个情况，希望能加入到贵公司

1、

面试官您好，我叫xxx, 在互联网上有四年多的前端开发经验，在云徙科技、数果科技等公司任职过，熟悉Tob、Toc的项目，有做过茶饮、供应链、指标系统、以及数据大屏等业务

• 主要负责项目的性能优化、工程化构建，定制组件开发
• 用的技术栈是vue和react, 主要用的是react技术栈，也有node相关经验，在之前公司有使用egg和middway相关技术栈作为后端
• 也有过开源的经历，开源过taro的一些组件，多端表格、多端图表组件，当时是有业务的报表需求，在taro的社区没找到合适的组件，就自己写了个组件根据业务场景结合，在公司的生产线也稳定使用了， 也开源了，在社区上也看到有部分人有使用
• 也开源过脚手架，是基于webpack，对webapck常用的配置优化集成了，快速搭建创建项目
• 具备分析业务需求、和团队沟通能力以及能够合理的需求工时评估排期 ，以及资源协调分配，确保项目顺利进行

主要是这个情况，希望能加入到贵公司

2、

面试官您好，我叫xxx, 5年前端开发经验，在几家科技公司任职过，涉及到业务有短剧、小说、茶饮、供应链、指标系统、以及数据大屏等业务，熟悉Tob、Toc的项目，

• 主要负责项目的性能优化、工程化构建，定制组件开发
• 用的技术栈是vue和react, 主要用的是react技术栈，也有node相关经验，在之前公司有使用egg和middway相关技术栈作为后端
• 也有过开源的经历，开源过taro的一些组件，多端表格、多端图表组件，当时是有业务的报表需求，在taro的社区没找到合适的组件，就自己写了个组件根据业务场景结合，在公司的生产线也稳定使用了， 也开源了，在社区上也看到有部分人有使用
• 也开源过脚手架，是基于webpack，对webapck常用的配置优化集成了，快速搭建创建项目
• 具备分析业务需求、和团队沟通能力以及能够合理的需求工时评估排期 ，以及资源协调分配，确保项目顺利进行

主要是这个情况，希望能加入到贵公司

hr:

• hr您好，我叫xxx, 有5年前端开发经验，在几家科技公司任职过
• 用的技术栈是vue和react, 主要用的是react技术栈，在上一家公司主要负责Tob、Toc的项目
• 熟悉前端工程化、项目性能优化
• 参与了代码审查工作，协同团队成员解决了代码质量问题，提高了项目代码可维护性和整体质量
• 具备分析业务需求、和团队沟通能力，并且也可以给出合理建议
• 希望能加入到贵公司

英文自我介绍

Hello interviewer, my name is Qiu Weikang. I have more than four years of experience in front-end development on the Internet. I have worked in several technology companies, involving businesses such as tea drinks, supply chain, indicator systems, and large data screens. I am familiar with Tob and Toc projects.

• Mainly responsible for project performance optimization, engineering construction, and customized component development
• The technology stack used is vue, react, taro, and node
• I have also had open source experience, open sourced taro components, and open sourced scaffolding Have the ability to analyze business needs, communicate with the team, and be able to reasonably evaluate and schedule demand hours, and coordinate and allocate resources to ensure the smooth progress of the project.

Mainly because of this situation, I hope to join your company

面试官您好，我叫丘伟康。 在互联网上有四年多的前端开发经验，在几家科技公司任职过，涉及到业务有茶饮、供应链、指标系统、以及数据大屏等业务，熟悉Tob、Toc的项目，

• 主要负责项目的性能优化、工程化构建，定制组件开发
• 用的技术栈是vue和react、taro、node
• 也有过开源的经历，开源过taro组件，也开源过脚手架 具备分析业务需求、和团队沟通能力以及能够合理的需求工时评估排期 ，以及资源协调分配，确保项目顺利进行

主要是这个情况，希望能加入到贵公司

5年的经验

• 是的，有5年经验，19年的实习了一年
• 待过了4家公司

技术技能问题

小程序

• 主要负责小程序的页面开发，定制组件开发，以及小程序的性能优化

小程序的性能优化有

• 包体积优化 （分包加载）

  • 合理使用分包，减少内存的消耗、提升小程序启动时间

• setData优化

• 复杂的计算逻辑耗时 交给Worker线程处理

• 图片优化

  • 可以通过CDN 和 OSS配合
    • 使用cdn加速oss

vite/webpack

熟悉项目工程化，能够使用Webpack、Vite完成项目构建定制

vite为什么快

• Vite 的快：主要是体现在开发环境上 ： 快速的冷启动和快速的热更新

冷启动：

• vite借助了浏览器对 ESM规范的支持, 利用浏览器去解析，服务器去根据需要按需编译返回给浏览器
  • 所以vite不需要做 bundle 打包的操作，即不需要构建，就很快
• 模块之间的依赖关系的解析由浏览器实现

热更新：

• 在开发环境dev, 监听到文件发生变化以后，只需要通过 websocket 连接通知浏览器去重新加载变化的文件，只需向浏览器发送更新的模块，而不需要刷新整个页面，所以热更新的效果体验很快

说说你是如何使用webpack

• 项目的整体的打包用webpack，在打包过程中，对构建的速度进行优化、对包的体积大小优化

  • 比如比较常规的优化 (静态资源优化、图片优化、css压缩、js压缩)

    • 小图片的话 (小于5kb)，进行base64格式产出

  • 代码分割/代码拆分

    • optimization.splitChunks 提取公共模块, 移除了重复的依赖模块, 减轻了大小 (比如lodash)
    • mini-css-extract-plugin: 把css和js分离，可以更好地利用缓存， CSS 文件的缓存，页面访问速度自然会加快

  • 持久化缓存提高构建速度

    • 持久缓存会将缓存存储到磁盘

  • bundle加hash

    • 打包后的文件，加上hash，利用浏览器的缓存机制，那么在加载资源会从缓存中获取，就不用重新加载一遍新资源

  • dll分包： 只需要一次构建就好，不需要每次都构建，完全没必要，会导致构建速度慢

react/vue

Docker/Nginx

了解Docker容器化，以及Docker集成Nginx部署过程

可以通过Docker Compose配置文件来一次性运行多个容器

• 在Docker容器化，去安装nginx、gitlab

  • 在项目里，创建Dockerfile文件，创建Docker镜像
  • 在Dockerfile中将打包构建后的文件复制到Nginx的Web服务器目录中
  • 在gitlab ci/cd，代码提交就会自动触发构建流程 (docker脚本)

node相关

1、node单线程

2、node事件循环、浏览器事件循环

埋点监控系统

• 1、对埋点监控的理解
• 2、手动埋点、无埋点、可视化埋点
• 3、你是如何使用埋点监控的
• 4、集成了Sentry的监控平台
• 5、@arms/js-sdk 阿里云监控平台

微前端

1、什么是微前端？使用微前端的原因?

2、qiankun/iframe对比， 还有其他微前端方案吗？

3、微前端核心思路是什么？

JS沙箱是怎么做隔离的

• 快照沙箱
• 代理沙箱

参与技术选型？ 你是如何做技术选型

技术选型过程

• 竞品分析
• 社区活跃
• 兼容性问题
• npm下载量
• 包的体积大小
• issures数量
• 最近的一次提交
• 是否还维护

你是如何做code review?

• 最注重的是代码的可维护性（变量命名、注释、函数单一性原则等）
• 扩展性：封装能力（组件、代码逻辑是否可复用、可扩展性）
• ES 新特性（es6+ 、ES2020, ES2021 可选链、at）
• 函数使用规范（比如遇到用 map 拿来当 forEach 用的）
• 性能提升，怎样运用算法，写出更加优雅，性能更好的代码
• 出现多个if else这种条件判断，可以用策略模式来优化
  • 1、可以使用对象来定义策略对象，每个键属性对应一个算法的名称

开源经历 taro物料组件

• 项目上涉及到一些报表的展示

table问题

• 当时业务需求，涉及到报表的展示，需要在h5和微信小程序上展示，当时在社区上也没找到合适的组件，就自己写一个组件，在公司上也是稳定使用，并且在社区上面也看到部分人有使用
• 支持自定义样式、兼容h5和微信小程序、滚动上拉加载
  • 通过view标签来实现的，因为传统的table标签 在小程序是不支持
    • 使用view标签来实现固定表头、表格内容
      • 通过sticky粘性定位来实现固定表头
        • 依赖与用户的滚动，是根据它最近的滚动的祖先元素

Taro遇到什么问题？

• 1、涉及到报表的展示，需要在h5和微信小程序上展示图表和表格，自己写一个组件去适配
• 2、在弹出层页面/二级页面，usePageScroll不触发
  • 要触发滚动事件, 使用了ScrollView组件的onScroll事件
• 3、缓存问题，更新后无法看到最新页面
  • 打包的时候，给静态文件加上hash值，升级版本就避免了缓存的问题
• 4、h5在钉钉导航标题问题
  • 钉钉导航栏标题是用钉钉内封装好的方法，需要引入钉钉的api方法去修改标题
• 5、useReady/onReady使用问题 【页面初次渲染完成时触发】
  • useReady 只能用于最顶层的页面组件中。在子组件/弹出层页面/二级页面中不会触发。
  • Taro.nextTick解决、子组件里使用Taro的消息机制监听页面的onReady事件

Taro有过哪些库

• Taro-Hooks 【基于ahooks】
• taroify 【taroify 不维护了，切换到了vantui】 =》 都是基于vant，ui是比较丰富和美观的
• zustand

基于ECharts二次封装

• 集成了业务需求，比如y轴悬浮显示、显示个数、自定义悬浮tooltip等等

性能优化

• react性能优化
• vue性能优化

自动化部署 ci/cd

pnpm/npm/yarn

web安全问题

webpack常用配置？有哪些优化项

webpack自定义插件场景，写过哪些

• 自定义错误异常插件

小程序插件开发

原生小程序项目有写过吗

• 原生微信小程序项目有做过，因为原生微信小程序比较简单，和vue语法相似
  • 比如原生小程序的 数据绑定、生命周期，都和vue类似

vue3项目有做过吗

vue3特性

• 响应式系统由defineProperty变更为proxy

• 支持Typescript

• 新增了composition API（组合API）

• 编译优化

  • diff算法优化
  • 静态提升
    • vue3中对不参与更新的元素的静态节点，会做静态提升，只会被创建一次，在渲染的时候直接复用
    • 避免了重复节点渲染
  • 事件监听缓存
    • 会自动生成一个内联函数，同时也生成一个静态节点，当事件再次触发时，只需要从缓存中调用即可，无需更新

• 支持Tree-shaking

• 支持多个根节点组件 【Fragments】

• diff算法的优化

  • 双端对比，头比头，尾比尾
  • 使用最长递增子序列优化了对比流程

西瓜视频播放器xgplayer

阿里arms监控

工作经历问题

使用OCX控件，如何理解OCX控件？

页面嵌入并调用OCX控件来操作视频控件，调用OCX控件来控制视频播放、暂停、停止、设置视频源等操作

OCX控件是一种基于Microsoft的COM（Component Object Model）技术的嵌入控件

• 1、OCX控件会提供一个安装程序，将控件注册到操作系统中
• 2、在页面上引入OCX控件
  • 可以通过在HTML页面中引入<object>标签来使用。通过配置控件的属性和调用其方法，可以实现各种功能
• 3、调用OCX提供的接口进行操作

项目上使用Formily，使用Formily做了什么事情

参考：https://zhuanlan.zhihu.com/p/149981696

• Formily提供了很多场景表单组件，基于Formily进行二次封装

• 在复杂联动场景下更加清晰简单的描述联动的方式

• 在超多表单项场景下可以获得更好的表单操作性能

• 在复杂场景下实现通用表单解决方案

Formily性能如何体现？

小程序ci工具

解决每次都要手动发布会容易发错环境配置

• 支持根据不同租户配置上传到体验版
• 支持通过参数来指定部署的环境，测试环境/预生产环境，可以通过设置不同的参数来切换环境
• 配合Gitlab ci/cd，配置gitlab ci配置文件，定义脚本流程，根据指定分支，来构建对应的环境配置
  • 比如要发布到测试环境，需要test分支
  • 比如要发布到预生产环境，需要stage分支

点单会员小程序？遇到什么难题？如何解决

性能优化问题

• 【Worker】当时有个场景，涉及复杂计算时候，响应加载慢，比如像计算商品优惠券、计算最优的优惠方案选择的等等这些场景，通常会涉及复杂计算，计算会比较耗时
  • 解决方案是，使用了Worker，Worker是一个独立的线程，它运行在后台，并且与主线程（渲染线程）分开，避免主线程阻塞。提高小程序的响应速度和性能。
• 内存优化问题，
• 测试发现有些页面有些卡顿，排查之后，发现setData数据量过大问题
  • 数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程
  • 解决方案是，把列表的数据，分开渲染 ，减少单次数据更新量，不要一次性传递太多数据，并且setData调用不要太频繁，每次调用都会触发页面更新的

使用过腾讯有数埋点？

• 我们使用了腾讯有数埋点来收集小程序的用户行为数据，了解用户的行为习惯和优化产品

使用腾讯有数埋点的一些主要场景

• 页面访问与停留时间
  • 在小程序的每个页面中，我们插入了腾讯有数的埋点代码，用于追踪用户访问页面的行为，以及在每个页面停留的时间。通过这些数据，我们可以看到用户在小程序中浏览内容的路径，哪些页面受欢迎，哪些页面可能存在问题。
• 点击事件追踪
  • 我们对小程序中的关键按钮和链接进行了埋点，以追踪用户的点击行为。比如，收集用户在哪些按钮上点击较多，哪些操作流程较少被触发，从而发现用户可能感兴趣的内容或优化用户操作体验。
• 营销活动效果评估
  • 对于推出的营销活动，我们也使用腾讯有数埋点来评估其效果。通过分析活动期间的用户行为数据，我们可以判断活动的吸引力和参与度，从而优化未来的营销策略。

为什么说独立负责？

• 因为这个公司，每个前端负责不同的项目，在不同部门，而我当时那个部门只有一个前端，

介绍一下以下项目

洞察云/营销云/交易云

• 洞察云/营销云/交易云 是三个PC的项目，对应着3个业务方向
  • 洞察云 主要是展示指标的数据，分析指标、智能标签
  • 营销云 主要是 通过营销能力赋能给商家，提升客单价、复购频次，以及卡券优惠劵这种，提升企业营业额
  • 交易云 主要是把门店、菜单、产品等一些数据同步到供应链系统中，以及从供应链获取数据进行存储，统一来管理门店、菜单等数据、最后就应用到供应链上

指标管理系统

指标管理系统是一个针对指标可视化分析的项目，旨在帮助用户对各类指标进行全流程管理和多维度分析。该系统的主要功能是收集、存储、展示和分析各类指标数据

• 多维度分析：用户可以按照时间维度、地区维度、用户群体维度等对指标数据进行分析
• 数据可视化分析: 将收集到的指标数据转化为直观图表、报表等形式

智能补货系统

智能补货供应链项目是一个为门店经营提供支持的智能化解决方案。该项目旨在解决门店经营中的损耗率、缺货、囤货等问题，通过全方位监控进销比、损耗、订货检查等关键业务指标，提供实时的数据分析和智能化的补货建议，帮助门店管理者优化运营决策和供应链管理

• 数据监控与分析
  • 智能补货供应链项目会收集门店经营的相关数据，包括销售数据
  • 库存数据、进货数据、损耗数据等。通过对这些数据进行实时监控和分析
• 损耗率监控
  • 项目会对门店的损耗情况进行监控和分析。通过比对进货数据和实际销售数据，系统能够计算损耗率，并及时发现损耗异常情况，帮助门店管理者找出损耗原因，采取相应措施，降低损耗率，提高经营效率
• 订货检查
  • 项目会根据门店的订货计划和实际销售情况进行对比，及时发现订货不足或过剩的情况，并提醒门店管理者进行相应调整，保证货品供应的准确性和及时性

智能策略卡片

• 面向运营场景的项目，用户可以制定针对不同运营目标的营销策略，进行购买时机预测，以及挽回流失用户，通过制定目标看板，来提供营销策略

会员/点单小程序

面向茶饮业务场景,主要功能线上点餐、外卖、商品详情、配送状态、订单等等， 结合卡券营销策略，优惠劵这种叠加 主要是这些功能

• 主要负责该项目的页面开发、组件开发、性能优化，跟踪线上问题，以及优化用户体验
• ci自动化部署上传

面向茶饮的场景,主要功能为订单查询、配送状态查询、催单退货操作、线上点餐，支持外卖、堂食、自提等多种订单类型，同时结合卡券营销策略，促进顾客点餐下单

• 订单查询和配送状态查询

  • 用户可以在小程序中查询自己的历史订单和当前订单的配送状态。这样，用户可以方便地了解自己的点餐记录和订单配送进度，提高用户对订单的跟踪和管理能力。

• 线上点餐和订单类型：

  • 用户可以在小程序中进行线上点餐，浏览菜单、加入购物车并完成订单支付。小程序支持多种订单类型，包括外卖、堂食和自提，用户可以根据需求选择最适合自己的订单方式。

你是如何管理项目

对于产品/项目来说，基本是长期维护的，需要进行根据业务进行模块拆分，减少耦合程度，减少后续的维护成本以及人力

• 模块拆分
• 业务拆分
• 组件复用
• 减少耦合度，便于维护

职业规划

• 1、提高自己的技术能力和工作能力，挑战自己，做具有挑战性的工作

• 2、有机会的话可以带领团队，管理前端工作，做前端的leader

• 4、我希望到公司能做核心部分，比如工程化方面、组件开发、工具开发，核心业务方面，开展代码审查过程，指定一些规范等等，这个是我比较看重的，我觉得这个是比较有价值的事情。以及管理方面，希望有机会尝试管理，我觉得管理也是技能能力的一部分

• 5、往业务方向去深入，技术只是辅助业务

找工作的考虑因素

• 薪资福利待遇情况
• 工作内容的职业发展方向

离职原因

• 天讯瑞达

  • 这家第一家公司，当时待了有1年多了， 就想多接触别的，能提升自己，做具有挑战性的工作

• 数果科技

  • 上家公司的工作制度不太能接受，加班比较严重
  • 团队强制推出996，不太能接受

• 云徙科技

  • 当时负责的项目解散了、负责的业务线被砍掉了，做的这个项目产品一直没什么收益

• 字间科技

  主要是福利和业务调整比较大，从原来的双休变成大小周，加班也没有调休，补贴也取消了，业务也调整比较大，对绩效浮动比较大的影响，相当于降薪了

  • 主要是福利减少了，从原来的双休变成大小周，加班也没有调休，补贴也取消了
  • 业务调整也是比较大的，对绩效浮动有比较大影响，相当于降薪了
  • 还有一个需求经常变动问题，因为没有产品经理，老板是产品经理出身的，他觉得自己就够了，现在基本上是老板直接下发需求了，现在是基本上没有需求评审了
  • 但是你才半年就离职耶？
    • 第二家公司我也是干了半年离职，但是也是因为公司制度以及福利问题
  • 还要求转岗，需要做安卓和ios，就受不了

需要问的问题

技术官：

• 了解下公司的团队情况
• 了解项目发版的频率情况，有规定一周发几次吗？
• 我进去公司的话，主要是负责哪一块业务？
• 需要出差吗？
• 有考核吗

hr:

• 福利待遇的情况？
  • 绩效、提成、奖金、年终奖
• 试用期打折？
• 加班情况？

谈谈你是如何把控项目能力？

• 针对于项目把控，首先需要对项目的熟悉度、以及项目的业务需要熟悉，才能更好的把控项目

• 在之前公司也独立负责过多个项目，包括b端和c端都有，都是从0到1，从一开始的需求评审到每个版本的迭代到测试到上线都需要跟进过程。项目才能更好的去把控。

• 如果项目对于需求排期比较紧急，上线可能有风险，这需要及时去沟通去协调，看看有没有资源去配合，或者需求能不能部分上线，优先去做紧急的需求，而对于优先级低的往后，这样也可能解决这个问题

谈谈你在项目里是如何做前端工程化？

• 前端工程化的主要目标就是提高生产效率
• 搭建整个项目架构的基础基建，比如集成相关规范（如git提交规范、eslint规范）、构建的配置优化、组件库选型、包管理统一使用pnpm，可以更好的去管理项目之间的依赖
• 对于多个新的项目来说，这些基础架构框架其实都一样，可以设计成通用的脚手架，对于脚手架的开发也是有经验的，自己也写过脚手架并且开源，通过脚手架集成了常用的配置，提高了项目搭建的效率。是有意义的
• 针对项目的静态资源的处理，通过cdn+oss的配合