快排：

const quickSort = (array) => {
if (array.length <= 1) {
return array;
}
let pos = Math.floor(array.length / 2);
let posNum = array.splice(pos, 1)[0]; //需要将其从原数组删除。
let leftArray = [];
let rightArray = [];
for (let i = 0; i < array.length; i++) {
if (array[i] <= posNum) {
rightArray.push(array[i]);
} else {
leftArray.push(array[i]);
}
}
return quickSort(leftArray).concat(posNum, quickSort(rightArray));
}

冒泡：

const bubbleSort = (array) => {
if (array.length <= 1) {
return;
}
for (let i = 0; i < array.length; i++) {
for (let j = i + 1; j < array.length; j++) {
//从大到小
if (array[i] < array[j]) {
[array[i], array[j]] = [array[j], array[i]];
}
}
}
return array;
}

选择：

const insertionSort = (array) => {
let newArray = [...array];
if (array.length <= 1) {
return;
}
let preIndex, current;
for (let i = 1; i < newArray.length; i++) {
preIndex = i - 1;
current = newArray[i];
//将小的向前插入(将大的向后赋值)
while (preIndex >= 0 && newArray[preIndex] > current) {
newArray[preIndex + 1] = newArray[preIndex];
preIndex--;
}
newArray[preIndex + 1] = current;
}
return newArray;
}

希尔：

const shellSort = (array) => {
if (newArray.length <= 1) {
return;
}
let newArray = [...array];
let len = newArray.length;
let gap = 1;
while (gap < len / 3) {
gap = gap * 3 + 1; //动态间隔
};
for (gap; gap > 0; gap = Math.floor(gap / 3)) {
for (let i = gap; i < len; i++) {
//间隔选择一个值
temp = arr[i];
//间隔做交换
for (let j = i - gap; j >= 0 && arr[j] > temp; j -= gap) {
arr[j + gap] = arr[j];
}
arr[j + gap] = temp;
}
}
};

[TOC]

JS

1. 用过的ES6新特性

分别能答出 是啥、咋用、解决了什么问题

2. Promise

Promise为我们解决了什么问题?

在传统的异步编程中，如果异步之间存在依赖关系，我们就需要通过层层嵌套回调来满足这种依赖，如果嵌套层数过多，可读性和可维护性都变得很差，产生所谓“回调地狱”，而Promise将回调嵌套改为链式调用，增加可读性和可维护性。

Promise的调用流程：

• Promise的构造方法接收一个executor()，在new Promise()时就立刻执行这个executor回调
• executor()内部的异步任务被放入宏/微任务队列，等待执行
• then()被执行，收集成功/失败回调，放入成功/失败队列
• executor()的异步任务被执行，触发resolve/reject，从成功/失败队列中取出回调依次执行

这是个「观察者模式」，这种 收集依赖 -> 触发通知 -> 取出依赖执行 的方式，被广泛运用于观察者模式的实现，在Promise里，执行顺序是then收集依赖 -> 异步触发resolve -> resolve执行依赖。

1. BAT前端经典面试问题：史上最最最详细的手写Promise教程
2. 八段代码彻底掌握 Promise - 掘金

3. 事件循环(输出顺序)

JS引擎在执行JS脚本的时候是单线程的，脚本会顺序放入执行栈中依次解析并执行，如果遇到setTimeout这种延时任务，会交给Web APIs线程处理，web api 等到延时结束后把回调函数推进宏任务队列，遇到promise这种异步任务时，会把它推进微任务队列。宏微任务也有其执行规则，每次执行完一个宏任务，就要把微任务队列中的所有微任务取出来执行，微任务执行完毕，开始检查渲染。这就是JavaScript的异步执行机制，也叫事件循环。

宏任务包括：

• I/O
• setTimeout / setInterval / setImemediate
• requestAnimationFrame

微任务包括：

• promise / .then /.catch /.finally
• mutationObserver
• process.nextTick

图解搞懂JavaScript引擎Event Loop
从面试题看 JS 事件循环与 macro micro 任务队列(带async/await)
微任务、宏任务与Event-Loop
深入理解NodeJS事件循环机制

4. 对this的理解

this是动态变化的，谁调用它，就指向哪里，this有四种绑定规则：

• 默认绑定（严格/非严格模式）严格是undefined；非严格独立函数调用时this指向window。
• 隐式绑定，当函数引用有上下文对象时，隐式绑定会把函数中的this绑定到这个上下文对象。
• 显示绑定，通过call()或者apply()方法，第一个参数是一个对象。
• new绑定，如果有new关键字，this指向new出来的那个对象。

作为一个函数调用

    var name = "windowsName";
    function a() {
        var name = "Cherry";

        console.log(this.name);          // windowsName

        console.log("inner:" + this);    // inner: Window
    }
    a();
    console.log("outer:" + this)         // outer: Window

函数作为方法调用

    var name = "windowsName";
    var a = {
        name: "Cherry",
        fn : function () {
            console.log(this.name);      // Cherry
        }
    }
    a.fn();

使用构造函数调用函数

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
    this.sayName = function(){
        console.log(this.lastName)
    }
}

// This    creates a new object
var a = new myFunction("Li","Cherry");
a.sayName();

作为函数方法调用函数

    var name = "windowsName";

    function fn() {
        var name = 'Cherry';
        innerFunction();
        function innerFunction() {
            console.log(this.name);      // windowsName
        }
    }

    fn()

参考

掘金 - this、apply、call、bind

5. 讲解闭包及其作用

什么是闭包?

简单讲，闭包就是指有权访问另一个函数作用域中的变量的函数。

如何产生一个闭包？

创建闭包最常见方式，就是在一个函数内部创建另一个函数并返回。
闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。

闭包的注意事项：
通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止。

闭包的应用：
设计私有的方法和变量。
函数柯里化

参考

闭包

6. 实现new

7. 实现 bind

8. 隐式类型转换

[] == ![] !? 浅析JS的类型系统和隐式类型转换
JavaScript 运算符规则与隐式类型转换详解

9. 浏览器事件相关

e.target和e.currentTarget的区别？

currentTarget始终是监听事件者，而target是事件的真正发出者。

load 与 DOMContentLoaded
DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

意思是HTML下载、解析完毕之后就触发。

load

load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。

意思是页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。

JS中事件冒泡与捕获

10. 跨域

跨域的几种解决方式。
...

后端如何设置cors？

app.use('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*'); //这个表示任意域名都可以访问，这样写不能携带cookie了。
//res.header('Access-Control-Allow-Origin', 'http://www.baidu.com'); //这样写，只有www.baidu.com 可以访问。
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//设置方法
  if (req.method == 'OPTIONS') {
    res.send(200); // 意思是，在正常的请求之前，会发送一个验证，是否可以请求。
  }
  else {
    next();
  }
});

11. 对 async/await 的理解

首先，async函数返回的是⼀个Promise对象；

然后，async 函数内部 return 返回的值。会成为 then 方法回调函数的参数; 如果 async 函数内部抛出异常，则会导致返回的 Promise 对象状态变为 reject 状态。抛出的错误而会被 catch 方法回调函数接收到。

async 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变.

正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个 立即 resolve 的 Promise.

理解 async/await

CSS

1. flex

首先，采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

其次，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

最后，项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性，指定容器内元素的排列、对齐方式

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

项目属性，指定元素本身的排列、对齐方式

• order
• flex-grow
• flex-shrink
• flex-basis
• flex(该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto))
• align-self

参考

1. Flex 布局教程：语法篇
2. Flex 布局教程：实例篇

2. 浮动布局

float: left;  /* 表明元素必须浮动在其所在的块容器左侧。*/
float: right;  /*表明元素必须浮动在其所在的块容器右侧*/
float: none;  /*表明元素不进行浮动*/
float: inline-start;  /*表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。*/
float: inline-end;  /*表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。*/

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

也就是说,right 会挨着 left，而不是重叠。

<div class="left" style="float:left;background-color:#000;width:100px;height:110px"></div>
<div class="right" style="float:left;background-color:#ccc;width:110px;height:100px"></div>

这种情况与 position:absolute 正好相反

<div class="left" style="position:absolute;background-color:#000;width:100px;height:110px"></div>
<div class="right" style="position:absolute;background-color:#ccc;width:110px;height:100px"></div>

这时候，right 会覆盖在 left 上面。

但是，有时可能需要强制一个浮动元素移至任何浮动元素下方，那么使用clear: both; ：

参考

1. MDN - float

3. position

position是一种描述物体相对位置的艺术，它的核心是「参考坐标系」的选择

参考

1. MDN - position
2. 前端重构范式之 position

4. css各种布局

两栏布局

1. 第一种方式 --- 浮动

.outer1 .left {
    width: 200px;
    float: left;
}
.outer1 .right {
    width: auto;
    margin-left: 200px;
}

<div class="outer outer1">
    <div class="left">1-left</div>
    <div class="right">1-right</div>
</div>

2. flex

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 200px; /* flex-grow: 0;flex-shrink:0; flex-basis:200px; */
}
.outer2 .right {
   flex: auto;
}

<div class="outer outer2">
    <div class="left">2-left</div>
    <div class="right">2-right</div>
</div>

3. 绝对定位

.outer3 {
   position: relative;
}
.outer3 .left {
   position: absolute;
   width: 200px;
}
.outer3 .right {
   margin-left: 200px;
}

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
</div>

三栏布局

1. 绝对定位

.outer1 {
   position: relative;
}
.outer1 .left {
   position: absolute;
   width: 100px;
}
.outer1 .middle {
   margin: 0 200px 0 100px;
}
.outer1 .right {
   position: absolute;
   width: 200px;
   top: 0;
   right: 0;
}
/*注意：左右分别使用绝对定位，中间设置外边距*/

<div class="outer outer1">
   <div class="left">1-left</div>
   <div class="middle">1-middle</div>
   <div class="right">1-right</div>
</div>

2. flex

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 100px;
}
.outer2 .middle {
   flex: auto;
}
.outer2 .right {
   flex: 0 0 200px;
}

<div class="outer outer2">
   <div class="left">2-left</div>
   <div class="middle">2-middle</div>
   <div class="right">2-right</div>
</div>

3. 浮动

.outer3 .left{
   float: left;
   width: 100px;
}
.outer3 .right {
   float: right;
   width: 200px;
}
.outer3 .middle {
   margin: 0 200px 0 100px;
}

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
   <div class="middle">3-middle</div>
</div>

圣杯布局

<style>
*{
        box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
        margin:0;
        padding:0;
    }

    body{
        display:flex;
        flex-direction:column;/* 头、中部、脚纵向显示 */
    }

    header,footer{
        flex:0 0 50px;/* 头、脚尺寸固定，不放大、不缩小 */
        background:#3f3f3f;
    }

    .main{
        display:flex;

        /* 
        flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)    分配多余空间之前项目占据的主轴空间(flex-basis)
        flex:1指的是：中部区域自由伸缩
        auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
        块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
        */
        flex:1;
    }

   .content{
        background:red;
        height:1000px;

        /* 
        横向中间内容区自适应，即使未指定宽度，但会分配宽度 
        块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
        */
        flex:1;
   }
   .left,.right{
        height:800px; /*不设置高度，则自动撑满整个高度*/
        background:blue;
        flex:0 0 100px;/* 左右两列固定宽 */
   }

   .left{
        order:-1;/* 让left居于左侧 */
   }
</style>

<html>
<body>
    <header></header>
    <div class="main">
        <div class="content">中间栏要在放在文档流前面以优先渲染。</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>
</html>

水平垂直居中

1. 定宽

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -25px;
}

2. 不定宽

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

3. transform:tranlate

5. 伪类和伪元素的区别

伪类

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类，伪类的操作对象是文档树中已有的元素。

li:first-child {}

p:first-letter {}

a:hover {}

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before(或::before，CSS3标准) 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

参考

Alloy-team - 总结伪类与伪元素

网络

1. 对缓存的了解

分为强缓存和协商缓存：
1）浏览器在加载资源时，先根据这个资源的一些http header(expries和cache-control)判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；

no-cache
在发布缓存副本之前，强制要求缓存把请求提交给原始服务器进行验证(协商缓存验证)。
no-store
缓存不应存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存。

2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header(last-modified和etag)验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；

3）强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。

4）当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。
(精辟)流云诸葛 - 浏览器缓存知识小结及应用
彻底理解浏览器的缓存机制

2. HTTP 状态码

3. 对 https 的了解

首先讲HTTP的缺点：

• 通信使用明文加密，容易遭到窃听
• 不验证对方身份，容易遭到伪装
• 无法确保报文完整性，容易遭到篡改

https的出现就是为了解决这三个问题：

https = 加密 + 认证 + 完整性保护

• 采用非对称加密的方式实现秘钥的交换，后续混合加密，实现了机密性
• 采用摘要算法（MD5/SHA-2）确保报文完整性
• 采用数字签名+第三方证书机构实现身份认证

掘金 - HTTP和HTTPS详解
掘金 - 看完这篇 HTTPS，和面试官扯皮就没问题了

4. 讲解http1.1 、http2.0、https

http1.0

• 超文本传输协议，不仅可以传输文字，还可传输视频、图片、二进制文件
• 增加POST和HEAD命令
• 增加状态码、缓存等

http1.0存在问题

每个tcp连接只能发送一个请求，下一个请求发送需要重新建立tcp连接，性能很差

http1.1

针对http1.0的问题，http1.1做了很大的优化

长连接

http1.1默认connection：keep-alive，一个tcp连接可以持续传输请求。

管道机制

因为http1.1支持长连接，发送一个请求之后还可以发送第二个请求，如果第二个请求要等待第一个请求返回之后才发送，效率就很低，所以引入了管道机制，多个请求可以按顺序同时发送，响应按顺序返回

Content-Length

因为一个tcp可以同时发送多个请求，我们需要一个字段来区分多个请求，Content-length表示当前请求响应共有多少字段，超过这个值的响应就不是该请求的响应

分块传输

因为http1.1是按顺序发送请求和响应，如果一个顺序靠前的请求响应时间较长，会阻碍后面请求的响应，造成很大的延迟，这就是线头阻塞。故http1.1支持分块传输：Transfer-Encoding: chunked，每个响应头前都有一个16进制数字表示该块儿大小，如果为0表示本次分块数据传输完成

其他功能

新增PUT、PATCH、HEAD、 OPTIONS、DELETE请求方法

客户端请求头新增Host字段，有了Host字段，就可以将请求发往同一台服务器上的不同网站，为虚拟主机的兴起打下了基础。

http1.1存在问题

主要还是线头阻塞问题，为了避免这个问题，只有两种方法：一是减少请求数，二是同时多开持久连接。这导致了很多的网页优化技巧，比如合并脚本和样式表、将图片嵌入CSS代码、域名分片（domain sharding）等等。如果HTTP协议设计得更好一些，这些额外的工作是可以避免的。

http1.1和http1.0对比

• 缓存处理：http1.0中只有if-Modified-Since、Expires，http1.1中增加了E-tag、if-None-match、等
• 优化带宽和网络请求：如果我们的请求的只是一个资源的一部分，http1.0会全部返回整个资源，造成带宽的浪费，http1.1中增加了range字段，允许请求资源的某部分
• 错误通知机制：新增了24个错误状态码
• Host名增加：http1.0认为域名和主机是一一对应的，http1.1增加Host字段，支持多个域名对应一个机器，为虚拟主机的发展奠定了基础
• 长连接：支持长连接和管道机制，一定程度上弥补了http1.0每次请求都要重建tcp连接的缺陷

http2.0/SPDY

http2.0是基于SPDY的，两者没有太大的区别，主要是header压缩方式以及http2.0支持明文传输。

对比http1.1，主要区别有以下几个

多路复用

http2.0一个tcp连接支持多个stream流同时传输

请求优先级

多路复用可能会带来一个新的问题，多个请求并发可能导致关键请求被阻塞，故http2.0支持request设置优先级

header压缩

header中的一些信息是重复的，采用合适的压缩算法减少请求大小

服务端推送

正常文档流请求style.css后服务端会主动推送script.js到客户端，服务端请求的时候直接从缓存读取

浏览器

1. 浏览器本地存储

浏览器的本地存储主要分为Cookie、localStorage、sessionStorage 和 IndexedDB。

cookie

Cookie 本质上就是浏览器里面存储的一个很小的文本文件，向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。

cookie 就是用来做状态存储的,但是也有缺陷：

• 容量缺陷
• 性能缺陷
• 安全缺陷

localStorage

localStorage有一点跟Cookie一样，在同一个域名下，会存储相同的一段localStorage。

相对Cookie的区别：

• 容量。localStorage 的容量上限为5M
• 只存在客户端，默认不参与与服务端的通信
• 接口封装，有get set 函数

应用场景：

• 利用localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源，比如官网的logo，存储Base64格式的图片资源，因此利用localStorage

sessionStorage

与localStorage基本相同。

但sessionStorage和localStorage有一个本质的区别，那就是前者只是会话级别的存储，并不是持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了。

应用场景：

• 可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。
• 可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。事实上微博就采取了这样的存储方式。

indexedDB

IndexedDB是运行在浏览器中的非关系型数据库, 本质上是数据库，理论上容量是没有上限的。

重要特性：

• 支持事务，存储二进制数据
• 键值对存储
• 异步操作
• 受同源策略限制，即无法访问跨域的数据库

参考

浏览器灵魂之问 - 能不能说一说浏览器的本地存储？各自优劣如何？

2. 对前端路由的了解

何为前端路由？

简单的说，就是在保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每个视图展示形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均通过这个特殊的 url 来实现。

为实现这一目标，我们需要做到以下 2 点：

• 改变 url 且不让浏览器向服务器发送请求。
• 可以监听到 url 的变化

接下来要介绍的 hash 模式和 history 模式，就是实现了上面的功能.

hash 模式

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 "www.baidu.com/#hashhash" ，其中 "#hashhash" 就是我们期望的 hash 值。
由于 hash 值的变化不会导致浏览器向服务器发送请求，而且 hash 的改变会触发 hashchange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

history 模式

在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转：

history.go(-1);       // 后退一页
history.go(2);        // 前进两页
history.forward();     // 前进一页
history.back();      // 后退一页

在 HTML5 的规范中，history 新增了以下几个 API：

history.pushState();         // 添加新的状态到历史状态栈
history.replaceState();      // 用新的状态代替当前状态
history.state                // 返回当前状态对象

参考

「前端进阶」彻底弄懂前端路由

3. 前端安全（xss、csrf）

• sql 注入
  要理解sql注入的场景，它的原理是什么，当前的数据库的解决方案是什么？

• xss 攻击
  分为 DOM xss、反射型xss、存储型 xss

  常见的攻击场景，什么类型的网站容易被xss攻击，整个流程的原理是什么？
  恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，其他用户看到这个包括恶意脚本的页面并执行，获取用户的cookie等敏感信息，从而达到恶意攻击用户的目的。
    预防措施：防止下发界面显示html标签，把</>等符号转义 。

• csrf 攻击
  其实就是一个钓鱼网站，要理解为什么会收到攻击，应该采取什么策略进行防御。
  CSRF通过伪装来自受信任用户的请求来利用受信任的网站。用户C首先登录受信任网站A，并在本地生成Cookie。在不登出A的情况下，访问危险网站B。B要求访问站点A，浏览器会自动带上用户C的cookie，并且A站点也分辨不清好坏，B就可以冒充受信任用户C来进行操作。
    预防措施：请求中加入随机数，让钓鱼网站无法正常伪造请求。

• cookie 安全
  要理解为什么用token，优势等

• 密码安全
  主要是用户登陆，用户数据提交，加密，存入数据库的一整个流程

• https
  https解决了什么问题

参考

1. 前端安全知识
2. 前端安全系列（二）：如何防止CSRF攻击？

4. cookie

把cookie聊清楚

5. 结合跨域问题理解简单请求和非简单请求

CORS 简单请求+预检请求（彻底理解跨域）

框架及工具

1. 对 React 的理解

记住一个公式：UI = f(state)

React 的声明式编程，抛弃了直接操作DOM的方式，只关注数据变动，引入virtual-dom，使得DOM操作由框架完成，提升了可读性可维护性。遵循从高阶组件到低阶组件的单向数据流。

2. hooks、typescript

hooks 解决了什么问题

• 想要复用一个有状态的组件太麻烦了
  react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。
  官方推荐解决方案：render props 和 高阶组件
  但是这里又会出现嵌套层级太深的问题。
• 生命周期钩子函数里的逻辑太乱了
  也会产生很多重复代码
• 需要时刻关注组件的this指向
  比如说要手动绑定this
  写函数式组件的时候，随着组件越来越复杂，可能又要改成成有状态的组件

hooks的用法和注意事项

最简单的React Hooks入门级教程

参考

30分钟精通React Hooks

3. React 生命周期

react v16.3 之前的生命周期：

react 16.3 新引入了两个钩子：

componentDidMount 中通常都做些什么操作?

• 接口请求
• 依赖DOM的操作

4. constructor 中的 super(props)的作用

• ES6 中，在子类的 constructor 中必须先调用 super 才能引用 this；
• super(props)的目的：在constructor中可以使用this.props；
• 根本原因是constructor会覆盖父类的constructor，导致你父类构造函数没执行，所以手动执行下。

如果要从另一个角度看的话：

假设在es5要实现继承,首先定义一个父类:

//父类
function sup(name) {
    this.name = name;
}
//定义父类原型上的方法
sup.prototype.printName = function (){
    console.log(this.name);
}

再定义他sup的子类，继承sup的属性和方法:

function sub(name, age){
    sup.call(this,name);    //调用call方法,继承sup超类属性
    this.age = age;
}    

sub.prototype = new sup();   //把子类sub的原型对象指向父类的实例化对象，这样即可以继承父类sup原型对象上的属性和方法
sub.prototype.constructor = sub;    //这时会有个问题子类的constructor属性会指向sup，手动把constructor属性指向子类sub
//这时就可以在父类的基础上添加属性和方法了
sub.prototype.printAge = function (){
    console.log(this.age);
}

这时调用父类生成一个实例化对象:

    let jack = new sub('feihao', 18);
    jack.printName() ;   //输出 : feihao
    jack.printAge();    //输出 : 18

这就是es5中实现继承的方法。
而在es6中实现继承:

  class sup {
        constructor(name) {
            this.name = name
        }
    
        printName() {
            console.log(this.name)
        }
    }

class sub extends sup{
    constructor(name,age) {
        super(name) // super代表的事父类的构造函数
        this.age = age
    }

    printAge() {
        console.log(this.age)
    }
}

let jack = new sub('feihao', 18)
    jack.printName()    //输出 : feihao
    jack.printAge()    //输出 : 18

参考

1. 为什么我们要写 super(props) ？

5. React fiber

背景：
react在进行组件渲染时，从setState开始到渲染完成整个过程是「一气呵成」的。如果需要渲染的组件比较复杂，js执行会占据主线程时间较长，会导致页面响应速度变差，使得react在动画、手势等应用中效果比较差。

原因：
在setState后，react会立即开始reconciliation过程，从父节点（Virtual DOM）开始遍历，以找出不同。将所有的Virtual DOM遍历完成后，reconciler才能给出当前需要修改真实DOM的信息，并传递给renderer，进行渲染，然后屏幕上才会显示此次更新内容。对于特别庞大的vDOM树来说，reconciliation过程会很长，在这期间，主线程是被js占用的，因此任何交互、布局、渲染都会停止，给用户的感觉就是页面被卡住了。

解决：
fiber的机制是每次只做一个很小的任务，做完后能够“喘口气儿”，回到主线程看下有没有什么更高优先级的任务需要处理，如果有则先处理更高优先级的任务，没有则继续执行。
对于如何区别优先级，React 有自己的一套逻辑。比如对于动画这种实时性很高的东西，也就是 16 ms 必须渲染一次保证不卡顿的情况下，React 会每 16 ms（以内） 暂停一下更新，返回来继续渲染动画。

参考

1. fiber 精简版总结
2. fiber 详细总结

6. React render

render 函数并不做实际的渲染动作，它只是返回一个JSX描述的结构，最终由React来操作渲染过程。（render函数并不往DOM树上渲染或者装载内容，它只是返回一个JSX表示的对象，然后由React库来根据返回对象决定如何渲染。而React库肯定是要把所有组件返回的结果综合起来，才能知道该如何产生对应的DOM修改。）

render函数还可以返回 字符串 / 数组

7. React 8 种条件渲染方式

场景：组件内有两种状态，对应渲染不同的元素

• render 函数内直接 if...else
• 某些条件下需要隐藏组件时可返回 null阻止渲染
• 使用一个函数来返回要渲染的元素
• 三元运算符
• 短路运算符
• 使用自执行函数
• 拆分成子组件
• 写一个 if 组件（类似Vue的 v-if）
• 利用高阶组件

参考

React的8种条件渲染方法 - 内有示例代码

8. React 中如何减少 render 次数

• shouldComponentUpdate 和 PureComponent
• 对组件进行合理拆分
• 涉及频繁setState的地方可进行防抖/节流

参考

1.性能！！让你的 React 组件跑得再快一点 - 政采云前端团队
2. React优化：竭尽全力的减少render渲染

9. React setState

setState 三种用法：

• setState({key: value})
• this.setState((prevState) => ({ count: prevState.count + 1 }))
• setState(partialState, callback)

setState 同步/异步 如何表现：

• setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
• setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
• setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

参考

你真的理解setState吗？

10. 虚拟DOM的优缺点

答题思路：
传统DOM的劣势 --> react diff --> vdom的出现解决什么问题 --> vdom的优势

传统前端编程方式是命令式的，直接操作DOM，代码可读性差可维护性低；

react的声明式编程，抛弃了直接操作DOM，只关注数据变动，DOM操作由框架完成，提升了可读性可维护性；

最初react在更新的过程中会刷新整个页面，后来引入的diff过程，对比数据变动前后的DOM结构，但DOM结构diff起来太复杂，由此引出了vdom；

VDOM 和 Diff 算法的出现是为了解决由命令式编程转变为声明式编程、数据驱动后所带来的性能问题的。换句话说，直接操作 DOM 的性能并不会低于虚拟 DOM 和 Diff 算法，甚至还会优于。

这么说的原因是因为 Diff 算法的比较过程，比较是为了找出不同从而有的放矢地更新页面。但是比较也是要消耗性能的。而直接操作 DOM 就是有的放矢，我们知道该更新什么不该更新什么，所以不需要有比较的过程。所以直接操作 DOM 效率可能更高。

React 厉害的地方并不是说它比 DOM 快，而是说不管你数据怎么变化，我都可以以最小的代价来进行更新 DOM。 方法就是我在内存里面用新的数据刷新一个虚拟 DOM 树，然后新旧 VDOM 进行比较，找出差异，再更新到 DOM 树上。

虚拟DOM的作用：

• Virtual DOM 在牺牲（牺牲很关键）部分性能的前提下，增加了可维护性，这也是很多框架的通性。
• 实现了对 DOM 的集中化操作，在数据改变时先对虚拟 DOM 进行修改，再反映到真实的 DOM 中，用最小的代价来更新 DOM，提升效率（要想想是跟哪个阶段相比提升了效率，别只记住了这一条）
• 打开了函数式 UI 编程的大门
• 可以渲染到 DOM 以外的端，使得框架跨平台，比如 ReactNative，React VR 等
• 可以更好地实现 SSR、同构渲染等。这条其实是跟上面一条差不多的
• 组件的高度抽象化

虚拟DOM的缺点:

• 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，会比 innerHTML 插入慢。

• 虚拟 DOM 需要在内存中维护一份 DOM 的副本（跟上面一条其实也差不多，上面一条是从速度上，这条是从空间上）。

• 如果虚拟 DOM 大量更改，这是合适的。但是单一频繁地更新的话，虚拟 DOM 将会花费更多的时间处理计算的工作。所以，如果你有一个 DOM 节点相对较少页面，用虚拟 DOM，它实际上有可能会更慢。但对于大多数单页面应用，这应该都会更快。

参考

把这篇文章看完 - 从 React 历史的长河里聊虚拟 DOM 及其价值
Virtual Dom 的优势在哪里？

11. webpack 拆包

对于开发项目中不经常会变更的静态依赖文件。类似于我们的elementUi、vue全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候，webpack只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么webpack就不会对这些库去打包，这样可以快速的提高打包的速度。

这里我们使用webpack内置的DllPlugin DllReferencePlugin进行抽离.

具体步骤：
①. 在与webpack配置文件同级目录下新建webpack.dll.config.js
②. 在package.json中配置dll命令
③. 接下来在我们的webpack.config.js中增加配置代码
④. 执行 npm run dll
⑤. 会发现生成了我们需要的集合第三方代码的vendor.dll.js 我们需要在html文件中手动引入这个js文件
⑥. 这样如果我们没有更新第三方依赖包，就不必npm run dll。直接执行npm run dev npm run build的时候会发现我们的打包速度明显有所提升。因为我们已经通过dllPlugin将第三方依赖包抽离出来了。

参考

2.5.1.5 抽离第三方模块

React diff 策略

• Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。
• 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
• 对于同一层级的一组子节点，它们可以通过唯一 key 进行区分。

tree diff

基于策略一，React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。
即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。

component diff

React 是基于组件构建应用的，对于组件间的比较所采取的策略也是简洁高效。

• 如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。
• 如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。
• 对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。

element diff（不带key）

• element相同，原地复用
• element 不同，删旧建新

element diff（带key）

带key diff的过程看这里

参考

react diff 策略

webpack tree shaking 存在的问题

Tree-Shaking能帮助我们删除掉没有使用的代码，将会大大缩减打包后的代码量。

这里有个坑。tree-shaking的主要作用是用来清除代码中无用的部分。目前在webpack4 我们设置mode为production的时候已经自动开启了tree-shaking。 但是要想使其生效，生成的代码必须是ES6模块。不能使用其它类型的模块如CommonJS之流。 如果使用Babel的话，这里有一个小问题，因为Babel的预案（preset）默认会将任何模块类型都转译成CommonJS类型，这样会导致tree-shaking失效。修正这个问题也很简单，在.babelrc文件或在webpack.config.js文件中设置modules： false就好了

参考

1. 你的Tree-Shaking并没什么卵用

webpack 占位符

• [ id ] – 返回块ID。
• [ path ] – 返回文件路径。
• [ name ] – 返回文件名称。
• [ ext ] – 返回扩展名。
• [ hash ] – 返回构建Hash。如果构建任何部分发生更改，则也会发生更改。
• [ chunkhash ] – 返回条目块特定的hash。在配置中定义的每个entry都会收到自己的hash。如果entry的任何部分发生变化，那么hash也会发生改变。[chunkhash]比[hash]定义更细。
• [ contenthash ] – 返回特定于内容的hash。[contenthash]只适用于ExtractTextPlugin，是可用的、最具体的选项。

Webpack入坑秘籍（18）

其他

1. 组件封装的要点

9. 如何设计一个 dialog 组件

① 确定UI

三种类型：alert、confirm、modal
样式是否支持自定义

② 确定API

• 对外暴露的props属性配置
• 调用方式
• 确认/取消的回调函数

③ 具体实现

• 遮罩
• 头部、内容和底部的布局

参考

React造轮系列：对话框组件 - Dialog 思路

2. 项目中的难点

3. 工作收获

4. 项目经历

5. 职业规划

6. 还有什么要问的吗

7. 前端性能优化

• 网络相关
  • 合适的缓存策略
  • 开启 HTTP 2.0
  • DNS预解析
  • 网页的预加载和预渲染
• 渲染过程
  • 懒执行
  • 懒加载
  • 利用好本地存储
  • 减少回流、重绘
• 文件优化
  • 图片优化
    • 图片压缩
    • 简单图标可用css代替
    • 小图base64
    • 雪碧图
    • 选择正确的图片格式
  • 细节优化
    • css和js引入的位置
    • 服务端启用GZIP压缩
    • 静态资源启用CDN
    • 计算量比较大的操作可交给webworker去做
• 其他
  • 使用webpack优化项目
    • 对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩
    • 使用 ES6 模块来开启 tree shaking，这个技术可以移除没有使用的代码
    • 按照路由拆分代码，实现按需加载
    • 配置缓存
    • DLL
    • 缩小打包作用域
    • 压缩代码
    • 多进程多实例构建
  • 监控
    • http方面
      后端log日志，流入kafka，可以准确监控接口异常
    • 前端异常监控
      window.onerror js异常监控
      try catch 捕获
      异步异常的捕获，unhandledrejection
      前端的performance api
      
      Chrome devtool performance 工具
    • 前端 sdk 埋点
      统计UV PV 转化率

8. 前端异常捕获与上报

前端异常捕获与上报
前端异常监控、上报及js压缩代码定位

8.1 前端首屏加载时间和白屏时间的概念

Web 性能优化-首屏和白屏时间

9. 对前端工程化的理解

前端的规模越来越大，已经上升到了工程学的问题，如何提高前端工程师的开发效率变得非常重要。这就是前端工程化所要解决的问题。前端工程化是根据业务特点，将前端开发流程规范化，标准化，它包括了开发流程，技术选型，代码规范，构建发布等，用于提升前端工程师的开发效率和代码质量。

一个符合前端工程化要求的方案应该包含以下要素:

• 开发规范
• 模块化开发
• 组件化开发
• 组件仓库
• 性能优化
• 部署
• 开发流程
• 开发工具

我对前端工程化的理解

10. 单点登录和oauth2

前端关于单点登录的知识

1. css盒模型讲解

设置某个元素width=100px，border=1px, padding=5px, 在content-box 和 border-box 下分别是多宽

2. relative 和 absolute 的区别

3. HTTP 状态码

4. 了解什么HTTP请求方法，分别有什么作用和优缺点

5. 了解什么HTTP header

6. cookie讲解

cookie、localStorage、sessionStorage异同
对session的理解
打开同一域名的两个窗口，关闭其中一个，sessionstorage还存在吗

7. 对TCP/UDP的理解

8. 闭包考察

for (var i = 0; i < 6; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}

输出结果，以及如何每隔1s输出一个数字

9. 算法考察

给定形如 ['w','w','w','.','t','o','u','t','i','a','o','.','c','o','m']的 字符数组，将其转换成 ['c','o','m','.','t','o','u','t','i','a','o','.','w','w','w'] 的形式，要求必须原地操作 空间复杂度O（1）

一面

1. 客户端缓存，sessionStorage和localStorage的区别
2. indexDB了解过吗
3. 浮动的原理，清除浮动
4. BFC原理，触发条件
5. margin重叠的原理
6. 不定宽高水平垂直居中
7. 什么是跨域，跨域的方式，nginx怎么配，webpack跨域怎么配置
8. promise原理，链式调用原理，实现promiseAll
9. generator，async/await原理
10. react的setState
11. react中原生事件和react的事件哪个先执行，原理是什么
12. 如何判断一个变量是不是一个数组，多种方式，还有一种constructor的方式，isArray
13. instanceof实现原理
14. http缓存机制
15. redux的原理，说说你的理解
16. this是什么，它的指向问题，下面的代码打印什么

function func1(){
     func2 = ()=>{
        func3 = () => {
            console.log(this)
        }
        func3()
     }
     func2()
}
func1()

17. proto 和prototype的区别是什么
18. 实现一个红绿灯，红灯3s，绿灯2s，黄灯1s，交替进行

二面（基础技术部）

1. js中的引用是什么

2.深度拷贝，实现深度拷贝的时候有什么坑需要注意，使用递归的话如果是函数怎办，直接赋值吗？如果某个对象一直引用自身怎么办？

3.判断变量类型的方式，instanceof的原理，获取原型的方法是什么
4. 下段代码的执行机制

function f1(){
    console.time('time span')
}
function f2(){
    console.timeEnd('time span')
}

setTimeout(f1,100);
setTimeout(f2,200);
function waitForMs(n){
    var now = Date.now();
    while(Date.now() - now < n){
        
    }
}

waitForMs(500)

//输出：time span: 0.075927734375ms

setTimeout的执行机制，不是直接推入宏任务，而是先放到web api中去计时，时间到了再放进宏任务，所以阻塞500ms之后，f1 f2 都进宏任务队列了，随后几乎一起执行

5. 闭包的定义是什么？闭包一定是函数嵌套函数吗？为什么闭包中的变量可以一直被使用？什么是垃圾回收？垃圾回收是怎么执行的，什么时候会去清除垃圾变量？
6. 什么是函数作用域？什么是块级作用域
7. sort参数，用法和实现原理。当compare函数return 0的时候，一定是不调整顺序吗
8. 算法的稳定性是怎么评估的
9. 实现一个方法，对一个数组中的元素作加法运算，元素可能是字符串，数字，对象，仅对可转为数字的元素作累加。使用es6新特性，要考虑边界情况，性能情况
10. reduce函数的参数是什么，第一个函数，第二个指初始累加值，第二个参数必须传吗？什么时候该传，什么时候不传
11. react 16以后出来的新特性都有哪些
12. react16之后新的生命周期方法都有什么
13. setState的参数都有哪些，第一个参数是函数的时候与是对象的时候有什么区别吗，为什么推荐使用函数

14.setState的原理，什么时候同步什么时候异步？钩子函数有哪些？setState写在一个循环里不停的执行setState，页面会有更新吗

15.usestate怎么用，返回属性和设置属性的函数，为什么这个属性的值可以被再次修改
const [count, setCount] = useState(0); //const修饰， 为什么count再执行setCount之后能被修改

16. useEffect参数都有什么，用法
17. renderProps用法
18. HOC是什么，可以解决什么问题，在什么场景下可以用

redux

1. redux的原理

2.在项目中你是如何使用的，讲一下整个过程

3. 用redux之后state是如何更新的？组件是如何拿到state的？state是怎么做到全局共享的？

4. store可以有多个吗？如果一个项目比较复杂，维护的state太多，有什么优化手段？store可以拆分吗？如何拆分？

5. connect的作用是什么，怎么连接react和redux的，内部是怎么实现的

6 如果有异步请求，请求发出去之后结果延迟到达，这种情况下state是如何更新的

7. middleware在项目中你是怎么使用的，为什么要用middleware，使用middleware带来的好处是什么？使用的时候有什么要注意的地方吗

mobx

1. mobx和redux的区别是什么
2. 什么是双向绑定和单向绑定
3. 什么是观察者模式

node

1. 用node做了哪些东西

[TOC]

JS 部分

1. 防抖节流

// 非立即执行版本
function debounce(fn, wait){
    let timer = null;
    
    return function(){
        const context = this;
        const args = arguments;
        
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            fn.apply(context, args);
            timer = null;
        }, wait);
    }
}

timer=null 起不到终止计时器的作用，只是给timer变量赋了值

// 立即执行版本
function debounce(fn, wait){
    let timer = null;
    
    return function(){
        const context = this;
        const args = arguments;
        
        if(!timer){
            fn.apply(context, args);
        }
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            timer = null;
        }, wait);
    }
}

节流：wait时间内，函数只执行一次，分为定时器版和时间戳版

// 时间戳版
function throttle(fn, wait){
    let prev = Date.now();
    
    return function(){
        const context = this;
        const args = arguments;
        let now = Date.now();
        
        if(now - prev > wait){
            fn.apply(context, args);
            prev = Date.now();
        }
    }
}

// 定时器版
function throttle(fn, wait){
    let timer = null;
    
    return function(){
        const context = this;
        const args = arguments;
        
        if(!timer){
            timer = setTimeout(()=>{
                fn.apply(context, args);
                timer = null;
            }, wait)
        }
    }
}

2. call、apply、bind实现

Function.prototype.myCall = function(context){
    const context = context || window;
    // 给context添加一个属性
    // 如 getValue.call(a,'zfh',18) => a.fn = getValue
    context.fn = this;
    // 将参数取出
    const args = [...arguments].slice(1);
    const result = context.fn(...args);
    // 删除fn
    delete context.fn;
    return result;
}

Function.prototype.myApply = function(context){
    const context = context || window;
    context.fn = this;
    
    let result;
    // 需要判断是否存在第二个参数
    // 如果存在则将第二个参数展开
    if(arguments[1]){
        result = context.fn(...arguments[1]);
    }else{
        result = context.fn();
    }

    delete context.fn;
    return result;
}

Function.prototype.myBind = function(context){
    let args = [].slice.call(arguments, 1);
    const context = context;
    const fn = this;
    
    let fbound = function(){
        const newArgs = args.concat([].slice.call(arguments));
        return fn.apply(this instanceof fn ? this : context, newArgs)
    };
    
    function Constructor(){};
    Constructor.prototype = fn.prototype;
    fbound.prototype = new Constructor();
    
    return fbound;
}

3. new

function create(){
    // 创建一个新对象
    let obj = new Object();
    // 获得构造函数
    let Con = [].shift.call(arguments);
    // 链接到原型
    obj.__proto__ = Con.prototype;
    // 绑定this，执行构造函数
    let result = Con.apply(obj, arguments);
    // 确保new出来的是个对象
    return typeof result === 'object' ? result : obj;
}

4. instanceof

// 实现一下 instanceof
function instanceof(left, right) {
    // 获得类型的原型
    let prototype = right.prototype
    // 获得对象的原型
    left = left.__proto__
    // 判断对象的类型是否等于类型的原型
    while (true) {
    	if (left === null)
    		return false
    	if (prototype === left)
    		return true
    	left = left.__proto__
    }
}

5. 二叉树遍历

二叉树遍历
使用JavaScript完成二叉树的一些基本操作

6. Promise各种API的实现

BAT前端经典面试问题：史上最最最详细的手写Promise教程

7. 实现虚拟DOM转真实DOM

理解虚拟DOM，实现DOM

8. 各种排序算法

js实现几种常见排序算法

9. repeat函数，考察闭包

闭包面试题两道
题2的另一种解法:

function repeat(func, times, wait){
    return function(){
        var args = Array.from(arguments);
        for(let i = 0; i < times; i++){
            setTimeout(func, wait * i, ...args);
        }
    }
}

10. JavaScript中的浅拷贝和深拷贝

解决循环引用的问题，使用一个set记录遍历过的值，每次拷贝前查出Set中存在这个值，就直接返回。
JavaScript中的浅拷贝和深拷贝
面试官:请你实现一个深克隆

11. 数组扁平化、去重

// 方法 1
var arr = [1, [2, [3, 4]]];

function flatten(arr) {
    var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]))
        }
        else {
            result.push(arr[i])
        }
    }
    return result;
}

// 方法2
var arr = [1, [2, [3, 4]]];

function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item // +会使字符串发生类型转换
    })
}

// 方法3
var arr = [1, [2, [3, 4]]];

function flatten(arr) {
    return arr.reduce(function(prev, next){
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}

// 方法4
function flatten(arr){
    arr.flatMap(item=>Array.isArray(item)?item.flat():item);
    return arr;
}

12. 求二叉树的最大最小高度

二叉树的最大深度（JavaScript）
二叉树的最小深度

13. 柯里化

从一道面试题认识函数柯里化
前端进击的巨人（五）：学会函数柯里化（curry)

14. ES6 map reduce 方法实现

Array.prototype.fakeMap = function(fn,context) {
	let arr = this;
	let temp = [];
	for(let i=0;i<arr.length;i++){
		let result = fn.call(context,arr[i],i,arr);
		temp.push(result);
	}
	return temp;
}

Array.prototype.fakeReduce = function fakeReduce(fn, base) {
  if (typeof fn !== "function") {
    throw new TypeError("arguments[0] is not a function");
  }
  let initialArr = this;
  let arr = initialArr.concat();

  if (base) arr.unshift(base);
  let index, newValue;

  while (arr.length > 1) {
    index = initialArr.length - arr.length + 1;
    newValue = fn.call(null, arr[0], arr[1], index, initialArr);

    arr.splice(0, 2, newValue); // 直接用 splice 实现替换
  }

  return newValue;
};

// 精简版
Array.prototype.reduce = function(cb, init){
    let arr = this;
    if(init){
        arr.unshift(init);
    }
    while(arr.length > 1){
        let args = arr.splice(0, 2);
        let res = cb.apply(this, args);
        arr.unshift(res);
    }

    return arr[0]
}

JavaScript 实现 reduce() 方法函数

15. 字符串压缩

字符串压缩-正则

16.EventEmitter实现

循序渐进教你实现一个完整的node的EventEmitter模块
EventEmitter 源码分析与简易实现

CSS 部分

三角形、梯形、扇形

用 css 画三角形、梯形、扇形、箭头和椭圆几种基本形状

两栏布局

1. 第一种方式 --- 浮动

.outer1 .left {
    width: 200px;
    float: left;
}
.outer1 .right {
    width: auto;
    margin-left: 200px;
}

<div class="outer outer1">
    <div class="left">1-left</div>
    <div class="right">1-right</div>
</div>

2. flex

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 200px; /* flex-grow: 0;flex-shrink:0; flex-basis:200px; */
}
.outer2 .right {
   flex: auto;
}

<div class="outer outer2">
    <div class="left">2-left</div>
    <div class="right">2-right</div>
</div>

3. 绝对定位

.outer3 {
   position: relative;
}
.outer3 .left {
   position: absolute;
   width: 200px;
}
.outer3 .right {
   margin-left: 200px;
}

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
</div>

三栏布局

1. 绝对定位

.outer1 {
   position: relative;
}
.outer1 .left {
   position: absolute;
   width: 100px;
}
.outer1 .middle {
   margin: 0 200px 0 100px;
}
.outer1 .right {
   position: absolute;
   width: 200px;
   top: 0;
   right: 0;
}
/*注意：左右分别使用绝对定位，中间设置外边距*/

<div class="outer outer1">
   <div class="left">1-left</div>
   <div class="middle">1-middle</div>
   <div class="right">1-right</div>
</div>

2. flex

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 100px;
}
.outer2 .middle {
   flex: auto;
}
.outer2 .right {
   flex: 0 0 200px;
}

<div class="outer outer2">
   <div class="left">2-left</div>
   <div class="middle">2-middle</div>
   <div class="right">2-right</div>
</div>

3. 浮动

.outer3 .left{
   float: left;
   width: 100px;
}
.outer3 .right {
   float: right;
   width: 200px;
}
.outer3 .middle {
   margin: 0 200px 0 100px;
}

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
   <div class="middle">3-middle</div>
</div>

圣杯布局

<style>
*{
        box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
        margin:0;
        padding:0;
    }

    body{
        display:flex;
        flex-direction:column;/* 头、中部、脚纵向显示 */
    }

    header,footer{
        flex:0 0 50px;/* 头、脚尺寸固定，不放大、不缩小 */
        background:#3f3f3f;
    }

    .main{
        display:flex;

        /* 
        flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)    分配多余空间之前项目占据的主轴空间(flex-basis)
        flex:1指的是：中部区域自由伸缩
        auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
        块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
        */
        flex:1;
    }

   .content{
        background:red;
        height:1000px;

        /* 
        横向中间内容区自适应，即使未指定宽度，但会分配宽度 
        块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
        */
        flex:1;
   }
   .left,.right{
        height:800px; /*不设置高度，则自动撑满整个高度*/
        background:blue;
        flex:0 0 100px;/* 左右两列固定宽 */
   }

   .left{
        order:-1;/* 让left居于左侧 */
   }
</style>

<html>
<body>
    <header></header>
    <div class="main">
        <div class="content">中间栏要在放在文档流前面以优先渲染。</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>
</html>

双飞翼布局

其实就是左右两侧定宽，中间自适应的三列布局，跟圣杯差不多

水平垂直居中

1. 定宽

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -25px;
}

2. 不定宽

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

3. transform:tranlate

1. 输出顺序

console.log('1');

setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('3');
        resolve();
    }).then(function() {
        console.log('4')
    })
})

new Promise(function(resolve) {
    console.log('5');
    resolve();
}).then(function() {
    console.log('6')
})
console.log('7')
setTimeout(function() {
    console.log('8');

    new Promise(function(resolve) {
        console.log('9');
        resolve();
    }).then(function() {
        console.log('10')
    })
})

2. 写垂直居中布局

3. 说一下浏览器事件机制

4. 实现new

5. 讲解http1.1 、http2.0、https

6. ES6 新特性

7. 讲解 promise

8. useState \ useEffect 讲解

写一个useEffect，只在componentDidMount 执行

9. 如何设计一个 dialog 组件

10. react是如何进行 diff 的

如何diff一个react组件
render函数的作用
diff有什么问题
讲解fiber

10. 网页性能优化

11. webpack

tree shaking 机制
tree shaking 存在的问题
css也有tree shaking，是用什么插件做的
webpack从1.0 到 4.0，做了什么优化

12. cookie、localStorage、sessionStorage、indexDB

13. xss、csrf

14. 算法

// 从扑克牌中随机抽 5 张牌，判断是不是一个顺子，即这 5 张牌是不是连续的。

//2 ～ 10 为数字本身，A 为 1，J 为 11，Q 为 12，K 为 13，而大、小王可以看成任意数字。

/**
 *
 * @param {Array} numbers
 */
function isContinuous(numbers) {
}

/**
 * 测试代码
 */
console.log(isContinuous([3, 8, 0, 0, 1])); // false
console.log(isContinuous([8, 10, 0, 6, 0])); // true

猿辅导一面

说一下最近做的项目

css优先级。

js单线程（event loop）

let var const的区别

实现Person，new方法的实现。

const p1 = new Person('zhang');
{name: 'zhang'}
p1.hello();      zhang

节流和防抖。防抖的实现。

Promise.all([]).then()的实现，要求all按顺序返回所有的结果，一旦有一个错误就直接reject

多叉树给出根节点和层级，找到那一层的宽度

猿辅导2面

this指向问题

var a = {
f1: () => console.log(this),
f2: function() {
console.log(this)
}
}
a.f1();
a.f2();

var f3 = a.f2;
f3()

var b = new a.f1();
this分别都是什么

Set和Map
Promise相关问题，很深入。

cookies问题，包括跨站cookies
csrf问题

1. imageUrls = ['url1', 'url2', 'url3', 'url4', url5', 'url6', 'url7'];

2. function fetchImage(url): Promise {}
3. loadImages limit = 3
   function downloadImagesWithLimit(imageUrls, limit);

// 实现每次同时下载的图片不超过 limit
// 同时又要满足尽快下载完这批图片

1. jsBridge原理
2. react setState

this.setState({ a: 1 })
this.setState({ b: 1 })
this.setState({ a: 2 })

// state最终的结果是什么，render几次

3. 前端性能监控都有哪些手段

4. 性能监控收集到的数据如何处理

5. redux原理

6. 高阶组件是什么，作用是什么，业务场景

7. 说一下你对构建工具的理解

8. webpack打包的原理和流程

9. webpack除了常见的plugin，你还用过哪些比较好用的，印象深刻的plugin

10. 异步请求，失败后重试，最多limit次，全部失败输出最后一次的错误，用promise实现

11. redux 异步数据流

12. reduxthunk

13. react是如何管理状态的，有几种方式让状态共享

14. 有一个数组，给定一个数，找出数组中和为这个数的倆元素，

arr = [2, 1, 2, 1, 3, 0, 4, 1, 3,...] target = 4
 输出[
 [2,2],
 [1,3], // [3,1] 被认为是重复的 要剔除
 [0,4]
 ]

要求复杂度小于o(n^2),不允许出现重复的元素，不允许出现原数组中没有的元素

一面

1. 从输入 URL 到浏览器渲染的过程

2. loaded 和 DomContentLoaded区别

3. 说说前端性能优化

4. 说说 HTTP 缓存

cache-control有几个值

5. 说说前端安全

6. 说说闭包

7. 说说js垃圾回收机制

8. 说说js事件循环

9. 说说HTTP 状态码

10. 说说redux工作流

redux-thunk
applyMiddleWare

11. 说说React 状态提升

状态提升

12. 如何设计一个组件给团队成员用

13. 说说BFC

14. webpack loader的执行顺序

写过loader吗

15. 对babel的了解

babel-preset 和 插件的执行顺序
对babel-preset-env的了解
对runtimemanifest的了解

16. 对polyfill的了解

项目中如何配置polyfill

17. 说说对高阶组件的理解

webpack相关问题掘金总结

脉脉

你的项目经验
你在工作里主要解决的问题
webpack优化
移动端高清适配
rn原理
nodejs原理
打包发布流程（发布自动化）
埋点监控与报警
前端攻击解决方案
node端路由搭建与跨域转发
antd按需加载实现

滴滴
大量的原理，记不住了。。。

一面

1. 三列布局，左右固定，中间自适应
2. css动画都有哪些api，实现一个圆，鼠标移上去之1秒后放大一倍，再过0.5秒改变背景颜色
3. 一个数组有很多个数字，有重复的，找到重复最多的数字和它重复次数，尽量多种方法
4. 数组删除一个元素，返回删除后的数组，除了splice还有什么办法
5. 如何判断一个对象是否为空对象，多种方法
6. typeof 和instanceof区别
7. 如何清除浮动，多种方式，令浮动元素的父元素浮动的来清除浮动的原理是什么
8. react router 路由跳转的方式，除了linkto还有什么
9. 在要跳转页面的时候，实现一个提示，‘确定要离开本页面吗’，如何做
10. hash路由和history路由的区别是什么，history路由为什么需要服务端配合
11. promise，async/await和promise的区别，await的原理
12. react的setState同步异步问题，state更新机制
    13.高阶组件是什么，为什么要用，使用场景，举例说明

二面

1. display有哪些值，能说出全部更好
2. 文字垂直居中的方法，尽量全部
3. 在某些安卓手机上使用line-height 和height居中不可行，为什么，怎么解决
4. 平时怎么学前端知识，前端的书都看过哪些
5. 数组有哪些方法，尽量全部
6. object有哪些方法，尽量全部
7. object的defineProperty设置哪些属性，怎么用
8. webpack了解多少，能说多少说多少
9. import和require的区别
10. node掌握的程度
11. vue的服务端渲染
12. vue用的熟不熟练，都用过哪些api
13. vuerouter用过吗，讲一讲
14. 在去哪都接受过哪些培训，学到了什么？除了入职培训，还有什么培训？
15. 关于hysdk，都做过什么

[TOC]

1. webpack的基本功能和工作原理

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
• 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
• 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
• 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

2. Webpack构建流程

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
3. 确定入口：根据配置中的 entry 找出所有的入口文件
4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5. 确定依赖关系：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

简化版：

初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler
编译：从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理
输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中

3. Webpack 的热更新原理

Webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。
后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)由 HotModulePlugin 来完成，提供了相关 API 以供开发者针对自身场景进行处理，像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。

4. 优化 Webpack 的构建速度

• 使用高版本的 Webpack 和 Node.js

• 多进程/多实例构建：HappyPack(不维护了)、thread-loader

• 压缩代码

  • 多进程并行压缩
    • webpack-paralle-uglify-plugin
    • uglifyjs-webpack-plugin 开启 parallel 参数 (不支持ES6)
    • terser-webpack-plugin 开启 parallel 参数
  • 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。

• 图片压缩

  • 使用基于 Node 库的 imagemin (很多定制选项、可以处理多种图片格式)
  • 配置 image-webpack-loader

• 缩小打包作用域

  • exclude/include (确定 loader 规则范围)
  • resolve.extensions 尽可能减少后缀尝试的可能性
  • noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)
  • IgnorePlugin (完全排除模块)
  • 合理使用alias

• 提取页面公共资源

  • 基础包分离：
    • 使用 html-webpack-externals-plugin，将基础包通过 CDN 引入，不打入 bundle 中
    • 使用 SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) ，替代了 CommonsChunkPlugin 插件

• DLL

  • 使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。 - HashedModuleIdsPlugin 可以解决模块数字id问题

• 充分利用缓存提升二次构建速度

  • babel-loader 开启缓存
  • terser-webpack-plugin 开启缓存
  • 使用 cache-loader 或者 hard-source-webpack-plugin

• Tree shaking

  • 打包过程中检测工程中没有引用过的模块并进行标记，在资源压缩时将它们从最终的bundle中去掉(只能对ES6 Modlue生效) 开发中尽可能使用ES6 Module的模块，提高tree shaking效率
  • 禁用 babel-loader 的模块依赖解析，否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块，无法进行 tree-shaking使用
  • PurifyCSS(不在维护) 或者 uncss 去除无用 CSS 代码
    • purgecss-webpack-plugin 和 mini-css-extract-plugin配合使用(建议)

• Scope hoisting

• 动态Polyfill

5. 写 loader

参考

「吐血整理」再来一打Webpack面试题
掘金 - webpack面试题
2020年了,再不会webpack敲得代码就不香了

代码部分

三角形、梯形、扇形

用 css 画三角形、梯形、扇形、箭头和椭圆几种基本形状

两栏布局

1. 第一种方式 --- 浮动

.outer1 .left {
    width: 200px;
    float: left;
}
.outer1 .right {
    width: auto;
    margin-left: 200px;
}

<div class="outer outer1">
    <div class="left">1-left</div>
    <div class="right">1-right</div>
</div>

2. flex

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 200px; /* flex-grow: 0;flex-shrink:0; flex-basis:200px; */
}
.outer2 .right {
   flex: auto;
}

<div class="outer outer2">
    <div class="left">2-left</div>
    <div class="right">2-right</div>
</div>

3. 绝对定位

.outer3 {
   position: relative;
}
.outer3 .left {
   position: absolute;
   width: 200px;
}
.outer3 .right {
   margin-left: 200px;
}

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
</div>

三栏布局

1. 绝对定位

.outer1 {
   position: relative;
}
.outer1 .left {
   position: absolute;
   width: 100px;
}
.outer1 .middle {
   margin: 0 200px 0 100px;
}
.outer1 .right {
   position: absolute;
   width: 200px;
   top: 0;
   right: 0;
}
/*注意：左右分别使用绝对定位，中间设置外边距*/

<div class="outer outer1">
   <div class="left">1-left</div>
   <div class="middle">1-middle</div>
   <div class="right">1-right</div>
</div>

2. flex

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 100px;
}
.outer2 .middle {
   flex: auto;
}
.outer2 .right {
   flex: 0 0 200px;
}

<div class="outer outer2">
   <div class="left">2-left</div>
   <div class="middle">2-middle</div>
   <div class="right">2-right</div>
</div>

3. 浮动

.outer3 .left{
   float: left;
   width: 100px;
}
.outer3 .right {
   float: right;
   width: 200px;
}
.outer3 .middle {
   margin: 0 200px 0 100px;
}

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
   <div class="middle">3-middle</div>
</div>

圣杯布局

<style>
*{
        box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
        margin:0;
        padding:0;
    }

    body{
        display:flex;
        flex-direction:column;/* 头、中部、脚纵向显示 */
    }

    header,footer{
        flex:0 0 50px;/* 头、脚尺寸固定，不放大、不缩小 */
        background:#3f3f3f;
    }

    .main{
        display:flex;

        /* 
        flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)    分配多余空间之前项目占据的主轴空间(flex-basis)
        flex:1指的是：中部区域自由伸缩
        auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
        块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
        */
        flex:1;
    }

   .content{
        background:red;
        height:1000px;

        /* 
        横向中间内容区自适应，即使未指定宽度，但会分配宽度 
        块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
        */
        flex:1;
   }
   .left,.right{
        height:800px; /*不设置高度，则自动撑满整个高度*/
        background:blue;
        flex:0 0 100px;/* 左右两列固定宽 */
   }

   .left{
        order:-1;/* 让left居于左侧 */
   }
</style>

<html>
<body>
    <header></header>
    <div class="main">
        <div class="content">中间栏要在放在文档流前面以优先渲染。</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>
</html>

双飞翼布局

其实就是左右两侧定宽，中间自适应的三列布局，跟圣杯差不多

水平垂直居中

1. 定宽

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -25px;
}

2. 不定宽

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

3. transform:tranlate

原理部分

1. position

2. flex部分

3. BFC

猿辅导
一面

1. css选择器，优先级

2. 讲解promise，实现promiseAll
   3.节流和防抖是什么 ，区别，使用场景
   4.实现节流或防抖

3. 格式化字符串"abc sdf dd" 变成[abc,sdf,dd]
   还是格式化字符串，"abc sdf,dd" 变成[abc,sdf,dd]

4. 实现一个compare函数
   const DOGS = [
   {
   name: 'k',
   age: 3
   },
   {
   name: 'B',
   age: 10
   },
   {
   name: 'H',
   age: 10
   },
   {
   name: 'D',
   age: 10
   }
   ]
   // 将数组，按照age的从小到大排序 输出

5. 还是上边的数组，如果年龄一致的话，根据name做比较，比较规则按照下方给定的数组元素出现的顺序排序
   const NAME_ORDER = ['kh','DAB']

6. 求二叉树的最大深度

7. 二叉树的最小深度

8. 二叉树如果左子树为空，输出右子树的深度，若右子树为空，输出左子树的深度，若都不为空输出最小深度

9. 移动端调试方法

10. diff算法，react在哪些方面进行优化的
    12.还有一些小问题，忘了

二面
1.问项目，挨个问，做了什么，学到了什么，项目中涉及的东西也问
2.关于跨域，各种方式以及原理,跨域判断是浏览器做的还是后端做的
3.关于node，node进程管理，node单线程多线程
4.关于移动端真机调试，配置代理的原理是什么
5.关于发布流程，如何设置参数，都有什么过程
6.实现promise
7.axios在node中和前端中使用的区别
8.react中的connect
9.hooks中 useState的原理

三面

1. 为什么要离职
2. 堆和栈是什么？它们的区别是什么？为什么引用类型的变量需要堆和栈同时存？为什么要和基本类型的数据不一样？为什么要在栈中存指针？
3. 栈中的数据量过大会出现什么情况？为什么会出现这种情况
4. 如何实现一个聊天工具，服务端可以向客户端发消息
5. websocket是什么，和http的区别是什么
6. 讲解一下js单线程，是怎么检查一个setTimeout时间到了，然后怎么执行的，轮询机制，微任务和宏任务
7. 如果让你设计一个js引擎，你会怎么设计引擎的轮询方式？假设任务队列中有上万个setTimeout，如何高效的判断哪些要执行了，哪些还需要继续等待。（分组；排序（堆排序）更优）
8. tcp和udp，区别，tcp为什么安全
9. 为什么要三次握手，两次握手会出现什么问题？为什么三次握手就可以解决问题
10. 项目中遇到的印象最深刻的问题，产生的原因，如何解决的
11. 数组a=[1,2,2,3,3,3,4],b=[2,2,3,3,4,4] 写一个函数，输出[2,3,3,4]，尽量以较低的复杂度实现
    （其实就是找出两个数组**有的元素，然后按照两个数组中该元素重复次数少的输出）

1.文字的颜色

<style>
	.classA{
        color:blue;
	}
	.classB{
        color:red;
	}
</style>
<p class="classB classA">123</p>

2.child的border，padding，盒子大小

<style>
    .parent {
      background: red;
      width: 100px;
      height: 100px;
      padding: 0;
      margin: 0;
    }

    .child {
      background: green;
      width: 50px;
      height: 50px;
      padding: 10%;
      border: 10px solid black;
      box-sizing: border-box;
    }
</style>
<div class="parent">
   <div class="child"></div>
</div>

3. 代码的执行结果

Function.prototype.a = () => alert(1);
Object.prototype.b = () => alert(2);
function A() {}
const a = new A();
a.a();
a.b();
a.__proto__ = ?
A.prototype = ?

var x = 10;
function a(y) {
  var x = 20;
  return b(y);
}

function b(y) {
  return x + y
}

a(20);

console.log(1);

setTimeout(() => {
  console.log(2)
});

process.nextTick(() => {
  console.log(3);
});

setImmediate(() => {
  console.log(4)
});

new Promise(resolve => {
  console.log(5);
  resolve();
  console.log(6);
}).then(() => {
  console.log(7)
});

Promise.resolve().then(() => {
  console.log(8);
  process.nextTick(() => {
    console.log(9)
  });
});

6.数组随机洗牌，请实现一个算法，实现数组乱序，要求每个数字出现在每个位置的概率是平均的

function radomArr(arr){
   
    return arr.sort(compare)
}

function compare(){
         var x = Math.random()
        //console.log(x)
         var label = x > 0.5 ? 1 : -1
         return label
}


console.log(radomArr([1,2,3,4,5]))

7. 实现add，one，two三个方法

function add() {
}

function one() {
}

function two() {
}

console.log(one(add(two())))
// 3
console.log(two(add(one())))
// 3

8 数字逆转，不可以使用数组或者字符串的reverse方法
123 -> 321
-56 -> -65
780 -> 87

1. 项目中为什么要用 node，而不是go python等

2. 左右两列宽度200px，中间自适应的布局有多少种实现

3. js事件捕获

4. js事件循环和node事件循环

5. 网页性能优化

6. HTTP报文构成

7. HTTP缓存

8. HTTP 1.0 和 1.1 区别，状态码

9. 如何用js去设置元素的高度

10. target 和 currentTarget 的区别

11. webpack 中的占位符有哪些

12. webpack 原理和构建流程

13. 写一个VUE组件，如何配置webpack

14. 如何在前端进行错误捕获以及错误上报

15. 对xss和csrf的理解

16. 实现bind

17. sourcemap干什么的，有几种形式

18. 对node中常用的模块了解多少

19. 讲解Vue中的$emit，和双向绑定原理

[TOC]
印象笔记转过来的，部分图片丢失

生命周期

提到 React 就必需会的生命周期

很全面 - React生命周期管理

渲染过程

graph TD
A[jsx] -->|createElement| B(virtual-DOM)
B -->|mountComponent| C(真实DOM)
C --> D(state/props发生改变)
D --> E(重新生成V-DOM)
E --> F{diff算法}
F -->|节点类型不同| G[删旧建新]
F -->|节点类型相同| H[DOM/React]
H -->|DOM元素| I[更新属性]
H -->|React组件| J[更新状态]

• 在页面一开始打开的时候，React会调用render函数构建一棵Dom树；
  • 先将jsx文件中的代码通过createElement生成一个js对象，这个对象代表一个dom节点，也就是常说的虚拟dom；
  • 有了虚拟 dom，接下来的工作就是把这个虚拟 dom 树真正渲染成一个 dom 树。React 的做法是针对不同的 type 构造相应的渲染对象，渲染对象提供一个 mountComponent 方法（负责把对应的某个虚拟 dom 的节点生成具体的 dom node），然后循环迭代整个 vdom tree 生成一个完整的 dom node tree，最终插入容器节点；
• 在state/props发生改变的时候，render函数会被再次调用渲染出另外一棵树，接着，React会用对两棵树进行对比，找到需要更新的地方批量改动，触发diff算法。
  • 对于不同的节点类型，react会基于第一条假设(两个相同的组件产生类似的DOM结构，不同组件产生不同DOM结构)，直接删去旧的节点，新建一个新的节点。
  • 当对比相同的节点类型比较简单，这里分为两种情况，一种是DOM元素类型，对应html直接支持的元素类型：div，span和p，还有一种是React组件。
    • 对于DOM元素类型，react会对比它们的属性，只改变需要改变的属性；
    • 对于react组件类型，实例仍保持一致，以让状态能够在渲染之间保留。React通过更新底层组件实例的props来产生新元素，并在底层实例上依次调用componentWillReceiveProps() 和 componentWillUpdate() 方法。有key的时候再去判断key。

虚拟DOM生成真实DOM的过程

虚拟的DOM的核心**是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

DOM很慢，而javascript很快，用javascript对象可以很容易地表示DOM节点。DOM节点包括标签、属性和子节点，通过VElement表示如下。

// 用JavaScript表示一个DOM节点
function VElement(tagName,props,children){
    this.tagName = tagName;
    this.props = props;
    this.children = children;
}

var ul = new VElement('ul', {id: 'list'}, [
  new VElement('li', {class: 'item'}, ['Item 1']),
  new VElement('li', {class: 'item'}, ['Item 2']),
  new VElement('li', {class: 'item'}, ['Item 3'])
])

现在ul只是一个 JavaScript 对象表示的 DOM 结构，页面上并没有这个结构。我们可以根据这个ul构建真正的

：

VElement.prototype.render = function(){
    var el = document.createElement(this.tagName);
    var props = this.props;

    for(var prop in props){
        var value = props[prop];
        el.setAttribute(prop,value);
    }
    var children = this.children || [];

    children.forEach(function(child){
        var childEL = (child instanceof VElement)
        ?child.render() 
        : document.createTextNode(child);

        el.appendChild(childEL);
    })
    return el;
}

render方法会根据tagName构建一个真正的DOM节点，然后设置这个节点的属性，最后递归地把自己的子节点也构建起来。所以只需要：

var ulRoot = ul.render();
document.body.appendChild(ulRoot);

你不知道的Virtual DOM（这篇实现DOM写的好）
【React深入】深入分析虚拟DOM的渲染原理和特性

Virtual Dom 的优势在哪里？

答题思路：
传统DOM的劣势 --> react diff --> vdom出现解决什么问题 --> vdom的优势

传统前端编程方式是命令式的，直接操作DOM，代码可读性差可维护性低；

react的声明式编程，抛弃了直接操作DOM，只关注数据变动，DOM操作由框架完成，提升了可读性可维护性；

最初react在更新的过程中会刷新整个页面，后来引入的diff过程，对比数据变动前后的DOM结构，但DOM结构diff起来太复杂，由此引出了vdom；

VDOM 和 Diff 算法的出现是为了解决由命令式编程转变为声明式编程、数据驱动后所带来的性能问题的。换句话说，直接操作 DOM 的性能并不会低于虚拟 DOM 和 Diff 算法，甚至还会优于。

这么说的原因是因为 Diff 算法的比较过程，比较是为了找出不同从而有的放矢地更新页面。但是比较也是要消耗性能的。而直接操作 DOM 就是有的放矢，我们知道该更新什么不该更新什么，所以不需要有比较的过程。所以直接操作 DOM 效率可能更高。

React 厉害的地方并不是说它比 DOM 快，而是说不管你数据怎么变化，我都可以以最小的代价来进行更新 DOM。 方法就是我在内存里面用新的数据刷新一个虚拟 DOM 树，然后新旧 VDOM 进行比较，找出差异，再更新到 DOM 树上。

虚拟DOM的作用：

• Virtual DOM 在牺牲（牺牲很关键）部分性能的前提下，增加了可维护性，这也是很多框架的通性。
• 实现了对 DOM 的集中化操作，在数据改变时先对虚拟 DOM 进行修改，再反映到真实的 DOM 中，用最小的代价来更新 DOM，提升效率（要想想是跟哪个阶段相比提升了效率，别只记住了这一条）
• 打开了函数式 UI 编程的大门
• 可以渲染到 DOM 以外的端，使得框架跨平台，比如 ReactNative，React VR 等
• 可以更好地实现 SSR、同构渲染等。这条其实是跟上面一条差不多的
• 组件的高度抽象化

虚拟DOM的缺点:

• 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，会比 innerHTML 插入慢。

• 虚拟 DOM 需要在内存中维护一份 DOM 的副本（跟上面一条其实也差不多，上面一条是从速度上，这条是从空间上）。

• 如果虚拟 DOM 大量更改，这是合适的。但是单一频繁地更新的话，虚拟 DOM 将会花费更多的时间处理计算的工作。所以，如果你有一个 DOM 节点相对较少页面，用虚拟 DOM，它实际上有可能会更慢。但对于大多数单页面应用，这应该都会更快。

把这篇文章看完 - 从 React 历史的长河里聊虚拟 DOM 及其价值
Virtual Dom 的优势在哪里？

diff 算法

React 在比较新旧 2 棵虚拟 DOM 树的时候，会同时考虑两点：

• 尽量少的创建 / 删除节点，多使用移动节点的方式
• 比较次数要尽量少，算法要足够的快

React 选用了启发式的算法，将时间复杂度控制在 O(n) 的级别。这个算法基于以下 2 个假设：

• 如果 2 个节点的类型不一样，就认为以这 2 个节点为根结点的树会完全不同
• 对于多次 render 中结构保持不变的节点，开发者会用一个 key 属性标识出来，以便重用

另外，React 只会对同一层的节点作比较，不会跨层级比较，如图所示：


Diff 使用的是深度优先算法，当遇到下图这样的情况：


最高效的算法应该是直接将 A 子树移动到 D 节点，但这样就涉及到跨层级比较，时间复杂度会陡然上升。React 的做法比较简单，它会先删除整个 A 子树，然后再重新创建一遍。结合到实际的使用场景，改变一个组件的从属关系的情况也是很少的。


同样道理，当 D 节点改为 G 节点时，整棵 D 子树也会被删掉，E、F 节点会重新创建。

对于列表的 Diff，节点的 key 有助于节点的重用


如上图所示，当没有 key 的时候，如果中间插入一个新节点，Diff 过程中从第三个节点开始的节点都是删除旧节点，创建新节点。当有 key 的时候，除了第三个节点是新创建外，第四和第五个节点都是通过移动实现的。

深挖key diff


nextIndex	lastIndex	_mountIndex
遍历 nextChildren 时候的 index，每遍历一个元素加 1	上一次从 prevChildren 中取出来元素时，这个元素在 prevChildren 中的 index	元素在数组中的位置

下面我们来走一遍流程：

• nextChildren 的第一个元素是 B ，在 prevChildren 中的位置是 1（_mountIndex），nextIndex 和 lastIndex 都是 0。节点移动的前提是_mountIndex < lastIndex，因此 B 不需要移动。lastIndex 更新为 _mountIndex 和 lastIndex 中较大的：1 。nextIndex 自增：1；
• nextChildren 的第二个元素是 A ，在 prevChildren 中的位置是 0（_mountIndex），nextIndex 和 lastIndex 都是 1。这时_mountIndex < lastIndex，因此将 A 移动到 lastPlacedNode (B)的后面 。lastIndex 更新为 _mountIndex 和 lastIndex 中较大的：1 。nextIndex 自增：2；
• nextChildren 的第三个元素是 D ，中 prevChildren 中的位置是 3（_mountIndex），nextIndex 是 2 ，lastIndex 是 1。这时不满足_mountIndex < lastIndex，因此 D 不需要移动。lastIndex 更新为 _mountIndex 和 lastIndex 中较大的：3 。nextIndex 自增：3；
• nextChildren 的第四个元素是 C ，中 prevChildren 中的位置是 2（_mountIndex），nextIndex 是 3 ，lastIndex 是 3。这时_mountIndex < lastIndex，因此将 C 移动到 lastPlacedNode (D)的后面。循环结束。

参考 - Diff 算法详解（主要看带key diff）
react diff 策略（这篇更全）

diff 策略(版本2)

• Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。
• 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
• 对于同一层级的一组子节点，它们可以通过唯一 key 进行区分。

tree diff

基于策略一，React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。
即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。

component diff

React 是基于组件构建应用的，对于组件间的比较所采取的策略也是简洁高效。

• 如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。
• 如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。
• 对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。

element diff（不带key）

• element相同，原地复用
• element 不同，删旧建新

element diff（带key）


带key diff的过程看这里

深度优先遍历

二叉树与JavaScript

react 事件机制

【React深入】React事件机制

调用 setState 之后发生了什么？

• 当对象作为参数执行setState时，React内部会以一种对象合并的方式来批量更新组件的状态，类似于Object.assign()，把需要更新的state合并后放入状态队列，利用这个队列可以更加高效的批量更新state；
• 当参数为函数时，React会将所有更新组成队列，并且按顺序来执行，这样避免了将state合并成一个对象的问题，之后会启动一个reconciliation调和过程，即创建一个新的 React Element tree（UI层面的对象表示）并且和之前的tree作比较，基于你传递给setState的对象找出发生的变化，最后更新DOM中需改动的部分。

setState 同步异步问题

• setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
• setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
• setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

详细解读见 - 你真的理解setState吗？

例题

React setState 笔试题，下面的代码输出什么？

render 函数的返回值类型有哪些

16.x render函数新增的返回类型
render 函数

在 render 函数中可以写 if ... else 吗

React的8种条件渲染方法

React 中如何减少 render 次数

React优化：竭尽全力的减少render渲染
性能！！让你的 React 组件跑得再快一点

constructor 中的 super(props)的作用?传与不传有什么区别？

调用super的原因：

• ES6 中，在子类的 constructor 中必须先调用 super 才能引用 this；
• super(props)的目的：在constructor中可以使用this.props；
• 根本原因是constructor会覆盖父类的constructor，导致你父类构造函数没执行，所以手动执行下。

如果要从另一个角度看的话：

假设在es5要实现继承,首先定义一个父类:

//父类
function sup(name) {
    this.name = name;
}
//定义父类原型上的方法
sup.prototype.printName = function (){
    console.log(this.name);
}

再定义他sup的子类，继承sup的属性和方法:

function sub(name, age){
    sup.call(this,name);    //调用call方法,继承sup超类属性
    this.age = age;
}    

sub.prototype = new sup();   //把子类sub的原型对象指向父类的实例化对象，这样即可以继承父类sup原型对象上的属性和方法
sub.prototype.constructor = sub;    //这时会有个问题子类的constructor属性会指向sup，手动把constructor属性指向子类sub
//这时就可以在父类的基础上添加属性和方法了
sub.prototype.printAge = function (){
    console.log(this.age);
}

这时调用父类生成一个实例化对象:

    let jack = new sub('feihao', 18);
    jack.printName() ;   //输出 : feihao
    jack.printAge();    //输出 : 18

这就是es5中实现继承的方法。
而在es6中实现继承:

  class sup {
        constructor(name) {
            this.name = name
        }
    
        printName() {
            console.log(this.name)
        }
    }

class sub extends sup{
    constructor(name,age) {
        super(name) // super代表的事父类的构造函数
        this.age = age
    }

    printAge() {
        console.log(this.age)
    }
}

let jack = new sub('feihao', 18)
    jack.printName()    //输出 : feihao
    jack.printAge()    //输出 : 18

为什么我们要写 super(props) ？

Dialog 组件设计

React造轮系列：对话框组件 - Dialog 思路

[TOC]

http1.0、http1.1、http2.0、https分析对比

http1.0

• 超文本传输协议，不仅可以传输文字，还可传输视频、图片、二进制文件
• 增加POST和HEAD命令
• 增加状态码、缓存等

http1.0存在问题

每个tcp连接只能发送一个请求，下一个请求发送需要重新建立tcp连接，性能很差

http1.1

针对http1.0的问题，http1.1做了很大的优化

长连接

http1.1默认connection：keep-alive，一个tcp连接可以持续传输请求。

管道机制

因为http1.1支持长连接，发送一个请求之后还可以发送第二个请求，如果第二个请求要等待第一个请求返回之后才发送，效率就很低，所以引入了管道机制，多个请求可以按顺序同时发送，响应按顺序返回

Content-Length

因为一个tcp可以同时发送多个请求，我们需要一个字段来区分多个请求，Content-length表示当前请求响应共有多少字段，超过这个值的响应就不是该请求的响应

分块传输

因为http1.1是按顺序发送请求和响应，如果一个顺序靠前的请求响应时间较长，会阻碍后面请求的响应，造成很大的延迟，这就是线头阻塞。故http1.1支持分块传输：Transfer-Encoding: chunked，每个响应头前都有一个16进制数字表示该块儿大小，如果为0表示本次分块数据传输完成

其他功能

新增PUT、PATCH、HEAD、 OPTIONS、DELETE请求方法

客户端请求头新增Host字段，有了Host字段，就可以将请求发往同一台服务器上的不同网站，为虚拟主机的兴起打下了基础。

http1.1存在问题

主要还是线头阻塞问题，为了避免这个问题，只有两种方法：一是减少请求数，二是同时多开持久连接。这导致了很多的网页优化技巧，比如合并脚本和样式表、将图片嵌入CSS代码、域名分片（domain sharding）等等。如果HTTP协议设计得更好一些，这些额外的工作是可以避免的。

http1.1和http1.0对比

• 缓存处理：http1.0中只有if-Modified-Since、Expires，http1.1中增加了E-tag、if-None-match、等
• 优化带宽和网络请求：如果我们的请求的只是一个资源的一部分，http1.0会全部返回整个资源，造成带宽的浪费，http1.1中增加了range字段，允许请求资源的某部分
• 错误通知机制：新增了24个错误状态码
• Host名增加：http1.0认为域名和主机是一一对应的，http1.1增加Host字段，支持多个域名对应一个机器，为虚拟主机的发展奠定了基础
• 长连接：支持长连接和管道机制，一定程度上弥补了http1.0每次请求都要重建tcp连接的缺陷

http2.0/SPDY

http2.0是基于SPDY的，两者没有太大的区别，主要是header压缩方式以及http2.0支持明文传输。

对比http1.1，主要区别有以下几个

多路复用

http2.0一个tcp连接支持多个stream流同时传输

请求优先级

多路复用可能会带来一个新的问题，多个请求并发可能导致关键请求被阻塞，故http2.0支持request设置优先级

header压缩

header中的一些信息是重复的，采用合适的压缩算法减少请求大小

服务端推送

正常文档流请求style.css后服务端会主动推送script.js到客户端，服务端请求的时候直接从缓存读取

https

https是运行在tcp协议上基于SSL/TLS的安全通信机制，其实整个加密过程比较简单，通过一张图就能很清晰，但是一些细节还是值得探究的。先上图：

1. Client发送请求到Server
2. Server生成一对公钥秘钥
3. Server返回安全证书和公钥
4. Client验证证书是否有效，若无效，直接弹出警告页面，有效的话随机生成一个秘钥
5. 用证书的公钥加密生成的秘钥，并发送给Server
6. Server用秘钥解开公钥，拿到秘钥
7. 用秘钥加密发送的内容
8. Client用秘钥解密内容，拿到请求数据

SSL/TLS

TLS是在SSL基础上发展过来的，实质上是一个东西。那么TLS主要做的几件事：

1. 加密
2. 证书验证

加密机制实际上是在tcp链接三次握手基础上实现的：

前面是正常的tcp连接过程：

1. Client发送SYN和seq码给Server
2. Server收到seq并将其+1赋值给ACK确认码，同时生成自己的SYN码，一同发送给Client
3. Client收到seq，将其+1并赋值给ACK确认码

如果是正常的http连接，直接将ACK确认码发送给Server，Server收到就可以建立连接了。但是Https在这里才真正的开始。
4. Client1： Client将ACK确认码+TLS版本号+所支持加密套件列表+希望使用的TLS选项发送给Server
5. Server1： Server收到后从加密套件列表中选择合适的加密套件，将选择的加密套件+自己的公钥+自己的安全证书+希望使用的TLS选项（+要求Client证书）发送给Client
6. Client2： CLient经过一系列验证和加密后，将（Client自己的证书+）经过公钥加密后的秘钥发送给Server
7. Server2： Server使用私钥进行解密后得到秘钥，发送加密的Finish消息，表明完成握手

证书机制/证书验证

Client拿到Server证书后需要验证证书的有效性，流程一般是：

站点证书颁发者-->中间证书颁发者-->根证书颁发者

验证策略

CRL

CRL（Certificate Revocation List）即证书撤销名单。证书颁发者会提供一份已经失效证书的名单，供浏览器验证证书使用。当然这份名单是巨长无比的，浏览器不可能每次TLS都去下载，所以常用的做法是浏览器会缓存这份名单，定期做后台更新。这样虽然后台更新存在时间间隔，证书失效不实时，但一般也OK

OCSP

OCSP(Online Certificate StatusProtocol)即在线证书状态协议。除了离线文件，证书颁发者也会提供实时的查询接口，查询某个特定证书目前是否有效。实时查询的问题在于浏览器需要等待这个查询结束才能继续TLS握手，延迟会更大

参考资料：
http总结

全面解读HTTP&HTTPS

上海头条：

1. 项目经验，最有亮点的项目，解决的最大的问题，有何收获。
2. 在浏览器输入url后发生的事情，越详细越好 深挖问题 -> dns相关问题 -> 网络七层模型 -> http1.x 2.0 https -> ssl加密流程 -> tcp三次握手四次挥手 -> 重绘与重排 -> 缓存相关问题 -> 状态码相关问题 -> http请求的类型，option的作用 -> get和head的区别（RESTful构架，幂等与非幂等请求）-> tcp和udp的区别。
3. 使用过的数组方法，map的实现
4. instanceOf的实现
5. 原型链的顶层是什么，typeof null 是什么，为什么会是object（冷知识：这是js的bug，原因是二进制码前三位为0的都会被判断为object，而null则全是0，而实际上null绝非object）。
6. 继承。
7. 快排。
8. 二叉树遍历。
9. 一些css的基础问题，如position的可选值，relative和absolute的区别等等，以及他们基于什么元素定位。
10. 想问vue被我拒绝。
11. js中sort是用了什么算法。
12. redux实现原则，以及你对数据流的理解。
13. 前端优化方法（webpack相关）
14. 有什么想问我的。

一面

1. 介绍项目

前端数据处理有没有用到 node

2. 说一下研究生期间的课题和项目

3. 为什么离职

4. 说一下 React 和 Vue 的异同，优缺点，适用场景

• 设计**

  • react主张函数式编程，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以手动实现，比如借助 onChange 和 setState 来实现一个双向的数据流。
  • vue是基于可变数据的，支持双向绑定，它提供了v-model这样的指令来实现文本框的数据流双向绑定。

• 编写语法

  • react是没有模板的，直接就是一个渲染函数，它中间返回的就是一个虚拟DOM树，React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'。JSX实际就是一套使用XML语法，用于让我们更简单地去描述树状结构的语法糖。在react中，所有的组件的渲染功能都依靠JSX。你可以在render()中编写类似XML的语法，它最终会被编译成原生JavaScript。
  • Vue采用单文件组件格式，html、css、js分离，数据绑定使用mustache风格，样式直接使用css。其中<style>标签还提供了一个可选的scoped属性，它会为组件内 CSS 指定作用域，用它来控制仅对当前组件有效还是全局生效。

• 数据绑定

  • Vue采用数据劫持&发布-订阅模式的方式，vue在创建vm的时候，会将数据配置在实例当中，然后通过Object.defineProperty对数据进行操作，为数据动态添加了getter与setter方法，当获取数据的时候会触发对应的getter方法，当设置数据的时候会触发对应的setter方法，从而进一步触发vm的watcher方法，然后数据更改，vm则会进一步触发视图更新操作。
  • react是单向数据流，react中属性是不允许更改的，状态是允许更改的。react中组件不允许通过this.state这种方式直接更改组件的状态。自身设置的状态，可以通过setState来进行更改。setState是异步的，导致获取dom可能拿的还是之前的内容，所以我们需要在setState第二个参数（回调函数）中获取更新后的新的内容。

• diff算法

  • react 每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制。
  • vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

• 性能优化

  • vue中的每个组件内部自动实现了shouldComponentUpdate的优化，在vue里面由于依赖追踪系统的存在，当任意数据变动的时，Vue的每一个组件都精确地知道自己是否需要重绘，所以并不需要手动优化。用vue渲染这些组件的时候，数据变了，对应的组件基本上去除了手动优化的必要性。而在react中我们需要手动去优化其性能，但是当数据特别多的时候vue中的watcher也会特别多，从而造成页面卡顿，所以一般数据比较多的大型项目会倾向于使用react。
  • 当props或state发生改变的时候会触发 shouldComponentUpdate生命周期函数，它是用来控制组件是否被重新渲染的.

• 适用场景

  • Vue 适用应用程序小而快，渲染速度更快，尺寸更小
  • React 大型应用必备(较大的应用程序更看重透明性和可测试性)

前端框架用vue还是react？清晰对比两者差异
React还是Vue：选哪个？

5. Vue 3.0 跟之前版本有什么不同，解决了什么问题

6. 结合「时钟」概念讲解一下浏览器的事件循环机制

7. 说一下从输入 URL 到浏览器解析渲染页面的过程，包括后端都做了什么

8. 如果一次需要渲染数万条数据应该怎么做

9. 实现Promise、Promise.all

10. 两种方法实现斐波那契数列

11. 还有什么想问的

二面

1. 项目中 node 的作用

2. node 如何解决跨域

前端跨域如何解决，cors如何设置

3. 想继续问 express，不太了解

4. sso流程

5. options请求

6. get post 区别

7. HTTP状态码

8. webpack 常用配置

按需加载怎么做
常用插件和loader

9. react 生命周期

10. react 创建组件的方式及区别

11. 状态管理方案，讲讲redux

redux工作流
mapStateToProps
异步数据流

12. fiber 讲解

解决的问题，影响的生命周期

13. hooks解决什么问题

14. []=={} 讲解隐式类型转换

valueOf 和 toString 的区别

15. 写一个对象深拷贝

三面

1. 离职原因

2. 薪资期望

3. 跟领导同事的关系

4. 想来滴滴吗

5. 写个快排

我的代码可读性好吗

最大公约数(Greatest Common Divisor)

几个正整数之间一般存在多个共有的约数，即这几个正整数除以这个约数后都没有余数，这些约数中最大的一个称为最大公约数。

最小公倍数

几个正整数会存在许多个共有的倍数，每个倍数除以这几个正整数后都没有余数，而这些倍数之中最小的一个则称为最小公倍数。

实现求最大公约数的函数

最大质因数法

暴力求解，思路很简单，即将两个数分别递减，获取能同时被二者除尽的最大的一个数，即最大公约数：

function getGcd(a, b) {
    for (let i = a; i > 0; i--) {
        for (let j = b; j > 0; j--) {
            if (a % i === 0 && b % j === 0 && i === j) {
                return j;
            }
        }
    }
}

辗转相除法

思路是用两个数中的最大项除以最小项，如果能除尽，那么最小项便是这两个数的最大公约数；不能除尽则用最大项除以最小项所得余数，与最小项再进行同样的递归操作，最后得到最大的约数，也就是所谓的辗转相除.

扩展:
辗转相除法， 又名欧几里得算法（Euclidean algorithm），目的是求出两个正整数的最大公约数。
这条算法基于一个定理：两个正整数a和b（a>b），它们的最大公约数等于a除以b的余数c和b之间的最大公约数。比如10和25，25除以10商2余5,那么10和25的最大公约数，等同于10和5的最大公约数。

function getGcd(a, b) {
    let max = Math.max(a, b);
    let min = Math.min(a, b);
    if (max % min === 0) {
        return min;
    } else {
        return getGcd(max % min, min);
    }
}

最小公倍数

最大公约数和最小公倍数求解，常用的方法是短除法进行因式分解，然后最大公约数是所有公共因子的乘积，最小公倍数是所有因子的乘积。
本质上求最小公倍数就是求最大公倍数：x=m*a， y=m*b；m是最大公约数，那最小公倍数就是m*a*b。所以可以得到最大公约数与最小公倍数的关系：
LCM(A,B)×GCD(A,B)=A×B

有了求最大公约数的函数后，再来求最小公倍数就简单了：

function getLcm(a, b) {
    return a * b / getGcd(a, b);
}

1. 衡量网络请求的指标 。 ftp
2. 性能优化的指标
3. mobX和redux的区别 ，除了使用上的区别，内部原理上有什么区别？单向数据流还是双向数据流
4. webpack，用过什么什么吗。什么什么我没听清，反正是没用过。。。
5. bind和call的区别，js原生实现call
   6.react的cloneElement和creatElement的含义和区别
   7.节流函数实现
   8.react componentDidMount里执行的操作，用hooks应该怎么写，写在哪里
   const [count, setCount] = useState(0);
   useEffect(() => {
   setInterval(()=>{
   setCount(count++)
   },1000)
   });
   // 这段代码里，页面上count显示什么？

9.react的state是异步的吗，是一直表现异步还是有同步的表现
10.项目中遇到过什么比较难解决的问题，怎么解决的
11.如果让你去设计一个搜集网络请求崩溃的功能，你会考虑从哪些方面收集
12.对RN是怎么理解的
13.jsBridge的原理，RN的jsBridge实现和web的jsBridge实现有什么区别吗

1. 数据处理常用什么ES6方法

2. var let const 区别

3. 画图表除了使用echarts还引入了什么库

4. react setState后都干了什么，执行了什么生命周期

新版本的生命周期如何跟老版本对应

5. pureComponent和component的区别

6. hooks相关

hooks优点
useEffect如何进行深比较

7. new实现思路

constructor指向

8. 移动端布局方式

flex实现垂直水平居中

9. meta viewport 属性解读

10. 写过的react业务组件，复杂度和遇到的难点是怎么解决的

11. 写代码

// 1.在一个二维数组中，每一行都按照从左到右递增，每一列都从上到下递增的顺序排序，
// 完成一个函数，输入这个二维数组和一个整数，判断数组中是否含有该整数
function isInArray(arr, num){
	let middle = Math.floor(arr.length / 2);
    
    if(arr[middle].includes(num)){
    	return true;
    }else{
    	if(num > arr[middle][arr[middle].length - 1]()){
        	isInArray(arr.slice(middle), num);
        }else{
        	isInArray(arr.slice(0, middle), num);
        }
    }	
}


function isInArray2(arr, num){
	for(let i = 0; i < arr.length; i++){
    	if(arr[i][arr[i].length - 1] < num){
        	continue;
        }else{
        	return arr[i].includes(num);
        }
    }
    
    return false;
}



// 2. 实现一个深拷贝函数，可以对象的深拷贝
function deepClone(source){
	if(!source || typeof source !== 'object'){
    	throw new Error('error arguments');
    }
    
    let target = Array.isArray(source) ? [] : {};
    
    for(let prop in source){
    	if(source.hasOwnProperty(prop)){
        	if(typeof source[prop] === 'object'){
            	target[prop] = deepClone(source[prop]);
            }else{
            	target[prop] = source[prop];
            }
        }
    }
    
    return target;
}

// 3.实现promise.all
Promise.all = function(promises){
	let results = [];
    let length = promises.length;
    let counter = 0;
    
    function processAll(index, value, resolve){
    	counter++;
        results[index] = value;
        
        if(counter === length){
        	resolve(results);
        }
    }
    
    return new Promise((resolve, reject) => {
    	for(let i = 0; i < length; i++){
        	promises[i].then(processAll(i, value, resolve), reject);
        }
    })
}

// 4.求两个数组的交集和并集
function jiaoji(arr1, arr2){
    let result = [];
    
	for(let i = 0; i < arr1.length; i++){
    	if(arr2.includes(arr1[i])){
        	results.push(arr1[i]);
        }
    }
}

function bingji(arr1, arr2){
	return Array.from(new Set(arr1.concat(arr2)));
}

// 5.给定一个数组，获取数组中重复的数及重复次数，将数和重复次数按照键值对的方式返回；例如：[2, 10, 35, 2, 2, 35]，返回：{2:3,10:1,35:2}

function repeatKey(arr){
	let obj = {};
    
    arr.forEach(item => {
    	obj[item] ? obj[item]++ : obj[item] = 1;
    });
    
    return obj;
}

[TOC]
from boya

一、JS

1. 类的创建和继承

1.1 类的创建：

（1）工厂模式：在函数中定义该对象，并定义该对象的属性，为避免重复创建方法，可以将方法定义到函数外；

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    }
    return o;
}

（2）构造函数：无需函数内部重新创建对象，而是用this代替，也无需return，同样也要将方法定义到函数外；

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    }
}

var person1 = new Person('feihao', '27', 'FE');

要创建Person的新实例，必须使用 new 操作符，4个步骤：

• 创建一个新对象
• 链接到原型
• 绑定this（执行构造函数中的代码，为新对象添加属性）
• 返回新对象

// new 实现
function create(){
    // 创建一个新对象
    let obj = new Object();// 也可不使用new关键字
    // 获得构造函数
    let Con = [].shift.call(arguments);
    // 链接到原型
    obj.__proto__ = Con.prototype;
    // 绑定this，执行构造函数
    let result = Con.apply(obj,arguments);
    // 确保new出来的是个对象
    return typeof result === 'object' ? result : obj;
}

要检测对象类型，instanceof操作符更可靠一点，可以看一下instanceof是怎么实现的：

// instanceof 实现
function instanceof(left, right) {
    // 获得类型的原型
    let prototype = right.prototype
    // 获得对象的原型
    left = left.__proto__
    // 判断对象的类型是否等于类型的原型
    while (true) {
    	if (left === null)
    		return false
    	if (prototype === left)
    		return true
    	left = left.__proto__
    }
}

（3）原型模式：函数中不对对象进行定义，而是用prototype定义属性；

function Person() {}

Person.prototype.name = 'feihao';
Person.prototype.age = '27';
Person.prototype.job = 'FE';
Person.prototype.sayName = function(){
    alert(this.name);
}

var person1 = new Person();
person1.sayName(); // feihao

var person2 = new Person();
person2.sayName(); // feihao

person1.sayName === person2.sayName; // true

（4）构造函数+原型模式的组合模式：函数中定义对象的方法之外的属性，原型定义对象的方法；

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ['tom', 'jerry']
}

Person.prototype = {
    constructor: Person,
    sayName: function() {
        alert(this.name);
    }
}

1.2 类的继承：

（1）原型链继承：

function SuperClass(){
    this.name = "women";
    this.bra = ["a","b"];
}
function SubClass(){
    this.subname = "your sister";
}
SubClass.prototype = new SuperClass();

var sub1 = new SubClass();
sub1.name = "man";
sub1.bra.push("c");
console.log(sub1.name);//man
console.log(sub1.bra);//["a","b","c"]

var sub2 = new SubClass();
console.log(sub1.name);//woman
console.log(sub2.bra);//["a","b","c"]

使用原型链实现继承时有一些需要我们注意的地方：

• 注意继承后constructor的变化。此处sub的constructor指向的是SuperClass，因为SubClass的原型指向了SuperClass的原型(而SuperClass.prototype.constructor===SuperClass)。在了解原型链时，不要忽略掉在末端还有默认的Object对象，这也是我们能在所有对象中使用toString等对象内置方法的原因
• 通过原型链实现继承时，不能使用字面量定义原型方法，因为这样会重写原型对象
• 实例共享的问题。包含引用类型属性的原型会被所有的实例共享，同样，继承而来的原型中也会共享“父类”原型中引用类型的属性，当我们通过原型继承修改了“父类”的引用类型属性后，其他所有继承自该原型的实例都会受到影响，这不仅浪费了资源，也是我们不愿看到的现象

（2）构造函数继承（经典继承）：

function SuperClass() {
    this.name = "women";
    this.bra = ["a", "b"];
}
function SubClass() {
    this.subname = "your sister";
    //将SuperClass的作用域赋予当前构造函数，实现继承
    SuperClass.call(this);
}

var sub1 = new SubClass();
sub1.bra.push("c");
console.log(sub1.bra);//["a","b","c"]

var sub2 = new SubClass();
console.log(sub2.bra);//["a","b"]

（3）实例继承：

function Child(arg){
    return new Parent(arg);
};

（4）拷贝继承：

function child(arg){
    var son = new parent();
    for(var p in parent){
        child.prototype[p] = parent[p]
    }
};
new child();

（5）组和继承：

function SuperClass() {
    this.name = "women";
    this.bra = ["a", "b"];
}
SuperClass.prototype.sayWhat = function(){
    console.log("hello");
}
function SubClass() {
    this.subname = "your sister";
    SuperClass.call(this);             //第二次调用SuperClass
}
SubClass.prototype = new SuperClass(); //第一次调用SuperClass
var sub1 = new SubClass();
console.log(sub1.sayWhat());//hello

2. 原型链

JavaScript深入之从原型到原型链

加入Function：

3. 深浅拷贝

3.1 赋值与浅拷贝

赋值和浅拷贝的区别，看下面这个例子:

var obj1 = {
    'name' : 'zhangsan',
    'age' :  '18',
    'language' : [1,[2,3],[4,5]],
};

var obj2 = obj1;

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

obj2.name = "lisi";
obj3.age = "20";

obj2.language[1] = ["二","三"];
obj3.language[2] = ["四","五"];

console.log(obj1);  
//obj1 = {
//    'name' : 'lisi',
//    'age' :  '18',
//    'language' : [1,["二","三"],["四","五"]],
//};

console.log(obj2);
//obj2 = {
//    'name' : 'lisi',
//    'age' :  '18',
//    'language' : [1,["二","三"],["四","五"]],
//};

console.log(obj3);
//obj3 = {
//    'name' : 'zhangsan',
//    'age' :  '20',
//    'language' : [1,["二","三"],["四","五"]],
//};

结论：
改变 obj2 的 name 属性和 obj3 的 age 属性，可以看到，改变赋值得到的对象 obj2 同时也会改变原始值 obj1，而改变浅拷贝得到的的 obj3 则不会改变原始对象 obj1。这就可以说明赋值得到的对象 obj2 只是将指针改变，其引用的仍然是同一个对象，而浅拷贝得到的的 obj3 则是重新创建了新对象。

此外，还可以通过 Object.assign() 、 Array.prototype.slice() 和 Array.prototype.concat() 返回一个数组或者对象的浅拷贝。

3.2 深拷贝

function deepClone(source){
   if(!source || typeof source !== 'object'){
     throw new Error('error arguments', 'shallowClone');
   }
   var targetObj = source.constructor === Array ? [] : {};
   for(var keys in source){
      if(source.hasOwnProperty(keys)){
         if(source[keys] && typeof source[keys] === 'object'){
           targetObj[keys] = deepClone(source[keys]);
         }else{
           targetObj[keys] = source[keys];
         }
      } 
   }
   return targetObj;
}

// test example
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: 'value'
  },
  func: function(){
    return 1;
  }
};

deepClone(o1);

4. Ajax 用法

var XHR;
if(window.XMLHttpRequest){
    XHR = new XMLHttpRequest();
}else{
    XHR = new ActiveXobject("Microsoft.XMLHTTP");
};

XHR.open(GET/POST, url, true(异步)/false(同步));
XHR.send(string);
XHR.onreadystatechange = function(){
    if(XHR.readyState === 4 && XHR.status === 200){
    // readyState
    // 0: 请求未初始化;
    // 1: 服务器连接已建立;
    // 2: 请求已接收;
    // 3: 请求处理中;
    // 4: 请求已完成，且响应已就绪;
    // status 200: "OK";404: 未找到页面
        ele.innerHTML = XHR.responseText;//responseXML时需要解析一下
    };
};

ajax的优缺点：

5. Javascript是一种弱类型语言，有什么优缺点？

优点：

• 性能：由于JavaScript运行在客户端，节省了web服务器的请求时间和带宽
• 轻量级的脚本语言，继承起来很灵活方便，也可以修改父类，简单易学
• JavaScript可以方便地操纵各种页面中的对象，用户可以使用JavaScript来控制页面中各个元素的外观、状态甚至运行方式，JavaScript可以根据用户的需要“定制”浏览器，从而使网页更加友好。
• JavaScript可以使多种任务仅在用户端就可以完成而不需要网络和服务器的参与，从而支持分布式的运算和处理。

缺点：

• 安全问题：由于JavaScript在客户端运行，可能被用于黑客目的。
• 渲染问题：在不同浏览器中的处理结果可能不同。

6. 前端模块化发展

6.1 函数封装：在文件中定义函数，用到时直接加载所在文件调用相应的函数。

function fn1（）{
    function fn2（）{
        statement;
    };
};

优缺点：污染了全局变量，无法保证不与其他函数模块之间发生冲突，而且各个变量之间没有直接的关系。

6.2 对象封装：在文件中定义相应的方法，挂载在对象上面，输出相应的对象。

var myModule = {
    val1:1,
    val2:2,
    fn1:function(){
        statement;
    },
    fn2:function(){
        statement;
    },
};

优缺点：解决了变量污染的问题，但是可以直接在变量外部修改相应的对象值，带来严重的安全隐患。

6.3 立即执行函数

var myModule = (function(){
    var val1 = 1;
    var val2 = 2;

    function fn1(){
        statement;
    };
    function fn2(){
        statement;
    };
    return {
        fn1:fn1,
        fn2:fn2,
    };
})();

优缺点：解决了对象值暴露的问题，是现代模块化规范的基础。

6.4 CommonJS

模块化规范是由服务器端的JavaScript应用带来的，CommonJS规范是由NodeJS发扬光大。

1、定义模块：根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
2、输出模块：模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
3、加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象
4、同步读取模块，适合nodejs，由于网络的原因并不适合浏览器端(异步加载)

// 模块定义 myModel.js
var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

// 加载模块
var nameModule = require('./myModel.js');

nameModule.printName();

CommonJS的解决方案在服务端的实现很容易，但是仔细看上面的代码，会发现require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。
产生的问题：脚本标签天生异步，传统CommonJS模块在浏览器环境中无法正常加载。

一种解决思路是，用一套标准模板来封装模块定义，但是对于模块应该怎么定义和怎么加载，又产生两种分歧：

6.5 AMD

AMD(Asynchronous Module Definition)，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。

其原理是异步加载模块，模块的加载不影响其后面语句的运行。所有依赖这个模块的语句都会添加进一个回调函数中，等到模块加载完成，回调函数就会执行。

由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。

requireJS主要解决两个问题

1. 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
2. js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

一个使用requireJS的例子：

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

requireJS定义了一个函数 define，它是全局变量，用来定义模块.
define(id?, dependencies?, factory);

1. id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
2. dependencies：是一个当前模块依赖的模块名称数组
3. factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值 在页面上使用require函数加载模块

require([dependencies], function(name){});

1. [dependencies]：是一个数组，表示所依赖的模块
2. function：是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块

require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

6.6 CMD

CMD(Common Module Definition)通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同

Sea.js 推崇一个模块一个文件，遵循统一的写法。
define(id?, deps?, factory)

CMD推崇:

1. 一个文件一个模块，所以经常就用文件名作为模块id
2. CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写

factory是一个函数，有三个参数，function(require, exports, module)

1. require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口：require(id)
2. exports 是一个对象，用来向外提供模块接口
3. module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){
    // ...
});

6.7 AMD与CMD区别

最明显的区别就是在模块定义时对依赖的处理不同:

1. AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
2. CMD推崇就近依赖，只有在用到某个模块的时候再去require

这种区别各有优劣，只是语法上的差距，而且requireJS和SeaJS都支持对方的写法

AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机(都是异步加载)或者方式不同。

AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。

同样都是异步加载模块，AMD在加载模块完成后就会执行该模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行。

CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。

这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因

6.8 ES6模块(服务器&浏览器端通用)

• 静态加载，编译时确定依赖关系
• 模块输出为值的引用，CommonJS是值的拷贝
• 自动运行于严格模式下
• export关键字导出，import关键字导入
• 同步、异步加载均可