Skip to content

实际上,服务器提供的服务可以分为两类,一类是静态资源服务,另一类是数据服务,静态资源服务,说白了就是托管一些文件,当我们访问某个路径的时候,服务器给我们响应一个文件,这就是静态资源服务,除此之外,有时候我们还需要一些数据支持,比如当我访问某个路径的时候,服务器看到了我这个请求,就会按照我这个路径给出的信息给我返回一些数据,比如 JSON 数据,比如纯文本数据。

接下来要讨论的就是,在浏览器中输入一个 URL 之后,按下回车会发生什么事。

首先,我们很容易想到的是,当我们按下回车键之后,浏览器会帮我们自动补全 URL 地址,什么意思呢,在前面我们介绍过,像协议名这些东西浏览器是可以自动补全的,所以如果用户没有输入协议名,浏览器会给我们自动补全协议名。同时,我们也提到过,URL 地址必须为 ASCII 字符,所以如果 URL 地址中存在非 ASCII 字符,浏览器会自动将其进行 URL 编码,这些都是在发送请求前必须完成的操作。

此时我们已经可以保证我们的 URL 地址在格式上是正确的,此时会向 URL 地址中指定的服务器发送一个 GET 请求,当服务器收到请求后,服务器程序会给我们一个响应,我们访问网页的时候响应的都是一个 HTML 文档。

接下来就是浏览器如何处理这个 HTML 文档的问题了,首先浏览器会丢弃到已经打开的旧页面,同时开始解析 HTML 文档,从上到下依次解析。如果遇到了 link 元素,会根据 link 元素的地址请求对应的 CSS 代码,当响应到 CSS 代码之后会解析 CSS 样式并继续解析,如果发现了 script 元素,会根据该元素的 src 属性,也就是地址去请求 JS ,请求完毕之后直接执行 JS 代码,执行完之后再进行后续渲染。

值得注意的是,如果遇到了 img 元素,也会去请求图片,但这个请求过程是一个异步过程,也就是说不会导致代码阻塞,这是 img 元素和 link 以及 script 元素不同的地方,不管是 link 还是 script 元素都是会阻塞代码的。img 元素不会阻塞代码,会在响应结束之后,再将图片应用到布局中去。

图片加载完成后,会触发图片 DOM 上的 load 事件

如果用户点击了 a 元素,就会跳转到指定页面,相当于重新执行了一遍整个过程 64fdde2e9688a60dac15ea985e0006c2_MD5

以笔记为镜,可以知得失