【从输入URL到渲染页面的整个过程】

文章目录

  • 一、URL解析
  • 二、查找缓存
  • 三、DNS解析
  • 四、TCP连接
  • 五、浏览器向服务器发送http请求,并返回数据给浏览器
    • 5.1 http状态码有哪些
    • 5.2 常见的http headers
  • 六、浏览器进行页面渲染
    • 1、渲染过程:
    • 2、script标签的defer和async属性有何区别


一、URL解析

对URL进行解析,解析协议、主机名、端口号、查询参数等。

二、查找缓存

有一些静态资源(js css img)不经常变动,可以把它们缓存下来,以此来减少网络请求的频率和数量,从而提高性能。

即发送请求前,会先检查下这个请求有没有缓存标识,有的话就按照缓存策略获取资源,没有的话,就进行DNS解析。

http缓存策略有强缓存、协商缓存。

1、强缓存:初次请求,浏览器返回资源和一个Cache-Control标识,比如设置Cache-Control:max-age=518400,表示这个资源能够缓存的时间是518400s。在这个时间内进行再次请求,浏览器会去判断缓存是否失效,未失效的话请求本地缓存并返回资源,如果缓存失效了则再去请求服务器。
2、协商缓存:并不是每个资源都是长时间固定不变的,这个时候客户端需要和服务器去协商哪些资源要缓存。如果协商缓存呢?客户端初次请求,服务端返回资源和资源标识。当再次请求时,客户端带上资源标识,服务端去重新计算资源标识,和客户端带过来的比较,如果相同则说明文件未修改,返回304状态码;如果不同则返回新资源和新的资源标识。
协商缓存的资源标识有两种,都位于请求头中。第一种是Etag,根据文件计算出的唯一标识,文件修改了标识也会发生变化。第二种是Last-Modified,这个值记录的是资源最后的修改时间,如果修改了,则值是不一样的。

强缓存的优先级大于协商缓存。

三、DNS解析

DNS可以将域名解析成IP。使用域名的好处就是,域名便于记忆,其次,如果服务器做了负载均衡,则ip不是唯一的,ip有多个,使用DNS就可以将域名解析成对应机器的ip。

四、TCP连接

根据网络七层协议,HTTP属于应用层协议,发HTTP请求之前,需要先建立TCP连接。
建立TCP连接,需要进行三次握手,连接建立后,才能进行数据传输,传输完毕后进行四次挥手断开连接。

五、浏览器向服务器发送http请求,并返回数据给浏览器

5.1 http状态码有哪些

状态码分类

  • 1xx服务器收到请求
  • 2xx请求成功,如200
  • 3xx重定向,如301永久重定向,302临时重定向,304资源未修改
  • 4xx客户端错误,如404资源未找到,403没有权限
  • 5xx服务器错误,如500服务器错误,504网关超时

301使用场景:网站域名到期或者想更换域名了,就可以返回301状态码,让浏览器自动重定向到新域名。

5.2 常见的http headers

请求头 Request Headers

  • Accept 浏览器可接收的数据格式
  • Accept-Encoding 浏览器可接收的压缩算法,如gzip(压缩了浏览器能解压,能保证资源更小,传输的更快一些)
  • Connection:keep-alive 一次TCP连接重复使用(把资源一次性完成,提高效率)
  • Cookie
  • Host:请求的域名是什么
  • User-Agent(简称UA):浏览器信息。如:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
  • Content-Type发送数据的格式:如application/json

响应头Response Headers

  • Content-type 返回数据的格式:如application/json
  • Content-length 返回数据大小
  • Content-Encoding返回资源的浏览器压缩算法

与缓存相关的headers

  • Cache-Control
  • Etag
  • Last-Modified

六、浏览器进行页面渲染

1、渲染过程:

1、根据HTML代码生成DOM Tree

2、根据CSS代码生成CSSOM树(CSS对象模型)

3、DOM Tree和CSSOM整合成Render Tree,即DOM树上挂了CSS属性,这样就可以渲染了(这一步包括了尺寸计算、定位等布局)

4、根据Render Tree渲染页面

5、遇到

你可能感兴趣的:(网络,http,tcp/ip,网络,前端)