前端基础知识总结

Posted 2021-10-11 时倾

函数声明和函数表达式

// 函数声明
function wscat(type){
  return \'wscat\';
}

// 函数表达式
var oaoafly = function(type){
  return "oaoafly";
}

• javascript 解释器中存在一种变量声明被提升的机制，也就是说函数声明会被提升到作用域的最前面，即使写代码的时候是写在最后面，也还是会被提升至最前面。
• 用函数表达式创建的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用

函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用。而函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。这个微小的区别，可能会导致JS代码出现意想不到的bug，让你陷入莫名的陷阱中。

箭头函数与普通函数区别

• 语法更加简洁、清晰
• 不绑定this，会捕获其所在的上下文的this值，作为自己的this值
• 箭头函数继承而来的this指向永远不变
• .call()/.apply()/.bind()无法改变箭头函数中this的指向
• 不能作为构造函数使用， 因为没有自己的 this，无法调用 call，apply；没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的__prpto__ 。
• 没有自己的arguments，在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。如果要用，可以用 rest 参数代替。
• 没有原型prototype, 指向 undefined
• 不能使用yeild关键字

new

new 关键字会进行如下的操作：

1. 创建一个空的简单JavaScript对象（即{}）；
2. 链接该对象（设置该对象的__proto__）到构造器函数的原型 ；
3. 将新创建的对象作为this的上下文 ；
4. 返回。如果该函数没有返回对象，则返回this。

function newFunc(father, ...rest) {
  // 首先创建一个空对象
  var result = {};
  // 将空对象的原型赋值为构造器函数的原型
  result.__proto__ = father.prototype;
  // 更改构造器函数内部this，将其指向新创建的空对象
  var result2 = father.apply(result, rest);
  
  if ((typeof result2 === \'object\' || typeof result2 === \'function\') && result2 !== null) {
    return result2;
  }
  return result;
}

原型与原型链

每一个JavaScript对象(null除外)在创建的时候会关联另一个对象，这个被关联的对象就是原型。每一个JavaScript对象(除了 null)都具有的__proto__属性会指向该对象的原型。

JavaScript中所有的对象都是由它的原型对象继承而来，而原型也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，这就是原型链。

每一个对象都会从原型"继承"属性。
实例对象和构造函数都可以指向原型, 原型可以指向构造函数，不能指向实例(因为可以有多个实例)。
原型对象有两个属性，constructor 和 __proto__。

function Person() {}
var person = new Person();

// 实例原型 === 构造函数原型
person.__proto__ === Person.prototype // true
// 原型构造函数 === 构造函数
Person.prototype.constructor === Person // true

遍历对象

对象遍历方法总结：

• for...in：遍历对象自身， 包含继承， 可枚举，不含 Symbol 的属性。
• Object.keys(obj)：遍历对象自身, 不含继承，可枚举，不含 Symbol 的属性。【values， entries】
• Object.getOwnPropertyNames(obj)：遍历对象自身, 不含继承, 不含 Symbol 的属性, 不管是否可枚举
• Object.getOwnPropertySymbols(obj): 遍历对象自身, 不含继承, 所有 Symbol 的属性, 不管是否可枚举
• Reflect.ownKeys(obj): 遍历对象自身，不含继承，所有键名，不管是否Symbol 和可枚举。

  对象其他方法：

• JSON.stringify()：只串行化对象自身，不含继承，可枚举，不含 Symbol属性。【function，undefined, Symbol会丢失， set、map会处理成空对象】
• Object.assign()： 只拷贝对象自身，不含继承， 可枚举属性, 不管是否是Symbol 。【全部数据类型属性值】

方法	自身属性	继承属性	可枚举属性	Symbol属性
for...in..	是	是	必须	否
Object.keys()	是	否	必须	否
Object.getOwnPropertyNames(obj)	是	否	非必须	否
Object.getOwnPropertySymbols(obj)	是	否	非必须	是
Reflect.ownKeys(obj)	是	否	非必须	非必须
JSON.stringify()	是	否	必须	否
Object.assign()	是	否	必须	非必须

异步加载脚本

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。

异步加载脚本方法：defer与async。

defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

ES6 模块与 CommonJS 模块的差异

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

  因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

• CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

回流Reflow与重绘Repaint

回流：元素的大小或者位置发生了变化，触发了重新布局，导致渲染树重新计算布局和渲染。页面第一次加载的时候，至少发生一次回流。

1. 添加或删除可见的DOM元素；
2. 元素的位置发生变化；
3. 元素的尺寸发生变化；
4. 内容发生变化（比如文本变化或图片被另一个不同尺寸的图片所替代）；
5. 页面一开始渲染的时候（这个无法避免）；
6. 浏览器的窗口尺寸变化， 因为回流是根据视口的大小来计算元素的位置和大小的；

重绘：元素的外观，风格改变，而不会影响布局（不包含宽高、大小、位置等不变）。
如：outline, visibility, color, background-color......等

Reflow 的成本比 Repaint 高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。。回流一定会触发重绘，而重绘不一定会回流

减少重绘与回流

1. CSS方法

   • 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流
   • 避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。
   • 避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。
   • 将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame
   • 避免使用CSS表达式，可能会引发回流。
   • 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。
   • CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

2. JavaScript方法

   • 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
   • 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
   • 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

CSS3 硬件加速(GPU 加速)

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。

render tree -> 渲染元素 -> 图层 -> GPU 渲染 -> 浏览器复合图层 -> 生成最终的屏幕图像。

浏览器在获取 render tree后，渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个个图层中，每个图层又会被加载到 GPU 形成渲染纹理。GPU 中 transform 是不会触发 repaint ，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。

CSS3触发硬件加速的属性：

1. transform
2. opacity
3. filter
4. will-change

js判断数据类型

1. typeof 操作符

• 对于基本类型，除 null 以外，均可以返回正确的结果。
• 对于引用类型，除 function 以外，一律返回 object 类型。
• 对于 null ，返回 object 类型。
• 对于 function 返回 function 类型。

2. instanceof
用来判断 A 是否为 B 的实例，检测的是原型。instanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型。
instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。

3. constructor

• null 和 undefined 是无效的对象，不会有 constructor 存在的
• 函数的 constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object。为了规范开发，在重写对象原型时一般都需要重新给 constructor 赋值。

4. toString

toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。

浏览器事件模型

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

// useCapture： true, 即采用事件捕获方式
window.addEventListener("click", function(e){
  console.log("window 捕获");
}, true);

// useCapture： false【默认为false】，即采用事件冒泡方式
window.addEventListener("click", function(e){
  console.log("window 冒泡");
}, false);

目标元素（被点击的元素）绑定的事件都会发生在目标阶段，在绑定捕获代码之前写了绑定的冒泡阶段的代码，所以在目标元素上就不会遵守先发生捕获后发生冒泡这一规则，而是先绑定的事件先发生。

不是目标元素，它上面绑定的事件会遵守先发生捕获后发生冒泡的规则。

e.stopPropagation()：阻止事件传播。不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播。
e.preventDefault(): 阻止事件的默认行为。默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等

HTTP

HTTP协议

影响一个 HTTP 网络请求的因素主要有两个：带宽和延迟。
带宽：现在网络基础建设已经使得带宽得到极大的提升，不再会担心由带宽而影响网速，那么就只剩下延迟了。
延迟：

• 浏览器阻塞（HOL blocking）：浏览器会因为一些原因阻塞请求。浏览器对于同一个域名，限制同时只能有 6个连接（浏览器内核不同会有所差异），超过浏览器最大连接数限制，后续请求就会被阻塞。
• DNS 查询（DNS Lookup）：将域名解析为目标服务器 IP 才能建立连接。 可以利用DNS缓存结果来优化DNS 查询。
• 建立连接（Initial connection）：HTTP 是基于 TCP 协议的，需要三次握手才能建立连接，但是连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显，慢启动则对文件类大请求影响较大。

HTTPS与HTTP的区别

• HTTPS协议需要到CA申请证书，需要付费。
• HTTP协议运行在TCP之上，所有传输的内容都是明文；HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密。
• HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
• HTTPS可以有效的防止运营商劫持，解决了防劫持。

HTTP1.0和HTTP1.1的区别

HTTP1.0最早在网页中使用是在1996年，用于一些较为简单的网页上和网络请求上。HTTP1.1在1999年开始广泛应用于各大浏览器网络请求中，是当前使用最为广泛的HTTP协议。

• 缓存策略 在HTTP1.0中主要使用header里的Expires, 【Last-Modified，If-Modified-Since】来缓存，HTTP1.1引入了Cache-Control, 【ETag、If-None-Match】来控制缓存。
• 带宽优化及网络连接的使用 HTTP1.0中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能。HTTP1.1则在请求头引入了range，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样能充分利用带宽和连接。
• 错误通知的管理 在HTTP1.1中新增了24个错误状态响应码
• Host头处理 在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域，且请求消息中如果没有Host头域会报告一个错误（400 Bad Request）。
• 长连接 HTTP 1.1默认开启Connection： keep-alive，支持长连接（PersistentConnection）和请求的流水线（Pipelining）处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟。

HTTP1.X 与HTTP2的区别

http2 刚开始为SPDY协议，Google为了减少加载延迟而开发的，目前该协议已经被很多浏览器所支持。在http2 ， 二进制框架层编码请求和响应并把它们分成更小的包，能显著的提高传输的灵活性。

• HTTP2使用的是二进制传送，HTTP1.X是文本（字符串）传送。二进制传送的单位是帧和流。帧组成了流，同时流还有流ID标示。
• HTTP2支持多路复用。因为有流ID，所以通过同一个http请求实现多个http请求传输变成了可能，可以通过流ID来标示是哪个流从而定位到是哪个http请求。
• HTTP2头部压缩。HTTP2通过gzip和compress压缩头部然后再发送，同时客户端和服务器端同时维护一张头信息表，所有字段都记录在这张表中，这样后面每次传输只需要传输表里面的索引Id就行，通过索引ID查询表头的值。
• HTTP2支持服务器推送。HTTP2支持在未经客户端许可的情况下，主动向客户端推送内容。
• 基于HTTPS的加密协议传输，大大提高了传输数据的可靠性。

HTTP2.0的多路复用和HTTP1.X中的长连接复用有什么区别？

• HTTP/1.0一次请求-响应，建立一个连接，请求结束后关闭；每一个请求都要建立一个连接；
• HTTP/1.1 Pipeling 允许客户端通过同一连接发送多个请求。若干个请求排队串行化单线程处理，后面的请求等待前面请求的返回才能获得执行机会，一旦有某请求超时等，后续请求被阻塞(线头阻塞)。 虽然添加并行的tcp连接能够减轻这个问题，但是tcp连接的数量是有限的，且每个新的连接需要额外的资源。
• HTTP/2 多个请求可同时在一个连接上并行执行。某个请求任务耗时严重，不会影响到其它连接的正常执行。

HTTP2二进制框架层

http2在两端建立一个单独的连接, 该连接包含多个数据流, 每个流包含多个请求/响应格式的消息, 每个消息也被划分为更小的帧单元。

二进制框架层把消息组织成并行数据流。 当一个客户端发送并行请求，它能把请求的响应设置优先级权重 ，从1-256 ，更高的数字代表更高的优先级。 此外，该客户端也通过特定的流ID指明每个流的依赖。如果id被忽略，说明这个流是根流。

在最细微层面上，交流通道由一系列二进制帧组成，每一个被标记到特定的流。可识别标签允许连接在传输过程中来交错这些帧并在另一端去组合它们。 交错的请求和响应能够并行的传输而不被阻塞。该过程被称作多路复用技术。

HTTPS加密原理

HTTPS 加密使用了对称加密与非对称加密。
对称加密：加密和解密用的是同一个密钥k。
非对称加密：发送端使用公开的公钥a加密，然后接收端使用私密的私钥b解密。
对称加密快，非对称加密安全。对称加密如DES，非对称加密如RSA。

完整http加密请求过程是：

1. 浏览器发起 HTTPS 请求；
2. 服务端返回 HTTPS 证书(包含公钥, 对称加密算法种类等)；
3. 浏览器验证证书是否合法(检查CA证书是否由可以信赖的CA机构颁发，确认证书有效和此证书是此网站的)，如果不合法则提示告警。
4. 浏览器证书验证合法后，在本地生成随机数，通过公钥加密此随机数，并把加密后的随机数传输到服务端；
5. 服务端通过私钥对随机数进行解密；【非对称加密】
6. 服务端通过客户端传入的随机数构造对称加密算法，对返回结果内容进行加密后传输；
7. 浏览器根据本地存储的随机数进行解密数据；

简而言之：

使用非对称加密传输一个对称密钥K，让服务器和客户端都得知。然后两边都使用这个对称密钥K来加密解密收发数据。因为传输密钥K是用非对称加密方式，比较安全。而具体传输数据则是用对称加密方式，加快传输速度。

http请求方法

HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

1. OPTIONS： 即预检请求，可用于检测服务器允许的http方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起OPTIONS请求，即CORS预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。
2. HEAD: 向服务器索与GET请求相一致的响应，只不过响应体将不会被返回，用于获取报头。
3. GET：向特定的资源发出请求。注意：GET方法不应当被用于产生“副作用”的操作中
4. POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
5. PUT：向指定资源位置上传其最新内容
6. DELETE：请求服务器删除Request-URL所标识的资源
7. TRACE：回显服务器收到的请求，主要用于测试或诊断
8. CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器

HTTP 常用状态码

状态码	响应类别	响应
1xx	Informational（信息状态码）	成功接收请求，服务器正在处理
2xx	Success（成功状态码）	请求正常处理完毕
3xx	Redirection（重定向状态码）	需要附加操作以完成请求
4xx	Client Error（客户端错误状态码）	客户端原因导致服务器无法处理请求
5xx	Server Error（服务器错误状态码）	服务器原因导致处理请求出错

100 迄今为止的所有内容都是可行的，客户端应该继续请求，如果已经完成，则忽略它;
101 该代码是响应客户端的 Upgrade 标头发送的，并且指示服务器也正在切换的协议;
102此代码表示服务器已收到并正在处理该请求，但没有响应可用;
200 请求成功;
201该请求已成功，并因此创建了一个新的资源。这通常是在POST请求，或是某些PUT请求之后返回的响应;
202请求已经接收到，但还未响应，没有结果。意味着不会有一个异步的响应去表明当前请求的结果，预期另外的进程和服务去处理请求，或者批处理;
301永久重定向, 被请求的资源已永久移动到新位置;
302 临时重定向, 临时从旧地址A跳转到新地址B;
303 对应当前请求的响应可以在另一个 URI 上被找到，而且客户端应当采用 GET 的方式访问那个资源。这个方法的存在主要是为了允许由脚本激活的POST请求输出重定向到一个新的资源;
304如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾;
400 请求报文内有语法错误;
401 该状态码表示发送的请求需要通过HTTP认证，初次收到401响应浏览器弹出认证的对话窗口。若收到第二次401状态码，则说明第一次验证失败;
403 请求资源的访问被服务器拒绝，一般是未获得文件系统的访问权限，访问权限出现问题;
404 服务器上找不到请求资源或路径错误;
405 请求方法被服务端识别，但是服务端禁止使用该方法。可以用OPTIONS来查看服务器允许哪些访问方法;
500 服务器端在执行请求时出错，一般是因为web应用出现bug;
502 代理服务器或网关从上游服务器中收到无效响应;
503 服务器暂时处于超负载或停机维护，目前无法处理请求;

http缓存: 强制缓存和协商缓存

良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度。

缓存原理

1. 浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。
2. 如果没有命中强缓存，浏览器会发送一个请求到服务器，通过last-modified和etag验证是否命中协商缓存。当向服务端发起缓存校验的请求时，服务端会返回 200 ok表示返回正常的结果或者 304 Not Modified(不返回body)表示浏览器可以使用本地缓存文件。304的响应头也可以同时更新缓存文档的过期时间
3. 如果前面两者都没有命中，直接从服务器加载资源。

实现方式

强缓存：通过Expires和Cache-Control实现。
协商缓存：利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的。

Expires

Expires是http1.0提出的一个表示资源过期时间的header，它是一个绝对时间，由服务器返回。Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效。
Expires: Wed, 11 May 2018 07:20:00 GMT

Cache-Control

Cache-Control 出现于 HTTP / 1.1，优先级高于 Expires , 表示的是相对时间。

no-store： 没有缓存。缓存中不得存储任何关于客户端请求和服务端响应的内容。每次由客户端发起的请求都会下载完整的响应内容。
no-cache: 缓存但重新验证。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
private：只允许客户端浏览器缓存。
public: 允许所有用户缓存。例如中间代理、CDN等
max-age=<seconds>：表示资源能够被缓存的最大时间。相对Expires而言，max-age是距离请求发起的时间的秒数。针对应用中那些不会改变的文件，通常可以手动设置一定的时长以保证缓存有效，例如图片、css、js等静态资源。
must-revalidate:触发缓存验证。验证它的状态，已过期的缓存将不被使用

如果cache-control与expires同时存在的话，cache-control的优先级高于expires。

Last-Modified，If-Modified-Since

Last-Modifie表示本地文件最后修改日期，浏览器会在request header加 If-Modified-Since（上次返回的Last-Modified的值），询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。

但是如果在本地打开缓存文件，就会造成 Last-Modified 被修改，所以在 HTTP / 1.1 出现了 ETag。

ETag、If-None-Match

Etag就像一个指纹，资源变化都会导致ETag变化，跟最后修改时间没有关系，ETag可以保证每一个资源是唯一的。
If-None-Match的header会将上次返回的Etag发送给服务器，询问该资源的Etag是否有更新，有变动就会发送新的资源回来。

Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304**。

有了Last-Modified，为什么还要用ETag?

• 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
• 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；
• 某些服务器不能精确的得到文件的最后修改时间。

如何选择合适的缓存

缓存方式验证顺序:

• Cache-Control —— 请求服务器之前
• Expires —— 请求服务器之前
• If-None-Match (Etag) —— 请求服务器
• If-Modified-Since (Last-Modified) —— 请求服务器

协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义。（不开启强缓存，本地没有缓存文件，协商缓存返回304没什么意义）

大部分web服务器都默认开启协商缓存，而且是同时启用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】。
但是下面的场景需要注意：

1. 分布式系统里多台机器间文件的Last-Modified必须保持一致，以免负载均衡到不同机器导致比对失败；
2. 分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样）；

防抖和节流

防抖：当你在频繁调用方法时，并不会执行，只有当你在指定间隔内没有再调用，才会执行函数。
节流：在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

防抖

function debounce(fn, wait) {
  let time = null;

  return (function() {
    const context = this;
    const args = arguments;

    if (time) {
      clearTimeout(time);
      time = null;
    }
    time = setTimeout(() => {
      fn.call(context, args);
    }, wait);
  });
}

节流

function throttle(fn, wait) {
  let lastTime;

  return (
    function() {
      const context = this;
      const args = arguments;
      let nowTime = + new Date();

      if (nowTime > lastTime + wait || !lastTime) {
        fn.call(context, args);
        lastTime = nowTime;
      }
    }
  );
}

大小单位区别

px：像素。
em：参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。
rem： 相对于根元素html的font-size计算，不会像em那样，依赖于父元素的字体大小，而造成混乱。
vw： 视窗宽度，1vw等于视窗宽度的1%。
vh：视窗高度，1vh等于视窗高度的1%。
vm：min(vw, vh)。
%： 是相对于父元素的大小设定的比率，position:absolute;的元素是相对于已经定位的父元素，position：fixed；的元素是相对可视窗口。

浏览器默认字体是16px, body设置font-size：62.5%, 那么1rem =62.5% * 16=10px 。
谷歌浏览器强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。

Box-sizing

• content-box：这是默认情况，整个元素的高度和宽度就是元素内容
• border-box：这种情况下，你设置的width和height属性值就是针对整个元素，包括了border，padding，和元素内容。

事件循环EventLoop

JavaScript是一个单线程的脚本语言。

所有同步任务都在主线程上执行，形成一个执行栈 (Execution Context Stack)；而异步任务会被放置到 Task Table（异步处理模块），当异步任务有了运行结果，就将注册的回调函数移入任务队列（两种队列）。一旦执行栈中的所有同步任务执行完毕，引擎就会读取任务队列，然后将任务队列中的第一个任务取出放到执行栈中运行。（所有会进入的异步都是指的事件回调中的那部分代码）

只要主线程空了，就会去读取任务队列，该过程不断重复，这就是所谓的 事件循环。

宏任务和微任务

宏任务会进入一个队列，微任务会进入到另一个队列，且微任务要优于宏任务执行。
宏任务：script(整体代码)、setTimeout、setInterval、I/O、事件、postMessage、 MessageChannel、setImmediate (Node.js)
微任务：Promise.then、 MutaionObserver、process.nextTick (Node.js)

宏任务会进入一个队列，而微任务会进入到另一个不同的队列，且微任务要优于宏任务执行。

JavaScript 异步编程

回调函数

回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。
缺点： 回调函数最大的问题是容易形成回调地狱，多个回调函数嵌套，降低代码可读性，增加逻辑的复杂性，容易出错。

Promise

为解决回调函数的不足，社区创造出 Promise。promise 利用编程技巧将回调函数改成链式调用，避免回调地狱。使用then方法，异步任务的分段执行更清晰，除此以外，并无新意。

缺点：Promise 的最大问题是代码冗余，原来的任务被Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。
Promise 必须为以下三种状态之一：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。一旦Promise 被 resolve 或 reject，不能再迁移至其他任何状态（即状态 immutable）。

基本过程：

1. 初始化 Promise 状态（pending）
2. 执行 then(..) 注册回调处理数组（then 方法可被同一个 promise 调用多次）
3. 立即执行 Promise 中传入的 fn 函数，将Promise 内部 resolve、reject 函数作为参数传递给 fn ，按事件机制时机处理
4. Promise中要保证，then方法传入的参数 onFulfilled 和 onRejected，必须在then方法被调用的那一轮事件循环之后的新执行栈中执行。

真正的链式Promise是指在当前promise达到fulfilled状态后，即开始进行下一个promise.

常用方法

1. Promise.all: 全部fulfilled, 才进入then, 否则 catch
2. Promise.race: 任一个返回，不管是fulfilled还是rejected, 进入相应的then/catch
3. Promise.allSettled: 全部返回，不管是fulfilled还是rejected, 进入then
4. Promise.any: 任一个返回fulfilled, 就进入then, 否则 catch

Generator

Generator （生成器）是ES6标准引入的新的数据类型，是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。一个Generator 看上去像一个函数，但可以暂停执行并返回多次。

与普通函数区别
函数在执行过程中，如果没有遇到return语句（函数末尾如果没有return，就是隐含的return undefined;），控制权无法交回被调用的代码。generator和函数不同的是，generator由function*定义，除了return语句，还可以用yield返回多次。

next 方法
next 方法返回值的 value ，是 Generator 函数向外输出数据；next 方法还可以接受参数，这是向 Generator 函数体内输入数据。
next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done 属性）。value 属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。

实例分析

function* foo(x) {
  yield x + 1;
  yield x + 2;
  return x + 3;
}

const result = foo(0);
result.next(); // {value: 1, done: false}
result.next(); // {value: 2, done: false}
result.next(); // {value: 3, done: true}
result.next(); // {value: undefined, done: true}

每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。如果done为true，则value就是return的返回值。
当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。直接用for ... of循环迭代generator对象，就不需要自己去判是否断done。

async/await

async/await 是 co 库的官方实现。也可以看作自带启动器的 generator 函数的语法糖。不同的是，async/await 只支持 Promise 和原始类型的值，不支持 thunk 函数。

async 函数的优点
async 函数对 Generator 函数的改进，体现在以下三点：

1. 内置执行器。Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一样。
2. 更好的语义。 async 和 await，比起星号和 yield，语义更更清晰。async 表示函数里有异步操作，await 表示后面的表达式需要等待结果。
3. 更广的适用性。co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 await 命令后可以跟 Promise 对象和原始类型的值（跟原始类型的值等同于同步操作）。

实例分析
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就等待，等到触发的异步操作完成，再接着执行函数体内后面的语句。

async function getName(name) {
  const name1 = await getFamilyName(name);
  const name2 = await getRealName(name1);
  return name2;
}

getName(\'goo\').then((result) => {
  console.log(result);
});

注意点

1. await 命令只能用在 async 函数之中，如果用在普通函数，就会报错。
2. await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好给 await 命令添加错误处理。

// try...catch
async function fn() {
  try {
    await getName();
  } catch (err) {
    console.log(err);
  }
}

// promise.catch
async function fn() {
  await getName().catch((err) => {
    console.log(err);
  });
}

水平与垂直居中的实现方式有哪些

水平居中

• text-align: center; 行内元素适用
• margin: 0 auto; 适用块级元素
• width: fit-content; 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content, 并且配合margin。

.parent {
  width:fit-content;
  margin:0 auto;
}

• flex

.parent {
  display: flex;
  justify-content: center;
}

• 盒模型, 使用flex 2009年版本

.parent {
  display: box;
  box-orient: horizontal;
  box-pack: center;
}

• transform

.son {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

• 两种不同的绝对定位方法

.son {
  position: absolute;
  width: 固定；
  left: 50%;
  margin-left: -0.5 * 宽度;
}

.son {
  position: absolute;
  width: 固定；
  left: 0;
  right: 0;
  margin: 0 auto;
}

垂直居中

• 单行文本, line-height
• 行内块级元素, 使用 display: inline-block, vertical-align: middle; 加上伪元素辅助实现

.parent::after, .son {
    display:inline-block;
    vertical-align:middle;
}
.parent::after {
    content:\'\';
    height:100%;
}

• vertical-align。vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
• flex

.parent {
  display: flex;
  align-items: center;
}

• 盒模型

.parent {
  display: box;
  box-orient: vertical;
  box-pack: center;
}

• transform

.son {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

• 两种不同的绝对定位方法

.son {
  position: absolute;
  height: 固定;
  top: 50%;
  margin-top: -0.5 * height;
}

.son {
  position: absolute;
  height: 固定;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

flex, 盒模型, transform, 绝对定位, 这几种方法同时适用于水平居中和垂直居中

Call, bind, apply实现

// call
Function.prototype.myCall = function (context) {
  context = context ? Object(context) : window 
  context.fn = this;
  
  let args = [...arguments].slice(1);
  const result = context.fn(...args);
  delete context.fn;
  return result;
}

// apply
Function.prototype.myApply = function (context) {
  context = context ? Object(context) : window;
  context.fn = this;
  
  let args = [...arguments][1];
  let result;
  if (args.length === 0) {
      result = context.fn();
  } else {
      result = context.fn(args);
  }
  delete context.fn;
  return result;
}

// bind
Function.prototype.myBind = function (context) {
  let self = this;
  let args = [...arguments].slice(1); 
  return function() {
    let newArgs = [...arguments];
    return self.apply(context, args.concat(newArgs));
  }
}

排序

冒泡排序

function bubbleSort(arr) {
  const len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[j] < arr[i]) {
        [arr[j], arr[i]] = [arr[i], arr[j]];
      }
    }
  }
  return arr;
}

选择排序

选择排序(Selection-sort)是一种简单直观的排序算法。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。

function selectionSort(arr) {
  const len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    let index = i;
    for (let j = i + 1; j < len; j++) {
      if (arr[j] < arr[index]) {
        index = j;
      }
    }
    if (index !== i) {
      [arr[i], arr[index]] = [arr[index], arr[i]];
    }
  }
  return arr;
}

插入排序

插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。

function insertionSort(arr) {
  const len = arr.length;
  for (let i = 1; i < len; i++) {
    let j = i - 1;
    const value = arr[i];
    while (arr[j] > value && j >= 0) {
      arr[j + 1] = arr[j];
      j--;
    }
    arr[j + 1] = value;
  }
  return arr;
}

归并排序

归并排序是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。归并排序是一种稳定的排序方法。先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为2-路归并。

function mergeSort(arr) {  //采用自上而下的递归方法
  var len = arr.length;
  if (len < 2) return arr;

  const middle = Math.floor(len / 2);
  let left = arr.slice(0, middle);
  let right = arr.slice(middle);
  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
  let result = [];
  while (left.length && right.length) {
    if (left[0] <= right[0]) {
      result.push(left.shift());
    } else {
      result.push(right.shift());
    }
  }
  return result.concat(left).concat(right);
}

快速排序

快速排序的基本思想：通过一趟排序将待排记录分隔成独立的两部分，其中一部分记录的关键字均比另一部分的关键字小，则可分别对这两部分记录继续进行排序，以达到整个序列有序。

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const pivotIndex = Math.floor(arr.length / 2);
  const pivot = arr.splice(pivotIndex, 1)[0];
  let left = [];
  let right = [];
  for (let i = 0; i < arr.length; i++){
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat([pivot], quickSort(right));
};
};

洗牌算法

function shuffle(arr){
  const length = arr.length;
  while (length > 0) {
    const random = Math.floor(Math.random() * length);
    length--;
    [arr[length], arr[random]] = [arr[random], arr[length]];
  }
  return arr;
}

// 或
arr.sort(function(){
  return .5 - Math.random();
});