Web 浏览器如何决定应该请求哪些资源

How web browsers decide which resource should be requested

我有一个基本问题,我已经搜索了很长时间,但我仍然不知道确切的答案。

我正在使用浏览器和网络应用程序。我想知道网络浏览器如何以及基于什么决定向网络服务器发送特定请求。

例如,当您在网络浏览器的地址栏中输入 http://www.google.com 时。浏览器将向网络服务器发送一堆请求以正确呈现网页。

现在,我的问题是网络浏览器如何决定它需要向网络服务器发送哪个请求。

  1. 它是否与响应正文中的某些标签(如 'link' 或 'script' 相关)。
  2. 浏览器是否解析 javascript 函数以查看是否应根据这些函数发送请求?

我们举个例子来解释一下。

假设您想搜索某些内容,然后在浏览器上点击了 http://www.google.com。这些是为您获取可让您输入查询的页面而展开的事件。

  1. 首先,您计算机上的网络堆栈将尝试找出与 www.google.com 匹配的实际互联网地址。这称为 DNS 查找。一旦它以 IP 地址的形式收到针对此查找的响应,它就可以连接到服务于 google.com.

  2. 的实际服务器
  3. 本机建立套接字连接,使用HTTP协议与服务器通信。它查询位于您尝试访问的地址的 / (这是根)的资源。这称为 GET 请求。该请求通常这样描述:GET /

  4. Google 将以 HTML 页面响应。通常 "index.html",由浏览器下载。

  5. 下载 HTML 后,所有链接的资源,例如呈现 HTML 的图像以及 [=79= 引用的 javascript ] 页面已下载。

  6. 下载的 HTML 页面被解析并创建了一个名为 "DOM Tree" 的 in-memory 树。此树包含层次结构中 HTML 页面的元素。创建 DOM 后,您可以在浏览器上看到正在呈现的页面。

  7. 在此解析过程中,浏览器发现了更多需要下载的资源,例如图像、样式表、javascript 文件。 HTML 页面通过不同的标签引用这些资源,例如 <img> 用于图像,<script> 用于 javascript。

  8. 已下载所有检测到的资源。浏览器会并行下载许多此类资源,但会按照它们在页面上的位置顺序应用它们(javascript 和样式表)。

  9. 样式表被解析,样式应用到HTML页面的DOM。有时,如果样式表的下载时间较长,您会看到 "raw" HTML 页面在应用样式之前呈现。这种情况有时会发生在连接速度较慢的情况下。

  10. 一旦HTML页面和相关的javascript文件被下载,浏览器调用javascript的"onload"回调函数。大多数 Javascript 繁重的应用程序都在此时启动。

  11. 调用 onload 后,Javascript 接管并可以为网页上的不同元素附加处理程序。安装完所有处理程序后,与网页交互可以调用一个或多个正在侦听这些事件的 javascript 函数。

  12. Javascript 还可以操纵 DOM(页面上的元素),这会导致 UI 更新(用户看到的内容),因此可以用于在单个页面上构建完整的应用程序。

这里是关于这个过程的更多阅读:http://friendlybit.com/css/rendering-a-web-page-step-by-step/

检查此交互的最佳方法是在 Chrome/FireFox 或 IE 上使用开发人员工具,并在访问网页时查看网络 activity。