面试题（包含出处）（持续更新）

[MyPrototypeWhat]

1. 讲解一下HTTPS的工作原理

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。握手过程的简单描述如下：

• 浏览器将自己支持的一套加密规则发送给网站。

• 网站从中选出一组加密算法与HASH算法，并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。

• 获得网站证书之后浏览器要做以下工作：

  • a) 验证证书的合法性（颁发证书的机构是否合法，证书中包含的网站地址是否与正在访问的地址一致等），如果证书受信任，则浏览器栏里面会显示一个小锁头，否则会给出证书不受信的提示。
  • 如果证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。
  • 使用约定好的HASH计算握手消息，并使用生成的随机数对消息进行加密，最后将之前生成的所有信息发送给网站。

• 4.网站接收浏览器发来的数据之后要做以下的操作：

  • a) 使用自己的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。
  • b) 使用密码加密一段握手消息，发送给浏览器。

• 5.浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。

  原文地址

  ---

2. 如何遍历一个dom树

function traversal(node) {
    //对node的处理
    if (node && node.nodeType === 1) {
        console.log(node.tagName);
    }
    var i = 0,
        childNodes = node.childNodes,
        item;
    for (; i < childNodes.length; i++) {
        item = childNodes[i];
        if (item.nodeType === 1) {
            //递归先序遍历子节点
            traversal(item);
        }
    }
}

原文地址

---

3. new操作符都做了什么

1、 创建一个空对象，并且 this 变量引用该对象，// lat target = {};

2、继承了函数的原型。// target.proto = func.prototype;

3、属性和方法被加入到 this 引用的对象中。并执行了该函数func// func.call(target);

4、新创建的对象由 this 所引用，并且最后隐式的返回 this 。// 如果func.call(target)返回的res是个对象或者function 就返回它

function new(func) {
	let target = {};
	target.__proto__ = func.prototype;
	let res = func.call(target);
	if (res && typeof(res) == "object" || typeof(res) == "function") {
		return res;
	}
	return target;
}

原文地址

---

4. 前端如何进行seo优化

• 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标
• 前后端分离的项目使用服务端同构渲染，既提高了访问速度，同时重要关键内容首次渲染不通过 js 输出
• 友情链接，好的友情链接可以快速的提高你的网站权重
• 外链，高质量的外链，会给你的网站提高源源不断的权重提升
• 向各大搜索引擎登陆入口提交尚未收录站点

原文地址

---

5. 前后端分离的项目如何seo

• 使用prerender。但是回答prerender，面试官肯定会问你，如果不用prerender，让你直接去实现，好的，请看下面的第二个答案。
• 先去 https://www.baidu.com/robots.txt 找出常见的爬虫，然后在nginx上判断来访问页面用户的User-Agent是否是爬虫，如果是爬虫，就用nginx方向代理到我们自己用nodejs + puppeteer实现的爬虫服务器上，然后用你的爬虫服务器爬自己的前后端分离的前端项目页面，增加扒页面的接收延时，保证异步渲染的接口数据返回，最后得到了页面的数据，返还给来访问的爬虫即可。

补充：

@xianshannan ：

引用下知乎上别人的回答

那么我们首先得了解Search Engine才能谈如何做到让页面被收录，这里就拿最常见的百度和google来举例吧。

百度是不支持收录SPA的页面的，而且SPA的网站对于百度的spider来说等于是只有1个页面，那么如何做到让这种搜索引擎收录页面呢？

首先我们可以自行提交sitemap，让蜘蛛主动去爬，但是遇到sitemap中的URL，到达指定页面后页面只有一段js怎么办，我们可以利用比如标签来进行最简单的优化，比如在noscript里打印出当前页面一些关键的信息点，但是这个做法大家一看就非常的蠢，因为正常用户并不需要这些内容，占用下载量，而且不好维护。

那么我们如何判断当前页面是否支持运行javascript呢？

前端已做到，用noscript，后端不行，那么只好针对百度的spider做UA判断了，这也就是大家常见的一些解决方案，使用phantomjs或者nginx代理，来对spider访问的页面进行特殊的处理，达到被收录的效果。那么这么做其实是有一些副作用的，比如你收录的页面和用户正常访问的页面差别较大是有被搜索引擎K掉的风险的，

所以更多的做法还是选择首屏使用ssr的方式渲染，先通过后端路由保证页面的主要信息可以被服务器端输出，然后其他的功能，包括用户之后的路由跳转控制，再使用前端路由来做，曾经的项目经验在新浪博客手机版中也是这么做的，当然当时没有ssr，是后端直接渲染的模板，用户访问后，再进行交互则再采用前后端分离和前端路由控制来完成。

然后就是google的搜索引擎，是支持hashtag再rewrite访问你的静态版的，但是毕竟只有google支持，所以正规的做法都是使用pushState来对页面URL做前端的后续无刷新控制，对爬虫和所有用户提供任何入口的ssr或者首屏的直接渲染，才是最完美的SEO支持方案。
本人也比较认同 ssr 的处理方式，当然 ssr 的成本相对高。

原文地址

---

6. 讲解一下https对称加密和非对称加密。

对称加密： 发送方和接收方需要持有同一把密钥，发送消息和接收消息均使用该密钥。相对于非对称加密，对称加密具有更高的加解密速度，但双方都需要事先知道密钥，密钥在传输过程中可能会被窃取，因此安全性没有非对称加密高。

非对称加密： 接收方在发送消息前需要事先生成公钥和私钥，然后将公钥发送给发送方。发送放收到公钥后，将待发送数据用公钥加密，发送给接收方。接收到收到数据后，用私钥解密。 在这个过程中，公钥负责加密，私钥负责解密，数据在传输过程中即使被截获，攻击者由于没有私钥，因此也无法破解。 非对称加密算法的加解密速度低于对称加密算法，但是安全性更高。

几个名词要理清

• RSA：非对称加密
• AES：对称加密 生成一个随机字符串key 只有客户端和服务端有 他们两个通过这个key对数据加密和传输跟解密 这一个统称对称加密
• CA：权威认证机构 服务器在建站的时候 去CA认证机构认证 得到对应的数字签名 相当于身份证号 客户端每次安装浏览器的时候 都会下载最新的CA列表 这个列表有对应的数字签名和服务器IP一一对应的列表 这就是为什么我们自己搭建的localhost没法发https的原因 因为没法进行CA认证
• 数字证书：包含了数字签名跟RSA公钥
• 数字签名：保证数字证书一定是服务器传给客户端的 相当于服务器的身份证ID
• 对称密钥： 对数据进行加密的key
• 非对称密钥： （k1， k2） k1加密的数据 只有k2能解开 k1位非对称公钥 k2为非对称私钥
• 非对称公钥：RSA公钥 k1加密的数据 只有k2能解开
• 非对称私钥：RSA私钥 k1加密的数据 只有k2能解开

原文地址

---

[MyPrototypeWhat]

7. 设计一个策略和方法，实现在https的前端项目里进行http请求

@yuanxiaowa：

反向代理

@gaoryrt：

...

img

@jiangtao：

get 请求

在没有 CSP(Content Security Policy)的考虑上, get 请求都是可以的

• img get
• script create
• iframe

反向代理

直接反向代理, 比如 nginx 代理, node代理等等

CORS

要发请求的域 设置 允许发请求的域(http) CORS 头

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• Access-Control-Max-Age

原文地址

---

8. 解释一下在js里，0.1+0.2为什么等于0.30000000000000004，如何通过代码解决这个问题？

@lylwanan

function getMax() {
   var args = Array.prototype.slice.call(arguments, 0);

   return Math.max.apply(null, args.map(item => {
       var arr = item.toString().split('.');
       return arr.length > 1 ? arr[1].length : 0;
   }));
}

function add() {
   var args = Array.prototype.slice.call(arguments, 0);
   var max = getMax.apply(null, args);
   
   return args.reduce((sum, cur) => sum + cur * max * 10, 0) / 10 * max;
}

// 使用了题主的思路，我个人思路是大数计算
console.log(add(0.1, 0.2));

@fairyly

原因：

• 不仅 JavaScript，所有遵循 IEEE 754 规范的语言都是如此；
• 在JavaScript中，所有的Number都是以64-bit的双精度浮点数存储的；
• 双精度的浮点数在这64位上划分为3段，而这3段也就确定了一个浮点数的值，64bit的划分是“1-11-52”的模式，具体来说：
  • 1.就是1位最高位（最左边那一位）表示符号位，0表示正，1表示负；
  • 2.11位表示指数部分；
  • 3.52位表示尾数部分，也就是有效域部分

解决方案：

• bignumber
• BigInt: JavaScript 中的任意精度整数(新提案)

参考：

• IEEE754 浮点数格式 与 Javascript number 的特性
• IEEE-754 Floating-Point Conversion IEEE-754浮点数转换工具

原文地址