前端—每天5道面试题（7）

前端—每天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 策略。

前端—每天5道面试题（7）相关推荐

前端—每天5道面试题（十三）
前端-每天5道面试题(十三) 一.display:none:和visibilty:hidden ;和opacity:0:和overflow:hidden的区别? display:none:隐藏自己,隐 ...
前端—每天5道面试题（十二）
前端-每天5道面试题(十二) 每天进步1% 不多就1% 一.CSS3 新特性有哪些 1.颜色:新增 RGBA,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(borde ...
前端—每天5道面试题（十一）
前端-每天5道面试题(十一) 每天进步1% 不多就1% 一.简述对 Web 语义化的理解? 就是让浏览器更好的读懂你写的代码,在进行 HTML 结构.表现.行为设计时,尽量使用语义化的标签,使程序代 ...
前端—每天5道面试题（十）
前端-每天5道面试题(十) 每天进步1% 不多就1% 一.用 div+css 布局的好处? 表现和内容相分离将设计部分剥离出来放在一个独立样式文件中,HTML 文件中只存放文本信息. 提高搜索引擎 ...
前端—每天5道面试题（九）
前端-每天5道面试题(九) 每天进步1% 不多就1% 一.overflow 有哪些属性值? Visible:默认值,内容不会被修剪,会呈现在元素框之外. Hidden:内容会被修剪,并且其余内容是不 ...
前端—每天5道面试题（8）
前端-每天5道面试题(8) 每天背5道前端面试题,你会越来越优秀 1.console.log 是同步还是异步? 如何实现一个 console.log? console.log 内部实现的是 proc ...
前端—每天5道面试题（6）
前端-每天5道面试题(6) 每天背5道前端面试题,希望我可以在远方的终点见到你 1.谈谈JS 异步解决方案的发展历程以及优缺点. 1.回调函数(callback) 优点:解决了同步的问题(只要有一个任 ...
前端—每天5道面试题（5）
前端-每天5道面试题(5) 每天背5道前端面试题,希望我可以在远方的终点见到你 1.简述一下前端的性能优化问题 (一).页面内容方面通过文件合并.css 雪碧图.使用 base64 等方式来减少 H ...
前端—每天5道面试题（4）
前端-每天5道面试题(4) 每天背5道前端面试题,希望我可以在远方的终点见到你 1.写 React / Vue 项目时为什么要在列表组件中写 key, 其作用是什么? key 是给每一个 vnode ...

前端—每天5道面试题（7）

前端—每天5道面试题（7）相关推荐

最新文章

热门文章