跳到主要内容

浏览器网络资源访问

以一个简单的例子来说明浏览器网络资源访问的过程。 假设我们访问一个地址，输入它的网址www.example.com1，最终浏览器显示出页面的内容。

  1. DNS解析
  2. TCP连接
  3. 发送HTTP请求
  4. 服务器响应
  5. 页面渲染
  6. 关闭TCP连接 注意浏览器在执行后续步骤之前会对URL进行解析，如果输入的字符串不符合规范则会使用搜索引擎对字符串进行搜索

第一步DNS解析​

  1. 浏览器依次在浏览器缓存、系统缓存、路由器缓存、运营商DNS缓存中查找是否有该域名的IP地址。
  2. 如果缓存中没有，则向本地DNS服务器发送请求，请求域名对应的IP地址。
  3. 如果本地DNS服务器缓存中没有，则向根DNS服务器发送请求，请求www.example.com的IP地址。
  4. 如果根DNS服务器缓存中没有，则向com DNS服务器发送请求，请求www.example.com的IP地址。
  5. 如果com DNS服务器缓存中没有，则向example.com DNS服务器发送请求，请求www.example.com的IP地址。
  6. 如果example.com DNS服务器缓存中没有，则向域名服务器发送请求，请求www.example.com的IP地址。
  7. 域名服务器收到请求后，会返回www.example.com的IP地址，并将其缓存到本地DNS服务器中。
  8. 本地DNS服务器将www.example.com的IP地址返回给浏览器。

第二步TCP连接(三次握手)​

  1. 浏览器向服务器的IP地址发送一个TCP连接请求。
  2. 服务器收到请求后，向浏览器发送一个确认连接的TCP包。
  3. 浏览器收到确认连接的TCP包后，向服务器发送一个HTTP请求。

第三步发送HTTP请求​

  1. 浏览器向服务器发送一个HTTP请求，请求获取www.example.com的页面内容。
  2. 服务器收到HTTP请求后，向浏览器返回HTTP响应，其中包含www.example.com的页面内容。

第四步服务器响应​

  1. 服务器向浏览器返回HTTP响应，其中包含www.example.com的页面内容。

页面渲染​

默认情况下服务器会给浏览器返回index.html文件,所以解析HTML是浏览器渲染页面的第一步

  1. 浏览器解析HTML，并生成DOM树。
  2. 浏览器解析CSS，并生成CSSOM树。
  3. 将DOM树和CSSOM树结合，生成渲染树。
  4. 根据渲染树开始渲染页面。 这里没有提到JS的执行过程，因为JS是渲染页面的最后一步，如果JS文件较大，会阻塞渲染，影响用户体验。在现代前端开发中，Script标签往往带有defer或async属性，defer可以让JS在页面完成HTML解析后执行。 async只能做到异步加载，加载完成后立即执行JS，会影响页面渲染。

关闭TCP连接(四次挥手)​

  1. 浏览器和服务器的TCP连接关闭。