跨域和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的末尾；