发表于 分类于

题目描述

给定一个排序数组，你需要在 原地 删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。

不要使用额外的数组空间，你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。

1
2
3
4
5
给定数组 nums = [1,1,2], 

函数应该返回新的长度 2, 并且原数组 nums 的前两个元素被修改为 1, 2。 

你不需要考虑数组中超出新长度后面的元素。
1
2
3
4
5
给定 nums = [0,0,1,1,1,2,2,3,3,4],

函数应该返回新的长度 5, 并且原数组 nums 的前五个元素被修改为 0, 1, 2, 3, 4。

你不需要考虑数组中超出新长度后面的元素。

说明:

为什么返回数值是整数，但输出的答案是数组呢?

请注意，输入数组是以「引用」方式传递的，这意味着在函数里修改输入数组对于调用者是可见的。

你可以想象内部操作如下:

1
2
3
4
5
6
7
8
// nums 是以“引用”方式传递的。也就是说，不对实参做任何拷贝
int len = removeDuplicates(nums);

// 在函数里修改输入数组对于调用者是可见的。
// 根据你的函数返回的长度, 它会打印出数组中该长度范围内的所有元素。
for (int i = 0; i < len; i++) {
    print(nums[i]);
}

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * @param {number[]} nums
 * @return {number}
 */
var removeDuplicates = function(nums) {
  let k = 0;
  let len = nums.length;
  for(let i = 0; i < len; i ++) {
    if (nums[i] !== nums[k]) {
      k ++;
      nums[k] = nums[i];
    }
  }
  return k + 1;
};

发表于 更新于 分类于

了解 web 及网络基础

TCP/IP 是互联网相关的各类协议族的总称。

DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。

与URI（Uniform Resource Identifier，统一资源标识符）相比，我们更熟悉URL（Uniform Resource Locator，统一资源定位符）。URL 正是使用 Web 浏览器等访问 Web 页面时需要输入的网页地址。

URI 用字符串标识某一互联网资源，而 URL 表示资源的地点（互联网上所处的位置）。可见 URL 是 URI 的子集。

绝对URI的格式。

1
2
3
4
5
6
7
8
http://user:pass@www.example.jp:80/dir/index.html?uid=1#ch1
协议方案名: http://
登录信息(认证): user:pass
服务器地址: www.example.jp
服务器端口号: 80
带层次的文件路径: dir/index.html
查询字符串: uid=1
片段标识符: ch1

简单的 http 协议

通过请求和响应的交换达成通信

请求报文是由请求方法、请求 URI、协议版本、可选的请求首部字段和内容实体构成的。

响应报文基本上由协议版本、状态码（表示请求成功或失败的数字代码）、用以解释状态码的原因短语、可选的响应首部字段以及实体主体构成。

HTTP是不保存状态的协议

HTTP/1.1 虽然是无状态协议，但为了实现期望的保持状态功能，于是引入了 Cookie 技术。有了 Cookie 再用HTTP 协议通信，就可以管理状态了。

Cookie 会根据从服务器端发送的响应报文内的一个叫做 Set-Cookie 的首部字段信息，通知客户端保存 Cookie。当下次客户端再往该服务器发送请求时，客户端会自动在请求报文中加入 Cookie 值后发送出去。

请求URI定位资源

如果不是访问特定资源而是对服务器本身发起请求，可以用一个 * 来代替请求 URI。

告知服务器意图的HTTP方法

GET 方法用来请求访问已被 URI 识别的资源。指定的资源经服务器端解析后返回响应内容。

POST 方法用来传输实体的主体。虽然用 GET 方法也可以传输实体的主体，但一般不用 GET 方法进行传输，而是用 POST 方法。虽说 POST 的功能与 GET 很相似，但 POST 的主要目的并不是获取响应的主体内容。

PUT 方法用来传输文件。就像 FTP 协议的文件上传一样，要求在请求报文的主体中包含文件内容，然后保存到请求 URI 指定的位置。

HEAD 方法和 GET 方法一样，只是不返回报文主体部分。用于确认URI 的有效性及资源更新的日期时间等。

DELETE 方法用来删除文件，是与 PUT 相反的方法。DELETE 方法按请求 URI 删除指定的资源。

OPTIONS 方法用来查询针对请求 URI 指定的资源支持的方法。

TRACE 方法是让 Web 服务器端将之前的请求通信环回给客户端的方法。发送请求时，在 Max-Forwards 首部字段中填入数值，每经过一个服务器端就将该数字减 1，当数值刚好减到 0 时，就停止继续传输，最后接收到请求的服务器端则返回状态码 200 OK 的响应。

CONNECT 方法要求在与代理服务器通信时建立隧道，实现用隧道协议进行 TCP 通信。主要使用SSL（SecureSockets Layer，安全套接层）和 TLS（Transport Layer Security，传输层安全）协议把通信内容加密后经网络隧道传输。

1

持久连接节省通信量

持久连接（HTTP Persistent Connections，也称为HTTP keep-alive 或 HTTP connection reuse）。

持久连接的特点是，只要任意一端没有明确提出断开连接，则保持 TCP 连接状态。

持久连接旨在建立 1 次 TCP 连接后进行多次请求和响应的交互。

持久连接的好处在于减少了 TCP 连接的重复建立和断开所造成的额外开销，减轻了服务器端的负载。另外，减少开销的那部分时间，使 HTTP 请求和响应能够更早地结束，这样 Web 页面的显示速度也就相应提高了。

持久连接使得多数请求以管线化（pipelining）方式发送成为可能。从前发送请求后需等待并收到响应，才能发送下一个请求。管线化技术出现后，不用等待响应亦可直接发送下一个请求。这样就能够做到同时并行发送多个请求，而不需要一个接一个地等待响应了。

比如，当请求一个包含 10 张图片的 HTML Web 页面，与挨个连接相比，用持久连接可以让请求更快结束。而管线化技术则比持久连接还要快。请求数越多，时间差就越明显。

HTTP 报文内的 HTTP 信息

HTTP 报文

用于 HTTP 协议交互的信息被称为 HTTP 报文。请求端（客户端）的 HTTP 报文叫做请求报文，响应端（服务器端）的叫做响应报文。HTTP报文本身是由多行（用 CR + LF 作换行符）数据构成的字符串文本。

HTTP 报文大致可分为报文首部和报文主体两块。两者由最初出现的空行（CR + LF）来划分。通常，并不一定要有报文主体。

2

获取部分内容的范围请求

指定范围发送的请求叫做范围请求（Range Request）。

针对范围请求，响应会返回状态码为 206 Partial Content 的响应报文。另外，对于多重范围的范围请求，响应会在首部字段 Content-Type 标明 multipart/byteranges 后返回响应报文。

如果服务器端无法响应范围请求，则会返回状态码 200 OK 和完整的实体内容。

返回结果的 HTTP 状态码

状态码告知从服务器端返回的请求结果

状态码的职责是当客户端向服务器端发送请求时，描述返回的请求结果。

3

2XX 成功

2XX 的响应结果表明请求被正常处理了。

3XX 重定向

3XX 的响应结果表明浏览器需要执行某些特殊的处理以正确处理请求。

301 Moved Permanently

永久性重定向。该状态码表示请求的资源已被分配了新的 URI，以后应使用资源现在所指的 URI。也就是说，如果已经把资源对应的 URI 保存为书签了，这时应该按 Location 首部字段提示的 URI 重新保存。

302 Found

临时性重定向。该状态码表示请求的资源已被分配了新的 URI，希望用户（本次）能使用新的 URI 访问。

和 301 Moved Permanently 状态码相似，但 302 状态码代表的资源不是被永久移动，只是临时性质的。换句话说，已移动的资源对应的 URI 将来还有可能发生改变。比如，用户把 URI 保存成书签，但不会像 301 状态码出现时那样去更新书签，而是仍旧保留返回 302 状态码的页面对应的 URI。

304 Not Modified

该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回 304 Not Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）。304 状态码返回时，不包含任何响应的主体部分。304 虽然被划分在 3XX 类别中，但是和重定向没有关系。

4XX 客户端错误

4XX 的响应结果表明客户端是发生错误的原因所在。

400 Bad Request

该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。另外，浏览器会像200 OK一样对待该状态码。

401 Unauthorized

该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息。另外若之前已进行过1 次请求，则表示用户认证失败。

返回含有 401 的响应必须包含一个适用于被请求资源的 WWW-Authenticate 首部用以质询（challenge）用户信息。当浏览器初次接收到 401 响应，会弹出认证用的对话窗口。

403 Forbidden

该状态码表明对请求资源的访问被服务器拒绝了。服务器端没有必要给出拒绝的详细理由，但如果想作说明的话，可以在实体的主体部分对原因进行描述，这样就能让用户看到了。

未获得文件系统的访问授权，访问权限出现某些问题（从未授权的发送源IP地址试图访问）等列举的情况都可能是发生 403 的原因。

404 Not Found

该状态码表明服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。

5XX 服务器错误

5XX 的响应结果表明服务器本身发生错误。

500 Internal Server Error

该状态码表明服务器端在执行请求时发生了错误。也有可能是 Web 应用存在的 bug 或某些临时的故障。

503 Service Unavailable

该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。如果事先得知解除以上状况需要的时间，最好写入 Retry-After 首部字段再返回给客户端。

与 HTTP 协作的 Web 服务器

缓存是指代理服务器或客户端本地磁盘内保存的资源副本。利用缓存可减少对源服务器的访问，因此也就节省了通信流量和通信时间。

缓存不仅可以存在于缓存服务器内，还可以存在客户端浏览器中。

浏览器缓存如果有效，就不必再向服务器请求相同的资源了，可以直接从本地磁盘内读取。

另外，和缓存服务器相同的一点是，当判定缓存过期后，会向源服务器确认资源的有效性。若判断浏览器缓存失效，浏览器会再次请求新资源。

HTTP 首部

4种HTTP首部字段类型

  • 通用首部字段（General Header Fields）请求报文和响应报文两方都会使用的首部。
  • 请求首部字段（Request Header Fields）从客户端向服务器端发送请求报文时使用的首部。补充了请求的附加内容、客户端信息、响应内容相关优先级等信息。
  • 响应首部字段（Response Header Fields）从服务器端向客户端返回响应报文时使用的首部。补充了响应的附加内容，也会要求客户端附加额外的内容信息。
  • 实体首部字段（Entity Header Fields）针对请求报文和响应报文的实体部分使用的首部。补充了资源内容更新时间等与实体有关的信息。

通用首部字段

Cache-Control

通过指定首部字段Cache-Control的指令，就能操作缓存的工作机制。

Connection

HTTP/1.1版本的默认连接都是持久连接。为此，客户端会在持久连接上连续发送请求。当服务器端想明确断开连接时，则指定Connection首部字段的值为Close。Connection: close

HTTP/1.1之前的HTTP版本的默认连接都是非持久连接。为此，如果想在旧版本的HTTP协议上维持持续连接，则需要指定Connection首部字段的值为Keep-Alive。Connection: keep-alive

Via

使用首部字段Via是为了追踪客户端与服务器之间的请求和响应报文的传输路径。

报文经过代理或网关时，会先在首部字段Via中附加该服务器的信息，然后再进行转发。

请求首部字段

Accept

Accept首部字段可通知服务器，用户代理能够处理的媒体类型及媒体类型的相对优先级。

Referer

首部字段Referer会告知服务器请求的原始资源的URI。

User-Agent

首部字段User-Agent会将创建请求的浏览器和用户代理名称等信息传达给服务器。

响应首部字段

ETag

资源被缓存时，就会被分配唯一性标识。例如，当使用中文版的浏览器访问http://www.google.com/时，就会返回中文版对应的资源，而使用英文版的浏览器访问时，则会返回英文版对应的资源。两者的URI是相同的，所以仅凭URI指定缓存的资源是相当困难的。若在下载过程中出现连接中断、再连接的情况，都会依照ETag值来指定资源。

Location

使用首部字段Location可以将响应接收方引导至某个与请求URI位置不同的资源。

基本上，该字段会配合3xx:Redirection的响应，提供重定向的URI。

几乎所有的浏览器在接收到包含首部字段Location的响应后，都会强制性地尝试对已提示的重定向资源的访问。

实体首部字段

Content-Encoding

首部字段Content-Encoding会告知客户端服务器对实体的主体部分选用的内容编码方式。内容编码是指在不丢失实体信息的前提下所进行的压缩。

为Cookie服务的首部字段

首部字段名 说明 首部类型
Set-Cookie 开始状态管理所使用的 Cookie 信息 响应首部字段
Cookie 服务器接收到的 Cookie 信息 请求首部字段

确保 web 安全的 HTTPS

HTTP 协议中没有加密机制，但可以通过和 SSL（Secure Socket Layer，安全套接层）或 TLS（Transport Layer Security，安全传输层协议）的组合使用，加密 HTTP 的通信内容。

与 SSL 组合使用的 HTTP 被称为 HTTPS（HTTP Secure，超文本传输安全协议）或 HTTP over SSL。

在采用 SSL 后，HTTP 就拥有了 HTTPS 的加密、证书和完整性保护这些功能。HTTP + 加密 + 认证 + 完整性保护 = HTTPS

HTTPS 并非是应用层的一种新协议。只是 HTTP 通信接口部分用 SSL（Secure Socket Layer）和TLS（TransportLayer Security）协议代替而已。

通常，HTTP 直接和 TCP 通信。当使用 SSL 时，则演变成先和 SSL 通信，再由 SSL 和 TCP 通信了。简言之，所谓HTTPS，其实就是身披 SSL 协议这层外壳的 HTTP。

SSL 是独立于 HTTP 的协议，所以不光是 HTTP 协议，其他运行在应用层的 SMTP 和 Telnet 等协议均可配合 SSL 协议使用。可以说 SSL 是当今世界上应用最为广泛的网络安全技术。

HTTPS 也存在一些问题，那就是当使用 SSL 时，它的处理速度会变慢。

SSL 的慢分两种。一种是指通信慢。另一种是指由于大量消耗 CPU 及内存等资源，导致处理速度变慢。另一点是SSL 必须进行加密处理。在服务器和客户端都需要进行加密和解密的运算处理。因此从结果上讲，比起 HTTP 会更多地消耗服务器和客户端的硬件资源，导致负载增强。

确认访问用户身份的认证

核对的信息通常是指以下这些。

  • 密码：只有本人才会知道的字符串信息。
  • 动态令牌：仅限本人持有的设备内显示的一次性密码。
  • 数字证书：仅限本人（终端）持有的信息。
  • 生物认证：指纹和虹膜等本人的生理信息。
  • IC卡等：仅限本人持有的信息。

HTTP/1.1使用的认证方式如下所示。

  • BASIC认证（基本认证）
  • DIGEST认证（摘要认证）
  • SSL客户端认证
  • FormBase认证（基于表单认证）

发表于 分类于

https://css-tricks.com/centering-css-complete-guide

以前也总结过一篇 CSS 居中，但是感觉那一篇结构有点乱，上面的这篇文章的结构和思路比较清楚，记录一下。

水平居中

对于 inline 属性的元素

让一个块级父元素包裹它，然后设置 text-align:center。

1
2
3
.center-children {
  text-align: center;
}

对于 inline 属性的元素如 inline, inline-block, inline-table, inline-flex 是有效的。

对于块级元素

赋予它 margin-left:auto 和 margin-right:auto 使其居中（它必须有确定的 width ，否则它将是全宽度不需要居中）。

1
2
3
.center-me {
  margin: 0 auto;
}

对于多个块级元素

如果想让多个块级元素在一行居中，最好是改变它们的 display 为 inline-block ，或者使用 flexbox。

1
2
3
4
5
6
7
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
1
2
3
4
.flex-center {
  display: flex;
  justify-content: center;
}

如果想让多个块级元素在一列居中，margin:0 auto 依然有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
main div {
  background: black;
  margin: 0 auto;
  color: white;
  padding: 15px;
  margin: 5px auto;
}

main div:nth-child(1) {
  width: 200px;
}
main div:nth-child(2) {
  width: 400px;
}

垂直居中

对于 inline 属性的元素

单行

对于标签来说，如 a 标签，包裹它的父元素的 padding-top 和 padding-bottom 相等就可以使它垂直居中。

1
2
3
4
.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

对于单行文本来说，让 height 和 line-height 相等即可。

1
2
3
4
5
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

因你而在

多行

使用 table 标签或者让它类似 table 的表现形式（借助 vertical-align）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

因你而在

或者使用 flexbox。

1
2
3
4
5
6
.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

对于块级元素

已知元素高度

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

未知元素高度

1
2
3
4
5
6
7
8
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

不介意增加父元素高度

Using tables or CSS display to make elements into tables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
main {
  background: white;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  padding: 20px;
  display: table;
}
main div {
  background: black;
  color: white;
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
}

使用 flexbox

1
2
3
4
5
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直居中

已知元素宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

未知元素宽高

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 flexbox

1
2
3
4
5
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 grid

This is just a little trick that will pretty much work for one element:

1
2
3
4
5
6
7
body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}