概述

前端开发每天都要与浏览器打交道,不免得需要懂得了解,输入框里输入域名/ip地址之后,浏览器到底做了什么显示出页面.个人理解有以下几个步骤:

• 从浏览器输入URL
• 查找缓存，如果找到则直接加载
• 对域名进行dns解析拿到ip地址
• 建立tcp连接
• 连接成功客户端向服务端发送http请求,服务端收到http请求响应返回数据
• 浏览器渲染页面
• 浏览器请求关闭链接,结束

从浏览器输入URL

我们输入到浏览器的URL是由三个部分组成的, 协议/域名/端口号.通常的协议都是HTTP/HTTPS,还有就是FTP,FILE.端口号一般不显示是因为网站用了默认端口号,HTTP的默认端口号是80,HTTPS默认端口号是443.受浏览器同源策略的限制,这三者任何一个不同浏览器都会抛出跨域的信息.

同源策略的解决方案 CORS WebSocket JSONP

查找缓存

1. 浏览器拿到URL会首先查找本地缓存,如果有缓存那直接使用本地缓存
2. 这里的缓存分为强制缓存与协商缓存(对比)
   1. 强制缓存分为Cache-Control与Expires.
      1. Expires是用的是服务器的绝对时间, 那就会有个问题, 本地时间跟服务器时间匹配不上的话,缓存就会失效.
      2. Cache-Control的max-age是相对时间,意思是从请求到资源到之后的一定时间内缓存都有效,这相对来说靠谱很多. 两者同时存在的话,以Cache-Control为准
   2. 协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发送请求,分为Last-Modified与Etag.
      1. Last-Modified就是通过自己与if-modified-since对比,如果时间没有变化返回304,客户端直接使用本地缓存.如果有更新重新发送请求.
      2. Etag是服务器响应返回的标识, 通过对比Etag是否一致,来得到是否有缓存. 一致的话会返回304,客户端直接使用本地缓存.不一致则重新发送请求.
      3. 服务器优先校验Etag,Last-Modified性能更好一些.

dns解析

• 首先会查看本地hosts文件是否有当前IP如果有则直接使用
• 其次会查找DNS缓存
• 然后会查找DNS服务器
• 对域名进行递归遍历查找

tcp连接

这里其实就是人们说的三次握手.第一次握手,客户端主动去请求服务器连接,发送SYN.

第二次握手,服务器收到SYN后会发送一个SYN以及ACK应答客户端.

第三次握手客户端收到新的SYN以及ACK会发出ACK应答.然后连接成功.

客户端向服务端发送http请求,服务端响应

服务端收到浏览器发送的Request 会返回Response对象,包括响应码 响应头 响应体.

状态码:

• 1xx 请求正在处理
• 2xx 请求成功 返回数据
• 3xx 重定向 请求还未完成 需要进一步
• 4xx 客户端错误,可能是传参 或者域名 之类的错误
• 5xx 服务端错误

Dom Cssom

浏览器拿到数据回去渲染DOM树 跟 CSSOM树,如果中间有需要加载的资源, 那会重复上面的操作,这也就是为什么优化用户体验,开发的时候需要把js资源放在body下面.

在这一步操作会引起reflow(回流)与repaint(重绘).

回流是页面上的DOM节点进行重建删除移动,元素大小尺寸改变引起的.

重绘是元素外表发生改变比如颜色 字体大小边框改变.

回流一定会引起重绘, 但重绘不一定会引起回流.

浏览器请求关闭链接

连接断开需要四次挥手:

第一次挥手是浏览器拿到数据后,发送FIN请求断开连接.第二次是服务器发送ACK表示同意,但是有数据还没发完的话,会把发送FIN放在第三次挥手中. 第四次挥手浏览器发送ACK结束.

总结

这些流程虽然在开发中用不到,但是我们需要学习明白,这样在处理一些问题的时候会帮助我们快速定位问题,节省开发时间成本.