1.JSONP 的工作原理是什么？
2.form-data、x-www-form-urlencoded的区别?
3.http协议是无状态的，无连接的中的【状态】到底指的是什么？
4.http协议是无状态的，无连接的中的【无连接】到底是什么意思？
5.HTTP1.0 HTTP 1.1 HTTP 2.0主要区别？
6.浏览器newwork面板的认识？
7.关于设置http响应头connection的作用?
8.Timeline了解？
1.JSONP 的工作原理是什么？
1.Ajax直接请求普通文件存在跨域无权限访问的问题：甭管你是静态页(只需要客户端渲染的)、动态网页(需要请求动态资源，需要服务器端逻辑处理或者访问数据库再返回客户端)。只要是跨域请求，一律不准。
2.Web页面上调用js文件时则不受是否跨域的影响（凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）。
3.如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。 JSON数据格式可以简洁的描述复杂数据。
4.web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件，显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。
5.JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
6.这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。
<script type="text/javascript">
// 得到查询结果后的回调函数
var flightHandler = function(data){
alert('票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
jquery实现跨域
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>
总而言之，jsonp不是ajax的一个特例。ajax和jsonp这两种技术在调用方式上"看起来"很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理。但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
2.form-data、x-www-form-urlencoded的区别
multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。
application/x-www-form-urlencoded上传键值对，并且是默认的MIME内容编码类型
一个表单：name和email
| field value |
| name: ryan ou |
| email: ryan@rhythmtechnology.com |
在 application/x-www-form-urlencoded 消息中:
......
name=ryan+ou&email=ryan@rhythmtechnology.com
......
在 multipart/form-data 消息中:
......
-----------------------------7cd1d6371ec
Content-Disposition: form-data; name="name"
ryan ou
-----------------------------7cd1d6371ec
Content-Disposition: form-data; name="email"
ryan@rhythmtechnology.com
......
3.http协议是无状态的，无连接的中的【状态】到底指的是什么？
标准的http协议指的是不包括cookies, session，application的http协议
1.对于【无状态】的模糊说法
a.协议对于事务处理没有记忆能力【事物处理】【记忆能力】
b.对同一个url请求没有上下文关系【上下文关系】
c.每次的请求都是独立的，它的执行情况和结果与前面的请求和之后的请求是无直接关系的，它不会受前面的请求应答情况直接影响，也不会直接影响后面的请求应答情况【无直接联系】
d.服务器中没有保存客户端的状态，客户端必须每次带上自己的状态去请求服务器【状态】这个自己的状态确切是什么？
2.思考
应用程序的交互是需要承前启后的，简单的购物车程序也要知道用户到底在之前选择了什么商品，那么无状态就不能实现购物车呢？服务器就不能存储东西了么？
3.模拟访问实验：当一个注册用户访问这个购物网站的时候，会发生过程
1.前提情况：
I.服务器肯定为每个注册用户建立了数据表，记录用户的数据
II.http是无连接的
2.第一步需要登录
I.用户通过http把用户的用户名和密码发送给服务器，服务器把他们跟自己存有的用户资料对比，如果一致，则返回信息登录成功
3.然后用户点击某一商品页
I.这个动作相当于输入一个商品页的网址
II.假如商品页比较机密不对外公开，需要是用户才能访问
III.而虽然http能传送用户名和密码，而且刚才也输入了，还验证成功了，但是因为服务器既不会记得你登录的状态，你的客户端也不会存储
V.你刚才输入的用户名和密码(所以因为这一次访问因为无法确定你的身份，只能访问失败这时候如果要解决这个问题，而且没有cookie没有session，那就只能你在访问网址的同时继续带上你的用户名和密码)
4.假设上一步的问题解决了，就是每次访问的时候都会手动输入用户名和密码，然后现在的情况是：你已经选了几件商品在你的购物车中，你想再添加一件商品，于是你点击某个商品旁边的加号
I.这个动作也相当于输入一个网址，网址的内容是发送一个请求，往你的购物车中加入这个商品
II.系统首先用你传来的用户名和密码验证你的身份，然后访问你的数据库，在其中的购物车属性下加一条数据，就是这个商品的数据
III.操作结束后，返回操作成功，并结束访问
5.实验结束，思考这种方法带来的3个问题
I.你每访问一次需要权限的内容都需要在客户端输入用户名和密码，这一项的繁琐就不必赘述了
II.你的每一次操作都要与系统底层的数据库进行交互（多次少量的访问存在非常大的性能浪费。所以一次大量的操作更加有效率，于是就想到了缓存区）
III.一些非重要琐碎数据也被写进数据库中，跟你的主要数据放在一起
4.在http的基础上增加一些机制来解决上面出现的三个问题
1.在用户端增加一个记录本，正好和官方加入的cookie机制一样。一般就是用来标识访问者的身份；
2.在服务器增加一个缓存区，有了缓存区作为一个数据缓冲，就不用一次次地访问数据库，浪费大量计算机资源，最后统一归入数据库；有了缓存区，不用把临时的数据放到数据库中了，只需要在你们交流告一段落之后，再把数据整理，把有用的数据归入数据库；
3.会话，它作为一个缓冲存储区被从数据库中分离出来，这个东西和官方加入的session机制一样；
5.对session的理解
1.给每个session一个ID，一方面用来方便自己查询，另一方面把这个ID给用户，下一次访问的时候就可以不用用户名和密码，而是直接使用这个ID来表明自己的身份
2.sessionID的安全性跟使用用户名和密码什么区别
1.不严格加密的sessionID和用户名和密码一样，都不太安全（虽然http本身不能加密，但是有些软件，能在应用层面加密，比如QQ就会使用户名密码加临时验证码联合哈希，sessionID加一个时间戳简单加密也是非常常用的方法）
2.但是相比较来说，sessionID要安全一些（因为sessionID本身有有效期，即使丢了，也可能很快失效，造成的损失可能没那么大，而用户名跟密码丢了，那就大了）
3.而使用https是完全安全的
3.使用sessionID有哪些好处
1.方便直接根据ID查询用户对应的session
2.加密的时候计算量小
3.安全性不会降低，甚至还更高一些
这个无状态指的是什么
所以状态不仅包括不同URL访问之间的关系（同一个用户发出的http连接之间的同主人关系，这里解决了一个保持登录状态的问题），还有对其他URL访问的数据记录，还有一些其他的东西。
总结：客户端和服务器在临时会话中产生的数据！给HTTP加了cookie和session机制，让使用http的应用也能有状态，但http还是无状态
Cookie是客户端的存储空间，由浏览器来维持，在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。同时由于在服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制来达到保存标识的目的，但实际上还有其他选择，比如说重写URL和隐藏表单域。
HTTP 协议无状态优缺点
优点在于解放了服务器，每一次请求不会造成不必要连接占用
缺点在于每次请求会传输大量重复的内容信息。
4.http协议是无状态的，无连接的中的【无连接】到底是什么意思？
无连接：服务器处理完客户的请求，并收到客户的应答后，即断开连接。
无连接的含义是限制每次连接只处理一个请求。然后再挨个处理访问队列里的访问。无连接设计是为以尽快将资源释放出来服务其他客户端。
HTTP/1.0：持久连接被提出来；TCP连接服务器多次请求：客户端会在请求Header中携带Connection:Keep-Alive;向服务器请求持久连接，如果服务端允许就会在响应报文中加上相同的字段；
HTTP/1.1：持久连接成了默认的连接方式；同时持久连接的弊病也展现出来，即所有的连接都是串行的，当某一个请求阻塞时就会导致同一条连接的后续请求被阻塞；
5.HTTP1.0 HTTP 1.1 HTTP 2.0主要区别？
HTTP1.0 HTTP 1.1
1.HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接，而HTTP1.1默认支持长连接。
HTTP是基于TCP/IP协议的，创建一个TCP连接是需要经过三次握手的,有一定的开销，如果每次通讯都要重新建立连接的话，对性能有影响。因此最好能维持一个长连接，可以用个长连接来发多个请求。
2.节约带宽
HTTP 1.1支持只发送header信息(不带任何body信息)，如果服务器认为客户端有权限请求服务器，则返回100，否则返回401。客户端如果接受到100，才开始把请求body发送到服务器。这样当服务器返回401的时候，客户端就可以不用发送请求body了，节约了带宽。
3.HOST域：设置虚拟站点
web server上的多个虚拟站点可以共享同一个ip。HTTP1.0是没有host域的，HTTP1.1才支持这个参数。
HTTP1.1 HTTP 2.0主要区别
1.多路复用
HTTP2.0使用了多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级。当然HTTP1.1也可以多建立几个TCP连接，来支持处理更多并发的请求，但是创建TCP连接本身也是有开销的。TCP连接有一个预热和保护的过程，先检查数据是否传送成功，一旦成功过，则慢慢加大传输速度。因此对应瞬时并发的连接，服务器的响应就会变慢。所以最好能使用一个建立好的连接，并且这个连接可以支持瞬时并发的请求。
2.数据压缩
HTTP2.0对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。
3.服务器推送
当我们向支持HTTP2.0的web server请求数据的时候，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源。我们可以再请求头部的response 应答包头包含了一个 link: 的资源属性来发送额外的内容到浏览器客户端。
6.浏览器newwork面板的认识？
HTTP在通信的过程中将传输的数据分为两部分header和body，Header又包括general header、request header、response header、entity header。
Headers标签
General:
Request header:
Accept(发送端能够接收的数据类型 ：text/html、application/xhtml+xml)
Content-Type(请求内容的格式类型 :application/x-www-form-urlencoded 、application/json)
Cache-Control(请求和响应遵循的缓存机制)
Connection: 是否保持与服务器的tcp长连接。
Referer(当前请求的来源)
User-Agent(发出请求的客户端信息 Mozilla/5.0)
Response header:
Content-Type(响应内容的格式/类型text/html)
Cache-Control(请求和响应遵循的缓存机制)
Connection：是否保持与服务器的tcp长连接。
Date(消息发出时间Sat, 23 Apr 2016 07:47:54)
Cache-Control:private(默认)、no-cache、must-revalidate、max-age。这个参数有几种不同的使用场景：
打开一个新的窗口。private、no-cache、must-revalidate会重新请求服务器; max-age在超过时间年龄值时才会重新请求。
地址栏回车。private、must-revalidate只有第一次时会请求服务器; no-cache每次都会请求；max-age在超过时间年龄值时才会重新请求。
后退按钮。只有no-cache每次都重新请求服务器。
刷新。全部重新请求服务器。
请求头里的no-cache表示浏览器不想读缓存，并不是说没有缓存。一般在浏览器按ctrl+F5强制刷新时，请求头里就有这个no-cache，也就是跳过强缓存和协商缓存阶段，直接请求服务器。（如果直接按F5的话，请求头是max-age=0，只跳过强缓存，但进行协商缓存）
请求头里的Cache-Control是no-cache，是浏览器通知服务器：本地没有缓存数据；响应头中的 Cache-Control:max-age=259200 是通知浏览器：259200 秒之内别来烦我，自己从缓冲区中刷新
注意因为浏览器还有其他设置，并不是与缓存相关的头都会被浏览器接受，协议只是建议，并不一个定非要执行
7.关于设置http响应头connection的作用?
在http1.1中request和reponse header中都有可能出现一个connection头字段，此header的含义是当client和server通信时对于长链接如何进行处理。在http1.1中，client和server都是默认对方支持长链接的， 如果client使用http1.1协议，但又不希望使用长链接，则需要在header中指明connection的值为close；如果server方也不想支持长链接，则在response中也需要明确说明connection的值为close。不论request还是response的header中包含了值为close的connection，都表明当前正在使用的tcp链接在请求处理完毕后会被断掉。以后client再进行新的请求时就必须创建新的tcp链接了。 HTTP Connection的 close设置允许客户端或服务器中任何一方关闭底层的连接双方都会要求在处理请求后关闭它们的TCP连接。
8.Timeline了解？
图片.png
在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：
1.Queuing：排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.
2.Stalled(阻塞)：从HTTP连接建立到请求能够被发出送出去之间的时间花费。如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；
优化措施：1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能；2、脚本置于页面底部；
3.Proxy Negotiation： 与代理服务器连接的时间花费。
4.DNS Lookup： 执行DNS查询的时间。第二次访问浏览器有缓存的话，则这个时间为0。
优化措施：1、利用DNS缓存（设置TTL时间）；2、利用Connection:keep-alive特性建立持久连接，可以在当前连接上进行多个请求，无需再进行域名解析；
5.Initial Connection：建立连接的时间花费即TCP建立连接的三次握手时间，包含了TCP握手及重试时间。
6.SSL包含于HTTPS连接中）：完成SSL握手的时间花费。
7.Request sent：发送HTTP请求的时间（从第一个bit到最后一个bit）。
优化措施：1、减少HTTP请求，可以使用CSS Sprites、内联图片、合并脚本和样式表等；2、对不常变化的组件添加长久的Expires头，设置久远的过期时间，在后续的页面浏览中可以避免不必要的HTTP请求；
8.Waiting：是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。
优化措施：1、使用CDN，将用户的访问指向距离最近的工作正常的缓存服务器上，提高响应速度；
9.Content Download：获取Response响应数据的时间花费。
优化措施：1、缓存；2、压缩代码3、压缩响应内容。
9.查看DOMContentLoaded和load事件信息
DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。 load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。
DOMContentLoaded事件在Overview上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。
load事件同样会在Overview和Requests Table上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。
network-domcontentload
网友评论