2020年前端面试总结

前言：玩了半年，今年疫情比较严重，工作比较难找，面了两个职位发现问的问题我很多回答不出来，也很久没发博客了，所以在此总结下一些常见问题，希望对找工作的你有所帮助

1、HTTP跟HTTPS的区别
HTTP和HTTPS的基本概念:

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

主要区别：

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

2、描述一下http的请求和响应流程

1、浏览器根据域名解析IP地址：浏览器根据访问的域名通过DNS找到其IP地址。
2、浏览器与WEB服务器建立一个TCP连接
3、浏览器给WEB服务器发送一个HTTP请求
4、服务器端响应HTTP请求，浏览器得到HTML代码
5、浏览器解析HTML代码，并请求HTML代码中的资源
6、关闭TCP连接，浏览器对页面进行渲染呈现给用户

3、浏览器缓存

https://www.jianshu.com/p/54cc04190252

4、js事件机制：

https://www.jianshu.com/p/87c26abca842

5、webpack的loders和plugin的区别：

• loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！ 因为 webpack 本身只能处理 JavaScript，如果要处理其他类型的文件，就需要使用 loader 进行转换，loader 本身就是一个函数，接受源文件为参数，返回转换的结果。
• Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。 通过plugin（插件）webpack可以实 loader 所不能完成的复杂功能，使用 plugin 丰富的自定义 API 以及生命周期事件，可以控制 webpack 打包流程的每个环节，实现对 webpack 的自定义功能扩展。

6、技术选型
仁者见仁智者见智吧

7、浏览器渲染原理和过程

https://www.jianshu.com/p/e6252dc9be32

8、es5跟es6的继承的区别

1.ES5先创建子类，在实例化父类并添加到子类this中
2.ES6先创建父类，在实例化子集中通过调用super方法访问父级后，在通过修改this实现继承

9、TCP/IP与UDP的区别

1、TCP是面向连接的，UDP是无连接的，TCP提供可靠的服务，也就是说，通过TCP连接传输的数据不会丢失，没有重复，并且按顺序到达，UDP没有可靠性。
2、TCP是面向字节流的，实际上是TCP把数据看成一连串无结构的字节流；UDP是面向报文的。TCP是全双工的可靠信道，UDP是不可靠信道。

10、JS单线程运行机制

https://www.jianshu.com/p/f478f15c1671

11、函数柯里化
https://www.jianshu.com/p/5e1899fe7d6b

12、webpack打包速度优化
不断变更，能优化的很多，百度下

13、网站性能优化

14、防抖和截流是什么意思？应用场景

15、MVVM双向绑定实现原理

16、promise的实现原理

17、为什么要使用SSR服务端渲染？

18、git指令

19、测试网站性能

20、使用webpack构建多页面应用

21、js的垃圾回收机制

22、写 React/Vue 项目时为什么要在组件中写 key，其作用是什么？