跨域和http请求学习

跨域

1.什么是跨域

跨域：指的是浏览器不能执行其余网站的脚本。它是由浏览器的同源策略形成的，是浏览器施加的安全机制。 所谓同源，指的是协议，域名和端口号相同。

2.解决方法

（1）jsonp的核心思想是：浏览器的script,img,iframe标签不受同源策略的限制，因此能够经过script标签引入一个js文件，文件载入成功后会执行咱们在url参数中指定的callback函数，而且把咱们须要的json数据做为参数传入；

优势是兼容性好，缺点是只支持get请求，且只支持跨域http请求这种状况；

（2）CORS 在服务器端经过检查请求头部的origin,从而决定请求应该成功仍是失败。具体的方法是在服务端设置Response Header响应头中的Access-Control-Allow-Origin为对应的域名，实现了CORS（跨域资源共享）；

（3)  document.domain 必须知足两个条件：1) 页面中嵌入iframe框架，2) 当前页面和iframe中的页面，主域，协议，端口必须彻底一致；

（4）window.postMessage(message,targetOrigin) 方法是html5新引进的特性，能够用它来向其它的window对象发送信息，不管这个window对象属于同源或者不一样源，

接收消息window.addEventListener('message', function(e){})

http请求

1.在浏览器端输入网站的url地址；

2.浏览器查找缓存

浏览器会查找浏览器缓存，系统缓存，路由缓存，若是没有的话，继续下一步，若是有的话，直接显示

tip：浏览器会把访问过的web网站资源缓存起来，而判断是否使用缓存的条件有如下几种：

（1）是否有这个网站的缓存

（2）这个网站的缓存是否过时，具体看Cache-Control中缓存的有效时间；

（3）跟服务器协商是否使用缓存，若是上次缓存的时候有Last-modified 和 Etag字段，本次请求就会加上If-Modified-Since(上次请求资源的时间)和If-None-Match(上次资源的修改时间)；

3.经过DNS获取url对应的ip地址

先在本机的host文件中查找是否有这个url对应的ip,若是没有的话，就请求DNS进行ip地址的获取；

4.创建TCP连接

http在工做以前，须要客户端和服务端创建连接，这个连接的创建是经过tcp（三次握手）来完成的，

5.浏览器向web服务器发送请求

一旦连接已经创建，浏览器就能够给web服务器发送请求命令；

6.浏览器给web服务器发送请求头信息

浏览器在发送了请求后，还要给web服务器发送请求头信息，好比accept-charset(浏览器端指定的字符集),最后发送一个空的请求头表明请求发送完毕,注意:若是是post提交,则会继续提交请求体

7.web服务器进行应答 

应答的第一部分是http版本号,第二部分是协议的状态码

 8.web服务器发送应答头消息 web服务器给浏览器发送应答头消息,也就是关于web服务器本身的信息,最后发送一个空白行表明应答结束 

 9.web服务器发送数据 以应答头里面的content-type所描述的格式发送数据 

 10.web服务器关闭连接 web服务器向浏览器发送了应答数据以后,就要关闭tcp连接(tcp四次握手关闭连接),若是添加了connection:keep-alive,那么就还会保持连接状态 

学习来自：  https://blog.csdn.net/zhttly/article/details/82832582

浏览器渲染过程

1.浏览器获取html文件后，会自上而下进行加载，而且在加载的过程当中进行解析和渲染

2.若是遇到外部css文件和图片，浏览器会另外发送一个请求，去获取css文件和响应的图片，这个请求是异步的，不会影响html的加载速度，若是遇到js文件，html文件则会挂起渲染的过程，等待js文件加载完毕，再继续进行渲染；因此通常把js文件写在body的末尾；