一名深漂程序员：我所整理和收集的前端面试题（笔记）

Posted 2021-09-01 我是真的不会前端

系列文章目录

一名深漂程序员：我所整理和收集的前端面试题（一）

一名深漂程序员：我所整理和收集的前端面试题（二）

---

一、如何做性能优化

1.webpack工程环境层面的优化

1.新的工具 ，更好的代码压缩技术 ，代码抽取vandor

2.代码层面的优化

1.少使用assets里的资源。

2.尽量使用异步代码，减少同步代码。

3.少用es5效率低的方法。多使用ES6及以上的方法

4.减少if/else的使用。可以多使用switch

5.减少链式调用。

3.部署层面

1.公共组件的抽离

2.css等静态资源的优化

4.路由层面

1.react-router中的swiitch优化 直接找到keys优化

2.把所有的route都用switch包起来，加快路由匹配的时间

二、为啥react路由里switch的子组件只能是route

react-route在封装switch组件中，在swith内部默认是props.children。默认是route组件，但如果你用div或者别的组件包住，就破坏了switch组件。

三、代码分割的原理

webpack打包时，运用到的动态导入技术。例如（()=>import()）

会自动去拆分chunk。切割代码。只要在代码中的任何模块运用到了这个技术，他就会把该分割处

背后所有依赖的东西都分为一个chunk

两个插件

1.@loadable/component

2.@babel/plugin-syntax-dynamic-import

四、react和vue的区别

思路

1.基础技术

指令的区别（vue独特的指令系统）表单的区别，事件绑定的区别，ui框架的区别、脚手架的区别、状态管理用什么技术栈的区别（flux）

2.技术的本质区别

1.vue中数据流

vue的数据传递（六七八种通信：事件总线、ref、direct、事件传参、路由传参、props等等）

react中数据流管理（状态提升、父子组件传值props、上下文、高阶组件等等）

vue和react

2.路由的区别

重定向的区别：1.react没有什么元信息和alias别名

2.react-route重定向要在router 上加exact才能正常重定向

vue中独特的路由守卫、路由元信息

3.组件化的区别

vue中组件化的核心是v-bind、v-on、v-slot

react中组件中核心是props  renderprops 和 props.childern 是组合的设计模式

4.技术的本质

vue和react本质的diff运算是怎样的，背后的原理是什么

react使用this.setState()这种方式来修改声明式变量时，这会触发渲染函数render重新运行、返回一个全新的JSX对象，进一步得到一个新的虚拟DOM。再与上一个旧的虚拟DOM进行diff运算，找到出两个虚拟DOM的最小差异（脏节点），最后把脏节点更新到视图中去。

vue是当数据发生改变时，definproperty的set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。

他们响应式原理分别是什么

5.看法

对vue2.0  3.0的看法 展望

对react的看法和理解

五、简单讲解一下 http2 的多路复用

HTTP2 采用二进制格式传输，取代了 HTTP1.x 的文本格式，二进制格式解析更 高效。 多路复用代替了 HTTP1.x 的序列和阻塞机制，所有的相同域名请求都通过同一 个 TCP 连接并发完成。 在 HTTP1.x 中，并发多个请求需要多个 TCP 连接，浏览器为了控制资源会有 6-8 个 TCP 连接都限制。 HTTP2 中 同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延 时和内存消耗。 单个连接上可以并行交错的请求和响应，之间互不干扰

六、为啥react-router-dom被Route包裹的props才有路由api

问题起因：

那些被Route直接包裹过的组件，其props上有路由API。

那些未被Route直接包裹过的组件，其props上没有路由API。面试官可能会问你原因和解决方法

原因的回答

上下文的数据没有被属性继承给传下来，属性未继承，未被修饰的组件就无法通过上下文数据去继承相应数据。

解决方案：

1.使用属性继承，把来传递路由api 前提是父级组件有路由api 如果是无父组件的话会拿不到api，不推荐这种方法

2.使用 withRouter 这个高阶组件向React组件中注入路由API。(react路由v4、v5中都可以用)     语法：withRouter(MyComponent)

3、使用路由 Hooks API （例如useHistory或useLocation）（只有react路由v5中才能使用）