Huangyuntse

HTTP相关，状态码，HTTP1/2/3、简单请求和非简单请求

HTTP 有哪些常见状态码

2xx（成功状态码）

200 OK

请求成功，服务器已成功处理了客户端的请求，并返回了请求的内容。

3xx（重定向状态码）

301 Moved Permanently

被请求的资源已永久移动到新位置，服务器返回这个状态码时，会在响应头的 Location 字段给出资源的新 URL。搜索引擎会更新其索引中的链接。

应用场景：如果一个网站更改了页面的 URL 结构，希望将旧的 URL 永久重定向到新的 URL

302 Found

表示请求的资源临时移动到了新位置。与 301 不同的是，搜索引擎不会更新索引中的链接

304 Not Modified

说明无需再次传输请求的内容，也就是说可以使用缓存的内容

HTTP缓存过程

第一次发送请求 - 服务器响应，响应标头带上Cache-Control、Expires、ETag、Last-Modified
第二次发送请求 - 先根据Cache-Control、Expires判断强缓存是否失效，如果失效，If-None-Match中的上一次ETag和If-Modified-Since中的上一次Last-Modified来判断是否变更，如果没有变更，返回304让浏览器使用本地缓存

强缓存

Cache-Control

Cache-Control 是 HTTP/1.1 中新增的属性，在请求头和响应头中都可以使用，常用的属性值如有：

• max-age：单位是秒，缓存时间计算的方式是距离发起的时间的秒数，超过间隔的秒数缓存失效
• no-cache：不使用强缓存，需要与服务器验证缓存是否新鲜
• no-store：禁止使用缓存（包括协商缓存），每次都向服务器请求最新的资源
• private：专用于个人的缓存，中间代理、CDN 等不能缓存此响应
• public：响应可以被中间代理、CDN 等缓存
• must-revalidate：在缓存过期前可以使用，过期后必须向服务器验证

Expires

Expires 的值是一个 HTTP 日期，在浏览器发起请求时，会根据系统时间和 Expires 的值进行比较，如果系统时间超过了 Expires 的值，缓存失效。

由于和系统时间进行比较，所以当系统时间和服务器时间不一致的时候，会有缓存有效期不准的问题。Expires 的优先级在三个 Header 属性中是最低的。

协商缓存

当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存，并且在请求头中设置了If-Modified-Since 或者 If-None-Match 的时候，会将这两个属性值到服务端去验证是否命中协商缓存，如果命中了协商缓存，会返回 304 状态，加载浏览器缓存，并且响应头会设置 Last-Modified 或者 ETag 属性。

ETag/If-None-Match

ETag/If-None-Match 的值是一串 hash 码，代表的是一个资源的标识符，当服务端的文件变化的时候，它的 hash码会随之改变

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since 的值代表的是文件的最后修改时间

如何实现ETag？

Nginx中ETag是如何实现的： 上次修改时间 + content-length

缓存策略

题目：简述你们前端项目中资源的缓存配置策略
题目：现代前端应用应如何配置 HTTP 缓存机制
关于 http 缓存配置的最佳实践为以下两条：

• 文件路径中带有 hash 值：一年的强缓存。因为该文件的内容发生变化时，会生成一个带有新的 hash 值的 URL。前端将会发起一个新的 URL 的请求。配置响应头 Cache-Control: public,max-age=31536000,immutable
• 文件路径中不带有 hash 值：协商缓存。大部分为 public 下文件。配置响应头 Cache-Control: no-cache 与 etag/last-modified

但是当处理永久缓存时，切记不可打包为一个大的 bundle.js，此时一行业务代码的改变，将导致整个项目的永久缓存失效，此时需要按代码更新频率分为多个 chunk 进行打包，可细粒度控制缓存。

1. webpack-runtime: 应用中的 webpack 的版本比较稳定，分离出来，保证长久的永久缓存
2. react/react-dom: react 的版本更新频次也较低
3. vendor: 常用的第三方模块打包在一起，如 lodash，classnames 基本上每个页面都会引用到，但是它们的更新频率会更高一些。另外对低频次使用的第三方模块不要打进来
4. pageA: A 页面，当 A 页面的组件发生变更后，它的缓存将会失效
5. pageB: B 页面
6. echarts: 不常用且过大的第三方模块单独打包
7. mathjax: 不常用且过大的第三方模块单独打包
8. jspdf: 不常用且过大的第三方模块单独打包

为什么需要加密？

因为http的内容是明文传输的，明文数据会经过中间代理服务器、路由器、wifi热点、通信服务运营商等多个物理节点，如果信息在传输过程中被劫持，传输的内容就完全暴露了。劫持者还可以篡改传输的信息且不被双方察觉，这就是“中间人攻击”。

用对称加密可行吗？

对称加密最大的问题就是密钥的传输，而密钥的传输又需要加密（反复套娃），故而单纯的对称加密是无法解决问题的。

引言：

感觉promise的思想非常有意思，为了代码的可读性和可维护性提供了一种新的异步编程方法，接触了一段时间的工程代码也让我体会到代码可维护，可拓展的必要性。

为什么要用Promise？

对于异步操作，例如文件读取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var fs = require('fs')

fs.readFile('./a.txt', 'utf-8', function(err, data) {
    if (err) {
        throw err;
    }
    console.log(data);
})
fs.readFile('./b.txt', 'utf-8', function(err, data) {
    if (err) {
        throw err;
    }
    console.log(data);
})
fs.readFile('./c.txt', 'utf-8', function(err, data) {
    if (err) {
        throw err;
    }
    console.log(data);
})

SPA的理解

1. 单页Web应用（single page web application，SPA）。

2. 整个应用只有一个完整的页面。

3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。

4. 数据都需要通过ajax请求获取, 并在前端异步展现。

路由

后端路由

• 注册路由： router.get(path, function(req, res))

• 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由

• 注册路由: <Route path="/test" component={Test}>

• 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

数组去重方法

对象拷贝方法

数组交集、并集、差集

数组扁平

实现一个new

new的具体步骤

1. 内存中创建一个新对象
2. 新建对象的 _ proto _指向构造函数的prototype
3. 调用构造函数，函数的this指向新创建的对象
4. 执行构造函数内部的代码（给新对象添加属性）
5. 如果构造函数返回非空对象，则返回该对象，否则，返回新创建的对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function Person(age, name) {
    this.age = age;
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log(this.name);
}

function myNew(fn, ...args) {
    // 修改obj.__proto__ = fn.prototype，如果直接obj = {}会出现没有对象标识的问题（对象标识为Object），还会使得方法没有被创建
    const obj = Object.create(fn.prototype)  //fn.prototype代表 用当前对象的原型去创建
    //现在obj就代表Dog了,但是参数和this指向没有修改
    const rel = fn.apply(obj,args)
    /*
       正常规定,如何fn返回的是null或undefined(也就是不返回内容),我们返回的是obj,否则返回rel
       因为比如下面这个构造函数
       function Person(name, age) {
            this.name = name;
            this.age = age;
            return {
                a: 1,
                b: 2,
            }
        }
        const p = new Person('h', 'y');
        这里new会优先为构造函数的返回值
        所以p的值为{a: 1,b: 2}
    */
    return rel instanceof Object ? rel : obj
}
const p1 = myNew(Person, 19, 'hyz');

javascript垃圾回收主要分成两种方法：

1. 引用计数

引用

• 垃圾回收算法主要依赖于引用的概念。

• 在内存管理的环境中，一个对象如果有访问另一个对象的权限（隐式或者显式），叫做一个对象引用另一个对象。

• 例如，一个Javascript对象具有对它原型的引用（隐式引用）和对它属性的引用（显式引用）。

• 在这里，“对象”的概念不仅特指 JavaScript 对象，还包括函数作用域。

引用计数垃圾收集

这是最初级的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。

首先，要明确几个点：

1. 在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。
   即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。

2. 方法(Function)
   方法这个特殊的对象，除了和其他对象一样有上述_proto_属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

好啦，知道了这两个基本点，我们来看看上面这副图。

1. 构造函数Foo()
   构造函数的原型属性Foo.prototype指向了原型对象，在原型对象里有共有的方法，所有构造函数声明的实例（这里是f1，f2）都可以共享这个方法。

2. 原型对象Foo.prototype
   Foo.prototype保存着实例共享的方法，有一个指针constructor指回构造函数。

3. 实例
   f1和f2是Foo这个对象的两个实例，这两个对象也有属性__proto__，指向构造函数的原型对象，这样子就可以像上面1所说的访问原型对象的所有方法啦。

   

前言：

在看js垃圾回收时遇到相关问题，感觉自己对上下文对象理解的还是不够透彻（实在是太菜了）这就回来恶补。

执行上下文（Execution Context）

• 执行上下文可以理解为当前代码的运行环境。在 JavaScript 中，运行环境主要包含了全局环境和函数环境。

• 在 JavaScript 代码运行过程中，最先进入的是全局环境，而在函数被调用时则进入相应的函数环境。全局环境和函数环境所对应的执行上下文我们分别称为全局上下文和函数上下文。

• 在一个 JavaScript 文件中，经常会有多个函数被调用，也就是说在 JavaScript 代码运行过程中很可能会产生多个执行上下文，那么如何去管理这多个执行上下文呢？

• 执行上下文是以栈（一种 LIFO 的数据结构）的方式被存放起来的，我们称之为执行上下文栈（Execution Context Stack）。

• 在 JavaScript 代码开始执行时，首先进入全局环境，此时全局上下文被创建并入栈，之后当调用函数时则进入相应的函数环境，此时相应函数上下文被创建并入栈，当处于栈顶的执行上下文代码执行完毕后，则会将其出栈。

• 所以在执行上下文栈中，栈底永远是全局上下文，而栈顶则是当前正在执行的函数上下文。