JavaScript (120) 总结 (15)

算法

冒泡

var arr = [4,2,3,2,3,5,1,0,7,6]
Array.prototype.bubbleSort = function(){
    var len = this.length;
    for(var i=0; i<len; i++){
        for(var j=i; j<len; j++){
            if(this[i] > this[j]){
                var swap = this[i];
                this[i] = this[j];
                this[j] = swap;
            }
        }
    }
    return this;
}

快排

var arr = [4,2,3,2,3,5,1,0,7,6]
Array.prototype.quickSort = function(){
    if(this.length <= 1) return this;
    var middleIndex = parseInt(this.length / 2),
        middle = this[middleIndex],
        left = [],
        right = [];
    for(var i=0; i< this.length; i++){
        if(i === middleIndex) continue;
        if(this[i] < middle){
            left.push(this[i])
        }else{
            right.push(this[i])
        }
    }
    return left.quickSort().concat([middle], right.quickSort());
}

插入

var arr = [4,2,3,2,3,5,1,0,7,6]
Array.prototype.insertSort = function(){
    for(var i=0; i<this.length; i++){
        var j = i,
        temp = this[i];
        while(j>0 && this[j-1] > temp){
            this[j] = this[j-1];
            j--;
        }
        this[j] = temp
    }
    return this;
}

选择

var arr = [4,2,3,2,3,5,1,0,7,6]
Array.prototype.chooseSort = function(){
    var minIndex;
    for(var i=0; i<this.length; i++){
        minIndex = i;
        for(var j=i+1; j<this.length; j++){
            if(this[minIndex] > this[j]){
                minIndex = j
            }
        }
        var swap = this[i];
        this[i] = this[minIndex];
        this[minIndex] = swap;
    }
    return this;
}

正则

邮箱：/[a-zA-z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z-_]+/

手机号：/1[3|4|5|7|8]\d{9}/

中英文字符：/a-zA-Z\u4e00-\u9fa5/

双音节字符：/[^x00-xff]/

首尾空格：/^\s*|\s*$/

URL：/\w+:\/\/[^\s]*/

身份证：/(^\d{15}$)|(^\d{18}$)|(^\d{17}[\d|x|X]$)/

国内座机：/(^(\d{3})\-(\d{8})$)|(^(\d{4})\-(\d{7})$)/

知识整理

TCP

三次握手

原文地址

在 TCP/IP 协议中，TCP 协议提供可靠的连接服务，采用三次握手建立一个连接。

1. 第一次握手：建立连接时，客户端 A 发送 SYN 包 (SYN=j) 到服务器 B，并进入 SYN_SEND 状态，等待服务器 B 确认。
2. 第二次握手：服务器 B 收到 SYN 包，必须确认客户 A 的 SYN(ACK=j+1)，同时自己也发送一个 SYN 包 (SYN=k)，即 SYN+ACK 包，此时服务器 B 进入 SYN_RECV 状态。
3. 三次握手：客户端 A 收到服务器 B 的 SYN＋ACK 包，向服务器 B 发送确认包 ACK(ACK=k+1)，此包发送完毕，客户端 A 和服务器 B 进入 ESTABLISHED 状态，完成三次握手。 完成三次握手，客户端与服务器开始传送数据。

四次挥手

由于 TCP 连接是全双工的，因此每个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个 FIN 来终止这个方向的连接。收到一个 FIN 只意味着这一方向上没有数据流动，一个 TCP 连接在收到一个 FIN 后仍能发送数据。首先进行关闭的一方将执行主动关闭，而另一方执行被动关闭。

1. 客户端 A 发送一个 FIN，用来关闭客户 A 到服务器 B 的数据传送(报文段4)。
2. 服务器 B 收到这个 FIN，它发回一个 ACK，确认序号为收到的序号加1(报文段5)。和 SYN 一样，一个 FIN 将占用一个序号。
3. 服务器 B 关闭与客户端 A 的连接，发送一个 FIN 给客户端 A(报文段6)。
4. 客户端 A 发回 ACK 报文确认，并将确认序号设置为收到序号加1(报文段7)。

为什么建立连接协议是三次握手，而关闭连接却是四次握手呢？

这是因为服务端的 LISTEN 状态下的 SOCKET 当收到 SYN 报文的连接请求后，它可以把 ACK 和 SYN(ACK 起应答作用，而 SYN 起同步作用)放在一个报文里来发送。但关闭连接时，当收到对方的 FIN 报文通知时，它仅仅表示对方没有数据发送给你了；但未必你所有的数据都全部发送给对方了，所以你可能未必会马上会关闭 SOCKET,也即你可能还需要发送一些数据给对方之后，再发送 FIN 报文给对方来表示你同意现在可以关闭连接了，所以它这里的 ACK 报文和 FIN 报文多数情况下都是分开发送的。

HTTP

原文地址

地址栏输入域名之后，网络间传输大致如下：

发送端：

1. 应用层：DNS登场，根据域名解析出IP地址
2. 应用层：HTTP协议出场，生成一个HTTP请求报文
3. 传输层：TCP协议登场，将数据分割并通过三次握手向目标传递
4. 网络层：IP协议配合TCP协议，确定目的地，然后通过路由，一边路由一边传递数据包

接收端：

1. 网络层：数据送到
2. 传输层：TCP协议接收传递过来的数据包，并重组数据包。
3. 应用层：HTTP协议处理请求报文，生成响应报文。
4. 请求的结果再反向的一样的流程传回给发送端。

request

POST /index.html HTTP/1.1         --对应--> 请求方式、请求URI、协议版本
Host: hack.jp                     --对应--> 主机
Connection: keep-alive            --对应--> 链接状态
Content-Type: application/json    --对应--> 内容类型
Content-Length: 16                --对应--> 内容长度
...
name=tome&age=12                  --对应--> 内容实体

response

HTTP/1.1 200 OK                       --对应-->协议版本、状态码、状态码原因短语
Date: Tue, 10 Jul 2017 10:18:55 GMT   --对应-->消息报头
Content-Length: 362
Content-Type: text/html
空行
响应正文

HTTP 响应状态

1XX --> 接收的请求正在处理
2XX --> 请求正常处理完毕
3XX --> 需要进行附加操作以完成请求
4XX --> 服务器无法处理请求
5XX --> 服务器处理请求出错

HTTPS

原文地址

• 加密：内容加密建立一个信息安全通道，来保证数据传输的安全；
• 认证：身份认证确认网站的真实性
• 完整性保护：数据完整性防止内容被第三方冒充或者篡改

交互流程

HTTP 缓存

原文地址

当浏览器首次对一个资源发起请求时，在不考虑其他参数的情况下，请求完成之后会将当次请求的结果缓存下来，以便下次请求更快响应。过程如下

首次发起资源请求：

浏览器再次对同一资源发起请求：

详解第一次发起请求流程：

强制缓存，此时资源只要未过期，都会触发缓存，直接对内容进行返回，如果缓存失效，则立即发起新的请求对服务器进行请求，然后将结果放入缓存中。

对比缓存：首先获取资源的标识，发送请求到服务器验证资源标志是否失效，如果未失效，则浏览器从本地获取资源，如果失效，再发起真是请求到服务器，请求新的资源内容。

强制缓存

强制缓存的关键在于如何判断缓存数据是否失效，判断的信息在 response header 信息中，主要由（Expires/Cache-control）来标明。

Expires

Expires的值为服务端返回的到期时间，即下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。

另一个问题是，到期时间是由服务端生成的，但是客户端时间可能跟服务端时间有误差，这就会导致缓存命中的误差。所以HTTP 1.1 的版本，使用Cache-Control替代。

Cache-control

Cache-Control：是最重要的规则。常见的取值有private、public、no-cache、max-age，no-store，默认为private。

• private：客户端可以缓存
• public：客户端和代理服务器都可缓存
• max-age=xxx：缓存的内容将在 xxx 秒后失效
• no-cache：需要使用对比缓存来验证缓存数据
• no-store：所有内容都不会缓存，强制缓存，对比缓存都不会触发

对比缓存

对比缓存，顾名思义，需要进行比较判断是否可以使用缓存。 浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据。

对于对比缓存来说，缓存标识的传递是我们着重需要理解的，它在请求header和响应header间进行传递，一共分为两种标识传递，接下来，我们分开介绍

Last-Modified / If-Modified-Since

• Last-Modified：服务器在响应请求时，告诉浏览器资源的最后修改时间。
• If-Modified-Since：再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。服务器收到请求后发现有头 If-Modified-Since 则与被请求资源的最后修改时间进行比对。若资源的最后修改时间大于 If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200；若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

Etag / If-None-Match

优先级高于 Last-Modified / If-Modified-Since

• Etag：服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）
• If-None-Match：再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对，不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

用户行为与缓存

from disk cache 和 from memory cache

from disk cache：磁盘缓存，一般来说我们新开一个页面，如果以前打开过这个页面，并且有命中强制缓存就会 from disk cache，从硬盘中读取缓存文件，除了首次打开会 from disk cache，一般大一些的，耗费内存一些文件就会走 from disk cache。

from memory cache：内存缓存，如果相对娇小不占用太多内存并且已经从 disk 读取过的文件，为了更快打开可能就会走 from memory cache。