前端经典面试题---网络篇

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1. 在浏览器地址栏输入URL；

2. 浏览器查看缓存：
   a. 如果资源未缓存，发起新请求；
   b. 如果已缓存且足够新鲜，直接提供给客户端，否则与服务器进行验证。
   检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
   1) HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
   2) HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间;

3. 浏览器解析URL获取协议，主机，端口，path；

4. 浏览器组装一个http请求报文；

5. 浏览器获取主机IP地址，过程如下：
   浏览器缓存 > 本机缓存 > hosts文件 > 路由器缓存 > ISP DNS缓存 > DNS递归查询（可能存在负载均衡导致每次IP不一样）

6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
   a. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口；
   b. 服务器发回SYN=1，ACK=X+1，Seq=Y的响应包；
   c. 客户端发送ACK=Y+1，Seq=Z；

7. TCP链接建立后发送HTTP请求；

8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序；

9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码；

10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作；

11. 服务器将响应报文通过TCP连接发送回浏览器；

12. 浏览器响应，根据情况选择关闭TCP连接或保留重用，
    关闭TCP连接的四次挥手如下：
    a. 主动方发送Fin=1，Ack=Z，Seq=X的报文
    b. 被动方发送Ack=X+1，Seq=Z报文
    c. 被动方发送Fin=1，Ack=X，Seq=Y报文
    d. 主动方发送ACK=Y+1，Seq=X报文

13. 浏览器检查响应状态码；

14. 如果资源可缓存，进行缓存；

15. 对响应进行解码；

16. 根据资源类型决定如何处理（假设资源为HTML文档）；

17. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，根据DOM树和CSSOM树构建渲染树，执行js脚本；

18. 显示页面

（1）当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

（2）浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

（3）一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

（4）此时，Web服务器提供资源服务，客户端开始下载资源。

---

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 服务器端暂时无法处理请求（可能是过载或维护）。

---

cookies，sessionStorage 和 localStorage 的区别

名称 有效期 共享 存储空间 cookie 在设置的有效期内有效，默认为浏览器关闭 在同源且符合path规则的文档之间共享 浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k sessionStorage 浏览器关闭后消失 同源的同窗口中 能达到5M localStorage 长期有效，直到javascript删除或用户清楚浏览器缓存 同源文档之间共享 能达到5M

1. cookie在浏览器和服务器间来回传递，服务器可修改cookie；
2. cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
3. 有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除；
4. 共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享；
5. sessionStorage和localStorage的存储空间更大，有更多丰富易用的接口和各自独立的存储空间。浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M