我们在浏览器输入http://www.baidu.com想要进入百度首页,但是这是个域名,没法准确定位到服务器的位置,所以需要通过域名解析,把域名解析成对应的ip地址,然后通过ip地址查找目的主机。整个访问过程可以概括为:
一、域名解析
二、发起TCP三次握手建立连接
三、建立连接后发起http请求
四、服务器响应请求,浏览器获取html源码
五、浏览器解析html代码,并请求相关css,js和图片资源
六、浏览器渲染页面
其中一二三四详情见:https://www.cnblogs.com/caijh/p/7698819.html及https://www.cnblogs.com/caijh/p/7698819.html
五六:
1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓存情况),浏览器向服务器发出HTTP请求,服务器返回 HTML 文件; (善用缓存,减少HTTP请求,减轻服务器压力)
2. 浏览器载入 HTML 代码,发现 <head> 内有一个 <link> 引用外部 CSS 文件,则浏览器立即发送CSS文件请求,获取浏览器返回的CSS文件; (CSS文件合并,减少HTTP请求)
3. 浏览器继续载入 HTML 中 <body> 部分的代码,并且 CSS 文件已经拿到手了,可以开始渲染页面了; (CSS文件需要放置最上面,避免网页重新渲染)
4. 浏览器在代码中发现一个 <img> 标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码; (图片文件合并,减少HTTP请求)
5. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码; (最好图片都设置尺寸,避免重新渲染)
6. 浏览器发现了一个包含一行 JavaScript 代码的 <script> 标签,会立即运行该js代码; (script最好放置页面最下面)
7. js脚本执行了语句,它令浏览器隐藏掉代码中的某个 <div>,突然就少了一个元素,浏览器不得不重新渲染这部分代码; (页面初始化样式不要使用js控制)
8. 终于等到了 </html> 的到来,浏览器渲染完毕;
9. 如果换肤的话,JavaScript 让浏览器换了一下 <link> 标签的 CSS 路径;
10. 浏览器向服务器请求了新的CSS文件,重新渲染页面。
有了上面的过程所以才会看到一个页面除了主要的请求地址,还多出了许多其他请求,类似的如下图: