【无标题】Js网络性能优化面试题

输入一个 URL 发生了什么？

1，浏览器通过 DNS(域名系统)查找该域名的 IP 地址，

2，浏览器根据解析得到的 IP 地址向 web 服务器发送一个 HTTP 请求

3，服务器收到请求并进行处理

4，服务器返回一个响应，

5，浏览器对该响应进行解码，解析 html 为 dom，解析 CSS 为 CSS Tree，dom + css 生成的 render-tree 绘图

6，页面显示完成之后，浏览器发送异步请求

7，整个过程结束之后，浏览器关闭 TCP 连接

总结：(浏览器-DNS-ip 地址--http 请求--服务器处理请求--返回响应)

get 和 post 的区别？

1，由于 GET 是读，POST 是写，所以 GET 结果会被缓存，POST 不会被缓存

请求参数区别：

2，通常，get 请求参数放在 url 中，post 请求数据放在 body(消息体中)

get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感数据

get 请求参数方在 url 中是有长度限制的，而 post 放在 body 中没有长度限制

3，服务器和浏览器对 get 和 post 的常见实现方法

1：对于 get 方式的请求：浏览器会把 http header 和 data 一并发出去，服务器响应 200(返回数据)

2：而对于 post，浏览器先发送 header，服务器响应 100 continue,浏览器在发送 data

服务器响应 200(返回数据)

http 与 https 的区别？

http 由什么组成？：一个请求报文由请求行，请求头，空行，实体组成

区别列表：

http 是明文传输，不安全，https 是加密传输的；非常安全

http 使用的是 80 端口，https 使用的 443 端口

http 较快，https 较慢

https 的证书一般需要购买，http 不需要证书

状态码

响应分为五类：信息响应(100-199),成功响应(200-299),重定向(协商缓存)(300-399),客户端错误(400-499),服务端错误(500-599)

介绍一下 websocket

1,是什么？

是 HTML5 的一种新协议，Webscoket 真正实现了全双工通信的服务器向客户端的互联网技术

在单个 TCP 连接上进行全双工通信协议

2，HTTP 与 Webscoket 的区别？

http 是短连接，请求之后会关闭连接

Websocket 是长连接，只需通过一次请求初始化连接，然后所有的请求和响应都通过这个 TCP 连接进行通信

3，Websocket 的特点？

与 http 协议有良好的兼容性，建立在 TCP 协议之上，与 http 同属于应用层

数据量小，性能开销小，通信高效

可以发送文本和二进制

可以与任意服务器通信

握手阶段采用 http 协议，默认端口是 80 和 443

协议标识字符 ws，加密 wss

服务器可以主动向客户端请求

DNS 协议是什么？

DNS 服务器通过多层查询将解析域名为 IP 地址

HTTP1，HTTP2，HTTP3 的区别

http1.0:浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个 TCP 请求

服务器完成请求处理后立即断开 TCP 连接

简单来说：每次与服务器交互，都需要新开一个连接

http1.1:引入了持久连接，即 TCP 连接默认不关闭，在同一个 TCP 连接里面，客户端可以同时发送多个请求

虽然允许复用 TCP 连接，但是同一个 TCP 连接里，所有的数据通信都是按次序进行的

服务器只有处理完一个请求，才会接着处理下一个请求，如果前面处理的特别慢，后面就会有许多请求排队等着

新增了一些请求方法，新增了一些请求头和响应头

http2.0：采用二进制格式而非文本格式

多路复用，只需连接一个即可实现并行

使用抱头压缩，降低开销

服务器推送

http3.0：

是 http3 中的底层支撑协议，该协议基于 UDP，又取了 TCP 中的精华，实现类极快又可靠的协议

5,强缓存和协商缓存

浏览器缓存的特点

浏览器每次发起请求，都会现在浏览器缓存中查找该请求的结果和缓存标识

浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器中

根据是否需要向浏览器重新发起 HTTP 请求将缓存过程分为两个部分：分别是强制缓存和协商缓存

强缓存:发起请求，数据存入本地，直接从本地读取，不去请求服务器，返回的状态码是 200

协商缓存：会去服务器对比，若没改变才直接读取本地缓存，返回状态码是 304，如果改变，返回 200 重新请求数据

4,介绍下 304 的过程

缓存过期后向服务器发起请求验证缓存是否有效，有效的话则返回 304，无效的话返回 200 重新请求数据

304 多出现在静态资源的请求上面

对于静态资源来说，

当浏览器第一次发起请求时(请求头中没有 if-Modified-Since),server 会在响应中告诉浏览器这个资源最后修改的时间

(响应头中的 Last-Modified),当你再次请求这个资源时，

浏览器会询问 sercer 这个资源有没有被修改(请求头中的 if-Modified-Since)

如果资源没有被修改，server 返回 304 状态码，浏览器使用本地的缓存文件

2,HTTP 状态码

1xx:指示信息类，表示请求已接收，继续处理(临时响应)

2xx：指示成功类，表示请求已成功接收

3xx:指示重定向，表示要完成请求必须进行更近一步操作

4xx:指示客户端错误，请求有语法错误或请求无法实现

5xx:指示服务器错误，服务器未能实现合法的请求

常见状态码

403 表示服务端拒绝执行客户端的请求

404 表示服务器找不到客户端所请求的资源

304 表示所请求的资源并未修改(命中协商缓存)

Ajax 的实现过程(常考)

1,创建 XMLHttpRequest 对象，也就是创建一个异步调用对象

2，创建一个新的 http 请求，并且指定 http 的请求方法，url 以及验证信息

3，设置响应 http 请求状态变化的函数

4，发送 http 请求 (以上代码就讲了这四步)

5,获取异步调用的数据

什么是跨域，跨域的解决方法？

1，当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域。

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

有一点必须要注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，

只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，

2，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

协议号 - 域名 - 端口号 ，只有当这三个条件同时满足相同时，

我们就称之为符合同源策略，同源策略也可以看做是一个协议。

解决跨域

跨域资源共享 CORS：目前最主流、最简单的方案，直接让后端设置响应头，允许资源共享就 ok 了

1、普通跨域请求：只需服务器端设置 Access-Control-Allow-Origin

2、带 cookie 跨域请求：前后端都需要进行设置

【前端设置】根据 xhr.withCredentials 字段判断是否带有 cookie

JSONP：

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本 IE），缺点是只支持 get 请求，不支持 post 请求。

核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。