David Blog

主题

简历问题 ​

一. 自我介绍 ​

工作项目 ​

面试官您好, 简单的介绍一下最近一次工作项目:

星财富 H5 Hybird App ​

使用 Vue 开发 星财富，主要是用 rem 来做响应式布局。架构了 JSBridge 和 Native 通信。 JSBridge 简单理解就是向 JavaScript 中提供了可以调用 Native 方法的 api。 image

  • 单纯的向 Native 发送信息
  • 调用 Native 方法，传递信息，并执行回调函数。
  • 监听 Native 事件。

其中第 2 点，由于传递的时候只能传递字符串，所以不能直接传递回调函数， 所以得传入一个自增的唯一的 ID，并且把回调函数传入到 Map 里，那么 Native 收到消息回调 JS 方法的时候，传回自增 ID，这样可以调用那个回调函数。

角色 ​

我在项目里的角色，除了日常的工作开发，还做了一些架构工作，比如架构 JSBridge 和 Native 进行通信，前端工程化, 开发了一些脚手架, npm 包, 规范 git 提交代码, 一些错误监控。还用了微前端 qiankun 架构了子应用, eggjs 作为 BFF 中间层转发。

二. 理解 vue 和 react 的底层原理 ​

  • Vue2 响应式特点是依赖收集，通过 Object.defineProperty 递归劫持 data 的所有属性。 通过 compiler 解析模版，通过 obserser 来劫持 data，然后通过 watcher 来链接 compiler 和 observer，通过观察者模式来通知更新。
  • Vue3 通过 Proxy 重构性能更好。不再一开始就递归，运行时才递归，用到才代理。
  • React 是单向数据流，并且数据不可变，需要通过 setState 来更新。Vue 是响应式的，React 是手动 setState。Vue 对数据的更新粒度比较细，React 推崇函数式，没办法感知更新了多少，需要从 root 根节点来判断。

三. 跨端开发 和 小程序怎么理解? ​

跨端开发 ​

首先得益于虚拟 dom，根据虚拟 dom 可以解析成各种指令，然后通过 Native 引擎进行渲染操作。uni-app 是基于 weex 改进的原生渲染引擎。

小程序 ​

在渲染流程中，由 Native 打开一个 WebView 容器，WebView 就像浏览器一样，打开 WebView 对应的 URL 地址，然后进行请求资源、加载数据、绘制页面，最终页面呈现在我们眼前。

小程序采用双线程架构，分为逻辑层和渲染层。

  • 首先也是 Native 打开一个 WebView 页面，渲染层加载 WXML 和 WXSS 编译后的文件。
  • 逻辑层用于逻辑处理，比如触发网络请求、setData 更新等等。接下来是请求资源，请求到数据之后，数据先通过逻辑层传递给 Native，然后通过 Native 把数据传递给渲染层 WebView，再进行渲染。

优化:

  1. 控制 setData 频率: 合并 setData 和 状态提升数据预处理。
  2. 非渲染的数据不用 setData。
  3. 渲染的任务分片，控制元素渲染的优先级。
  4. 数据清洗，只渲染视图相关的数据。

四. 性能优化 ​

1. 体积优化 ​

分离 node_modules，包的大小一些检测。

2. 网络传输优化 ​

静态资源使用 CDN, 图片使用 base64 开启 gzip 压缩 http2 路由懒加载 合理的使用第三方的库，按需加载，减少打包体积。

3. 感知优化 ​

骨架屏

4. 代码层面 ​

长列表性能优化(分片加载大数据) requestIdleCallback，虚拟滚动，图片懒加载，路由懒加载。

5. 前端工程化 ​

  1. gitlab 来控制提交规范，比如 feat(新功能), fix(修复 bug), refactor(重构)
  2. eslint 规范代码, prettier 格式化代码
  3. 发布通用组件的 npm 包，使用 lerna 来管理提交规范。lerna 是优化管理多包依赖发布的工具。
  4. 编写脚手架来建不同的模版，提高创建一些新项目的开发效率。
  5. 架构封装了通用 JSBrige 函数来和 Native 进行交互。
  6. 错误监控。按照项目拆分，按照时间拆分，根据不同 行和列，错误信息 生成唯一的错误的 key，然后去 sourcemap 里面匹配。

6. 其它 ​

解决开发过程中遇到的各类技术难点 ​

  1. 在微前端场景下，Sentry 上报的错误无法准确定位到源码的具体行列。需要先根据错误堆判断属于哪个子应用，然后把错误进行行和列的处理，最后再把它传给 Sourcemap Npm 包进行解析。

  2. 在问卷系统里，每个表单项自己维护选中状态，同时通过防抖把数据上报给父组件。用户快速点击时，防抖会丢失传递给父组件的数据，导致 UI 看起来都选中了，但最终提交的数据却不完整。

  3. 医生工作台音视频技术，我们有用到第三方腾讯的 SDK，但是他们的软件有极小概率会出现不稳定，就是我们这边接收不到用户发来的视频。最终解决的方案是使用长轮询的方式查看当前的医生连接视频的情况。

五。 如何进行前端管理 ​

  1. 制定的前端开发规范。
  2. 根据不同组员的能力，合理的分配任务，把每个人的潜力和价值最大化。
  3. 鼓励知识创作，分享技术，共建技术文档系统。
  4. 完善前端监控和告警系统，保持项目线上稳定运行，出现问题易于追踪。
  5. 代码 code review，发现并解决潜在的问题，带领团队成员攻克难点并持续把控代码质量。

六. 介绍之前的项目 ​

1. 表格的虚拟滚动和合并单元格 ​

把大数据传给虚拟滚动组件，根据当前的滚动的高度和表格每一行的高度使用二分法算出起始索引 和 结束索引，然后把组装好的数据再传递给需要渲染的表格。

2. App 要区分大字版和小字版 ​

大字版和小字版的逻辑基本是一样的，所以会抽出公共的逻辑到同一个 hook，页面用 2 套。 用户修改完大小字版，会通过监听 'localstorage' 来进行全局大小字版修改。

3. 根据导航栏点击，滚动到不同的位置。页面滑动的时候，导航栏也会切换 ​

难点: 页面里有的图片是异步加载 或者 页面里样式交互，需要监听高度变化。特别是最后一屏有 3 块内容都集中的时候，点击 Tab 要注意触发滚动，又会选中最后一个 Tab。

解决方案: 内嵌使用 iframe: 100%宽度和高度, 如果页面高度发生变化，会触发 iframe 的 reszie 事件，重而重新计算。 点击 Tab 的时候，选中当前 Tab，并且设置变量，不根据页面的滚动去设置上面的 Tab。

Copyright © 2014-2026