一个页面从输入url到页面加载完成究竟经历了些什么

本人经参考谢希仁著《计算机网络(第 5版)》、《HTTP权威指南》和网络上关于浏览器渲染原理的介绍,结合自己理解,整理出以下结论,如有不正确或者不完善之处欢迎指正:

当用户在浏览器的地址栏输入要找的页面的url后,如输入http://www.tsinghua.edu.cn/chn/yxsz/index.html,具体发生了以下步骤:

1、浏览器向DNS服务器请求解析www.tsinghua.edu.cn的IP地址;

具体来说:

浏览器调用解析程序,并成为DNS服务器的一个客户,把待解析域名放在DNS请求报文中,以UDP用户数据报方式发给本地域名服务器,(使用UDP是为了减少开销)。本地域名服务器在查找域名后,把对应的IP地址放在响应报文中返回。如果本地域名服务器无法查找到对应域名,那么该域名服务器就成为DNS中的另一个客户,并向其他域名服务器发出查询请求。这种过程直到找到能够回答该请求的域名服务器为止。

2、DNS解析出清华大学服务器对应的IP地址为166.111.4.100并将查询结果告诉浏览器;


3、浏览器采用三次握手与服务器建立TCP连接(在服务器端IP地址是166.111.4.100,端口是80);

4、浏览器发出HTTP请求报文;

5、服务器发送HTTP响应报文;

无论请求报文和响应报文都分为三部分:起始行、头部、主体部分。请求报文的起始行说明了要做些什么,响应报文的起始行则说明发生了什么。首部字段向请求或者响应报文中添加一些附加信息,他们是一些名/值对的列表。主体部分可选,它是HTTP真正要传输的内容。

服务器在响应报文的主体部分携带了HTML代码,用于浏览器进行页面渲染。

6、释放TCP连接;

7、浏览器依据服务器传来的响应报文(主体部分)数据从上到下解析HTML代码,在<head>部分获取到CSS,然后后开始渲染页面;

如果link标签引入的外部样式表放在<body>底部,由于从上到下解析,一开始不会显示元素样式,直到解析到link部分的CSS才会重新渲染页面;

如果网速较慢,html代码加载完成后而css还没加载完的话,这会导致页面没有样式而难以阅读,所以不推荐这种方式。

8、当浏览器在HTML代码中发现对一些资源的引用时(如<img>标签引用了一张图片),浏览器向服务器发出异步请求获取这些资源。此时浏览器不会等到资源下载完,而是继续渲染后面的代码;


9、服务器返回浏览器需要的资源,浏览器回过头来重新渲染该部分代码;


10、当浏览器发现包含JavaScript代码的<script>标签时,立即执行它;如果JavaScript脚本命令改变前面的布局或者样式,浏览器不得不重新渲染这部分代码;


11、</html>页面渲染完毕。

当用户在浏览器的地址栏中输入内容并按下回车键时,浏览器会经历以下步骤来打开网页: 1. 解析URL:浏览器会解析用户输入URL(统一资源定位符),URL包含了要访问的网页的地址和其他参数。 2. DNS解析:浏览器会向域名系统(DNS)服务器发送一个请求,以获取输入URL中所包含的网址的IP地址。DNS服务器将返回对应的IP地址,使得浏览器能够与服务器建立连接。 3. 建立连接:浏览器使用HTTP或HTTPS协议与服务器建立连接。对于HTTPS协议,还会进行SSL/TLS握手过程来建立安全连接。 4. 发送请求:浏览器会向服务器发送一个HTTP请求,其中包含了用户请求的网页和其他相关信息,如请求方法(GET、POST等)和请求头部(包含浏览器的信息、支持的数据格式等)。 5. 服务器处理请求:服务器接收到浏览器发送的请求后,会根据请求的内容进行处理。这可能包括读取数据库、执行动态代码等操作。 6. 响应生成:服务器处理完成后,会生成一个HTTP响应。响应中包含了网页的内容、状态码(表示请求成功或失败的数字代码)和其他相关信息。 7. 接收响应:浏览器接收到服务器发送的HTTP响应后,会开始解析响应。浏览器会根据响应头部的信息来判断如何处理响应内容。 8. 渲染页面:如果响应中的状态码表示成功(例如200),浏览器会开始渲染页面。它会解析HTML、CSS和JavaScript代码,构建DOM树和渲染树,并将网页内容显示在浏览器窗口中。 9. 下载资源:在渲染页面的过程中,浏览器可能会发现页面中引用了其他资源,如图像、样式表、脚本文件等。浏览器会发送请求来下载这些资源,并将其添加到页面中。 10. 执行脚本:如果页面包含了JavaScript代码,浏览器会执行这些脚本,以实现交互和动态效果。 11. 网页加载完成:当所有的资源都被下载并且页面完成渲染时,浏览器会触发页面加载完成的事件。 这是一个简要的描述,实际上,浏览器的工作过程还涉及到缓存机制、安全策略、优化算法等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值