面试经历
同花顺 一面挂
1、算法题：罗列指定数组中任意3个元素的组合
2、做过哪些Vue组件？
有不少, 大部分是基于业务的, 比如在执法记录仪项目中, 需要弹窗预览视频文件, 自已封装了一个弹窗组件, 实现窗体拖动和小窗模式
通过props提供了配置项, 包括宽高、是否支持拖动等
分为header、body两部分, header部分是标题和两个操作图标, 小窗/和关闭, body部分就是一个插槽slot
窗体拖动的实现通过监听 header部分 mousedown 和 mouseover , 只有 mousedown 状态下 mouseover 的部分才生效
在鼠标移动时, 通过 e.clientX - e.offsetX(可以在down阶段缓存) 计算出窗体的 left 和 top
在这个过程中本来是想做一下节流提高性能的, 但是发现如果做了节流, 操作体验感不太流畅
然后还有一个优化点是拖动太快的话, 鼠标已经移出header部分了, 就导致 mouseover 的部分触发不了, 这个部分用了padding (inline 垂直部分不影响布局, 对左侧用 margin-left 负值对冲)做优化, 增大了header部分的交互范围
3、事件循环机制
宏任务(主代码块、setTimeout/setInterval/requestAnimationFrame)
-> 微任务(promise.then、process.nextTick(Nodejs)、MutationObserver(监听DOM结构变化的接口))
-> UI渲染
-> 宏任务...
4、浏览器缓存
强缓存 Cache-Control: max-age=3600, eExpires(http1.0, 在1.1中已弃用)
协商缓存 Last-Modified, ETag
5、实现一个Vue组件/插件需要注意什么
滴滴 一面挂
0、自我介绍
我叫陈一珂, 来自浙江台州, 17年本科毕业于杭州电子科技大学计算机专业, 毕业后进入海康, 岗位是前端工程师, 3年工作经验, 主要是数据可视化的方向, 优势是基础比较扎实, 熟练掌握原生的JS, 包括原型链、闭包、作用域、事件循环等概念, 对浏览器原理和网络相关也有研究, 比如缓存、本地存储、http协议、网络安全等等, 对Vue的源码也了解一点, 缺点是算法这块研究不多, webpack和node也只是会用, 没有深入研究。
1、为什么选择Vue？
生态圈发展完善, 有详细的文档资料可查, 学习成本、开发成本较低
2、介绍浏览器缓存？
同上
3、做过哪些Vue组件？
同上
4、对Node是否了解？
使用node做过http服务器, 用于实现大视频文件的播放, 主要用的http模块收发请求, fs模块读写文件
5、http切换https, 前端需要做哪些工作？
6、说说前端技术发展趋势
大华 两轮面试
0、自我介绍
1、(笔试) for in 与 for of
for in 可以枚举对象(不包括原型对象, 包括函数)、数组(forEach的index)
for of 可以迭代字符串、数组(forEach的value)、类数组, 包括原型对象
2、(笔试) 冒泡排序
3、(笔试) 盒模型示意图
4、缓存
5、从url输入到展示的过程
6、flex布局
7、css居中
8、组件间传值
9、Vuex
个推 一面挂
0、自我介绍
1、事件循环机制
2、css垂直居中
3、箭头函数与普通函数的this指针
4、缓存
5、用过ES6中的哪些方法
6、数组去重
[...new Set(arr)]
循环法, 返回一个新数组, 遍历原数组的值判断是否在新数组内 reduce、for循环、forEach
7、删除数组指定下标的元素
splice(index, 1)
filter
8、介绍作用域
9、v-model 实现原理
10、实现一个Vue组件/插件需要注意什么(组件的生命周期)
11、promise 与 async/await
12、promise 不返回对象, 继续执行 then
13、http状态码
14、BFC块级上下文的作用、产生条件
触发BFC的规则：根元素, float, position: absolute/fixed, inline-block, table-cell, table-caption, flex, inline-flex, overflow不为visible
BFC块级上下文的应用：
解决浮动带来的高度塌陷
解决margin重叠
15、使用 new 调用函数时会发生什么
创建一个新对象
将该对象的 proto 指向原先对象的 propotype
将函数的 this指针 绑定到新对象上
返回这个新对象
丁香园 一面挂
0、自我介绍
1、跨域
2、Promise实现原理
3、作用域链
4、Vue mixin
5、Vuex
6、父孙组件传值
7、对称加密与非对称加密
8、Vue双向绑定原理
view -> model
model -> view 通过数据劫持重新定义了set方法, 数据变化时通知收集到的依赖(watcher)触发更新
9、开发过程中做过哪些提升效率的事情
10、Vue生命周期(分别可以做哪些事情)
11、Vue nextTick
12、介绍HTTPS
13、节流/防抖
14、重绘/回流
15、watch/computed的区别
16、DOM 与 BOM 的区别
17、v-model实现原理
本质是一个语法糖, 通过v-bind注册input事件, 将新值赋给vm实例的相应属性, 通知之前收集的依赖重新渲染
大搜车 一面挂
电话初试
事件循环机制
Vue双向绑定原理
data -> view 初始化阶段对data进行数据劫持, 在get时收集依赖, 在set时触发依赖, 通知组件重新
view -> data 在模板编译阶段监听DOM事件, 并通过修改状态触发依赖
箭头函数
没有自己的this(对应不能用call、apply、bind改变this、没有构造函数和原型属性), 没有arguments(可以用剩余参数代替)
平时的主要工作
技术选型、框架搭建、编写设计文档、编码、重构、优化
做过哪些性能优化
现场面试
事件循环机制(问到异步事件和微任务在什么时候被添加到队列)
promise实现原理、原型API、实例API
节流防抖
做过哪些性能优化
做过哪些前端工程化的操作
使用 new 调用函数时发生了什么(问到用什么方式将构造函数的this指向被创建的实例(bind,call,apply), 应该是希望手写)
Vue双向绑定原理
Vue虚拟DOM
CSS3动画丢帧的原因
浏览器主线程与合成线程调度不合理
GPU渲染
浏览器对HTML的解析(层级树的作用和怎么生成)
宇泛智能 一面挂
做过哪些项目
做过哪些业务之外的沉淀
编码规范性的建设
函数执行上下文
函数闭包
函数式编程
let、const、var
原型链
调用 new 关键词后发生了什么
创建一个对象
call、apply、bind
前端本地存储
跨域
事件循环机制
继承的实现方法
TS
Nodejs
webpack
TCP三次握手/四次挥手
HTTP2.0
post/get区别
浏览器缓存
ES7、8及之后的标准
遇到过哪些浏览器兼容性问题
为什么Vue的文件中的数据定义要用 data() 函数
Vue文件 css 的 scoped /deep/
Vue初始化流程与生命周期
Vuex
节流/防抖
vue-router路由实现原理
Vue虚拟DOM
BFC块级上下文
html5中新增了哪些接口
SEO
做过哪些通用性的模块, 是否有发布到npm
服务端渲染SSR
政采云 一面挂
缓存
从url输入到展示的过程
不同页面间的通信
盒模型
浮动和清除浮动
哪些事件可以冒泡
事件循环机制
防抖和节流
vue-router 原理
nextTick
组件通信
computed 与 watch 的区别
路由传值
浙江电子口岸
一面
MVVM架构
Model 用JS表示, View 负责显示, ViewModel 负责关联前两者, 即两者任一修改时同步到另一者
MVVM 架构的好处是让开发者摆脱了DOM操作, 仅需要专注于数据的处理
双向绑定原理
computed 的特性
vue-router 原理
组件的异步加载
Vue的优势
二面 周一
核群信息(酷家乐) 一面挂
浏览器渲染过程
双向数据绑定
初始化流程
项目-通信模块(大文件上传)、三维渲染模块
原型链
继承的实现方式
手写call函数
闭包
垃圾回收机制
层叠上下文
盒模型
两列布局
手写promise.all
安恒
一面
网易
插槽 slot / scope-slot
涂鸦智能(一面挂)
朗新科技
深睿医疗
一面
跨页面通信
同源情况
BroadcastChannel
Service Worker
Shared Worker
非同源情况
算法：两数之和
二面
跨域
Vue双向绑定原理
浏览器缓存
事件循环机制
实现三列与固定宽高比布局
https
单页面的优劣
前端性能优化
从url输入到展示的过程
三面
同花顺
一面
二面
恒生电子
一面
二面
招银网络
笔试
一面
二面
HR面
中国联通
一面
使用正则匹配IPv4地址
算法: 正确的括号
算法: 根据数组建立二叉树
二面
阿里(蚂蚁金服-一面挂)
笔试题
1、数字千分位表示
2、根据数组建树
[
{id: 3, text: 'a', parent: 1},
{id: 4, text: 'b', parent: 2},
{id: 2, text: 'c', parent: 1},
{id: 1, text: 'd'},
{id: 5, text: 'e'},
]
to
[
{ id: 1, text: 'd', child: [
{ id: 3, text: 'a',
{ id: 2, text: 'c', child: [
{ id: 4, text: 'b' }
]}
] },
{ id: 5, text: 'e' }
]
3、设计一个Select组件, 实现option筛选功能, 实现下拉懒加载加分 面试题
1、做过哪些有代表性的项目
信号机项目
应用场景
Vue 与 ThreeJS 的结合
Vue实例在初始化时会进行递归遍历, 观测对象及其子属性, Scene对象是个很庞大的树形结构, 没必要且无法挂在Vue的data下面(所以挂在了window下面)
ThreeJS的部分视为特殊的双向绑定, 数据变化时更新场景对象, 场景触发事件(比如点击)时通知到Vue(基于watch)
用户的状态机
在用户状态变化时触发模型对应的扩展方法, 解耦了用户状态变化与模型的业务处理
通信层的封装
为什么使用websocket
假如要使用http来替换通信层, 如何实现
websocket兼容性问题如何处理(flash、轮询等)
鉴权方案
加密方式
文件传输
使用ThreeJs时性能方面的优化
1、使用 requestAnimationFrame 更新画布, 尽量减少或不做业务处理, 仅根据当前场景对象绘制画布
2、减小数据变化时, 场景的更新范围
3、适当减少模型的点面数
4、合理使用clone方法, 共用依赖(如形状、材质、贴图等), 减少内存开销
5、删除模型时, 递归遍历触发disponse方法阿里(CBU事业部)
字节 (一面挂)
手写防抖节流函数, 要求传入回调, 返回待执行函数, 待执行函数执行间隔不能超过 500 ms, 并且保留最后一次执行
设计输入框样式, 要求input自适应, 右侧搜索按钮固定宽度
有赞 周日 10 点
查看21道真题和解析