multipart/form-data

http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

当上传的字段是文件时，会有Content-Type来说明文件类型；

content-disposition，用来说明字段的一些信息；

由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，所以可以上传多个文件。

application/x-www-from-urlencoded

将表单内的数据转换为键值对，比如:name=Java&age = 23

只能上传键值对

binary

相当于Content-Type:application/octet-stream, 只可以上传二进制数据，通常用来上传文件，由于没有键值，所以一次只能上传一个文件。

原文

1. iso七层

   应用层-表示层-会话层-传输层-网络层-数据链路层-物理层

2. tcp/ip四层

   应用层————-传输层-网络层-数据链路层

3. Promise：好像一个容器，保存着某个未来才会结束的事件结果（一个异步操作）。

   promise对象代表一个异步操作，其结果有三种状态：pending（进行中）、resolved（fulfilled已完成）、rejected（已失败）

   Promise对象实例.then()/catch()

   ​

   异步执行函数，

   将原来的异步回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

   不然需要封装一个回调函数，当作参数传入需要异步执行的函数中去；但是如果有多层回调呢？如果回调本身又是一个异步操作，执行完也需要相应的回调函数，如果用老办法那就要封装N个回调函数，当作参数传给异步执行的函数中去。而用promise就可以在then方法中继续写promise对象并返回，继续调用then来进行回调操作。

   promise的精髓：状态，用维护状态，传递状态的方式来使回调函数能够及时调用

   resolve函数：将Promise对象的状态从Pending变为Resolved，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

   reject函数：将Promise对象的状态从Pending变为Rejected，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

   then()可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

   .catch(function(reason){})：两个作用：

   ​ 1.指定reject的回调函数。

   ​ 2.类似try/catch，可以捕获then方法中第一个参数（也就是异步函数执行resolve的回调函数）中的异常，reason就是异常信息，程序不会报错卡死，而是会进入到catch中

   .all([异步操作函数的数组]).then(function(results){})：可以并行执行多个异步函数，最终返回一个promise对象，多个异步操作的函数返回的数据放进一个数据传给then()，也就是results。应用场景：页面需要加载各种资源，都加载完后再进行页面的初始化。 等执行的最慢的异步函数执行完后执行回调。

   .race([异步操作函数的数组]).then(function(results){})：同all方法，只是all是等所有的异步操作完成再回调，也就是需要等最慢的执行完；race是最快的异步函数执行完后执行回调，当然，同时剩余的异步操作函数也在执行。

   Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

4. 跨终端

5. 移动端web app

   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

6. svg

7. 闭包的使用场景

   构造私有变量，使其不能在外部被随意更改，又可以通过指定的函数接口来操作，类似于私有变量的get、set方法

8. escape():对这些@ - _ + . /不编码，数字也不编码，返回的是字符的unicode编码值
   decodeURI():特殊字符不编码，

   比如：http://www.haorooms.com/My%20first/

   decodeURIComponent() ：特殊字符也编码;

   比如：http%3A%2F%2Fwww.haorooms.com%2FMy%20first%2F

9. 跨域：

   jsonp：只能get请求，因为是src里请求

10. bind()直接绑定在元素上，不人为地设置stopPropagation，就会一直向上冒泡触发所有祖先元素的该事件；不会绑定那些后来动态添加的元素；元素很多时会有效率问题。

    live()：$(‘a’).live(‘click’,function(){alert(‘That tickles!’)}) 全部绑定到document上，当有事件冒泡到document上，就查看该事件是否发生在a上的click事件，是的话则执行。相比较bind()可以动态绑定，即使这个元素是后来新加进来的。

    delegate()：更精确的可以在小范围绑定事件，跟bind相比实现动态绑定，但仍然需要查找在哪个元素上发生了事件。

    ​

11. 三次握手

    建立TCP连接需要三次握手, 而断开连接需要执行四次挥手.

    三次握手: 首先Client端发送连接请求报文，Server段接受连接后回复ACK报文，并为这次连接分配资源。Client端接收到ACK报文后也向Server段发生ACK报文，并分配资源，这样TCP连接就建立了。

    • 第一步: 客户机的TCP先向服务器的TCP发送一个连接请求报文. 这个特殊的报文中不含应用层数据, 其首部中的SYN标志位被置1. 另外, 客户机会随机选择一个起始序号seq=x(连接请求报文不携带数据,但要消耗掉一个序号)
    • 第二步: 服务器端的TCP收到连接请求报文后, 若同意建立连接, 就向客户机发送请求, 并为该TCP连接分配TCP缓存和变量. 在确认报文中,SYN和ACK位都被置为1, 确认号字段的值为x+1, 并且服务器随机产生起始序号seq=y(确认报文不携带数据, 但也要消耗掉一个序号). 确认报文同样不包含应用层数据.
    • 第三步: 当客户机收到确认报文后, 还要向服务器给出确认, 并且也要给该连接分配缓存和变量. 这个报文的ACK标志位被置为1, 序号字段为x+1, 确认号字段为y+1

    四次挥手

    • 第一步: 客户机打算关闭连接,就向其TCP发送一个连接释放报文,并停止再发送数据,主动关闭TCP连接, 该报文的FIN标志位被置1, seq=u, 它等于前面已经传送过的数据的最后一个字节的序号加1(FIN报文即使不携带数据,也要消耗掉一个序号)
    • 第二步: 服务器接收连接释放报文后即发出确认, 确认号是ack=u+1, 这个报文自己的序号是v, 等于它前面已传送过的数据的最后一个自己的序号加1. 此时, 从客户机到服务器这个方向的连接就释放了, TCP连接处于半关闭状态. 但服务器若发送数据, 客户机仍要接收, 即从服务器到客户机的连接仍未关闭.
    • 第三步: 若服务器已经没有了要向客户机发送的数据, 就通知TCP释放连接, 此时其发出FIN=1的连接释放报文
    • 第四步: 客户机收到连接释放报文后, 必须发出确认. 在确认报文中, ACK字段被置为1, 确认号ack=w+1, 序号seq=u+1. 此时, TCP连接还没有释放掉, 必须经过等待计时器设置的时间2MSL后, A才进入到连接关闭状态.

起源

早期是为了防止CSRF攻击，浏览器引入了同源策略来提高安全性。

同源策略如下：

浏览器在请求不同域的资源时，会因为同源策略的影响请求不成功

​ 之前看到说操作DOM很慢，要尽量少的去操作DOM。当时没有细究，以致于有时候写js还是会纠结，是直接操作DOM还是处理数据后refresh好一点。今天看到一篇文章，虽然还没能完全消化但也是学到不少，顺带着还get了Dev tools下的timeline的正确使用方式，在这里稍微整理一下：

一张页面是如何呈现出来的

简单来说，就是：

1. 解析HTML，生成一棵DOM tree
2. 解析css样式，结合DOM tree生成一棵Render tree。
   render tree 与DOM tree并不完全对应，一个简单的例子就是display:none的元素虽然存在于DOM tree中，但是因为不需要被绘制所以不会出现在render tree上。
3. 对Render tree的各个节点计算布局信息，比如box的位置与尺寸。
4. 利用浏览器的UI层对Render tree进行绘制。
   在明确了页面的呈现过程后，有个问题就呼之欲出了，那就是：

什么因素会影响页面的渲染速度

事实上，paint就是一个耗时的过程，而第三点中的layout是一个更为耗时的过程。
layout发生在页面渲染前，用来计算文档中DOM元素的位置和大小。第一次加载了html文档后就会进行layout操作，之后的js执行和css样式的改变也会触发浏览器去执行layout。甚至一次layout会牵涉到整个文档布局的重新计算。但是layout又无法避免，所以我们需要尽量少的去让游览器做layout。
一般情况下，浏览器的layout是lazy的，也就是说：在js脚本执行时，是不会去更新DOM的，任何对DOM的修改都会被暂存在一个队列中，在当前js的执行上下文完成执行后，会根据这个队列中的修改进行一次layout。然而有时候我们希望在js代码中立刻获取最新的DOM节点信息，这种情况下浏览器就不得不提前执行layout，这是导致DOM性能问题的主因。
一般来说，如下的操作会触发浏览器执行layout：

1. 通过js获取需要计算的DOM属性
2. 添加或删除DOM元素
3. resize浏览器窗口大小
4. 改变字体
5. css伪类的激活，比如:hover
6. 通过js修改DOM元素样式且该样式涉及到尺寸的改变

总结一下原型链里的一些基本概念：

首先我们要明确prototype和__proto__：

• 每个函数都有一个原型对象属性：prototype，它包含两个成员属性：constructor&__proto__

• 每个对象都有一个隐藏的__proto__属性，它引用了创建该对象的函数的prototype，即：

  foo.__proto__ === Foo.prototype，这里的__proto__成为”隐式原型”。

自定义函数的prototype

我们已经说过自定义函数都有一个原型对象属性，那 Foo.prototype就应该也有__proto__属性才对，那它的__proto__又是什么呢？

1
2

function Foo(){}
Foo.prototype.__proto__ === Object.prototype;

自定义函数Foo的prototype本质上跟var obj= {}一样都是被Object创建的，所以它的__proto__指向Object.prototype

自定义函数的__proto__

自定义函数也是一种对象呀，所以它肯定也有__proto__属性：

1
2

function Foo(){}
Foo.__proto__ === Function.prototype;

为什么呢？想想一般我们怎么创建函数：

1
2
3
4
5

function Foo(x,y){
	return x+y;
}
或者（虽然下面这种方式我们不推荐）：
var Foo = new Function("x","y","return x+y;")

可以看出，函数Foo是被Function创建出来的，所以Foo的__proto__指向Function的prototype

同理：

1

Object.__proto__ === Function.prototype

Object.prototype

再看一个例子：

1
2

var obj  = {};  // obj本质上是被Object函数创建的, var obj = new Object();
obj.__proto__ === Object.prototype;

同样，Object.prototype也是一个对象，那么它的__proto__对象又是什么呢？

这里需要注意的是：Object.prototype的__proto__指向的是null

Object的__proto__

1

Object.__proto__ === Function.prototype

最后贴一张图：

最近看了一些原型链的文章，发现对于经常在用的构造函数还是有一些模糊的地方，在这里稍微整理一下：
任何使用new关键字调用的函数都可当做是构造函数，命名规则上一般是首字母大写（普通函数采用驼峰命名法）
一个真正意义上的构造函数一般满足两个条件：

1. 在函数内部为新对象的属性和方法赋值；
2. 构造函数可以包含return，虽然不推荐。

先来看一个例子：

1
2
3
4

function Bar() {
    return 2;
}
new Bar(); // a new object：{}

再来一个例子：

1
2
3
4
5
6
7

function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
new Test(); // the returned object:{foo:1}

恩毫无压力？那再来一个：

1
2
3
4
5
6
7
8
9
10

function Foo(a, b){
    this.p = a + b;
    this.alertP = function(){
        alert(this.p);
    }
    return this.p;//此返回语句在Foo作为构造函数时没有意义
}
var foo = new Foo(2,3); //foo:{p:5;alertP:function(){alert(this.p)}}
foo.alertP();//结果为5
alert(Foo(2, 3)); //结果为5

上述的例子说明了构造函数的返回值：

• 有默认的返回值，即新创建的对象实例；
• 手动添加的返回值：
  • 基本数据类型：真正返回的是新创建的一个对象实例；
  • 引用类型：返回的是该对象。

那么使用new关键字到底发生了什么呢？其实就是四件事：

1
2
3
4

var obj  ={};   //创建一个空对象obj
obj.__proto__ = Foo.prototype;  //将这个空对象obj的__proto__成员指向构造函数Foo的prototype成员对象
Foo.call(obj); //将构造函数中的this对象赋给新对象
return obj; //返回新对象obj

其中第三行js高程是这么解释的：

将构造函数的作用域赋给新对象

看不懂==! 于是查了下原版：

Assign the this value of the constructor to the new object (so this points to the new object)

哦原来是说将构造函数中的this对象赋给新对象（所以this指向了新对象）

get !
@.@

前几天看flex布局又温习了下css的基础知识，果不其然又扫到了知识盲点，首当其冲的就是vertical-align和line-height。
恩感觉css其实是很有魅力的一个东西，就是你很容易入门自己写点东西出来，但是我敢说这种程度都是伴随着写代码时对一些属性取值的试探，哎这样没有效果？那试试这个。。。要达到对每个属性的表现都了然于胸还是要花些心思的。
先起个头吧，感觉有的地方还是很模糊，慢慢来完善。

vertical-align

先看一下css标准里对于line-height的解释：

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

取值（相对于inline元素）

• baseline
  元素基线与父元素的基线对齐。
• sub
  元素基线与父元素的下标基线对齐。
• super
  元素基线与父元素的上标基线对齐。
• text-top
  元素顶端与父元素字体的顶端对齐。
• text-bottom
  元素底端与父元素字体的底端对齐。
• middle
  元素中线与父元素的小写x中线对齐。
• <length>
  元素基线超过父元素的基线指定高度。可以取负值。
• <percentage>
  同 <length> ,vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

以下两个值是相对于整行来说的：

• top
  元素及其后代的顶端与整行的顶端对齐。
• bottom
  元素及其后代的底端与整行的底端对齐。

如果元素没有基线baseline，则以它的外边距的下边缘为基线。

当我们将图片内容和文字对齐时，默认是下边缘对齐，但是这样往往在下边会多出一个小空白行，这是因为块级元素内部的内联元素默认的垂直对齐方式是基线对齐（基线我的理解是英文字母书写中第三根线的位置（简直词穷==!），于是就会出现一个小空行，它的高度为文字的行高超出文字基线的距离。消除这个小空行的办法如下：

1. 让vertical-align失效
   图片默认是inline水平的，vertical-align对块状水平的元素无感，所以只要让图片由默认的inline变成block就可以了。·

   1 2 3

   img{ display:block;//默认是inline }

2. vertical-align赋其它值，默认是baseline对齐，改成top/middle/bottom即可。

3. 修改line-height的值：

   下面的空隙高度实际上是文字的行高超出文字基线的距离，因此只要行高足够小，行高在基线的上边，自然没有空隙。

4. 父元素设置font-size：0

作为上述内容的扩展，我们可以用vertical-align和和line-height实现任意尺寸的图片垂直居中的效果。

line-height

css标准里对于line-height的解释：

On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element.

On a non-replaced inline element, ‘line-height’ specifies the height that is used in the calculation of the line box height.

在一个块级容器中，如果它包含若干内联元素，则块级元素的line-height指定了内部line-boxes的最小高度。

对于非替代的行内元素，line-height用来计算line box(行内框)的高度。

line-height具有继承性

方法一：transform

1
2
3

.parent{
	position:relative;
}

1
2
3
4
5
6

.child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

方法二：使用flex布局

1
2
3
4
5
6
7
8

.parent{
  display:flex;
  align-items:center;  //垂直居中
  justify-content:center;  //水平居中
}
.child{
  //子元素可以设置拉伸系数等
}

任何一个容器都可以指定为Flex布局，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1
2
3

.box{
  display: flex;
}

行内元素也可以用:

1
2
3

.box{
  display: inline-flex;
}

这里顺便总结一下flex的常用属性：

• flex-direction：主轴的方向–> 水平排列还是垂直排列

  • row row-reverse | column | column-reverse
  • 横着排（主轴是水平）起点在左 | 起点在右端 | 竖着排，起点在上边| 起点在下边

• flex-wrap：如果一行拍不下是否要换行

  1 2	nowrap | wrap | wrap-reverse; 不换行 | 换行，第一行在上边 |换行，第一行在下边

• flex-flow: || 简写形式

• justify-content：在主轴（默认为水平）上的对齐方式

  • flex-start（默认值）：ABCooooooo
  • flex-end：oooooooABC
  • center： oooooABCooooo
  • space-between：AoBoC
  • space-around：oAooBooCo

• align-items：元素在交叉轴上如何对齐

  • flex-start：交叉轴的起点对齐（一排元素顶端对齐）
  • flex-end：交叉轴的终点对齐（一排元素底端对齐）
  • center：交叉轴的中点对齐。（一排元素中线对齐）
  • baseline: 一排元素的第一行文字的基线对齐。
  • stretch（默认）：如果元素未设置高度或设为auto，将占满整个容器的高度。（每个元素都纵向拉伸）

• align-content

参考阮大大的博客