前端面试——网络问题

1、何为跨域？ 跨域请求数据有几种方式？

1. 何为跨域？

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。
存在跨域的情况：
网络协议不同，如http协议访问https协议。
端口不同，如80端口访问8080端口。
域名不同，如qianduanblog.com访问baidu.com。
子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。
域名和域名对应ip,如www.a.com访问20.205.28.90.

2.跨域请求数据有几种方式？

（1）JSONP 动态创建 script 标签

最常见的一种跨域方式， 其背后原理就是利用了script 标签不受同源策略的限制， 在页面中动态插入了script ，script 标签的src 属性就是后端api 接口的地址， 并且以get 的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去。jsonp 只能发送get 请求。

（2）Proxy 代理

这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

（3）CORS 跨域

Cross-Origin Resource Sharing（跨域资源共享）是一种允许当前域（ origin ）的资源（比如html/js/web service ）被其他域（ origin ）的脚本请求访问的机制。
当使用XMLHttpRequest 发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头origin，后端在接受到请求后确定响应后会在Response Headers 中加入一个属性Access-Control-Allow-Origin ，值就是发起请求的源地址(http://127.0.0.1:8888) ，浏览器得到响应会进行判断Access-Control-Allow-Origin 的值是否和当前的地址相同， 只有匹配成功后才进行响应处理。
现代浏览器中和移动端都支持CORS（除了opera mini ）， IE 下需要8+

（4）服务器跨域

在前后端分离的项目中可以借助服务器实现跨域， 具体做法是： 前端向本地服务器发送请求，本地服务器代替前端再向真实服务器接口发送请求进行服务器间通信，本地服务器其实充当个「中转站」的角色，再将响应的数据返回给前端。
缺点：服务器跨域需要另起服务器

（5）postmessage跨域

在HTML5 中新增了postMessage 方法， postMessage 可以实现跨文档消息传输CrossDocument Messaging ，IE8， Firefox 3， Opera 9， Chrome 3 和Safari 4 都支持postMessage。该方法可以通过绑定window 的message 事件来监听发送跨文档消息传输内容。
使用postMessage 实现跨域的话原理就类似于jsonp，动态插入iframe 标签，再从iframe 里面拿回数据，私认为用作跨页面通信更加适合

2、Http 请求的整个过程

答案：1.域名解析 --> 2.发起 TCP 的 3 次握手 --> 3.建立 TCP 连接后发起 http 请求 --> 4.服务器响应 http 请求，浏览器得到 html 代码 --> 5.浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等） --> 6.浏览器对页面进行渲染呈现给用户

3、Http的工作原理?http1.0,http1.1和http2.0具体有哪些区别?

http发起请求的底层原理,就是将http请求报文进行封装,给传输层,传输层使用tcp协议进行封装数据,将http请求报文和应用数据包封窗在tcp数据包内,带上tcp头和发送者&接受者的端口号;然后到网络层,整个数据包被ip协议进行封装成ip数据包,带上ip头和发送者&接受者的ip地址;到数据链路层经过以太网协议封装成以太网数据包,标头和发送者%+&接受者的mac地址.

请求和数据的规范
http1.0是短连接
http 1.1默认支持长连接，就是说，浏览器打开一个网页之后，底层的tcp连接就保持着,不会立马断开，之后加载 css、js之类的请求，都会基于这个 tcp连接来走。 http1.1还支持host头,多了一些状态码。也就可以支持虚拟主机;而且对断点续传有支持。
http2.0,支持多路复用,基于一个tcp连接并行发送多个请求以及接收响应,解决了 http 1.1对同一时间同一个域名的请求有限制的问题。二进制分顿,将传输数据拆分为更小的帧(数据包)，frame()数据包，帧)，提高了性能,实现低延迟高吞吐。

4、http与https的区别是什么?

Http协议运行在TCP之上，明文传输，客户端和服务器都无法验证对方的身份； Https运行于SSL之上，SSL运行于TCP之上，是添加了加密和认证机制的Http。 端口不同：http和https使用不同的连接方式，默认用的端口也不一样，前者是80端口，后者是443端口；
资源消耗不同：和http通信相比，https通信会由于加减密处理消耗更多的CPU和内存资源；开销：https通信需要证书，而证书一般需要向认证机构购买。
https的加密机制是一种共享密钥加密和公开加密并用的混合加密机制

5、TCP 三次握手和四次挥手(面试常客)

1.发送端向接收端发送一个SYN数据包（seq码，随机码）
2.接收端接收到，并返回一个带有SYN/ACK的数据包（ack和新的seq码，ack=上一个seq码+1）
3.发送端收到，并返回带有ACK的数据包（ack码，ack=上一个seq码+1）

1.客户端向服务端发送一个FIN，通知关闭
2.服务端发送一个ACK，表示已经接收到通知，这时候服务端继续发送未发送完成的数据，客户端停止发送
3.服务端发送完毕后，向客户端发送一个FIN，进入最后确认状态
4.客户端收到FIN后，进入关闭等待状态，向服务端发送一个ACK0，服务端收到后关闭连接，等待时间过后，客户端也进行关闭。

6、Cookie的作用是什么?和Session有什么区别？

Cookie 和 Session都是用来跟踪浏览器用户身份的会话方式，但是两者的应用场景不太一样。.
Cookie 一般用来保存用户信息 比如：①我们在 Cookie 中保存已经登录过得用户信息，下次访问网站的时候页面可以自动帮你登录的一些基本信息给填了；②一般的网站都会有保持登录也就是说下次你再访问网站的时候就不需要重新登录了，这是因为用户登录的时候我们可以存放了一个 Token 在 Cookie中，下次登录的时候只需要根据 Token 值来查找用户即可(为了安全考虑，重新登录一般要将 Token 重
写)；③登录一次网站后访问网站其他页面不需要重新登录。 Session 的主要作用就是通过服务端记录用户的状态。 典型的场景是购物车，当你要添加商品到购物车的时候，系统不知道是哪个用户操作的，因为 HTTP 协议是无状态的。服务端给特定的用户创建特定的 Session 之后就可以标识这个用户并且跟踪这个用户了。
Cookie 数据保存在客户端(浏览器端)，Session 数据保存在服务器端。
Cookie 存储在客户端中，而Session存储在服务器上，相对来说 Session 安全性更高。如果要在Cookie 中存储一些敏感信息，不要直接写入 Cookie 中，最好能将 Cookie 信息加密然后使用到的时候再去服务器端解密。

7、HTTP 状态码

100 ? Continue ? 继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息（正在请求）

200 ? OK ? 正常返回信息（成功）

201 ? Created ? 请求成功并且服务器创建了新的资源

202 ? Accepted ? 服务器已接受请求，但尚未处理

301 ? Moved Permanently ? 请求的网页已永久移动到新位置。

302 Found ? 临时性重定向。

303 See Other ? 临时性重定向，且总是使用 GET 请求新的 URI。

304 ? Not Modified ? 自从上次请求后，请求的网页未修改过。

400 Bad Request ? 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized ? 请求未授权。

403 Forbidden ? 禁止访问。

404 Not Found ? 找不到如何与 URI 相匹配的资源。

500 Internal Server Error ? 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

8、浏览器如何解析HTML、css、js？

解析CSS：一旦 CSS 被浏览器下载，CSS 解析器就会被打开来处理它遇到的任何 CSS。这可以是单个文档内的 CSS、

9、TCP与UDP 协议的区别

1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接
2、TCP提供可靠的服务。通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付
3、UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。
4、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信。
5、TCP对系统资源要求较多，UDP对系统资源要求较少。

10、web性能优化

1、减少http请求，合理设置 HTTP缓存；
2、使用浏览器缓存；
3、启用压缩：
在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。
4、CSS Sprites：合并 CSS图片，减少请求数的又一个好办法。
5、LazyLoad Images（图片懒加载）：
这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。
6、CSS放在页面最上部，javascript放在页面最下面。
7、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）。
8、减少cookie传输：
一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。
9、Javascript代码优化：
1.减少DOM操作还需要考虑浏览器的Reflow和Repaint ，因为这些都是需要消耗资源的。
2.要减少作用域链查找还应该减少闭包的使用。