2021前端面试总结
1.js基础
-
数据类型有哪些
原始（基本）数据类型有：String Number Boolean Null Undefined Symbl（es6）
引用数据类型有: Object
原始值放在栈（stack）里，引用值放在堆（heap）里。 -
判断数据类型有哪些方法
1.typeof 用于判断数据类，返回值有string、boolean、number、function、object、undefined。需要注意：js引擎认为null是空对象，所以typeof null返回的是object，数组是特殊的对象，所以typeof array 返回的也是object。
2.instanceof 用于判断该实例是否为该对象的实例。 -
判断数组/对象有哪些方法
1.Array.isArray()
image.png
2.Object.prototype.toString.call()
image.png
其他判断方法：https://juejin.cn/post/6934318149542084615
-
熟读es6文档
https://es6.ruanyifeng.com/ -
复习导图
image.png
-
Event Loop
https://mp.weixin.qq.com/s/1PCQMgrXt4bPYtW-uVZgHQ
动图：https://mp.weixin.qq.com/s/MErDXm9Tk9NRbrNT1jYZOQ
2.css基础
-
css盒模型是什么
https://juejin.cn/post/6844903505983963143 - css实现水平垂直居中（方法越多越好）
// 1
.wrapper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}
// 2
.wrapper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
// 3
.wrapper {
.box {
display: flex;
justify-content:center;
align-items: center;
height: 100px;
}
}
// 4
.wrapper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}
https://juejin.cn/post/6844904030485872654
3.HTML5
4.react基础
-
class 组件的生命周期
https://juejin.cn/post/6914112105964634119 -
虚拟DOM和diff算法
https://juejin.cn/post/6844903856690724872
diff算法：https://juejin.cn/post/6844903592520843277
5.网络基础
-
TCP 三次握手，四次挥手
图解：https://zhuanlan.zhihu.com/p/47064171
https://juejin.cn/post/6844903617732804622 -
为什么是三次握手，四次挥手？
https://juejin.cn/post/6992433321435201573
6.浏览器
https://mp.weixin.qq.com/s/vIKDUrbuxVNQMi_g_fiwUA
7.跨平台
https://mp.weixin.qq.com/s/S6sRe4oyeMiVfTpgwCmE3w
8.强烈推荐的三篇面试总结：
-
基础篇1
https://juejin.cn/post/6989422484722286600 -
基础篇2
https://mp.weixin.qq.com/s/Q2mWm_DN-vt83LSgLm-JLQ -
进阶篇
https://juejin.cn/post/6844904116339261447
9.面真题
-
X奥智能
1.原型/原型链，继承方式有哪几种，每种的优缺点。
2.eventloop。
3.diff算法如何对比两个node的（react和vue的区别） 虚拟DOM是JavaScript对象，是对真实DOM的抽象。当状态发生改变，会生新的虚拟DOM树，新树和旧树使用diff算法进行对比，然后更新真实DOM。把新旧虚拟DOM树按照层级分解，只比较同级元素。记录遍历顺序，根据TagName判断是否为同一个组件，然后递归比较该节点下的所有子节点。判断是否有改变，有改变的话放入patches集合。将集合更新到真实dom上。
4.hash-router和memory-router的实现方式有什么区别。hash-router只是一个容器，并没有DOM结构，渲染的是其子组件，并向下传递location，作为当前组件，当hash值变化的时候，通过hashchange捕获变化，修改pathnamehttps://www.cnblogs.com/lyt0207/p/12734944.html5.react-router原理。react-router是基于React的路由管理库。依赖history库history是JavaScript库，用于管理历史会话记录。管理历史堆栈，导航，确认导航以及保持会话状态。BrowserHistory：管理html5历史记录的现代浏览器。pushState,replaceState popStateHashHistory：管理旧版web浏览器 location.hash,location.replace hashchangememoryHistory: 用做参考实现，用于非DOM环境。如React Native
6.https实现过程。追问1：证书的那个戳是干啥的，追问2：散列算法是干啥的（保证数据的完整性）对称加密，非对称加密，散列算法，
7.GC原理。GC算法：1.标记清除 2.引用计数。新生代，老生代，定期遍历所有属性然后清除。先标记为0，再循环判断，不用清除的属性就改为1.之后将标记为0的全部清除。https://juejin.cn/post/6981588276356317214
8.谈谈性能优化。
9.模块AMD，CMD，ComJS啥的，模块化相关。
10.算法hash列表的查询的时间复杂度是01.为啥能快速通过key查到value？
11.迭代器和递归调用的区别。
12.箭头函数的优缺点，是否有arguments箭头函数是匿名函数，
不能作为构造函数，不能使用new箭头函数不绑定arguments，取而代之用rest参数。
箭头函数里没有this，会捕获其所在的词法环境的this，作为自己的this值箭头函数通过 call() 或 apply() bind()方法调用一个函数时，只传入了一个参数，对 this 并没有影响。箭头函数没有原型属性箭头函数不能当做Generator函数,不能使用yield关键字箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如call() , bind() , apply()普通函数的this指向调用它的那个对象 -
X禾
1.react生命周期
2.react hooks，useEffect第二个参数不传会咋样，如何自定义hooks？useEffect第二个参数不传，默认情况下每轮渲染结束都会执行。
3.react组件间的通讯方式。(父-子，子-父，兄弟组件寻找共同的父组件，通过props。React-redux，发布订阅)
4.useState的state的状态如何管理（原理）?
5.useLayoutEffect和useEffect的区别，什么时候会用到useLayoutEffect？useLayoutEffect是同步的，会阻塞渲染，useEffect是异步的。
6.跨域问题，如何解决。Jsonp，cors解决方案的缺点。
7.webpack打包
8.react Fiber的好处
9.重排和重绘的关系？
10.你做了哪些优化相关的工作，如何减少重排？
11.你遇到过哪些难题，怎么解决的？ -
X湖
1.介绍项目，做过哪些事情,多角色如何去处理？
2.react jsBrige
3.浏览器从输入链接也到网页显示都做了什么？
4.浏览器的缓存机制
5.跨域问题，解决方案，Nginx反向代理及原理
6.promise多个promise如何做，可以用promise.all
7.职业发展路径，技术提升方向？
8.你职业生涯遇到过最大的困难是什么？
9.你最难的问题是什么，你是怎么解决的？
10.算法题：1判断回文字符串，2反转整数。 -
X扣
1.自我介绍
2.性能优化
3diff算法
4.对fiber的理解
5受控组件和非受控组件的区别
6.手写Array.prototype.reduce
7.手写css样式水平垂直居中
8.css如何让文字居中
9.Object.is与===的区别
10.promise与async和awit的区别
11.hooks使用注意事项，为啥不能在条件语句中使用
12.useRefs
13.箭头函数与普通函数的区别
14.state如何做深比较（自定义hooks函数实现）
