前端—每天5道面试题（7）
每天背5道前端面试题，你会越来越优秀
1、webpack 中 loader 和 plugin 的区别是什么？
- loader：loader 是一个转换器，将 A 文件进行编译成 B 文件，属于单纯的文 件转换过程
- plugin：plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束 后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作， 会监听 webpack 打包过程中的某些节点，执行广泛的任务。
2、介绍一下 HTTPS 中间人攻击
https 协议由 http + ssl 协议构成，具体的链接过程可参考 SSL 或 TLS 握手的概 述中间人攻击过程如下：
- 服务器向客户端发送公钥。
- 攻击者截获公钥，保留在自己手上。
- 然后攻击者自己生成一个伪造的公钥，发给客户端。
- 客户端收到伪造的公钥后，生成加密 hash 值发给服务器。
- 攻击者获得加密 hash 值，用自己的私钥解密获得真秘钥。
- 同时生成假的加密 hash 值，发给服务器。
- 服务器用私钥解密获得假秘钥。
- 服务器用加秘钥加密传输信息。
防范方法：
服务端在发送浏览器的公钥中加入 CA 证书，浏览器可以验证 CA 证书的有效性。
3、vue 在 v-for 时给每项元素绑定事件需要用事件代 理吗？为什么？
- 在 vue 中 vue 做了处理如果我们自己在非 vue 中需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。
4、介绍下前端加密的常见场景和方法
首先，加密的目的，简而言之就是将明文转换为密文、甚至转换为其他的东西， 用来隐藏明文内容本身，防止其他人直接获取到敏感明文信息、或者提高其他 人获取到明文信息的难度。通常我们提到加密会想到密码加密、HTTPS 等关键 词，这里从场景和方法分别提一些我的个人见解。
场景-密码传输
前端密码传输过程中如果不加密，在日志中就可以拿到用户的明文密码，对用 户安全不太负责。这种加密其实相对比较简单，可以使用 PlanA-前端加密、后 端解密后计算密码字符串的 MD5/MD6 存入数据库；也可以 PlanB-直接前端使 用一种稳定算法加密成唯一值、后端直接将加密结果进行 MD5/MD6，全程密 码明文不出现在程序中。 PlanA 使用 Base64 / Unicode+1 等方式加密成非明文，后端解开之后再存它的 MD5/MD6 。 PlanB 直接使用 MD5/MD6 之类的方式取 Hash ，让后端存 Hash 的 Hash 。
场景-数据包加密
应该大家有遇到过：打开一个正经网站，网站底下蹦出个不正经广告——比如 X 通的流量浮层，X 信的插入式广告……（我没有针对谁）但是这几年，我们会 发现这种广告逐渐变少了，其原因就是大家都开始采用 HTTPS 了。被人插入 这种广告的方法其实很好理解：你的网页数据包被抓取->在数据包到达你手机 之前被篡改->你得到了带网页广告的数据包->渲染到你手机屏幕。而 HTTPS 进 行了包加密，就解决了这个问题。严格来说我认为从手段上来看，它不算是一 种前端加密场景；但是从解决问题的角度来看，这确实是前端需要知道的事情。 Plan 全面采用 HTTPS。
场景-展示成果加密
经常有人开发网页爬虫爬取大家辛辛苦苦一点一点发布的数据成果，有些会影 响你的竞争力，有些会降低你的知名度，甚至有些出于恶意爬取你的公开数据 后进行全量公开……比如有些食谱网站被爬掉所有食谱，站点被克隆；有些求职 网站被爬掉所有职位，被拿去卖信息；甚至有些小说漫画网站赖以生存的内容 也很容易被爬取。
Plan 将文本内容进行展示层加密，利用字体的引用特点，把拿给爬虫的数据变 成“乱码”。举个栗子：正常来讲，当我们拥有一串数字“12345”并将其放在网站 页面上的时候，其实网站页面上显示的并不是简单的数字，而是数字对应的字体的“12345”。这时我们打乱一下字体中图形和字码的对应关系。
比如我们搞成 这样：
图形：1 2 3 4 5 字码：2 3 1 5 4 这时，如果你想让用户看到“12345”，你在页面中渲染的数字就应该是“23154”。 这种手段也可以算作一种加密。
5、React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化 到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
三种优化来降低复杂度：
- 如果父节点不同，放弃对子节点的比较，直接删除旧节点然后添加新的 节点重新渲染。
- 如果子节点有变化，Virtual DOM 不会计算变化的是什么，而是重新渲染。
- 通过唯一的 key 策略。
