21年前端面经总结

4.20更新～ 已经成功入职shopee一周啦！

如果有想来shopee的伙伴可以发简历到我的邮箱呐，可以帮内推～  研发岗都可以

408832499@qq.com

关注我的朋友应该都知道，我在考研初试分数出来之后就去找工作啦，本人在此前有过一年的前端经验，但是重新社招的话其实和应届生的要求是差不离的，所以把这个面经发出来供大家参考～由于书每一次面完之后简单记录的，可能会有遗漏或者是不够详细的情况，请谅解～

腾讯imweb面经

自我介绍+项目介绍

说说闭包

有自己造过轮子吗

css 如何处理垂直居中

.wp {    display: table-cell;    text-align: center;    vertical-align: middle;}

.box {    display: inline-block;}

实现一个eventbus 可以实现eventbus.on('eventname',function(){})  //注册该事件 eventbus.off('eventname') //取消该事件   eventbus.trigger('eventname')  //触发该事件

两个大整数相加  字符串返回结果

有做过哪些性能优化 还了解哪些性能优化

用过react hooks吗

说说xss csrf 的攻击原理和防御方法

逻辑题： 五点十五分 时针和分针夹角

平时怎么学习的

海康威视面试：

css相关：

水平垂直居中的各种方法

absolute的使用

左定宽右自适应的方法

flex的主轴相关

js相关：

数组的操作

去重的数组操作方法

foreach和map的区别，是否都有return，没有return的话返回什么

怎样搜索一个数组中的对象是否有某个属性

promise的使用

this的指向

settimeout的回调函数里的this指向哪里

react的双向绑定/ 组件传值（父子互传）

vue的生命周期钩子

商汤：

简历强相关 项目相关 问了很多

怎么获取wifi状态 蓝牙状态

上一份工作的收获

js：

for in  for of:

for (let o in obj) 主要用于遍历对象的键名o （数组也可）（遍历可枚举enumerable对象）

for (let item of arr) 遍历具有Iterator接口的结构的键值，如数组，字符串，Set Map

（但是不可直接用于普通对象，可以用Object.values(obj) Object.keys(obj)包裹，再使用for of遍历

还可以用Array.form(likeArr)将类似数组的对象 如 let likeArr = {length:1,0:'a'}转化为数组）

（只返回键名为数字的键值，es6新方法, for of 可替代 forEach，且它可以与break、continue和return配合使用）

let arr = [3, 5, 7];
arr.foo = 'hello';

// arr [3, 5, 7, foo: "hello"]

arr.forEach((item)=> console.log(item))  // 3 5 7

for(let item of arr) console.log(item)  // 3 5 7

for(let o in arr) console.log(o)  // 0 1 2 foo

数组reduce方法 filter slice splice

解构赋值： 从数组或对象中提取值，按照对应的位置，对变量赋值

扩展运算符

http和https区别 怎么实现安全连接

前端缓存相关  前端数据库用过吗

localstorage和session区别

react-imvc特点优点

git rebase 和 git merge区别

怎么撤销一个commit （git revert id）

蚂蚁金服

原型链继承

Object.create(proto) 创建一个以某个对象为原型的新对象
es6继承原理
this相关
apply call
生成一个长度为20的数组
nginx反向代理为什么要
跨域是什么 解决方案
http的header 缓存(强缓存弱缓存)  状态码
react中key作用
react不可变数据
前后端同构是怎么实现的 两份代码吗 window.在后端无法调用怎么办
react native对系统的调用了解吗
数组的去重时间复杂度

Object.keys和for in的区别

for in 遍历的属性包括原型链上的属性值，但是拿不到Symbol属性

Symbol属性可以通过 Object.getOwnPropertySymbols() 方法拿到 返回一个数组

pureComponent

强缓存和弱缓存（协商缓存）

用到的http header

强缓存: cache-control: max-age:秒数 public/private/no-cache(跳过强缓存直接走协商缓存)/no-store(不使用缓存了)   先通过判断有效时间，没有过期则使用浏览器本地的缓存返回200，如果过期再去服务端请求

协商缓存：eTag和last-modified  浏览器向服务端请求资源并携带上旧的eTag，服务端比较eTag是否相同，以及last-modified判断资源是否更新修改过，没有则返回304使用客户端的缓存，有修改则返回新的资源和eTag以及200状态码

wps武汉

cookie安全问题

cookie的使用 document.cookie

cros跨域原理

执行上下文的三要素

作用域 作用域链 闭包

箭头函数的特点

react中的key为什么不能用index 在什么情况下会有问题

当在数组的头部新增item时，会导致index的变化，和原先的index不一致，渲染错误

git在另一个分支上提交某个commit

用git cherry-pick commitId

浏览器的eventloop

事件委托有了解吗

解释一下闭包 原理？答的垃圾回收机制

浏览器输入url的过程

HTTP1.0和2.0区别

浏览器缓存机制

使用react或vue怎样优化seo

react和vue相对于jq有什么优点缺点

koa和express有什么区别

服务端渲染相关

浏览器安全问题 xss和csrf 及解决方法 与cookie的关联

怎样处理页面白屏的问题 整个的思路 用到的工具

喜马拉雅上海

tcp为什么要四次挥手

promise.all的实现

浏览器缓存

移动端适配方案 rem

js继承的机制

position的值 relative相对什么定位的

react hooks为什么不能卸载条件语句中

this指向问题 如何改变

typeScript使用过吗

webpack了解吗

css动画的实现 transition 和 animation 搭配 @keyframes

transition：过渡效果属性名 过渡时间 过渡效果速度曲线 效果开始的延迟时间

如 transition: width 2s ease 0.5s

可以用逗号将属性名隔开，对不同的属性添加过渡效果

如 transition: width 2s ease 0.5s, height 1s liner 1s

事件触发时才会出现动画，是一次性的，不能自动开始

两个状态（初终）都需要具体的值，不能使用auto none之类的

animation：

通过animation-name声明关键字  然后@keyframe 关键字{ //定义状态 }

shopee深圳

原型链 prototype __proto__  继承关系

闭包 作用

判断类型

事件轮询

span怎么调整中间间距

inline和block区别  img

this指向

let obj = {
name:'obj',
name2: this.name,
say1:function(){console.log(this.name)},
say2:function(){
setTimeout(function(){console.log(this.name)},0)
},
say3:function(){
setTimeout(()=>{console.log(this.name)},0)
}
}
obj.name2 //""
obj.say1() //obj
obj.say2() //undefined
obj.say3() //obj

实现数组扁平化

实现两个大数相加

vue和react区别

虚拟dom作用

diff算法

xss  csrf

http2.0和1.1区别

react vue通信方式

二面忘记记录了，印象中问了很多项目相关和框架相关的问题，

以及实际应用，如怎么实现登录态保存，怎样做性能优化，在页面有非常多信息的情况下等

以上只是面试问题的简单记录，供参考查漏补缺，但是系统的前端学习不能只靠背面经来投机取巧，很容易一问三不知哒。

希望对大家有帮助～