2020面试总结

（一）、跨域理解及HTTP与HTTPS区别，为啥HTTPS比HTTP更安全些？

跨域是浏览器对web生态的安全的一种限制，
跨域是指：一个域下对的文档或脚本去请求另外一个域下的资源
浏览器使用的是XmlHttpRequest(XHR), 请求type是 xhr,

解决跨域的有JsonP:（只要发送的请求不是xhr即可解决跨域问题）

jsonp概念：一种非官方跨域数据交互协议，信息传递双方约定的方法；
jsonp弊端：1. 需要服务端改动代码   2. 只支持get请求  3. 发送的不是xhr, 功能上不如xhr(比如异步)

解决办法：
1、被调用方支持跨域(在响应头中添加字段支持跨域)
2、影藏跨域(代理)，在本域中开个API，相当于反问第三方中间添加本地服务器访问
资料：
https://www.cnblogs.com/kingchan/p/10959554.html

HTTP、HTTPS

都是网络传输协议
1.HTTPS是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和[身份认证]保证了传输过程的安全性 。HTTPS 在HTTP 的基础下加入[SSL]层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层

2.HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比 HTTP 协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性
https://baike.baidu.com/item/https/285356?fr=aladdin

（二）、前端缓存

1、缓存的作用：

1）加快资源加载速度，提高用户体验
2）节省带宽，服务器端资源无需重新传输；甚至一些缓存无需进行http请求
3）服务器端缓存，如CDN，可以减缓多用户并行请求的压力，减轻服务器压力

2、缓存分类：服务器端缓存（CDN），客户端缓存（浏览器缓存）

3、浏览器缓存机制

1）强缓存：本地进行缓存过期时间的比较。若时间没有过期，则直接才从本地获取缓存的资源，无需向服务器端发起请求。
a、Expires：浏览器第一次发起请求，服务器端返回资源时带有一个Expires过期时间字段，该字段由服务器端计算所得，表示缓存过期的时间期限

// 具体判断是否过期(直接比较日期)
Expires < 当前客户端时间
// 比如：返回2021-10-20 号之前过期

该缓存有个弊端: Expires的时间是由服务器端计算所得，计算依据为服务器端第一次请求时间，而当前判断缓存时，与客户端时间做比较，倘若两端的时间不同呢？所以还是不够可靠；

b、Cache-Control：第一次发起请求，资源会存储当前时间，并且保存一个max-age（有效时间间隔比如2小时）。

// 具体判断是否过期
第一次请求的客户端时间 + max-age < 当前客户端时间

4、协商缓存

1）Last-Modified(最后修改时间)， If-Modified-Since(资源过期)
Last-Modified:浏览器端第一次发送请求时，服务器端返回Last-Modified告诉浏览器资源最后修改的时间，浏览器则把该时间存储到资源中。

If-Modified-Since：当强缓存的资源过期时，若资源中有Last-Modified字段，则浏览器将Last-Modified的时间赋值给If-Modified-Since，浏览器发起请求，将If-modified-Since字段包含在请求Header中，服务器端获得该字段，将其与服务器端对应资源最后的修改时间进行对比，倘若服务器端时间较旧(还是之前的修改时间)，则返回304，不包含消息体，告诉前端这个没改，让他继续用缓存；反之则正常请求。

5、添加hash的检测API

在请求大量数据之前先请求hash的API，与本地第一次存储的hash是否有变化，有变化的再请求数据API；
资料：https://www.cnblogs.com/Yoriluo/p/7513358.html

（三）、闭包作用及常用的场景

• 常规方法：

function outer(){
  var num = 100;
  return num;
}
outer(); // 100
// 普通函数被调用后，他的局部变量就可以被释放了

• 简单的闭包

function outer(){
  var num = 100;
  return function(){
    return num;
  };
}
var fun = outer(); //返回的是一个方法表达式
fun(); // 100
// 调用匿名函数fun()，函数中引用了外部的变量，所以调用outer()时外部变量不会被释放，

• 闭包总结：有权访问函数内部中的变量的函数
• 闭包用途：
  1、读取函数内部的变量
  2、让这些变量的值始终保持在内存中。不会再f1(外部函数)调用后被自动清除。
  3、方便调用上下文的局部变量。
  原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束后，被垃圾回收机制回收
  4、优缺点
  优点：灵活且方便
  缺点：变量一直引用着造成空间浪费、内存泄露，性能消耗

资料：https://www.cnblogs.com/Renyi-Fan/p/11590231.html
阮一峰
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

(四)、js深拷贝和浅拷贝区别

深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，，而，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变

1.深拷贝

1.1 JSON.parse(JSON.stringify(o))

function deepCopy(o) {
    return JSON.parse(JSON.stringify(o))
}

var c = {
    age: 1,
    name: undefined,
    sex: null,
    tel: /^1[34578]\d{9}$/,
    say: () => {
        console.log('hahha')
    }
}
deepCopy(c) // { age: 1, sex: null, tel: {} }

需要注意的是：这种拷贝方法不可以拷贝一些特殊的属性（例如正则表达式，undefine，function）

---

1.2. 用递归去复制所有层级属性

function deepCopyTwo(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj == 'object') {
        for (const key in obj) {
            //判断obj子元素是否为对象，如果是，递归复制
            if (obj[key] && typeof obj[key] === "object") {
                objClone[key] = deepCopyTwo(obj[key]);
            } else {
                //如果不是，简单复制
                objClone[key] = obj[key];
            }
        }
    }
    return objClone;
}

2. 浅拷贝

2.1. object.assign(target,source)
Object.assign 方法只复制源对象中可枚举的属性和对象自身的属性
如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性
Object.assign 会跳过那些值为 [null] null 是一个 JavaScript 字面量，表示空值（null or an "empty" value），即没有对象被呈现（no object value is present）。它是 JavaScript 原始值 之一。") 或 [undefined]的源对象

js实现方法

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

//当一个对象属性的引用值改变时将导致另一个也改变
shallowObj.arr[1] = 5;
obj.arr[1]   // = 5

*浅拷贝只是应用关系

---

(五)、何为原型链及使用场景

(六)、React 性能优化技巧总结

(七)、react的面试题

1、react diff算法原理
https://www.jianshu.com/p/3ba0822018cf

(八)、前端cookie、localStorage、sessionStorage的区别

一、 cookie：能存储内容较小，在4k左右，一般用作保存用户登录状态、记住密码，记住账号使用。不清除的话会一直存在，可以设置过期时间自动清除，设置的时候可以设置在不同的域下面。每次在和服务端交互都会放在header里面，所以若是储存太多会影响性能。

二、 localStorage：HTML5 标准中新加入的技术，可保存内容在5M左右，不会自动清除，除非手动进行删除。

三、 sessionStorage：和localStorage类似，他们唯一区别就是sessionStorage保存在当前会话中，会话结束sessionStorage失效。会话一般是在关闭页面或者关闭浏览器失效

https://blog.csdn.net/shenxianhui1995/article/details/93010158

---

(九)、px、em、rem区别介绍

1、px、em、rem区别
https://www.cnblogs.com/webdragon/p/11185979.html
2、sp,dp,px,pt的区别以及各自的用法