一、HTTP：

1. POST、GET区别

HTTP POST GET 本质区别详解
一 原理区别
根据HTTP规范，GET用于信息获取，而且应该是安全的和幂等的 。

1. 所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET请求一般不应产生副作用。就是说，它仅仅是获取资源信息，就像数据库查询一样，不会修改，增加数据，不会影响资源的状态。

注意：这里安全的含义仅仅是指是非修改信息。

2. 幂等的意味着对同一URL的多个请求应该返回同样的结果。
   根据HTTP规范，POST表示可能修改变服务器上的资源的请求 。继续引用上面的例子：还是新闻以网站为例，读者对新闻发表自己的评论应该通过POST实现，因为在评论提交后站点的资源已经不同了，或者说资源被修改了。

二 表现形式区别

• （1）GET提交，请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，多个参数用&连接；例如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如： %E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
  POST提交：把提交的数据放置在是HTTP包的包体中。上文示例中红色字体标明的就是实际的传输数据
  因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变
• (2)传输数据的大小：首先声明：HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制。
  而在实际开发中存在的限制主要有：
  GET:特定浏览器和服务器对URL长度有限制，例如IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。
  因此对于GET提交时，传输数据就会受到URL长度的限制。
  POST:由于不是通过URL传值，理论上数据不受限。但实际各个WEB服务器会规定对post提交数据大小进行限制，Apache、IIS6都有各自的配置。
• (3)安全性：
  .POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这 里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存， (2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击
• (4)Http get,post,soap协议都是在http上运行的

1）get：请求参数是作为一个key/value对的序列（查询字符串）附加到URL上的

查询字符串的长度受到web浏览器和web服务器的限制（如IE最多支持2048个字符），不适合传输大型数据集同时，它很不安全

2）post：请求参数是在http标题的一个不同部分（名为entity body）传输的，这一部分用来传输表单信息，因此必须将Content-type设置为:application/x-www-form-urlencoded。post设计用来支持web窗体上的用户字段，其参数也是作为key/value对传输。
但是：它不支持复杂数据类型，因为post没有定义传输数据结构的语义和规则。

3）soap：是http post的一个专用版本，遵循一种特殊的xml消息格式
Content-type设置为: text/xml 任何数据都可以xml化

2. 不同的操作系统、不同的浏览器、不同的网页字符集，将导致完全不同的编码结果。有没有办法，能够保证客户端只用一种编码方法向服务器发出请求？

关于URL编码：

• 网址路径（/汉字）的编码，用的是utf-8编码。
• 查询字符串的编码，用的是操作系统的默认编码。
• 在已打开的网页上，直接用Get或Post方法发出HTTP请求。这时的编码方法由网页的编码决定，也就是由HTML源码中字符集的设定决定。
  <meta http-equiv="Content-Type" content="text/html;charset=xxxx">
  GET和POST方法的编码，用的是网页的编码。
• 在Ajax调用中，IE总是采用GB2312编码（操作系统的默认编码），而Firefox总是采用utf-8编码。这就是我们的结论4。

Javascript语言用于编码的函数，一共有三个，最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了，但是由于历史原因，很多地方还在使用它，所以有必要先从它讲起。

首先，无论网页的原始编码是什么，一旦被Javascript编码，就都变为unicode字符。也就是说，Javascipt函数的输入和输出，默认都是Unicode字符。三个函数都适用。

• 实际上，escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282，也就是说在Unicode字符集中，"春"是第6625个（十六进制）字符，"节"是第8282个（十六进制）字符。
  它的具体规则是，除了ASCII字母、数字、标点符号"@ * _ + - . /"以外，对其他所有字符进行编码。在\u0000到\u00ff之间的符号被转成%xx的形式，其余符号被转成%uxxxx的形式。

escape: escape 不会编码的字符：@*/+ escape方法不回编码+字符，+字符在服务器端会被解释成空格，这点和通过表达提交一样。 由于escape有这样的缺点，和它不能很好的正确处理非ASCII字符的事实，我们应该尽量避免（对URI）使用escape，最好的方式是encodeURIComponent。

• encodeURI()是Javascript中真正用来对URL编码的函数。
  它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #"，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。
• 最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。
  因此，"; / ? : @ & = + $ , #"，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。

application/x-www-form-urlencoded，multipart/formdata区别

四种常见的 POST 提交数据方式

我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。

<method> <request-URL> <version>
<headers>
<entity-body>

协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。
但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到 POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

application/json
application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。
JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。

Http Header里的Content-Type

Http Header里的Content-Type一般有这三种：
application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式。
multipart/form-data： 数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
text/plain： 数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。postman软件里标的是RAW。

form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串追加到url后面，用?分割，加载这个新的url。

当action为post时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file`的话，就要用到multipart/form-data了。

当action为post且Content-Type类型是multipart/form-data，浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

二、HTML：

行内元素有哪些？块级元素有哪些？

标签上title与alt属性的区别是什么？

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方;
title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover，你可以自己试试，另外，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的;

表单控件标签都有哪些？

Html表单标签
1，form标签

<form>：创建表单，该元素不会生成可视化的界面，但是其他控件都必须放在这个标签里面。
2，input标签

<input>元素是表单控件中功能最丰富的，下面的多种输入元素都是通过这个标签来生成的。
3，列表框和下拉菜单

<select>用于创建列表框和下拉菜单，该元素必须和<option>结合使用，每个<option>代表一个列表项或者一个菜单项 经常用到2个属性，disabled，用于设置禁用该列表框和下拉菜单。 multiple：用于设置是否多选。 值得注意的是：一个<select>到底是生成列表框还是生成下拉菜单，是由上面这2个元素来决定的。要是指定了size或者multiple，那么就生成了列表框，否则就是下拉菜单。 <option>：一个选项。value表示请求参数值，disabled这个选项是否禁用，selected，这个选项是否选中 <optgroup>：一个选项组。label，必填，用来指定这个选项组的标签。
4，使用textarea定义文本域

<textarea>：用于在html中定义多行文本域，2个属性必填，cols和rows，用于指定文本域的宽度和高度。多行文本域比较特殊，除了普通的事件属性，他还可以指定onselect属性，用于表示文本域里面的内容被选中时候的事件。
5，使用label定义标签

<label>用于在表单元素中定义标签，这些标签只是对其他可以生成请求参数的控件来做说明的，本身是不会产生请求参数的，所以不要为<label>元素指定value的属性值。
6，使用button定义按钮

<botton>元素用于定义一个按钮，在这个标签的内部可以包含普通的文本，文本格式化标签，图像等内容，这也就是<button>和<input>按钮的不同之处。

为何要写DOCTYPE以及各类meta标签？

移动前端不得不了解的HTML5 head 头标签（2016最新版）:
HTML的头部内容特别多，有针对SEO的头部信息，也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta，link等标签的功能属性显得非常重要。

• DOCTYPE
  DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html
  标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
  使用 HTML5 doctype，不区分大小写。
• Meta 标签
  meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的 <head> 和 <title>标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的meta标签可以大大提升网站页面的可用性。
  桌面端开发中，meta标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。
  移动端开发中，meta标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。
• meta标签分类
  meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。
  http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

(X-UA-Compatible是针对ie8新加的一个设置，也就是说只有浏览器是ie8或者以上时，才认识这个标识。https://www.nihaoshijie.com.cn/index.php/archives/353 )
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
chrome=1则可以激活Chrome Frame[1]
。这时，edge的意思就是用当前最新的标准来渲染，由于当前最新的是ie8，所以用的ie8来渲染。
1. 如果我们使用content=”IE=8″或者content=”IE=9″等这样不带Emulate的标识，那么浏览器将会忽略你所设置的<doctype>，直接按照你x-ua-compatible定义的标准模式来渲染。
2. 如果我们使用content=”IE=EmulateIE8″或者content=”IE=EmulateIE9″这样的标识，那么浏览器会先查找你定义的<doctype>，如果你定义的<doctype>正确，将会按照x-ua-compatible定义的标准模式来渲染，如果你的<doctype>错误或者没有，将会以Quirks模式来渲染。

name属性：主要用于描述网页，与之对应的属性值为content，content中的内 容主要是便于浏览器，搜索引擎等机器人识别，等等。

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<meta http-equiv="Content-Security-Policy" content="default-src 'self'">



<meta name="application-name" content="应用名称">


<meta name="description" content="一个页面描述">

<meta name="robots" content="index,follow,noodp">
<meta name="googlebot" content="index,follow">

<meta name="google" content="nositelinkssearchbox">

<meta name="google" content="notranslate">

<meta name="google-site-verification" content="verification_token">

##三、CSS：
###1. 盒子模型
###2. 有哪些方式实现动画？
###3. 水平、垂直居中有哪些方法？
###4. float不会撑开父元素的高度，有什么解决方法？
###5. px、pt、em、rem、vh、vw等都是什么有什么区别？
###6. 不用JS如何实现一个宽度100%的方形div？
https://idiotwu.me/css-responsive-square/ 
* 方案一：CSS3 vw 单位
CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width,vh是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin 是相对当前视口宽高中 较小的一个的百分比单位，同理 vmax是相对当前视口宽高中 较大的一个的百分比单位。

.placeholder { width: 100%; height: 100vw;}

* 方案二：设置垂直方向的 padding 撑开容器
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 **父元素宽度**的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding值设定为与 width 相同的百分比就可以制作出自适应正方形了

page {

border: 1px solid red;
width: 100%;
padding-bottom: 100%;
height: 0;
}

* 方案三：利用伪元素的 margin(padding)-top 撑开容器:在方案二中，我们利用百分比数值的 padding-bottom 属性撑开容器内部空间，但是这样做会导致在元素上设置的 max-height 属性失效：

page {

border: 1px solid red;
width: 100%;
/* max-height:10px; */
}

page:after{

content: '';
display: block;
margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

这里就涉及到 [margin collapse](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) 的概念了，由于容器与伪元素在垂直方向发生了外边距折叠，所以我们想象中的**撑开父元素高度**并没有出现。而应对的方法是在父元素上触发 BFC：overflow: hidden;
完美！什么？你说元素内部添加内容时高度会溢出？~~来人，把这个叛徒拖出去喂狗！~~对于这样的情况，可以将内容放到独立的内容块中，利用绝对定位消除空间占用。

##四、JS：
###1. 描述一下JS中变量的作用域
[理解 Javascript 作用域和作用域链](https://zilongshanren.com/blog/2016-03-13-understand-javascript-scope-and-scope-chain.html)
Javascript 作用域

>在 Javascript 中，只有局部作用域和全局作用域。而只有函数可以创建局部作用域，像 if，for 或者 while 这种块语句是没办法创建作用域的。 （当然 ES6 提供了 let 关键字可以创建块作用域。）

Javascript 作用域链
>当 Js 里面 **声明** 一个函数的时候，会给该函数对象创建一个 scope 属性，该属性指向当前作用域链对象。
当 Js 里面 **调用** 一个函数的时候，会创建一个执行上下文，这个执行上下文定义了函数解释执行时的环境信息。每个执行上下文都有自己的作用域链，主要用于变量标识符的解析。
在 Js 引擎运行一个函数的时候，它首先会把该函数的 scope 属性添加到执行上下文的作用域链上面，然后再创建一个 **活动对象** 添加到此作用域顶端共同组成了新的作用域链。活动对象包含了该函数的所有的形参，arguments 对象，所有的局变变量等信息。
当解释执行函数的每一条语句的时，会依据这个执行上下文的作用域链来查找标识符，如果在一个作用域对象上面没有找到标识符，则会沿着作用链一直向上查找，这一点类似于 Js 的原型继承的属性查找机制。

###描述一下JS中如何面向对象以及函数调用中的this到底是什么
面向对象： 通过类可以创建任意多个具有相同属性和方法的对象。
[阮 Javascript 面向对象编程](http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html)
封装
继承
###为何我们常常把 <script> 放在html的最后？

js的执行会阻塞页面的渲染
Javascript 是执行顺序是至上而下的，除非你特别说明，Javascript 代码不会等到页面加载完毕后才执行。

###AJAX什么样的情况算跨域？有哪些解决方法？
只要协议、域名、端口有任何一个不同，都被当作是不同的域。
![](http://upload-images.jianshu.io/upload_images/2579285-307248d730858937.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
jsonp
CORS
jsonp:原生js实现

function ajax(options) {
options = options || {};
if (!options.url || !options.callback) {
throw new Error("参数不合法");
}

//创建 script 标签并加入到页面中
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
options.data[options.callback] = callbackName;
var params = formatParams(options.data);
var oS = document.createElement('script');
oHead.appendChild(oS);
console.log(callbackName);
//创建jsonp回调函数
window[callbackName] = function(json) {
oHead.removeChild(oS);
clearTimeout(oS.timer);
window[callbackName] = null;
options.success && options.success(json);
};

//发送请求
oS.src = options.url + '?' + params;

//超时处理
if (options.time) {
oS.timer = setTimeout(function() {
window[callbackName] = null;
oHead.removeChild(oS);
options.fail && options.fail({
message: "超时"
});
}, time);
}
};

//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
return arr.join('&');
}
ajax({
url: "aa",
callback: "process",
data: {
name: "s"
}
})

###描述一下JSONP的原理(上题)
###Promise
[理解 Promise 的工作原理](https://blog.coding.net/blog/how-do-promises-work)
什么是 Promise
一个 Promise 对象代表一个目前还不可用，但是在未来的某个时间点可以被解析的值。它允许你以一种同步的方式编写异步代码。例如，如果你想要使用 Promise API 异步调用一个远程的服务器，你需要创建一个代表数据将会在未来由 Web 服务返回的 Promise 对象。唯一的问题是目前数据还不可用。当请求完成并从服务器返回时数据将变为可用数据。在此期间，Promise 对象将扮演一个真实数据的代理角色。接下来，你可以在 Promise 对象上绑定一个回调函数，一旦真实数据变得可用这个回调函数将会被调用。

Promises 将嵌套的 callback，改造成一系列的.then的连缀调用，去除了层层缩进的糟糕代码风格。Promises 不是一种解决具体问题的算法，而已一种更好的代码组织模式。接受新的组织模式同时，也逐渐以全新的视角来理解异步调用。
[Promise原理浅析](http://imweb.io/topic/565af932bb6a753a136242b0)
发布订阅

###WebSocket、Long Polling、Server Sent Event
[WebSocket 是什么原理？为什么可以实现持久连接？](https://www.zhihu.com/question/20215561/answer/40316953)

首先Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。

* ajax轮询
首先是 ajax轮询 ，ajax轮询 的原理非常简单，**让浏览器隔个几秒就发送一次请求**，询问服务器是否有新信息。

* long poll 
long poll 其实原理跟 ajax轮询 差不多，**都是采用轮询的方式**，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，**客户端再次建立连接，周而复始**。
* [为什么HTML5中的Server-sent Event没有被广泛使用](http://www.liuzhixiang.com/2014/12/18/HTTP-Server-sent/): Server sent-Event 像是long polling的升级版，在客户端发起请求后，服务端不断开连接，而是在有消息是向客户端不断写入消息。Server-sent Event有客户端的支持: EventSource。
* WebSocket
从上面可以看出其实这两种方式，**都是在不断地建立HTTP连接**，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性。
何为被动性呢，其实就是，服务端不能主动联系客户端，只能有客户端发起。'

使用WebSocket： **一旦WebSocket握手成功，服务器与客房端将会呈现对等的效果，都能接收和发送信息。**

[HTML5—WebSocket协议 #2](https://github.com/S-iscoming/myapp/issues/2)
###es6主要都有哪些语法特性？stage-0/1/2/3又是什么？
[前端开发者不得不知的ES6十大特性](http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten-properties/)
以下是ES6排名前十的最佳特性列表（排名不分先后）：
>Default Parameters（默认参数） in ES6
Template Literals （模板文本）in ES6
Multi-line Strings （多行字符串）in ES6
Destructuring Assignment （解构赋值）in ES6
Enhanced Object Literals （增强的对象文本）in ES6
Arrow Functions （箭头函数）in ES6
Promises in ES6
Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
Classes（类） in ES6
Modules（模块） in ES6

stage不同阶段的区别[https://www.vanadis.cn/2017/03/18/babel-stage-x/](https://www.vanadis.cn/2017/03/18/babel-stage-x/): 
>es7不同阶段语法提案的转码规则模块（共有4个阶段），分别是stage-0，stage-1，stage-2，stage-3。
* stage-0
stage-0的功能范围最广大，包含stage-1, stage-2以及stage-3的所有功能，同时还另外支持如下两个功能插件：
[transform-do-expressions](https://babeljs.io/docs/plugins/transform-do-expressions)
[transform-function-bind](http://babeljs.io/docs/plugins/transform-function-bind/)
* stage-1
stage-1除了包含stage-2和stage-3，还包含了下面4个插件：
[transform-class-constructor-call](http://babeljs.io/docs/plugins/transform-class-constructor-call/)
[transform-class-properties](http://babeljs.io/docs/plugins/transform-class-properties/)
[transform-decorators](http://babeljs.io/docs/plugins/transform-decorators/)
[transform-export-extensions](http://babeljs.io/docs/plugins/transform-export-extensions/)
...