从输入一个URL地址到浏览器完成整个渲染的过程

Posted 2021-10-29 大源源

1. 浏览器查找当前URL是否存在缓存（http缓存机制）

   缓存过程分析

   浏览器与服务器通信的方式为应答模式，即客户端发起请求-服务器响应请求。

   1. 浏览器每次向服务器请求的结果和标识，都会存入浏览器缓存中

   2. 浏览器向服务器发起请求后，会先从缓存中查找缓存结果和缓存标识，再进行下一步判断是否需要再次向服务器发起请求。

   HTTP请求缓存分为两个部分，强制缓存和协商缓存。

   强制缓存

   强制缓存就是浏览器向缓存中查看结果，并根据缓存结果和缓存规则决定是否使用该缓存结果。

   1. 强制缓存失效，不存在缓存结果跟缓存标识。直接向服务器发起请求（等同于第一次请求）。
   2. 强制缓存失效，存在缓存结果跟缓存标识。采取协商缓存。
   3. 强制缓存生效，存在缓存结果跟缓存标识，未失效。直接使用浏览器缓存。

   强制缓存规则

   控制强制缓存的字段为Expires和Cache-Control，其中Cache-Control的优先级比Expires高。

   协商缓存

   协商缓存就是在缓存结果和缓存标识存在但是失效的情况下，由服务器根据收到的缓存标识决定是否使用缓存的过程。

   1. 服务器发现资源无更新，协商缓存生效，返回状态码304。
   2. 服务器发现资源已更新，协商缓存失效，返回新的内容，状态码200。

   协商缓存规则

   控制协商缓存的字段有：Last-Modified/If-Modified-Since和Etag/If-None-Match。

   • Last-Modified是该资源在服务器中最后一次修改的时间。
   • If-Modified-Since是客户端在请求服务器时，携带Last-Modified字段，告诉服务器上次返回的资源的最后修改时间。服务器收到该字段后，与该资源在服务器最后被修改的时间做对比，如果不一致，则重新返回资源，否则使用缓存文件。
   • Etag是服务器响应资源时，返回的该资源的唯一标识。
   • If-None-Match是客户端再次发起请求时，携带资源的Etag字段，服务器收到请求后，发现有If-None-Match字段，与该资源在服务器上的Etag字段的值作比较，若相等则返回304表示无更新，不相等则返回新资源。

   注：Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。

   浏览器缓存存放

   浏览器缓存有两个来源：from disk cache/form memory cache

   from disk cache代表硬盘中的缓存；

   form memory cache代表内存中的缓存。

   在浏览器中，会在js和图片文件解析执行后存入内存缓存中；而css文件则会存入硬盘中。

---

继续更新

网页从输入网址到渲染完成经历了哪些过程？

大致可以分为如下7步：

1. 输入网址；
2. 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
3. 与web服务器建立TCP连接；
4. 浏览器向web服务器发送http请求；
5. web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
6. 浏览器下载web服务器返回的数据及解析html源文件；
7. 生成DOM树，解析css和js，渲染页面，直至显示完成；