16. 浏览器输入 URL 到页面呈现，中间发生了什么？

[goldEli]

从浏览器输入 URL，到浏览器将页面渲染出来。这个过程发生了什么？越详细越好。

[goldEli]

1. 浏览器输入 URl
2. DNS 找到对应ip地址
3. 根据 IP 地址，浏览器与服务器建立 TCP 连接
4. 浏览器发起请求
5. 服务器响应请求
6. 浏览器处理 HTML, 呈现页面

DNS

DNS 全称 Domain Name Server, 根据域名找到对应的 IP 地址。

浏览器会先在本地的 DNS 缓存中寻找域名对应的 IP 地址，缓存中没有，才会去 DNS 上查找。

浏览器处理服务器响应

浏览器会根据后端返回的数据格式处理内容，如果是不识别的格式，浏览器会触发自动下载。

以 HTML 为例：

浏览器解析 HTML，根据标签请求一些静态资源，比如 css 文件，js 文件，图片等等。

浏览器生成 DOM 和 CSSOM，结合成为 render tree， 最后呈现在页面上。

Reference

• What Happens When You Type in a URL
• What happens when you type an URL in the browser and press enter?

[zlx362211854]

1. 浏览器输入网址
2. 浏览器读取DNS（先读本地缓存），获得网址的ip地址。
3. 根据ip地址与服务器建立通讯。
4. 服务器返回html页面。
5. 浏览器解析html，同步下载其中包含的文件（js,css等）
6. 资源下载完毕后，渲染页面。呈现给用户。

[roxy0724]

• 浏览器键入地址

• 浏览器读取DNS进行解析，得到对应IP地址

• 三次握手，建立TCP连接

• 浏览器发送HTTP请求

• 服务器处理请求

• 返回响应结果

• 关闭TCP连接

• 浏览器解析资源并渲染页面