# 流行框架
## 1、JQuery的源码看过吗？能不能简单概况一下它的实现原理？
考察学习知识的态度，是否仅仅是停留在使用层面，要知其然知其所以然
## 2、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
this执行init构造函数自身，其实就是jQuery实例对象，返回this是为了实现jQuery的链式操作
## 3、	jquery中如何将数组转化为json字符串，然后再转化回来？
$.parseJSON('{"name":"John"}');
## 4、	jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
递归赋值
## 5、	jquery.extend 与 jquery.fn.extend的区别？
Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例
## 6、谈一下Jquery中的bind(),live(),delegate(),on()的区别？
## 7、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
可以同时绑定多个事件，低层实现原理是使用addEventListner与attachEvent兼容处理做事件注册
## 8、	Jquery与jQuery UI有啥区别？
jQuery是操作dom的框架，jQueryUI是基于jQuery做的一个UI组件库
## 9、	jQuery和Zepto的区别？各自的使用场景？
jQuery主要用于pc端，当然有对应的jQuerymobile用于移动端，zepto比jQuery更加小巧，主要用于移动端
## 10、	针对 jQuery 的优化方法？
优先使用ID选择器
在class前使用tag(标签名)
给选择器一个上下文
慎用 .live()方法（应该说尽量不要使用）
使用data()方法存储临时变量
## 11、	Zepto的点透问题如何解决？
点透主要是由于两个div重合，例如：一个div调用show()，一个div调用hide()；这个时候当点击上面的div的时候就会影响到下面的那个div；
解决办法主要有2种：
1.github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，
2.根据分析，如果不引入其它类库，也不想自己按照上述fastclcik的思路再开发一套东西，需要1.一个优先于下面的“divClickUnder”捕获的事件；2.并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对click事件的捕获，在ios的safari，click的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为）。
## 12、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么?
知识面的宽度，流行框架要多多熟悉
## 13、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
Underscore的熟悉程度
## 14、使用过angular吗？angular中的过滤器是干什么用的
在表达式中转换数据<p>姓名为 {{ lastName | uppercase }}</p>
currency，是什么过滤器——格式化数字为货币格式，单位是$符。


【前端面试题】流行框架

1、JQuery的源码看过吗？能不能简单概况一下它的实现原理？

2、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

3、   jquery中如何将数组转化为json字符串，然后再转化回来？

4、   jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

5、   jquery.extend 与 jquery.fn.extend的区别？

6、谈一下Jquery中的bind(),live(),delegate(),on()的区别？

7、JQuery一个对象可以同时绑定多个事件，这是如何实现的？

9、   jQuery和Zepto的区别？各自的使用场景？

11、  Zepto的点透问题如何解决？

12、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么?

13、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？

14、使用过angular吗？angular中的过滤器是干什么用的

# Promise的模拟实现
```js
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn){
  const that = this
  that.state = PENDING
  that.value = null
  that.resolvedCallbacks = []
  that.rejectedCallbacks = []
  
  function resolve(value) {
    if(that.state === PENDING) {
      that.state = RESOLVED
      that.value = value
      that.resolvedCallbacks.map(cb => cb(that.value))
    }
  }
  
  function reject(value) {
    if(that.state === PENDING){
      that.state = REJECTED
      that.value = value;
      that.rejectedCallbacks.map(cb => cb(that.value));
    }
  }
  try {
    fn(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  const that = this
  //对传入的两个参数做判断，如果不是函数将其转为函数
  onFulfilled = 
    typeof onFulfilled === 'function'
    ? onFulfilled 
    : v => v  // onFulfilled = v => v
  onRejected = 
    typeof onRejected === 'function'
    ? onRejected
    : r => {
      throw r
    }
  
  if(that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled)
    that.rejectedCallbacks.push(onRejected)
  }
  else if(that.state === RESOLVED) {
    onFulfilled(that.value)
  }
  else {
    onRejected(that.value)
  }
}

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功的回调数据')
  }, 1000)
}).then(value => {
  console.log('Promise.then:  ', value)
})
```

【编程题与分析题】Promise实现原理

### 实现一个类型判断函数

1. 判断null
2. 判断基础类型
3. 使用`Object.prototype.toString.call(target)`来判断**引用类型**

> [!NOTE]
> 注意： 一定是使用`call`来调用，不然是判断的Object.prototype的类型

之所以要先判断是否为基本类型是因为：虽然`Object.prototype.toString.call()`能判断出某值是：number/string/boolean，但是其实在包装的时候是把他们先转成了对象然后再判断类型的。 但是JS中包装类型和原始类型还是有差别的，因为对一个包装类型来说，typeof的值是object

```javascript
/**
 * 类型判断
 */
function getType(target) {
  //先处理最特殊的Null
  if(target === null) {
    return 'null';
  }
  //判断是不是基础类型
  const typeOfT = typeof target
  if(typeOfT !== 'object') {
    return typeOfT;
  }
  //肯定是引用类型了
  const template = {
    "[object Object]": "object",
    "[object Array]" : "array",
    "[object Function]": "function",
    // 一些包装类型
    "[object String]": "object - string",
    "[object Number]": "object - number",
    "[object Boolean]": "object - boolean"
  };
  const typeStr = Object.prototype.toString.call(target);
  return template[typeStr];
}
```

# 升级版本
```js
// typeof可以检测基本数据类型
// Undefined, Null, Boolean, Number, String, Objec
// undefined, object, boolean, number, string, object

// 以下是11种：
var number = 1;          // [object Number]
var string = '123';      // [object String]
var boolean = true;      // [object Boolean]
var und = undefined;     // [object Undefined]
var nul = null;          // [object Null]
var obj = {a: 1}         // [object Object]
var array = [1, 2, 3];   // [object Array]
var date = new Date();   // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g;          // [object RegExp]
var func = function a(){}; // [object Function]

function checkType() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(Object.prototype.toString.call(arguments[i]))
    }
}

checkType(number, string, boolean, und, nul, obj, array, date, error, reg, func)

console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(JSON)); // [object JSON]

function a() {
    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

a();

// TODO:Object.toString()的理解？
/*1. 如果 this 值是 undefined，就返回 [object Undefined]
  2. 如果 this 的值是 null，就返回 [object Null]
  3. 让 O 成为 ToObject(this) 的结果
  4. 让 class 成为 O 的内部属性 [[Class]] 的值
  5. 最后返回由 "[object " 和 class 和 "]" 三个部分组成的字符串*/

// TODO:封装一个通用的type API？
// v1: 基础版本
var class2type = {};

'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ')
    .map(function (item) {
        // 开始建立映射关系
        class2type[`[object ${item}]`] = item.toLowerCase();
    })

function type(obj) {
    return typeof obj === 'object' || typeof obj === 'function'
        ? class2type[Object.prototype.toString.call(obj)] || 'object'
        : typeof obj;
}

// v2:在 IE6 中，null 和 undefined 会被 Object.prototype.toString 识别成 [object Object]！
// TODO: 解决IE6下的null和undefined 会被识别为[object Object]?
var class2type = {};
'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ').map(function (item) {
    class2type[`[object ${item}]`] = item.toLowerCase();
})

/**
 * 查看type的基础类型
 * @param obj
 * @return {string|*}
 */
function type(obj) {
    // 开始解决ie下的兼容问题
    if (obj == null) {
        return obj + '';
    }
    return typeof obj === 'object' || obj === 'function'
            //  ES6 新增的 Symbol、Map、Set 等类型，它们并不在 class2type 列表中，所以使用 type 函数，返回的结果会是 object
            ? class2type[Object.prototype.toString.call(obj)] || 'object'
            : typeof obj;
}

/**
 * 查看obj是否为函数累类型
 * @param obj
 * @return {boolean}
 */
function isFunction(obj) {
    return type(obj) === 'function';
}


/**
 * 注意这里的isArray是一个函数，并不是一个函数执行的结果
 * @type {((arg: any) => arg is Array<any>) | (function(*=): boolean)}
 */
var isArray = Array.isArray || function (obj) {
    return type(obj) === 'array';
}


// TODO: plainObject, 就是该对象是通过 "{}" 或 "new Object" 创建的，该对象含有零个或者多个键值对?
// 存放toString的映射结果
var class2type = {};
// Object.prototype.toString
var toString = class2type.toString();
// Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

function isPlainObject(obj) {
    // 排除掉宿主对象 eg: toString.call(window) === '[objct window]'
    if (!obj || toString.call(obj) !== '[object Object]') {
        return false;
    }

    /**
     * Object.getPrototypeOf() 方法返回指定对象的原型（即, 内部[[Prototype]]属性的值）,如果没有继承属性，则返回 null 。
     * eg: obj.__proto__ === Object.protptype
     * @type {any}
     */
    var proto = Object.getPrototypeOf(obj);
    // 如果没有原型对象的话，eg:Object.create(null), 就是纯对象
    if (!proto) {
        return true;
    }

    // 通过new Object方式创建的对象
    // 判断 proto 是否有 constructor 属性，如果有就让 Ctor 的值为 proto.constructor
    var Constructor = hasOwn.call(proto, 'constructor') && proto.constructor;

    // 判断Constructor是不是Object的构造函数
    return typeof Constructor === 'function' && hasOwn.toString.call(Constructor) === hasOwn.toString.call(Object);
}


// TODO: EmptyObject如何判断？
function isEmptyObject(obj) {
    var name;
    // 看一下当前的这个obj对象有没有属性，如果有的话就返回false
    for (name in obj) {
        // 遍历的不仅仅是obj自身的属性，而且也遍历了obj原型上的属性
        return false;
    }
    return true;
}
// test
console.log(isEmptyObject({})); // true
console.log(isEmptyObject([])); // true
console.log(isEmptyObject(null)); // true
console.log(isEmptyObject(undefined)); // true
console.log(isEmptyObject(1)); // true
console.log(isEmptyObject('')); // true
console.log(isEmptyObject(true)); // true


// TODO: 判断是否为window对象？
// window对象的window属性指向其本身
function isWindow(obj) {
    return obj != null && obj == obj.window;
}

// TODO: 判断是否为document对象？
function isDocument(obj) {
    return obj != null && obj.nodeType == obj.DOCUMENT_NODE;
}

// TODO: 判断是不是DOM元素
function isDOMElement(obj) {
    // 这里需要强制把返回的结果转换为bool类型，eg:obj = undefined,!!undefined=r\true
    return !!(obj && obj.nodeType === 1);
}


// TODO: isArrayLike如何实现？(可以判断数组和伪数组类型)
function isArrayLike(obj) {
    // 1. 先看obj有没有length属性
    var length = !!obj && ('length' in obj) && obj.length;
    var typeRes = type(obj);

    // 2. 排除掉函数和window对象, window也是有length属性的
    if (typeRes === 'function' || isWindow(obj)) {
        return false;
    }

    // 3. 开始处理结果
    return typeRes === 'array'                  // 1. 是数组类型
            || length === 0                     // 2. 长度为0(函数中的arguments参数)
            || typeof length === 'number'
            && length > 0
            && (length - 1) in obj;             // 3. length 属性是大于 0 的数字类型，并且obj[length - 1]必须存在(符合条件的类数组对象是一定存在最后一个元素的)

}

// underscore 如何实现的？
function isArrayLike(collection) {
    var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
    var length = getLength(collection);
    return typeof length === 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
}
```

【编程题与分析题】类型检测

### 防抖 debounce
> [!NOTE]
> 函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。 

**典型应用**:
 - 百度搜索框在输入稍有停顿时才更新推荐热词。
 - 拖拽

```js
function debounce(handler, delay){

  delay = delay || 300;
  var timer = null;

  return function(){

    var _self = this,
        _args = arguments;

    clearTimeout(timer);
    timer = setTimeout(function(){
      handler.applay(_self, _args);
    }, delay);
  }
}
```



### 节流 throttle
> [!NOTE]
> 一个函数只有在大于执行周期时才执行，周期内调用不执行。好像水滴积攒到一定程度才会触发一次下落一样。

**典型应用**：
 - 抢券时疯狂点击，既要限制次数，又要保证先点先发出请求
 - 窗口调整
 - 页面滚动
```js
function throttle(handler, wait){

  wait = wait || 300;
  var lastTime = 0;

  return function(){
    var _self = this,
    _args = arguments;

    var nowTime = new Date().getTime();
    if((nowTime - lastTime) > wait){
      handler.apply(_self, _args);
      lastTime = nowTime;
    }
  }
}
```



### 节流与防抖的本质

以闭包的形式存在，通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用**定时器**或**时间差**来控制事件的触发频率。
![fdjl](../img/fdjl.png)

【编程题与分析题】防抖节流实现

# RESTful
## 1. 谈一下你对RESTful的理解？
> [!NOTE]
> REST (Representational State Transfer)，中文意思是：表述性状态转移。 一组架构约束条件和原则，如果一个架构符合 REST 的约束条件和原则，我们就称它为 RESTful 架构。

### 1.1 RESTful基本概念
 - 在 REST 中，一切的内容都被认为是一种资源
 - 每个资源都由 URI 唯一标识
 - 使用统一的接口处理资源请求（POST/GET/PUT/DELETE/HEAD）
 - 无状态（每次请求之前是无关联，没有 session ）

### 1.2 理解RESTful
下面我们结合REST原则，围绕资源展开讨论，从资源的定义、获取、表述、关联、状态变迁等角度，列举一些关键概念并加以解释。

 - 资源与URI
 - 统一资源接口
 - 资源的表述
 - 资源的链接
 - 状态的转移


#### 1.2.1  资源和URI
 - 使用 `/` 来表示资源的层级关系
 - 使用 `?` 用来过滤资源
 - 使用 `_` 或者 `-` 让URI的可读性更好
 - `,` 或 `;` 可以用来表示同级资源的关系



#### 1.2.2  统一资源接口

| 请求方法 | 描述                                                             |
| -------- | ---------------------------------------------------------------- |
| GET      | 获取某个资源。 幂等（取多少次结果都没有变化）                    |
| POST     | 创建一个新的资源                                                 |
| PUT      | 替换某个已有的资源（更新操作） ， 幂等（更新多次只保存一个结果） |
| DELETE   | 删除某个资源                                                     |
| HEAD     | 主要用于确认 URL 的有效性以及资源更新的日期时间等                |
| PATCH    | 新引入的，对PUT方法的补充，用来对已知资源进行局部更新            |



#### 1.2.3 资源表述
> [!NOTE]
> 客户端获取的只是资源的表述而已。资源在外界的具体呈现，可以有多种表述(或成为表现、表示)形式，在客户端和服务端之间传送的也是资源的表述，而不是资源本身。文本资源可以采用 html、xml、json 等格式，图片可以使用 PNG 或 JPG 展现出来。

资源的表述包括数据和描述数据的元数据，例如，HTTP 头 “Content-Type” 就是这样一个元数据属性。

那么客户端如何知道服务端提供哪种表述形式呢？

答案是可以通过 HTTP 内容协商，客户端可以通过 Accept 头请求一种特定格式的表述，服务端则通过 Content-Type 告诉客户端资源的表述形式。

MIME 类型

accept: text/xml html文件

Content-Type告诉客户端资源的表述形式



#### 1.2.4 资源的链接
> [!NOTE]
> 超媒体即应用状态引擎（可以做多层链接）

https://api.github.com/repos/github
```
{
  "message": "Not Found",
  "documentation_url": "https://developer.github.com/v3"
}
```



#### 1.2.5 状态转移

服务器端不应该保存客户端状态。

应用状态 -> 服务器端不保存应用状态

访问订单 根据接口去查询

访问商品 查询


【计算机网络】RESTful

# Webpack性能优化
## 1. 谈一下如何使用Webpack进行性能优化？
> [!NOTE]
 - 有哪些方式可以减少 Webpack 的打包时间
 - 有哪些方式可以让 Webpack 打出来的包更小

### 1.1 减小打包后文件体积
#### 1.1.1 按需加载
如果我们将页面全部打包进一个 JS 文件的话，虽然将多个请求合并了，但是同样也加载了很多并不需要的代码，耗费了更长的时间。那么为了首页能更快地呈现给用户，我们肯定是希望首页能加载的文件体积越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包为一个文件。

#### 1.1.2 Tree Shaking
Tree Shaking 可以实现删除项目中未被引用的代码，比如
```js
// test.js
export const a = 1
export const b = 2
// index.js
import { a } from './test.js'
```

1. 对于以上情况，test 文件中的变量 b 如果没有在项目中使用到的话，就不会被打包到文件中。

2. 如果你使用 Webpack 4 的话，开启生产环境就会自动启动这个优化功能。

#### 1.1.3 Scope Hoisting
> Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。


比如我们希望打包两个文件

```js
// test.js
export const a = 1
// index.js
import { a } from './test.js'
```

对于这种情况，我们打包出来的代码会类似这样
```js
[
  /* 0 */
  function (module, exports, require) {
    //...
  },
  /* 1 */
  function (module, exports, require) {
    //...
  }
]
```
但是如果我们使用 Scope Hoisting 的话，代码就会尽可能的合并到一个函数中去，也就变成了这样的类似代码
```js
[
  /* 0 */
  function (module, exports, require) {
    //...
  }
]
```
样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能，只需要启用 optimization.concatenateModules 就可以了。
```js
module.exports = {
  optimization: {
    concatenateModules: true
  }
}
```

## 1.2 加快打包速度
### 1.2.1 优化 Loader
> [!NOTE]
> 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST（抽象语法树），然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。

首先我们可以**减小 Loader 的文件搜索范围**
```js
module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}
```
还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。
```js
  loader: 'babel-loader?cacheDirectory=true'
```

### 1.2.2 HappyPack
> [!NOTE]
> 受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的，特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。

**HappyPack 可以将 Loader 的同步执行转换为并行的**，这样就能充分利用系统资源来加快打包效率了
```js
module: {
  loaders: [
    {
      test: /\.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // id 后面的内容对应下面
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]
```

### 1.2.3 DllPlugin
> DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。

```js
  // 单独配置在一个文件中
  // webpack.dll.conf.js
  const path = require('path')
  const webpack = require('webpack')
  module.exports = {
    entry: {
      // 想统一打包的类库
      vendor: ['react']
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].dll.js',
      library: '[name]-[hash]'
    },
    plugins: [
      new webpack.DllPlugin({
        // name 必须和 output.library 一致
        name: '[name]-[hash]',
        // 该属性需要与 DllReferencePlugin 中一致
        context: __dirname,
        path: path.join(__dirname, 'dist', '[name]-manifest.json')
      })
    ]
  }
```
然后我们需要执行这个配置文件生成依赖文件，接下来我们需要使用 **DllReferencePlugin** 将依赖文件引入项目中
```js
// webpack.conf.js
module.exports = {
  // ...省略其他配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest 就是之前打包出来的 json 文件
      manifest: require('./dist/vendor-manifest.json'),
    })
  ]
}
```

#### 1.2.4 代码压缩
在 Webpack3 中，我们一般使用 UglifyJS 来压缩代码，但是这个是单线程运行的，为了加快效率，我们可以使用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS，从而提高效率。

> [!NOTE]
> Webpack4新特性：在 Webpack4 中，我们就不需要以上这些操作了，只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化方案，当然我们不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除 console.log 这类代码的功能。


#### 1.2.5 一些小的优化点

 - `resolve.extensions` 用来表明文件后缀列表，默认查找顺序是 ['.js', '.json']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在前面
 - `resolve.alias`  可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
 - `module.noParse`  如果你确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助

#### 1.2.6 Webpack长缓存优化
> [!NOTE]
> 浏览器在用户访问页面的时候，为了加快加载速度，对用户请求的静态资源都会进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去加载新的代码。最方便的方法就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。

##### Webpack3配置
```js
// foo.js
import react from 'react'
console.lg('hello world')

//webpack.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry: {
        main: './src/foo',
        // 如果要把vendor和业务代码区分开
        // 独立的给vendor建一个entry就可以了
        vendor: ['react']
    },
     
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkHash].js'
    },
    plugins: [
        // 单个模块打包优化
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        })
      // 引入新模块，模块顺序变化，vendor hash变化的打包优化
        new webpack.NamedChunksPlugin(),
        new webpack.NamedModulesPlugin(),
    ]   
}
```

这时会有三个文件，vendor、main、manifest，这时再修改代码，再加一个！此时manifest和main发生变化，但是vendor没有发生变化，manifest发生变化是因为代码发生改变，要重新编译，这就达到了改变业务代码，但不改变vendor。

如果不用这种方法，就算vendor的代码不修改，打包出来的文件名的hash值也会发生改变。
##### Webpack4配置
```js
optimization: {
    splitChunks: {      // 打包 node_modules里的代码
        chunks: 'all'
     },
     runtimeChunk: true,  // 打包 runtime 代码
}
```

性能优化前后对比：vendor的hash值并没有发生改变。
![webpack性能优化](../../img/webpack-性能优化.png)



**参考文章**
- https://www.cnblogs.com/weihuan/p/9643095.html

【性能优化】Webpack性能优化

1. 谈一下如何使用Webpack进行性能优化？

# 函数

## 1. JS编译解析的流程

### 1.1 JS运行分三步
语法分析（通篇扫描是否有语法错误），预编译（发生在函数执行的前一刻），解释执行（一行行执行）。


### 1.2 预编译执行分五步
1. 创建AO对象（Activation Object  执行期上下文）

2. 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined. 变量声明提升（变量放到后面也不会报错，只是未定义类型）如：console.log(a);var a=10;结果undenfined;

3. 将实参值和形参统一（传参）

4. 在函数体里面找到函数声明{函数声明整体提升（相当于放到程序最前面）}

5. 值赋予函数体，执行（声明函数和变量的部分直接不看了）


## 2. 函数作用域和作用域链
### 2.1 函数作用域

> 每个javascript函数都是一个对象，对象中有的属性可以访问，有的不能，这些属性仅供javascript引擎存取，如[[scope]]。

[[scope]]就是函数的作用域，其中存储了执行期上下文的集合。

**执行期上下文**： 当函数执行时，会创建一个称为执行期上下文的内部对象（AO）。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行期上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行期上下文，当函数执行完毕，它所产生的执行上下文被销毁。


### 2.2 作用域链
`[[scope]]`中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们称这种链式链接为作用域链。查找变量时，要从作用域链的顶部开始查找。Activation Object（AO）到Global Object（GO）。

![function](../../img/function.png)
![a定义](../../img/define.png)
![a run](../../img/run.png)
![b define](../../img/bdefine.png)
![b run](../../img/brun.png)



### 2.3 闭包
> [!NOTE]
> 当内部函数被保存到外部时，将会生成闭包。生成闭包后，内部函数依旧可以访问其所在的外部函数的变量。

> 闭包问题的解决方法：立即执行函数、let

#### 2.3.1 详细解释

1. 当函数执行时，会创建一个称为**执行期上下文的内部对象（AO）**，执行期上下文定义了一个函数执行时的环境。

2. 函数还会获得它所在作用域的**作用域链**，是存储函数能够访问的所有执行期上下文对象的集合，即这个函数中能够访问到的东西都是沿着作用域链向上查找直到全局作用域。

3. 函数每次执行时对应的执行期上下文都是独一无二的，当函数执行完毕，函数都会失去对这个作用域链的引用，JS的垃圾回收机制是采用引用计数策略，如果一块内存不再被引用了那么这块内存就会被释放。

4. 但是，当闭包存在时，即内部函数保留了对外部变量的引用时，这个作用域链就不会被销毁，此时内部函数依旧可以访问其所在的外部函数的变量，这就是闭包。


#### 2.3.2 闭包的应用
> 先看两个例子，两个例子都打印5个5

```js
for (var i = 0; i < 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 100)
}
```

```js
function test() {
   var a = [];
   for (var i = 0; i < 5; i++) {
         a[i] = function () {
            console.log(i);
         }
   }
   return a;
}

var myArr = test();
for(var j=0;j<5;j++)
{
   myArr[j]();
}
```


> 解决方法： 使用立即执行函数

```js
for (var i = 0; i < 5; i++) {
   ;(function(i) {
      setTimeout(function timer() {
         console.log(i)
      }, i * 100)
   })(i)
}
```
```js
function test(){
   var arr=[];
   for(i=0;i<10;i++)
   {
      (function(j){
         arr[j]=function(){
         console.log(j);
         }
      })(i)
   }
   return arr;
}

var myArr=test();
for(j=0;j<10;j++)
{
   myArr[j]();
}
```


#### 2.3.3 闭包-封装私有变量
```js
function Counter() {
   let count = 0;
   this.plus = function () {
      return ++count;
   }
   this.minus = function () {
      return --count;
   }
   this.getCount = function () {
      return count;
   }
}

const counter = new Counter();
counter.puls();
counter.puls();
console.log(counter.getCount())
```


## 3. 作用域与变量声明提升?
1. 在 JavaScript 中，函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部 
2. 声明语句中的赋值部分并不会被提升，只有名称被提升
3. 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
4. 如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数


## 4. 构造函数，new时发生了什么？
 
```javascript
   var obj  = {}; 
   obj.__proto__ = Base.prototype;
   Base.call(obj);  
```

1. 创建一个新的对象 obj;
2. 将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
3. Base函数对象的this指针替换成obj, 相当于执行了Base.call(obj);
4. 如果构造函数显示的返回一个对象，那么则这个实例为这个返回的对象。 否则返回这个新创建的对象



## 5. 函数参数是对象会发生什么问题？

```javascript
function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'hy',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> {name: "hy", age: 20}
console.log(p2) // -> {name: "yyy", age: 30}
```

`person = {}` 这一步操作就将应用与原来的分离了
![地址改变](../../img/addressChange.png)



## 6. JavaScript 中，调用函数有哪几种方式？
1. 方法调用模式 Foo.foo(arg1, arg2);
2. 函数调用模式 foo(arg1, arg2);
3. 构造器调用模式 (new Foo())(arg1, arg2);
4. call/applay 调用模式 Foo.foo.call(that, arg1, arg2);
5. bind 调用模式 Foo.foo.bind(that)(arg1, arg2)();

【JS相关】函数

4. 构造函数，new时发生了什么？

5. 函数参数是对象会发生什么问题？

6. JavaScript 中，调用函数有哪几种方式？

# 封装实现通用的forEach函数
```js
// v1. 实现一个自己的forEach 函数
function isArrayLike(obj) {
    // 1. 先看obj有没有length属性
    var length = !!obj && ('length' in obj) && obj.length;
    var typeRes = type(obj);

    // 2. 排除掉函数和window对象, window也是有length属性的
    if (typeRes === 'function' || isWindow(obj)) {
        return false;
    }

    // 3. 开始处理结果
    return typeRes === 'array'                  // 1. 是数组类型
        || length === 0                     // 2. 长度为0(函数中的arguments参数)
        || typeof length === 'number'
        && length > 0
        && (length - 1) in obj;             // 3. length 属性是大于 0 的数字类型，并且obj[length - 1]必须存在(符合条件的类数组对象是一定存在最后一个元素的)

}


// v1. 实现一个遍历的函数
function each(obj, callback) {
    let len, i = 0;

    // 伪数组和数组类型
    if (isArrayLike(obj)) {
        len = obj.length;
        for (; i < len; i++) {
            callback(i, obj[i]);
        }
    }
    // 对象类型
    else {
        for (i in obj) {
            callback(i, obj[i]);
        }
    }

    return obj;
}


// v2. 实现终止循环的功能
function each(obj, callback) {
    let len, i = 0;
    if (isArrayLike(obj)) {
        len = obj.length;
        for (; i < len; i++) {
            // 退出循环的条件
            if (callback(i, obj[i]) === false) {
                break;
            }
        }
    }
    else {
        for (i in obj) {
            // 退出循环的条件
            if (callback(i, obj[i]) === false) {
                break;
            }
        }
    }
}

// v3. 实现this的绑定, 使用call来绑定一个this对象
function each(obj, callback) {
    let len, i = 0;
    if (isArrayLike(obj)) {
        len = obj.length;
        for (; i < len; i++) {
            // 退出循环的条件
            if (callback.call(obj[i], i, obj[i]) === false) {
                break;
            }
        }
    }
    else {
        for (i in obj) {
            // 退出循环的条件
            if (callback.call(obj[i], i, obj[i]) === false) {
                break;
            }
        }
    }
}

```
> [!NOTE]
> TODO : for的性能要比封装的each函数性能好，原因是使用了call实际上是会降低性能的

【编程题与分析题】通用的forEach函数

# HTTP协议

## 1. 介绍一下OSI七层参考模型和TCP/IP五层模型

### 1.1 OSI七层模型
![OSI七层参考模型](../img/OSI-七层模型.png)

### 1.2 TCP/IP五层模型
![TCP/IP五层模型](../img/TCP-IP-五层模型.png)

### 1.3 各层的设备
![各层设备](../img/TCP模型-各层设备.png)

### 1.4 各层对应协议
![各层协议](../img/TCP模型-各层协议.png)

参考文章： https://www.cnblogs.com/qishui/p/5428938.html

## 2. HTTP协议和特点
### 2.1 基本概念
> [!NOTE]
> HTTP是Hyper Text Transfer Protocol（超文本传输协议）的缩写。它是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。

### 2.2 数据包结构
![数据包](../img/http-data.jpg)

**数据包细节**

![详细信息](../img/http-data-detail.jpg)

### 2.3 协议的特点

1. **无连接(重点理解)**
  - 限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
2. 无状态
  - 协议对于事务处理没有记忆能力。
3. 简单快速
  - 客户向服务器请求服务时，只需传送请求方法和路径。
4. 灵活
  - HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

### 参考链接：https://blog.csdn.net/sinat_21455985/article/details/53508115

### 2.4 请求报文
 - 请求行
   - 请求类型
   - 要访问的资源
   - HTTP协议版本号
 - 请求头
   - 用来说明服务器要使用的附加信息（一些键值对）
   - 例如：User-Agent、 Accept、Content-Type、Connection
 - 空行
   - 分割请求头与请求体
 - 请求体
   - 可以添加任意的其他数据


### 2.5 响应报文
 - 状态行
   - 状态码
   - 状态消息
   - HTTP协议版本号
 - 消息报头
   - 说明客户端要使用的一些附加信息
   - 如：Content-Type、charset、响应的时间
 - 响应正文
   - 返回给客户端的文本信息


### 2.6 HTTP 方法
 - GET
   - 获取资源
 - POST
   - 传输资源
 - PUT
   - 更新资源
 - DELETE
   - 删除资源
 - HEAD
   - 获取报文首部


### 2.6.1 Post 和 Get 的区别

 - GET在浏览器回退时是无害的，而POST会再次提交
 - `重点`Get请求能缓存，Post不能
 - Post相对Get相对安全一些，因为Get请求都包含在URL中，而且会被浏览器保存记录，Post不会。但是再抓包的情况下都是一样的。
 - Post 可以通过 request body来传输比 Get 更多的数据
 - URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的
 - Post 支持更多的编码类型且不对数据类型限制
 - `重点`POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok(返回数据)
 - 补充：100状态码表示（继续）请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。



**副作用和幂等的概念**
> [!NOTE]
1. 副作用：指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。
2. 幂等：指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。


> [!NOTE]
> 在规范的应用场景上说，Get 多用于无副作用，幂等的场景，例如搜索关键字。Post 多用于副作用，不幂等的场景，例如注册。


### 2.7 常见状态码

#### 2.7.1 1XX 指示信息（面试考点）
表示请求已接收，继续处理

#### 2.7.2 2XX 成功
 - **200** OK
 - 204 No content，表示请求成功，但响应报文不含实体的主体部分
 - 205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容
 - **206** Partial Content，进行范围请求

#### 2.7.3 3XX 重定向
 - **301** 永久性重定向，表示资源已被分配了新的 URL
 - **302** 临时性重定向，表示资源临时被分配了新的 URL
 - 303 表示资源存在着另一个 URL，应使用 GET 方法获取资源
 - **304** 未修改，重定位到浏览器。自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应（称为 If-Modified-Since HTTP 标头）。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更，进而节省带宽和开销。
 - 307 临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求

#### 2.7.4 4XX 客户端错误
 - **404** 在服务器上没有找到请求的资源
 - **403** forbidden，表示对请求资源的访问被服务器拒绝
 - 400 请求报文存在语法错误
 - 401  表示发送的请求需要有通过 HTTP 认证的认证信息

#### 2.7.5 5XX 服务器错误
 - **500** 表示服务器端在执行请求时发生了错误
 - 501 表示服务器不支持当前请求所需要的某个功能
 - **503** 表明服务器暂时处于超负载或正在停机维护，无法处理请求


### 2.8 HTTP持久连接（HTTP1.1支持）
> [!NOTE]
> HTTP协议采用“请求-应答”模式，并且HTTP是基于TCP进行连接的。普通模式（非keep-alive）时，每个请求或应答都需要建立一个连接，完成之后立即断开。

当使用`Conection: keep-alive`模式（又称持久连接、连接重用）时，keep-alive使客户端道服务器端连接持续有效，即不关闭底层的TCP连接，当出现对服务器的后继请求时，keep-alive功能避免重新建立连接。



### 2.9 HTTP管线化 （HTTP1.1支持）
![pipe](../img/pipe.png)

管线化后，请求和响应不再是依次交替的了。他可以支持一次性发送多个请求，并一次性接收多个响应。

 - 只有get与head请求可以进行管线化，POST有限制
 - 初次创建连接时不应该启动管线机制，因为服务器不一定支持该协议


### 2.10 HTTP数据协商
在客户端向服务端发送请求的时候，客户端会申明可以接受的数据格式和数据相关的一些限制是什么样的；服务端在接受到这个请求时他会根据这个信息进行判断到底返回怎样的数据。

#### 2.10.1 请求
 - cookie
 - Host  
 - Connection
 - Accept
   - 在请求中使用Accept可申明想要的数据格式(image/webp,image/apng,image/)
 - Accept-Encoding
   - 告诉服务端使用什么的方式来进行压缩
   - 例如：gzip、deflate、br
 - Accept-Language
   - 描述语言信息(zh-CN)
 - User-Agent(Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.15 Safari/537.36)
   - 用来描述客户端浏览器相关信息
   - 可以用来区分PC端页面和移动端页面

#### 2.10.2 响应
 - Content-Type
   - 对应Accept，从请求中的Accept支持的数据格式中选一种来返回
 - Content-Encoding
   - 对应 Accept-Encoding，指服务端到底使用的是那种压缩方式
 - Content-Language
   - 对应Accept-Language


#### 2.10.3 form 表单中enctype数据类型
 - `application/x-www-form-urlencoded`
   - key=value&key=value 格式
 - `multipart/form-data`
   - 用于提交文件
   - multipart表示请求是由多个部分组成（因为上传文件的时候文件不能以字符串形式提交，需要单独分出来）
   - boundary 用来分隔不同部分
 - `text/plain`

 ```js
 // 原生ajax 方式对get的url，使用POST请求方式进行发送
 document.querySelector("#btnAjax").onclick = function () {
      var ajax = new XMLHttpRequest();

      // 使用post请求
      ajax.open('post','ajax_post.php');

      // 如果 使用post发送数据 必须 设置 如下内容
      // 修改了 发送给 服务器的 请求报文的 内容
      // 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
      ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      // 发送
      // post请求 发送的数据 写在 send方法中
      // 格式 name=jack&age=18 字符串的格式
      ajax.send('name=jack&age=998');

      // 注册事件
      ajax.onreadystatechange = function () {
          if (ajax.readyState==4&&ajax.status==200) {
              console.log(ajax.responseText);
          }
      }
  }
 ```


### 2.11 HTTP Redirect 重定向
 - 302 暂时重定向
   - 浏览器每次访问都要先去目标网址访问，再重定向到新的网址
 - 301 永久重定向
   - 当浏览器收到的HTTP状态码为301时，下次访问对应网址就直接调整到新的网址，不会再访问原网址


### 2.12 HTTP CSP 内容安全策略
[HTTP CSP 内容安全策略](https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP)

CSP Content-Security-Policy
 - 限制资源获取
 - 报告资源获取越权

例子：
 - `Content-Security-Policy: default-src http: https:` 表示只允许通过http、https的方式加载资源
 - `'Content -Security-Policy': 'default-src' \'self\'; form-action\'self\' '` 表示只能加载本域下的资源，只能向本域发送表单请求



#### 2.12.1 TLS 握手过程如下图

![TLS](../img/tls.png)

1. 客户端发送一个随机值，需要的协议和加密方式
2. 服务端收到客户端的随机值，自己也产生一个随机值，并根据客户端需求的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）
3. 客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端证书的公钥去加密这个随机值并发送给服务端，如果服务端需要验证客户端证书的话会附带证书
4. 服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，可以通过这三个随机值按照之前约定的加密方式生成密钥，接下来的通信就可以通过该密钥来加密解密.

通过以上步骤可知，在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信。



## 3. HTTP2(面试重点)
> [!NOTE]
> HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。

在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是**因为浏览器限制了同一个域名下的请求数量**，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。



### 3.1 二进制传输
HTTP 2.0 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。



### 3.2 多路复用
在 HTTP 2.0 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。

帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。

**多路复用，就是在一个 TCP 连接中可以存在多条流。**换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

![http2](../img/http2Connet.png)



### 3.3 Header 压缩

在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。

在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。



### 3.4 服务端 Push
在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。

可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch。



## 4. HTTP首部

|     通用字段      |                       作用                       |
| :---------------: | :----------------------------------------------: |
|   Cache-Control   |                  控制缓存的行为                  |
|    Connection     | 浏览器想要优先使用的连接类型，比如  `keep-alive` |
|       Date        |                   创建报文时间                   |
|      Pragma       |                     报文指令                     |
|        Via        |                代理服务器相关信息                |
| Transfer-Encoding |                   传输编码方式                   |
|      Upgrade      |                要求客户端升级协议                |
|      Warning      |               在内容中可能存在错误               |

|      请求字段       |                作用                |
| :-----------------: | :--------------------------------: |
|       Accept        |        能正确接收的媒体类型        |
|   Accept-Charset    |         能正确接收的字符集         |
|   Accept-Encoding   |      能正确接收的编码格式列表      |
|   Accept-Language   |        能正确接收的语言列表        |
|       Expect        |        期待服务端的指定行为        |
|        From         |           请求方邮箱地址           |
|        Host         |            服务器的域名            |
|      If-Match       |          两端资源标记比较          |
|  If-Modified-Since  | 本地资源未修改返回 304（比较时间） |
|    If-None-Match    | 本地资源未修改返回 304（比较标记） |
|     User-Agent      |             客户端信息           |
|    Max-Forwards     |    限制可被代理及网关转发的次数    |
| Proxy-Authorization |      向代理服务器发送验证信息      |
|        Range        |        请求某个内容的一部分        |
|       Referer       |    表示浏览器所访问的前一个页面    |
|         TE          |            传输编码方式          |

|      响应字段      |            作用            |
| :----------------: | :------------------------: |
|   Accept-Ranges    |   是否支持某些种类的范围   |
|        Age         | 资源在代理缓存中存在的时间 |
|        ETag        |          资源标识          |
|      Location      |   客户端重定向到某个 URL   |
| Proxy-Authenticate |  向代理服务器发送验证信息  |
|       Server       |         服务器名字         |
|  WWW-Authenticate  |   获取资源需要的验证信息   |

|     实体字段     |              作用              |
| :--------------: | :----------------------------: |
|      Allow       |       资源的正确请求方式       |
| Content-Encoding |         内容的编码格式         |
| Content-Language |         内容使用的语言         |
|  Content-Length  |       request body 长度        |
| Content-Location |       返回数据的备用地址       |
|   Content-MD5    | Base64加密格式的内容 MD5检验值 |
|  Content-Range   |         内容的位置范围         |
|   Content-Type   |         内容的媒体类型         |
|     Expires      |         内容的过期时间         |
|  Last_modified   |       内容的最后修改时间       |


【计算机网络】HTTP

1. 介绍一下OSI七层参考模型和TCP/IP五层模型

参考链接：https://blog.csdn.net/sinat_21455985/article/details/53508115

# 参考资料

## 前端工具

- Git
  1. [入门篇](https://backlog.com/git-tutorial/cn/intro/intro1_1.html)
  2. [高级篇](https://backlog.com/git-tutorial/cn/stepup/stepup1_1.html)
  3. [索引篇](https://backlog.com/git-tutorial/cn/reference/)
  4. [原版](https://www.atlassian.com/git/tutorials/merging-vs-rebasing)
  5. [原版翻译](https://github.com/geeeeeeeeek/git-recipes/wiki/1.1-%E6%9E%9C%E5%A3%B3%E4%B8%AD%E7%9A%84-Git)
  6. [Git 的奇技淫巧](https://github.com/cucygh/git-tips)
- Webpack
  1. [文档](https://doc.webpack-china.org/concepts/)
  2. [插件](https://doc.webpack-china.org/plugins/)
- Gulp
  -  [文档](https://www.gulpjs.com.cn/)
- Grunt
  - [文档](http://www.gruntjs.net/)
- Rollup
  - [文档](http://www.rollupjs.com/)
- 代码质量
  1. [vue eslint](https://mysticatea.github.io/vue-eslint-demo/)
  2. [htmlhint](https://htmlhint.io/)
  3. [stylelint](https://stylelint.io/)
- http-server
  - [静态服务器](https://www.npmjs.com/package/http-server)
- ast
  - [业界 AST 库](https://github.com/cucygh/AST-)
- 自动化测试
  - [jest](https://jestjs.io/zh-Hans/)


## 前端框架

- Vue
  1. [基本教程](https://cn.vuejs.org/)
  2. [路由](https://router.vuejs.org/)
  3. [Vuex](https://vuex.vuejs.org/)
  4. [SSR](https://ssr.vuejs.org/)
  5. [Nuxt.js](https://zh.nuxtjs.org/)
  6. [Vue 源码分析·免费](http://hcysun.me/vue-design/)
- React
  1. [文档](https://doc.react-china.org/)
  2. [Redux 官方文档](http://cn.redux.js.org/)
  3. [Redux 中文社区](http://www.redux.org.cn/)
  4. [Next.js](https://zeit.co/blog/next4)
  5. [Next.js 中文文档](http://nextjs.frontendx.cn/docs)
  6. [Next.js 掘金博客](https://juejin.im/entry/59791d8f6fb9a03c391b557e)
- Angular
  - [官方文档](https://angular.cn/)
- Koa
  > Express 升级后的框架，抽象设计更彻底，强大、自由、灵活

  1. [文档](https://koa.bootcss.com/)
  2. [Koa2 进阶学习笔记](https://chenshenhai.github.io/koa2-note/)
  3. [基于 Koa2 搭建 Node.js 实战项目教程](https://github.com/ikcamp/koa2-tutorial)
- Express
  > Node.js 开发最容易上手的业务应用开发框架
  - [文档](http://expressjs.com/zh-cn/)

## 前端技术

- 内存泄漏
  1. [JavaScript 内存泄露和 CSS 优化](https://github.com/cucygh/js-leakage-patterns?organization=cucygh&organization=cucygh)
  2. [内存泄漏](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn)
- MDN官方文档
  - [MDN官方文档](https://developer.mozilla.org/zh-CN/)

## CSS 教程

- Less
  - [文档](http://less.bootcss.com/)
- Sass
  - [文档](http://sass.bootcss.com/docs/sass-reference/)
- CSS3 布局
  - [学习布局](http://zh.learnlayout.com/)

## JavaScript 教程

- ES6
  1. [权威教程:ECMAScript 6](http://es6-features.org/#Constants)
  2. [入门教程](http://es6.ruanyifeng.com/)
- Node
  1. [官方网站](http://nodejs.cn/)
  2. [官方教程](http://nodejs.cn/api/)
- ES3
  - [入门教程](http://www.runoob.com/js/js-tutorial.html)
- ES5
  1. [ES5 新特性与 ES3 的对比](http://www.hahack.com/wiki/javascript-es5.html#es5-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7)
  2. [ES5 新特性博客](http://pij.robinqu.me/JavaScript_Core/ECMAScript/es5.html)

## 服务端教程

- [Nginx 入门](http://cnt1992.xyz/2016/03/18/simple-intro-to-nginx/)
- [Nginx 入门与精通（高级）](http://tengine.taobao.org/book/#)
- [Nginx 配置大全](https://nginxconfig.io/)



【总结】参考资料

# URL请求细节
## 1. 从输入URL到页面加载完成的过程？（高频考点）
> [!NOTE]
> 涉及到浏览器缓存、TCP连接、浏览器渲染等知识。

### 1.1 基本流程
![输入URL后.png](../img/输入URL后.png)

 - 判断是否需要跳转(301)
 - 从浏览器中读取缓存
 - DNS解析
 - TCP连接
 - HTTP请求发出
 - 服务端处理请求，HTTP响应返回
 - 浏览器拿到响应数据，解析响应内内容，把解析结果展示给用户


### 1.2 详细流程（重点掌握）
1. 在浏览器地址栏输入URL
2. 浏览器查看是否有**强缓存**，如果请求资源在缓存中并且新鲜，跳转到转码步骤
    1. 如果资源未缓存，发起新请求
    2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
    3. 检验新鲜通常有两个HTTP头进行控制`Expires`和`Cache-Control`：
        - HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
        - HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
3. 浏览器**解析URL**获取协议，主机，端口，path
4. 浏览器**组装一个HTTP（GET）请求报文**
5. **DNS解析**，查找过程如下：
    1. 浏览器缓存
    2. 本机缓存
    3. hosts文件
    4. 路由器缓存
    5. ISP DNS缓存
    6. DNS查询（递归查询 / 迭代查询）
6. **端口建立TCP链接**，三次握手如下：
    1. 客户端发送一个TCP的**SYN=1，Seq=X**的包到服务器端口
    2. 服务器发回**SYN=1， ACK=X+1， Seq=Y**的响应包
    3. 客户端发送**ACK=Y+1， Seq=Z**
7. TCP链接建立后**发送HTTP请求**
8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9. 服务器检查**HTTP请求头是否包含缓存验证信息**如果验证缓存新鲜，返回**304**等对应状态码
10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11. 服务器将**响应报文通过TCP连接发送回浏览器**
12. 浏览器接收HTTP响应，然后根据情况选择**关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下**：
    1. 主动方发送**Fin=1， Ack=Z， Seq= X**报文
    2. 被动方发送**ACK=X+1， Seq=Z**报文
    3. 被动方发送**Fin=1， ACK=X， Seq=Y**报文
    4. 主动方发送**ACK=Y， Seq=X**报文
13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
14. 如果资源可缓存，**进行缓存**
15. 对响应进行**解码**（例如gzip压缩）
16. 根据资源类型决定如何处理（假设资源为HTML文档）
17. **解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本**，这些操作没有严格的先后顺序，以下分别解释
18. **构建DOM树**：
    1. **Tokenizing**：根据HTML规范将字符流解析为标记
    2. **Lexing**：词法分析将标记转换为对象并定义属性和规则
    3. **DOM construction**：根据HTML标记关系将对象组成DOM树
19. 解析过程中遇到图片、样式表、js文件，**启动下载**
20. 构建**CSSOM树**：
    1. **Tokenizing**：字符流转换为标记流
    2. **Node**：根据标记创建节点
    3. **CSSOM**：节点创建CSSOM树
21. **[根据DOM树和CSSOM树构建渲染树](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)**:
    1. 从DOM树的根节点遍历所有**可见节点**，不可见节点包括：1）`script`,`meta`这样本身不可见的标签。2)被css隐藏的节点，如`display: none`
    2. 对每一个可见节点，找到恰当的CSSOM规则并应用
    3. 发布可视节点的内容和计算样式
22. **js解析如下**：
    1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时**document.readystate为loading**
    2. HTML解析器遇到**没有async和defer的script时**，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。**同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容**
    3. 当解析器遇到设置了**async**属性的script时，开始下载脚本并继续解析文档。脚本会在它**下载完成后尽快执行**，但是**解析器不会停下来等它下载**。异步脚本**禁止使用document.write()**，它们可以访问自己script和之前的文档元素
    4. 当文档完成解析，document.readState变成interactive
    5. 所有**defer**脚本会**按照在文档出现的顺序执行**，延迟脚本**能访问完整文档树**，禁止使用document.write()
    6. 浏览器**在Document对象上触发DOMContentLoaded事件**
    7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些**内容完成载入并且所有异步脚本完成载入和执行**，document.readState变为complete,window触发load事件
23. **显示页面**（HTML解析过程中会逐步显示页面）


+ 补充知识：浏览器缓存包含两种类型，即强缓存（也叫本地缓存）和协商缓存
+ 强缓存和协商缓存:https://www.cnblogs.com/wonyun/p/5524617.html


```
获取资源形式	状态码	发送请求到服务器
强缓存	 从缓存取	 200（from cache）	否，直接从缓存取
协商缓存	 从缓存取	 304（not modified）	是，正如其名，通过服务器来告知缓存是否可用
```



【计算机网络】输入url请求细节

1. 从输入URL到页面加载完成的过程？（高频考点）

# 开发环境	
## 3.1 Git操作	
### 3.1.1 Git的基本命令有哪些
```js
git add .
git checkout xxx
git commit -m 'xxx'
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx(文件名)
git merge xxx
git diff
--------------git多人协作：
git branch                   查看当前分支
git checkout -v dev          创建新的分支
git checkout dev             切换当前分支
git push origin dev          提交代码到dev分支（修改bug…
git checkout matser          切换到已有的分支
git merge dev                合并dev分支到master分支
git push origin master       推送修改的内容到远程仓库

```	
### 3.1.2 git rebase和git merge的区别？
**git merge**：将两个分支，合并提交为一个新提交，并且新提交有2个parent。把公共分支和你当前的commit 合并在一起，形成一个新的 commit 提交

**git rebase**：会取消分支中的每个提交，并把他们临时存放，然后把当前分支更新到最新的origin分支，最后再吧所有提交应用到分支上。
### 3.1.3 git上线回滚的流程？
上线流程：
1. 将测试完成的代码提交到git版本库的master分支
2. 将当前服务器的代码全部打包并记录版本号，备份
3. 将master分支的代码提交覆盖到线上服务器，生效新的版本号
回滚流程：
1. 将当前服务器的代码打包并记录版本号，备份
2. 【将备份的上一个版本号解压，覆盖到线上服务器】，生成新的版本号

## 3.2 模块化	
### 3.2.1 谈一下你对JS模块化的理解	
### 3.2.2 AMD和CommonJS规范的区别和使用场景	
AMD规范：
1. require.js requirejs.org
2. 全局定义了define函数
3. 全局定义了require函数
4. 依赖JS会自动、异步加载
CommonJS规范：
1. 这是nodejs的模块化规范，现在被广泛应用于前端
2. 前端开发依赖的插件和库，都可以从npm中获取
3. 构建工具的高度自动化，使得使用npm的成本非常低
4. CommonJS不会异步加载JS，而是同步一次性加载进来
使用场景：
1. 需要异步加载JS，使用AMD
2. 使用了npm之后建议使用commonjs规范

## 3.3 构建工具	
### 3.3.1 Webpack的基本配置流程	
> [!NOTE]
> 主要是掌握Webpack的基本配置，包括文件的打包和压缩、CSS文件的处理和模块化、图片文件的处理以及一些开发环境的常用配置和性能优化知识点，理解打包的底层实现原理。
> - 具体配置可参考：https://www.jianshu.com/p/11e8f9668c0e

### 3.3.2 Gulp的基本配置流程，与webpack的区别？
> [!NOTE]
> 需要掌握基本的配置流程和打包过程，底层实现原理。

```js
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require("browser-sync").create(), //自动刷新
    reload = browserSync.reload;
const filter = require('gulp-filter');
// gulp-filter 包， 以确保只有 *.css 文件响应 .reload - 这样一来，
// 您还是会得到CSS注入，而不是整个页面重载。
const useref = require('gulp-useref'); //合并JS
const uglify = require('gulp-uglify'); //js压缩
const minifyCSS = require('gulp-minify-css'); //压缩css

var gulpIf = require('gulp-if');

var del = require('del');

var runSequence = require('run-sequence');//组织任务执行顺序,未使用

var rename = require('gulp-rename');//重命名

var watch=require('gulp-watch');//监视

var minifyHtml = require("gulp-minify-html");//压缩html

var babel = require("gulp-babel");
// npm install --save-dev gulp-babel@7 babel-core babel-preset-env

var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');//压缩图片文件
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 浏览器刷新
var cache = require('gulp-cache');//压缩图片可能会占用较长时间，使用 gulp-cache 插件可以减少重复压缩。
var RevAll = require("gulp-rev-all");//md5后缀
 
gulp.task('html',function(){//编译html
    return gulp.src('app/*.html')
    .pipe(gulp.dest('app/dist'))
    .pipe(connect.reload());
})

gulp.task('css',function(){//编译scss
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())//编译scss
    // .pipe(gulp.dest('app/css')) //当前对应css文件
    .pipe(gulp.dest('app/dist/css')) //当前对应css文件
    .pipe(connect.reload());//更新
})
 
gulp.task('js',function(){//编译ES6并且压缩
    return gulp.src('app/js/**/*.js')
    .pipe(jshint())//检查代码
    .pipe(babel({//编译ES6
        presets: ['es2015']
    }))
    .pipe(uglify())//压缩js
    .pipe(gulp.dest('app/dist/js'))
    .pipe(connect.reload());
})

gulp.task('fonts', function() {
    return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('app/dist/fonts'))
})

gulp.task('images', function() {
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({//压缩图片文件
        interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'))
});

gulp.task('clean:app/dist', function() {//删除之前生成的文件
    return del(['app/dist']);
});

gulp.task('clean:dist', function() {//异步清理除dist目录图片以外的文件
     return del(['app/dist/**/*', '!dist/images', '!dist/images/**/*']);
});

gulp.task('minFs', function() {//压缩文件
    return gulp.src('app/dist/*.html')
        .pipe(useref())//合并js
        .pipe(
            gulpIf('*.js',uglify())//压缩js
        )
        .pipe(gulpIf('*.css', minifyCSS()))//压缩css
        .pipe(RevAll.revision({//不被重命名
            dontRenameFile:[/^\/favicon.ico$/g, ".html"]
        }))  
        .pipe(gulp.dest('dist'));
});

gulp.task('connect:app',function(){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9998//端口
    })
})

gulp.task('connect:dist',function(cb){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9999//端口
    })
    cb()//执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
})

gulp.task('watchs',function(){//监听变化执行任务
    //当匹配任务变化才执行相应任务
    gulp.watch('app/*.html',gulp.series('html'));
    gulp.watch('app/scss/**/*.scss',gulp.series('css'));
    gulp.watch('app/js/**/*.js',gulp.series('js'));
    gulp.watch('app/fonts/**/*',gulp.series('fonts'));
    gulp.watch('app/images/**/*',gulp.series('images'));
})

//gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行

//下面1和2分别运行

//1.自动监测文件变化并刷新浏览器

//初始生成app/dist目录
gulp.task('init',gulp.series('clean:app/dist',gulp.parallel('html','css','js','fonts','images')));

//启动任务connect:app服务，并监控变化
gulp.task('run',gulp.series('init','connect:app','watchs'));

//2.生成打包文件
gulp.task('build',gulp.series('clean:dist',gulp.parallel('init'),'minFs'));

//启动任务connect:dist服务，生成打包文件后，监控其变化
gulp.task('serve',gulp.series('connect:dist','build','clean:app/dist','watchs'));
```
## 3.4 Linux环境基本命令	
> 可参见开发环境下的Linux面试题相关章节。

【JS相关】开发环境

3.2.1 谈一下你对JS模块化的理解

3.2.2 AMD和CommonJS规范的区别和使用场景

3.3.2 Gulp的基本配置流程，与webpack的区别？