- Js的几种基本数据类型
Undefined、Null、Boolean、Number和String。 - Post与get的区别
（参考：https://blog.csdn.net/qq_28483283/article/details/80207674）
（1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）
（2）post发送的数据更大（get有url长度限制）
（3）post能发送更多的数据类型（get只能发送ASCII字符）
（4）post比get慢
（5）post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据。
一、为什么get比post更快
1.post请求包含更多的请求头
post需要在请求的body部分包含数据，会多几个数据描述部分的首部字段（如：content-type）。
2.划重点，post在真正接收数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据
post请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回100 Continue响应
（5）浏览器发送数据
（6）服务器返回200 OK响应
get请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回200 OK响应
也就是说，目测get的总耗是post的2/3左右，这个口说无凭，网上已经有网友进行过测试。
3.get会将数据缓存起来，而post不会
使用ajax采用get方式请求静态数据（比如html页面，图片）的时候，如果两次传输的数据相同，第二次以后消耗的时间将会在10ms以内（chrome测试），而post每次消耗的时间都差不多。经测试，chrome和firefox如果检测到get请求的是静态资源，则会缓存，如果是数据，则不会缓存，但是IE什么都会缓存起来，当然，不用post去获取静态数据。
4.post不能进行管道化传输
http权威指南中：http的一次会话需要先建立tcp连接（大部分是tcp，但是其他安全协议也是可以的），然后才能通信，如果 每次连接都只进行一次http会话，那这个连接过程占的比例太大了！于是出现了持久连接：在http/1.0+中是connection首部中添加keep-alive值，在http/1.1中是在connection首部中添加persistent值，当然两者不仅仅是命名上的差别，http/1.1中，持久连接是默认的，除非显示在connection中添加close，否则持久连接不会关闭，而http/1.0+中则恰好相反，除非显示在connection首部中添加keep-alive，否则在接收数据包后连接就断开了。
出现了持久连接还不够，在http/1.1中，还有一种称为管道通信的方式进行速度优化：把需要发送到服务器上的所有请求放到输出队列中，在第一个请求发送出去后，不等到收到服务器的应答，第二个请求紧接着就发送出去，但是这样的方式有一个问题：不安全，如果一个管道中有10个连接，在发送出9个后，突然服务器告诉你，连接关闭了，此时客户端即使收到了前9个请求的答复，也会将这9个请求的内容清空，也就是说，白忙活了……此时，客户端的这9个请求需要重新发送。这对于幂等请求还好（比如get，多发送几次都没关系，每次都是相同的结果），如果是post这样的非幂等请求（比如支付的时候，多发送几次就惨了）。所以，post请求不能通过管道的方式进行通信！很有可能，post请求需要重新建立连接，这个过程不跟完全没优化的时候一样了么？所以，使用get请求通信用户体验会更好，使用post安全性会更好。
二、get传参最大长度的理解误区
1.总结
（1）http协议并未规定get和post的长度限制
（2）get的最大长度限制是因为浏览器和web服务器限制了URL的长度
（3）不同的浏览器和web服务器，限制的最大长度不一样
（4）要支持IE，则最大长度为2083byte，若支持Chrome，则最大长度8182byte
2.误解
（1）首先即使get有长度限制，也是限制的整个URL的长度，而不仅仅是参数值数据长度，http协议从未规定get/post的请求长度限制是多少
（2）所谓的请求长度限制是由浏览器和web服务器决定和设置的，各种浏览器和web服务器的设定均不一样，这依赖于各个浏览器厂家的规定或者可以根据web服务器的处理能力来设定。IE 和 Safari 浏览器 限制 2k，Opera 限制4k，Firefox 限制 8k（非常老的版本 256byte），如果超出了最大长度，大部分的服务器直接截断，也有一些服务器会报414错误。
3.各个浏览器和web服务器的最大长度总结
浏览器
（1）IE：IE浏览器（Microsoft Internet Explorer） 对url长度限制是2083（2K+53），超过这个限制，则自动截断（若是form提交则提交按钮不起作用）。
（2）firefox：firefox（火狐浏览器）的url长度限制为 65536字符，但实际上有效的URL最大长度不少于100,000个字符。
（3）chrome：chrome（谷歌）的url长度限制超过8182个字符返回本文开头时列出的错误。
（4）Safari：Safari的url长度限制至少为 80 000 字符。
（5）Opera：Opera 浏览器的url长度限制为190 000 字符。Opera9 地址栏中输入190000字符时依然能正常编辑。
服务器
（1）Apache：Apache能接受url长度限制为8 192 字符
（2）IIS：Microsoft Internet Information Server(IIS)能接受url长度限制为16384个字符。这个是可以通过修改的（IIS7）
configuration/system.webServer/security/requestFiltering/requestLimits@maxQueryStringsetting.
- 块元素与行内元素分别有什么？区别是什么
（参考：https://www.cnblogs.com/cui-ting/p/9884060.html）
块元素：
行内元素：
区别：
1.行内元素与块级元素直观上的区别
（1）行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
（2）块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
行内元素和块级元素转换
display:block; (字面意思表现形式设为块级元素)
display:inline; (字面意思表现形式设为行内元素)
- Css实现垂直居中与水平居中的六种方法
（参考：https://www.cnblogs.com/a-cat/p/9019184.html）
（1） 绝对定位方法：不确定当前div的宽度和高度，
采用 transform: translate(-50%,-50%);
当前div的父级添加相对定位（position: relative;）
代码：
div{
background:red;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
（2）绝对定位方法：确定当前div的宽度，margin左、上值为当前div宽度一半的负值
div{
width:600px;
height: 600px;
background:red;
position: absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-300px;
}
（3）绝对定位方法：绝对定位下top left right bottom 都设置0
代码：
代码如下：
.box{
height:800px;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
border:1px solid #ccc;
}
div.child{
width:600px;
height:600px;
background-color:red;
}
（5）table-cell实现: table-cell middle center组合使用
代码如下：
我爱你
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
（6）绝对定位：calc() 函数动态计算实现水平垂直居中
代码如下：
/css/
.calc{
position: relative;
border: 1px solid #ccc;
width:400px;
height: 160px;
}
.calc .child{
position: absolute;
width: 200px;
height: 50px;
left:-webkit-calc((400px - 200px)/2);
top:-webkit-calc((160px - 50px)/2);
left:-moz-calc((400px - 200px)/2);
top:-moz-calc((160px - 50px)/2);
left:calc((400px - 200px)/2);
top:calc((160px - 50px)/2);
}
- 盒子模型
（参考：https://zhuanlan.zhihu.com/p/74817089）
（1）概念
CSS盒模型本质上是一个盒子，封装周围的HTML元素。
它包括：
外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
（2）CSS盒模型：标准模型 + IE模型
a. W3C盒子模型(标准盒模型)
b. IE盒子模型(怪异盒模型)
（3）标准模型和IE模型的区别
a. 计算宽度和高度的不同。
标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。
（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ）
IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。
（ 即 width/height 包含了 padding 和 border 值 ）
（4）CSS如何设置这两种模型
标准：box-sizing: content-box; ( 浏览器默认设置 )
IE： box-sizing: border-box;
（5）JS如何获取盒模型对应的宽和高
dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
dom.currentStyle.width/height （只有IE兼容）取到的是最终渲染后的宽和高
window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9 以上支持。
dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离。
dom.offsetWidth/offsetHeight 包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。
（6）实例题（根据盒模型解释边距重叠）
例：父元素里面嵌套了一个子元素，已知子元素的高度是 100px，子元素与父元素的上边距是 10px，计算父元素的实际高度。
CSS:
.parents {
width: 100px;
background: #FF9934;
}
.child {
width: 100%;
height: 100px;
background: #336667;
margin-top: 10px;
}
Html:
BFC原理（渲染规则|布局规则）：
（1） 内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置；
（2）Box 垂直方向的距离由 margin (外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；
（3）每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；
（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float；
（5）BFC 的区域不会与 float Box 重叠（清浮动）;
（6）计算 BFC 的高度时，浮动元素也参与计算。
CSS在什么情况下会创建出BFC（即脱离文档流）
根元素，即 HTML 元素（最大的一个 BFC）
浮动（ float 的值不为 none ）
绝对定位元素（ position 的值为 absolute 或 fixed ）
行内块（ display 为 inline-block ）
表格单元（ display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性 )
弹性盒（ display 为 flex 或 inline-flex ）
默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）
BFC作用（使用场景）
自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
避免元素被浮动元素覆盖
可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内）
去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠
IFC
IFC基本概念
IFC: 行内格式化上下文
IFC基本概念：
IFC原理（渲染规则|布局规则）：
（1）内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置；
（2）这些 Box 之间的水平方向的 margin，border 和padding 都有效；
（3）Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认，文本与图片对其），例：line-heigth 与 vertical-align。
- Vue的生命周期
（1）vue的生命周期是什么
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:
beforeCreate
created
beforeMount
mounted
(
beforeUpdate
updated
)
beforeDestroy
destroyed
（2）vue生命周期的在项目中的执行顺序
…
data () {
return {
rendered: false,
}
}
…
1.beforeCeate(){
console.log(this.rendered); // undefined
}
2.created() {
console.log(this.$el);//undefined
console.log(this.rendered); // false
}
3.beforeMount() {
console.log(this.$el)；//undefined
}
4.mounted() {
console.log(this.$el);
}
5.beforeDestroy(){
console.log(this.$el);
console.log(this.rendered);
}
6.destroyed() {
console.log(this.$el);
console.log(this.rendered);
}
（3）vue中内置的方法、属性和vue生命周期的运行顺序（methods、computed、data、watch、props)
从第一二点可知道data的初始化是在created时已经完成数据观测(data observer)，并且诸如methods、computed属性 props等已经初始化；
data props computed watch methods他们之间的生成顺序是什么呢？
根据翻看vue源码可知：
props => methods =>data => computed => watch;
（4）自己构造的方法与vue生命周期的运行顺序 如show这些
往往我们在开发项目时都经常用到 KaTeX parse error: Expected '}', got 'EOF' at end of input: …es=>{ this.refs.child.show(res);
})
}
…
（5）总结
vue 的生命周期，总得来说就是实例的创建和销毁这段时间的一个机制。即vue框架的数据间的交互通信。
- Cookie、localStorage、sessionStorage
（参考：https://www.cnblogs.com/yaogengzhu/p/11006547.html）
（1）cookie
cookie英文饼干，顾名思义，大小应该非常小，cookie非常小，它的大小限制在4kb左右，是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如你登陆某个网站市场可以看到’记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的。
（2）localStorage
localStorage是HTML5标准中新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用flash。如今localStorage被大多数浏览器所支持。
（3）sessionStorage
sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同，做过后端的同学都知道Session这个词，翻译过来就是会话。而sessionStorage是前端的一个概念。它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是叶敏啊关闭后，sessionStorage中的数据就会被清空。
三者的异同
数据上的生命周期的不同
Cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭后失效。
localStorage 除非被永久清除，否则永久保存。
sessionStorage 仅在当前会话会有效，关闭页面或浏览器后被清除
存放数据的大小不同
Cookie 一般为4kb
localStorage 和 sessionStorage 一般为5mb
与服务器端通信不同
Cookie 每次都会携带HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage 和 sessionStorage 仅在客户端（即浏览器）中保存，不参与和服务器的通信。
易用性
Cookie 需要程序员自己来封装，原生的cookie接口不够友好
localStorage 和 sessionStorage 原生接口可以接受，可以封装来对Object和Array有更好的支持。
应用场景
因为考虑到每个HTTP请求都会带着Cookie的信息，所以Cookie当然能是精简就精简力，比较常用的一个应用场景就是判断用户是否登陆，针对登陆过的用户服务端就在它登陆时往Cookie中祝福一段加密过的唯一识别单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登陆。曾经还使用Cookie来保存用户在电商网站上的购物车信息，如今有来localStorage
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
