经典面试题

• 1. 说说对react hook的理解？
• 2. 说说AMD、CMD、commonJS模块化规范的区别？
• 3. 说说package.json中版本号的规则？
• 4.说说你对koa中洋葱模型的理解？
• 5. 说说如何借助webpack来优化前端性能？
• 6. 说说你对webSocket的理解？
• 7. 说说redux的实现原理是什么？核心代码？
• 8. React合成事件的原理?
• 9. 数组常用方法及作用？
• 10. react新出来两个钩子函数是什么？和删掉的will系列有什么区别？
• 11. CDN的特点及意义？
• 12. 什么是闭包，应用场景是什么？
• 13. 从浏览器地址栏输入url到显示页面的步骤？
• 14. 介绍一下你对浏览器内核的理解？
• 15. 清除浮动的几种方式？各自的优缺点？
• 16. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

1. 说说对react hook的理解？

hook 是react16.8新增的一些特性，它可以让你不编写class的情况下，使用state以及其它的react特性
至于为什么引入hook，官方给出的回答是：解决长时间使用和维护react过程中常遇到的问题。
例如：
• 难以重用和共享组件中的与状态相关的逻辑。
• 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的loca state时，每个生命周期函数中可能回包含着各种互不相关的逻辑在里面。
• 类组件中的this增加学习成本，类组件在基于现有工具的优化上存在些许问题。
• 由于业务变动，函数式组件不得不改为类组件等。
编写hooks为函数式编程，每个功能都包裹在函数中，整体风格更清爽、更优雅。
hooks的出现使函数式组件的功能得到了扩充，拥有了类组件相似的功能，使用hooks可以解决大多数问题，并且还拥有代码复用机制，因此优先考虑hooks

2. 说说AMD、CMD、commonJS模块化规范的区别？

commonJS
• 常用于：服务器端、node、webpack
• 特点：同步/运行时加载、磁盘读取速度快
AMD
• 常用于：commonJS浏览器端实现
• 特点：
◦ 异步加载：因为面向浏览器端，为了不影响渲染肯定是异步加载
◦ 依赖前置：所有的依赖必须写在最初的依赖数组中，速度快，但是会浪费资源，预先加载了所有依赖不管你是否用到
CMD
• 常用于：不常用，根据CommonJs和AMD实现，优化了加载方式
• 特点：
◦ 异步加载
◦ 按需加载/依赖就近：用到了再引用依赖，方便了开发，缺点是速度和性能较差

3. 说说package.json中版本号的规则？

package.json 是用来 进行包管理的，它里面记录着当前这个项目中各个依赖包或者说是插件的信息，并且这些依赖包都会有一个版本号，版本号上不同的位置数字代表不同的含义
分别是：主版本号.子版本号.修复版本号
另外针对版本号还有符号进行安装和更新的控制：
• 不加符号：安装指定版本；
• 波浪号~：不更新主版本号，子版本号，会更新修复版本，但是如果子版本号是0，则会更新；
• 插入符号^：不更新朱版本号，会更新子版本号和修复版本号；

4.说说你对koa中洋葱模型的理解？

什么是koa？
koa是一个精简的node框架，被认为是第二代node框架，其最大的特点就是：独特的中间件流程控制，是一个典型的洋葱模型、它的核心包括两个方面：

1. 将node原生的req和res封装成为一个context对象。
2. 基于async/await的中间件洋葱模型机制。
   什么是洋葱模型。
   Koa的洋葱模型是以next()函数为分割点，先由外到内执行Request的逻辑，然后再由内到外执行Response的逻辑，这里的request的逻辑，我们可以理解为是next之前的内容，response的逻辑是next函数之后的内容，也可以说每一个中间件都有两次处理时机。洋葱模型的核心原理主要是借助compose方法
   为什么需要洋葱模型？
   因为很多时候，在一个app里面有很多中间件，有些中间件需要依赖其他中间件的结果，用葱模型可以保证执行顺序，如果没有洋葱模型，执行顺序可能出乎我们的预期
   如下是洋葱代码的案例：

const Koa = require('koa');//Applications
const app = new Koa();// 中间件1
app.use((ctx, next) => {console.log(1);next();console.log(2);
});// 中间件 2 
app.use((ctx, next) => {console.log(3);next();console.log(4);
});app.listen(7000, '0.0.0.0', () => {console.log(`Server is starting`);
});// 中间件的打印顺序是1 -> 3 -> 4 -> 2 

5. 说说如何借助webpack来优化前端性能？

通过webpack优化前端的手段有：
• JS代码压缩
• CSS代码压缩
• Html文件代码压缩
• 文件大小压缩
• 图片压缩
• Tree Shaking
• 代码分离
• 内联 chunk

6. 说说你对webSocket的理解？

WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅
客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输

7. 说说redux的实现原理是什么？核心代码？

react整个应用中有许多个组件，这些组件都有自身的状态，包括自定义的一些state。组件之间通过props进行通信，通过context实现数据共享。
每个组件都管理自身相关的状态，理论上是可以进行运行的，但是在开发后期以及维护的时候，将花费大量精力去查询状态的变化过程。如果让这些状态进行统一管理，当需要改变其中的状态时，只需要对这个管理进行处理，其它的组件就会感知到状态的变化。
redux就是实现上述的集中管理的一个容器即js应用的状态容器，提供可预测的状态管理
遵循三大原则：

1. 单一的数据源
2. state是只读的
3. 使用纯函数进行修改
   redux并不只是在react应用中使用，还可以和其它的一些界面库来结合使用，比如vue
   核心代码
   createStore来创建store
   store.dispatch帮助派发action，action会传递给store
   store.getState()这个方法会帮助我们获取store中的全部数据
   store.subscrible方法订阅store的变化，只要store发生改变，store.subscrible接受的
   这个回调函数就会执行

8. React合成事件的原理?

合成事件是模拟原生dom事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器，根据w3c规范来定义合成事件，兼容所有的浏览器，拥有与浏览器原生事件的相同的接口。
原生事件与合成事件区别：

1. 事件命名方式

//原生事件命名方式
<button onclick='btn()'>按钮</button>//合成事件命名方式
<button onClick={btn}>按钮</button>合成事件命名需要使用小驼峰命名法

2. 事件的处理方式不同

//原生事件 事件处理函数写法
<button onclick='btn()'>按钮</button>//合成事件 事件处理函数写法
<button onClick={btn}>按钮</button>

9. 数组常用方法及作用？

1. forEach—遍历每一个元素
2. map—遍历每一个元素，返回值是一个数组
3. filter—筛选符合条件的元素，返回值是一个数组
4. includes—查找符合条件的元素
5. shift—从开头删除一个元素
6. unshift—从开头插入一个元素
7. slice—切割，slice(起始位置，长度)
8. indexOf—查找元素
9. pop—从尾部删除一个元素
10. push—从尾部添加一个元素
11. reduce—用于累计求和
12. some—遍历元素
13. sort—排序
14. splice—切割，splice(起始的位置，长度(包括最后一个))
15. find—查找元素

10. react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

React16的2个新的生命周期：
getDerivedStateFromProps，getSnapshotBeforeUpdate
React16废弃的生命周期有3个will：
componentWillMount
componentWillReceiveProps
componentWillUpdate
废弃的原因： 是在React16的Fiber架构中，调和过程会多次执行will周期，不再是一次执行，失去了原有的意义。此外，多次执行，在周期中如果有setState或dom操作，会触发多次重绘，影响性能，也会导致数据错乱。

11. CDN的特点及意义？

解析URL地址
CDN 意为内容分发网络，是基于现有网络的智能虚拟网络，分布在世界各地的边缘服务器上。
1.本地缓存加速
2.镜像服务
3.远程加速
4.带宽优化
5.集群抗攻击

12. 什么是闭包，应用场景是什么？

闭包就是能够读取其他函数内部变量的函数，只不过是处于其他函数内部而已。
闭包的作用：
作用：延伸变量的作用范围。
变量不会销毁（核心作用）
变量什么时候不会销毁：变量被引用并且有内存
闭包的缺点：内存泄漏（栈溢出）
应用场景：

1. 闭包应用-计算打车价格
2. 闭包应用-3秒钟之后,打印所有li元素的内容
3. 利用闭包的方式得到当前li 的索引号
4. 创建私有变量
5. 延长变量的生命周期

13. 从浏览器地址栏输入url到显示页面的步骤？

1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与服务器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应。根据情况选择关闭TCP连接或者保留重用
8、如果得到的资源(静态)可以缓存，进行缓存
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、ajax(Asynchronous Javascript And XML)异步处理 可以在不重新加载整个网页的情况下，对网页的某部分进行更新

14. 介绍一下你对浏览器内核的理解？

内核 主要分为两个部分：渲染引擎(Render Engine)和JS引擎，由于JS引擎越来越独立，所以现在我们所指的浏览器内核只指渲染引擎。
• 渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
• JS引擎：解析和执行JavaScript来实现网页的动态效果。

15. 清除浮动的几种方式？各自的优缺点？

• 父级div定义伪类:after和zoom 优点：浏览器支持广，缺点：代码量多
• 父级div定义overflow:hidden 优点：简单，代码量少， 缺点：不能和position配合使用
• 结尾处加空div标签clear:both 优点：简单，代码少， 缺点：会有很多空div
• 父级div定义height 优点：简单，容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。
• 父级div定义overflow:auto 优点：简单，代码少 ， 缺点：内部宽高超过父级div时，会出现滚动条。

16. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！