面试-项目经验

395 阅读6分钟

大纲:

  • 1、海外PC站
  • 2、海外Mobile站
  • 3、Weex
  • 4、CMS

aoping@igola.onaliyun.com

Abc1234567!

1、海外PC站

项目周期:2019.03 ~ 至今

项目基本情况:

项目 Finish DOMContentLoaded Load pv uv 错误率 dist大小
旧PC 3-8s 3-8s 3-8s 无该项统计数据 无该项统计数据 无该项统计数据 5.5MB
新PC 2-6s 2-6s 2-6s max:400 avg:250 max:40 avg:25 3.5% 3.1 MB

PV/UV 的比率由原先的7%提升到10% 错误比率由原先的3.5%下降到1.3%

![](p1-jj.byteimg.com/tos-cn-i-t2…

错误分布:

  • 外部引入脚本 script error
  • undefined,代码不规范导致的
  • 部分需求设计不合理导致的

通过错误分析探索用户需求,海外站区号优化,原来是国家名(+86)这种格式,需求是只只支持国家名搜索,忽略了用户对区号的第一印象是数字,导致很多用户实际上是搜不出区号的,刚好由于正则写得不严谨,导致出现正则错误上报,所以刚好做了优化

未整理部分

重构技巧:

不要急着提交代码,应使用dev分支拉取自己的分支,进行自测后,再合并提交代码至dev分支(允许特殊模块或单独的component提交),各业务的服务则麻烦互相督促,如发生冲突和其它代码问题,应及时至讨论组进行告知,别急着提交代码。

重构体会:

迁移重构是也是算是半个苦力活,但可以回顾业务代码、架构的不足,熟悉业务逻辑,补充文档,后续优化升级汇总等好处。

做得好的地方

动态引入

1、transform-object-rest-spread 让对象也能使用解构

2、syntax-dynamic-import 路由懒加载 组件懒加载

3、babel-plugin-component 第三方组件按需加载

4、深度选择器 覆盖UI组件库样式

5、webpack-bundle-analyzer 分析bundle

6、keep-alive 优化booking页选项卡切换 summary页,contact&passager页,行李&服务页,支付页

如果只想渲染某一些页面/组件,可以使用keep-alive组件的include/exclude属性。include属性表示要缓存的组件名(即组件定义时的name属性),接收的类型为string、RegExp或string数组;exclude属性有着相反的作用,匹配到的组件不会被缓存。

7.在打包的时候把assestPublicPath,这个路径由‘/’的根目录,改为‘./’的相对路径。

如果打包后的资源没有放在服务器的根目录,而是在根目录下的mobile等文件夹的话,那么打包后的路径和你代码中的路径就会有冲突了,导致资源找不到。

8.mixins 优化通用逻辑

9.transform-runtime 将相关辅助函数进行替换成导入语句,从而减小 babel 编译出来的代码的文件大小。

10.使用自定义工具类去除项目对lodash的依赖

11.v-clickoutside v-sticky v-check指令优化代码

12.通过component标签加上is属性动态切换组件,同时配合组件懒加载实现优化,例子:订单详情页 补款订单类型信息组件 乘机人组件 联系人组件 行李找回服务组件 行李组件 服务产品组件 有用信息组件

13.滑动组件 vue-slider-component

14.项目中用到的webpack插件,作用分别是什么

15.引入单元测试避免了一个生产问题 男/女性别问题 有意义的事情

webpack3升级webpack4

  • 在 webpack4 中不再支持 CommonsChunkPlugin,而是使用 splitChunks 替代
  • 这个问题是依赖版本的问题,将 webpack-dev-server 升级到 3.1.0 就可以解决了。

做了什么,及对应的优化点

聊一聊项目

说一下技术调研计划、研发计划及阶段性复盘计划

重构工作如何进行,遇到什么问题,使用哪些指标考察重构前后性能对比

在每月末统计阶段性复盘计划中的各项指标,制定技术任务对项目在业务代码、编译速度、打包速度、首屏加载时间、打包速度、打包大小及项目体积等方面目进行性能优化。 聊一聊其中的一次

引入单元测试和code review保重优化质量。

负责航线搜索、生单验价、支付、个人信息等业务的开发工作。

业务中遇到的问题

2、海外Mobile站

项目基本情况:

项目 Finish DOMContentLoaded Load pv uv 错误率 dist大小
旧Mobile 5-8s 5-8s 5-8s 无该项统计数据 无该项统计数据 无该项统计数据 13Mb
新Mobile 3-7s 3-7s 3-7s max:1200 avg:750 max:300 avg: 175 1.2% 10Mb

PV/UV 的比率由原先的10%提升到25%

weex-vue-render 可以让你为 weex 开发的 .vue 文件跑在 webkit webview 或者任何基于 webkit 内核的移动端浏览器里。因为多了一层weex转vue,所以导致DOM解析花费更多的时间。

错误分布:

  • 内嵌APP,混入了App中的错误
  • 外部引入脚本 script error
  • undefined,代码不规范导致的
  • 部分需求设计不合理导致的

通过统计数据,可以得知各个环节的数值,最终提高各个环节的转化率。 举例,比如生单改造,我们从原先真生单变成假生单这个过程可以看到验价成功率和生单成功率比以往更优秀,但并不能从前端角度判断此次业务改造是否成功,因为联系我们页面的访问量也随之上涨,其实背后隐藏的假生单带来的投诉率上升。

未整理部分

重构,重构工作如何进行,遇到什么问题,使用哪些指标考察重构前后性能对比 参考ant-mobile组件进行设计,实际场景,分析一下? react-hook typeScript,如何使用,实际场景,遇到什么问题,怎么解决,心得

业务中遇到的问题

3、Weex

讲讲 weex-ui的设计方案,版本管理

项目 编译时间 打包时间 打包大小
weex 30s 1mins 15m

SDK 0.19.0 0.28.0 上架谷歌应用市场 原因是需要64位编码的SDK

期间遇到的问题

  • Fix 修复常用信息乘机人列表非本人乘机人Item高度被撑开的问题 flex:1
  • toUpperCase()会导致整个逻辑奔溃
  • min-height Fix BP-13932 英文版booking页面行李政策内容显示不完整
  • localeCompare 奔溃

babel-plugin-component 实现按需引入

ui组件 wxc-rich-text用于支持一行通用图文混排情况 二维数组,切割

参与过原生升级Weex SDK的技术任务,协助定位并解决升级过程中出现的weex兼容问题。总结了遇到的weex兼容问题,形成技术文档。

业务中遇到的问题

4、CMS

设计过CMS公用列表及详情页模块的设计,公用的CRUD

等级 掘力值下限 掘力值上限
Lv1 0 99

日志排查

如何用redis做接口的缓存

静态资源存储系统从FastDFS迁移至七牛云

说一下EventEmitter,用来干嘛

业务中遇到的问题