前端面试
前端面试
https://wuhaohao1234.github.io/resume-arco/
https://juejin.cn/post/6871956933775982606#heading-65
https://juejin.cn/post/6844904166742048782#heading-4
https://juejin.cn/post/6844904160719011848#heading-21
https://juejin.cn/post/6844904093492707336
链接说明
朋友链接 https://www.yuque.com/abu0418/uf2dbz/gqwnmm
内部链接 https://www.yuque.com/abu0418/kb/crk4dm
常用
闭包
一个function里面return了一个子函数，子函数访问了父函数的变量。
可以访问自由变量的函数
防抖 节流
防抖：一段时间只运行一次
节流：而函数节流是间隔时间执行，不管事件触发有多频繁
localStorage sesstionStorage cookie
cookie
一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效
4k
每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage sesstionStorage
localstorage 除非被清除，否则永久保存
sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除
仅在客户端（即浏览器）中保存，不参与和服务器的通信
5mb
vue 生命周期
created 发生在实例创建完成后，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互（因为Dom还没有创建），如果非要想，可以通过vm.$nextTick来访问Dom。
beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
mounted发生在挂载完成后，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。
beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。
beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器，销毁父组件对子组件的重复监听。beforeDestroy(){Bus.$off(“saveTheme”)}
destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
react生命周期
Initialization 初始化
constructor() : class 的构造函数，并非React独有
Mounting 挂载
componentWillMount() : 在组件即将被挂载到页面的时刻自动执行； render() : 页面挂载； componentDidMount() : 组件被挂载到页面之后自动执行；
componentWillMount() 和 componentDidMount()，只会在页面第一次挂载的时候执行，state变化时，不会重新执行 Updation 组件更新
shouldComponentUpdate() : 该生命周期要求返回一个bool类型的结果，如果返回true组件正常更新，如果返回false组件将不会更新； componentWillUpdate() : 组件被更新之前执行，如果shouldComponentUpdate()返回false，将不会被被执行； componentDidUpdate() : 组件更新完成之后执行；
componentWillReceiveProps() : props独有的生命周期，执行条件如下：
组件要从父组件接收参数； 只要父组件的render()被执行了，子组件的该生命周期就会执行； 如果这个组件第一次存在于父组件中，不会执行； 如果这个组件之前已经存在于父组件中，才会执行；
Unmounting 组件卸载
componentWillUnmount() : 当组件即将被从页面中剔除的时候，会被执行；
hash history
hash 路由：监听 url 中 hash 的变化，然后渲染不同的内容，这种路由不向服务器发送请求，不需要服务端的支持；
history 路由：监听 url 中的路径变化，需要客户端和服务端共同的支持
一个带#，一个不带
hash 是可以做单页面应用
this指向
es5 指向调用者
es6 指向所处环境
EventLoop 事件循环
执行一个宏任务（栈中没有就从事件队列中获取） 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行） 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
同步代码 宏任务 微任务 异步代码 宏任务 微任务
macrotask：主代码块，setTimeout，setInterval等（可以看到，事件队列中的每一个事件都是一个macrotask）
microtask：Promise，process.nextTick等
BFC IFC
bfc
在块格式化上下文中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（所以浮动元素正常会直接贴近它的包含块的左边，与普通元素重合），除非这个元素也创建了一个新的BFC。
内部 box在垂直方向，一个接一个的放置
box的垂直方向由 margin决定，属于同一个BFC的两个box间的margin会重叠
BFC区域不会与 floatbox重叠（可用于排版)
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算BFC的高度时，浮动元素也参与计算（不会浮动坍塌）
ifc
IFC即行内框产生的格式上下文。
浮动元素可能会处于包含块边缘和行框边缘之间，尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度（包含块的宽度），它们可能会因浮动元素缩短了可用宽度，而在宽度上发生变化。
同一行内格式化上下文中的行框通常高度不一样（如，一行包含了一个高的图形，而其它行只包含文本），当一行中行内框宽度的总和小于包含它们的行框的宽，它们在水平方向上的对齐，取决于 text-align 特性。空的行内框应该被忽略。
即不包含文本，保留空白符，margin/padding/border非0的行内元素，以及其他常规流中的内容(比如，图片，inline blocks 和 inline tables)，并且不是以换行结束的行框，必须被当作零高度行框对待。
行内元素总是会应用IFC渲染规则
行内元素会应用IFC规则渲染，譬如 text-align可以用来居中等
块框内部，对于文本这类的匿名元素，会产生匿名行框包围，而行框内部就应用IFC渲染规则
行内框内部，对于那些行内元素，一样应用IFC渲染规则
另外， inline-block，会在元素外层产生IFC（所以这个元素是可以通过 text-align水平居中的），当然，它内部则按照BFC规则渲染
react组件通信
父子组件 props 自定义事件 Redux 和 Context，简单数据用 Context
常用hooks
usememo和usecallback
useMemo 和 useCallback 接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于 useMemo 返回的是函数运行的结果， useCallback 返回的是函数
git rebase merge
通过merge合并分支会新增一个merge commit，然后将两个分支的历史联系起来
其实是一种非破坏性的操作，对现有分支不会以任何方式被更改，但是会导致历史记录相对复杂
rebase会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交
主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的不必要的合并提交
reflow&repaint 重绘 重排
重绘：某些元素的外观被改变，例如：元素的填充颜色 重排：重新生成布局，重新排列元素。
solid 原则
Single Responsibility Principle：单一职责原则 Open Closed Principle：开闭原则 Liskov Substitution Principle：里氏替换原则 Law of Demeter：迪米特法则 Interface Segregation Principle：接口隔离原则 Dependence Inversion Principle：依赖倒置原则