2018-03-26 腾讯电面

1、Jsonp的原理，如何利用Jsonp发送post请求？

JSONP动态插入<script>元素，为其src属性指定一个跨域URL；包含在回调函数中的JSON数据。与ajax无关，算是一种内容注入，所以存在一定的安全问题。

流程：客户端发送的src的网址中利用查询字符串传递一个查询参数--callback；服务端得到这个callback的名字后，会利用js语法生成一个function，function的名字就是这个回调函数，将要返回的内容用json格式包装起来，放置到函数中，返回给客户端；客户端解析<script>标签，执行返回的js文档。

JSONP默认只支持get方法，JSONP发送post请求：方法一：如果是利用jquery的话

客户端更改：

添加：crossDomain: true

修改：dataType: "json"

服务端添加：

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: POST');

方法二：在查询字符串中添加一个标记字符串，比如tag=post；与服务器端约定，当接收到这个标记时，将get请求转化为post请求。

2、get和post的区别

（1）使用Get请求时,参数在URL中显示,而使用Post请求,则不会显示出来；

（2）Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节. 

（3）Get请求需注意缓存问题,Post请求不需担心这个问题； 

（4）Post请求必须设置Content-Type； 

（5）发送请求时,因为Get请求的参数都在url里,所以send函数发送的参数为null,而Post请求在使用send方法时,却需赋予其参数； 

（6）GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。 

3、cookie和localStorage的区别

cookie：为了辨别用户身份，存储在用户本地终端的数据。分为：（1）内存cookie：保存在内存中，由浏览器维护，关闭浏览器则消失（2）硬盘cookie：保存在硬盘中，除非手动清理或过期，否则不会消失。

服务器可以设置或读取 Cookies 中包含的信息，借此维护用户跟服务器会话中的状态。因为 HTTP 协议是无状态的，就是说服务器不知道用户上一次做了什么，为实现交互，就用 Cookie 来记录。

cookie的缺点：（1）Cookie 会被附加到每个 HTTP 请求中，无形增加了流量

                         （2）HTTP请求中的 Cookie 是明文传递，安全性成问题。（HTTPS 不会）

                         （3）Cookie 大小限制在 4KB，对于复杂的存储需求是不够用的

cookie和storage的区别

附加讨论：cookie和session的区别

1，session 在服务器端，cookie 在客户端（浏览器）

2，session 默认被存在在服务器的一个文件里（不是内存）

3，session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 session_id）

4，session 可以放在 文件、数据库、或内存中都可以。

5，用户验证这种场合一般会用 session

因此，维持一个会话的核心就是客户端的唯一标识，即 session id。可以通过cookie加密的形式取代session。

4、说说有哪些http状态码，304状态码

5、缓存的过程原理

浏览器和服务器如何标记网站页面更新的机制

Cache-Control优先级高于Expires

请求头：If-Modify-Since 搭配 响应头：last-Modified

请求头：If-None-Match 搭配 响应头：Etag（资源唯一标识符）

Etag优先级高于last-Modified

Cache-Control里有一个max-age，缓存的最大保存时间。

6、详细说明一下，当刷新一个浏览器页面时，缓存是如何工作的

max-age，Etag，last-Modified

Etag唯一资源标识符是如何生成的？（利用MD5，会根据文件内容生成对应的编码，并且当文件内容改变时，编码自动改变。）

7、transition和animation的区别——css3动画

transition：属性过渡；需要用户行为触发过渡，比如:hover,:focus,

animation：通过关键帧@keyframe来制作动画，不需要触发

8、安卓和ios的兼容性问题

淘宝的flexible解决方案：

ib-flexible库的使用方法非常的简单，只需要在Web页面中添加对应的flexible_css.js,flexible.js文件：在所有资源加载之前执行这个JS。执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。

自己的实现：首先利用media进行屏幕响应，其次，在根元素伤设置rem尺寸，则全部使用rem，都能响应。

9、如何实现水平、垂直居中

10、盒子模型

11、git如何合并分支

git merge;合并之后才能够提交。