前端两年半面试准备(2020)
项目问题准备以及 HR 问题准备
# 个人情况
# 自我介绍
您好,我叫郑家兴,2017年毕业于福州大学计算机专业,目前有两年多的前端开发工作经验。 熟悉 Vue 前端框架;过往的项目主要分为这三类:实时流,可视化以及前端优化。 在最近的项目中遇到了长列表渲染的问题,所选的 UI 框架不支持长列表这个功能,最终解决了这个问题,性能上比业界较为出名的 react-window 更好,并维护了一套长列表相关的组件库,包括选择器,树形选择器。 喜欢记录和分享,有自己的博客和公众号。 未来的规划是以前端为主方向,并不断学习后端以及移动端方向的技术
# 自我介绍-三分钟版本(hr)
您好,我叫郑家兴,2017年毕业于福州大学计算机专业,目前有将近三年的前端开发工作经验。
熟悉 Vue 等前端开发框架,对音视频和可视化开发有一定的了解,能够快速适应该岗位前端相关项目的新需求
喜欢探索,寻求最优解决方案,在长列表组件库中,对所用到的 react-window 开源库进行了进一步的优化
喜欢记录和分享,有自己的博客和公众号。
未来的规划是以前端为主方向,并不断学习后端以及移动端方向的技术
# 离职原因
架构调整,项目组解散
目前公司不适合现有的自身发展,寻求更大的平台
目前工作氛围较为安逸,想和优秀的人一起做有挑战的事
# 未来规划
试用期期间,多与需求方及同事进行沟通,尽快了解业务,并参与到项目当中的开发。在试用期结束时能成为独当一面的员工
在未来的一年里,多接触平台及集团开源的项目。提升技术的同时也能够帮助更好更快的完成业务需求
在未来的三年里,以前端为主方向,专精于前端架构和可视化两个细支方向,并不断拓宽后端跟移动端方向上的视野
# hr: 为什么你希望来我们公司工作?
企业文化,技术氛围
# hr: 你希望通过这份工作获得什么?
成就感。包括对公司贡献的成就感以及能力的体现与提升的成就感
# hr: 说说优缺点
优点:善于换位思考,多角度看待问题。
缺点:团队合作中没有适当的放权分配任务,有时候觉得任务分配给别人比自己完成更花时间。改进:适当放权,与团队成员多沟通,按模块特性分配
# hr: 还有什么其他问题
入职后是否会先进行一段时间的培训,如果有的话,是在厦门这边进行还是总部?
和其他城市分公司有没有经常做一些技术分享,线上或者线下进行?
# hr: 为什么选择前端
行业前景。
成就感。
# 拒绝模板(万不得已不要接受再拒绝)
首先非常抱歉,今日向您申请取消入职。 非常感谢贵公司对我的认可,并准备了多次面试,让我对贵公司有了更深入的了解,也认识到自身的不足。由于同时拿到另外一家公司的offer,思考良久,根据自己的职业期望与规划,可能该公司更适合自己的发展方向。我依然相信xx是一个很好的平台,且是一个高出我水平很多的平台,但既然重新上路,我更想选择一条能让我感觉奋不顾身的路。对这三次面试给贵公司造成资源上的浪费,我表示深深的歉意。 愿贵公司有更加美好的明天。
# 项目要点
# 云游戏
webrtc 运行过程,ice session 触控: 节流, MT B 协议,坐标归一化,datachannel ( sctp 结合tcp 和 udp 优点)传输,触点识别,Ping/Pong h5: rem 布局,全屏旋转,屏幕适配 (h5直播) pc 浏览器: 旧 -- HTTP-FLV/RTMP ;新 -- flv.js / webrtc ;移动端: 旧 -- hls/软解 ; 新 -- flv.js / webrtc
# 前端优化站
js 异步,放到页面末尾调度,并调整 js 的调度:
- 拦截 document readyState ,修改触发时机
- 重写 document.write ,包括查找其中的可执行脚本加入调度
- 并发下载异步执行
分层加载与懒加载,定义了一个计算带宽的算法:图片默认返回占位模糊图,首屏图片根据文档加载速度算压缩比,在 load 时根据资源加载速度估计带宽并得到一个配置的压缩比,看懒加载与否去加载图片
广告防屏蔽,屏蔽策略主要有两种:请求拦截,元素隐藏。前者通过重编码广告 url 解决(后端改写和前端改写),后者根据浏览器做兼容处理,有的可以简单删除广告屏蔽样式,有的需要修改样式规则避免屏蔽规则匹配
# 大数据可视化平台
基于 echarts 封装了可视化图表组件
原因:1 title 等位置不好控制,我们自己加文本框方便控制;2 统一配置项 3 添加可视化编辑功能
数据源可以设置维度和度量,不同图表支持的配置不一样
# 企业环网 portal
利用 umi-library 搭的组件库框架。项目结构上模仿 ant design ,样式抽离,实现按需加载,写法上还可以使用 antd 的 babel 插件。
遇到的问题是不支持全局引入,参考 antd 的实现,主要是 antd-tools 脚本:打包时新建一个临时文件,然后引入所有组件的样式(按规范),这样就是单独的 less ,用 rollup 插件再将该文件转成 css
长列表: 寻找第一项和更新列表总高度;antd4 list 的每个占比一致
树:将树状结构的数据拍平成一维,保留层级结构信息,根据层级设置偏移量
其他的还封装了 可选择的树形 Table,Tag 选择器等等