zoukankan      html  css  js  c++  java
  • 浏览器工作流程的探索

    我们知道,当访问一个网站时,浏览器首先向服务器发送了某个信息,然后服务器返回了一些信息,再经过浏览器的解析,就看到了我们想要的页面,这也就是HTTP协议的过程,本文通过截取浏览器信息,讲述HTTP协议的每一步执行流程。

    一、服务器搭建

    在本机上配置好LAMP开发环境,具体的配置见另一篇文章。

    二、测试网页编写

    首先编写一个简单的网页,用于测试,代码如下:

    <html>

    <head>

    This is the head

    <head>

    <body>

    <h1>welcome to server</h1>

    hahahahaha中文测试hahahaha

    </body>

    </html>

    保存成index.html放到网页根目录下。

    效果如下:

    wps_clip_image-6120

    三、浏览器数据发送

    下面介绍一个神器“网络调试助手”,用于进行TCP/IP协议学习、程序调试用的。里面可以进行TCP\UDP、服务器/客户端的模式设置,向指定地址发送消息或作为服务器接收消息,非常方便。如下图:

    wps_clip_image-1733

    四、实验过程

    先说说实验的基本原理,我先用网络调试助手虚拟一个服务器,挂在8080端口上,然后让浏览器通过8080端口访问网站,这样我就能得到浏览器发送出的所有信息,然后,我用另一个网络调试助手虚拟一个客户端(在这相当于一个浏览器),向服务器发送消息,这样就能得到服务器发送给浏览器的东西了,我们在将这条消息回发给浏览器就行。整个流程如下所示:

    wps_clip_image-21219

    下面分析每一个步骤:

    1、使用浏览器访问地址,这样网络调试助手1(模拟服务器)收到了如下信息:

    wps_clip_image-16415

    【Receive from 192.168.0.130 : 49396】:

    GET / HTTP/1.1

    Host: 192.168.0.130:8080

    Connection: keep-alive

    Accept: */*

    Accept-Language: zh-CN

    User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; QQDownload 718; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0)

    Accept-Encoding: gzip, deflate

    我们来看看这个数据包,第一行是软件打印出来的表示从192.168.0.130的49369端口(就是浏览器的电脑IP地址和浏览器的端口)发送了一个如下的指令。第二行表示是一个1.1版本的HTTP协议,关于HTTP协议大家可以翻一下教材。1.1版比1.0版提供了更多功能的支持。第三行表示服务器的主机地址是192.168.0.130:8080,第四行表示是保持连接模式。然后后面分别指定了该浏览器支持的语言,浏览器信息和浏览器能接受的压缩方式(现代的HTTP正文可以用压缩方式传输啦,gzip就是其中常用的一种)。

    注意,在这个时候,浏览器的那个圈圈一直再转,表示正在打开网页,平时上网卡住的时候就是这样。

    2、将上述信息复制到调试助手2中,模拟浏览器向真正的服务器发送数据。(复制的时候注意HTTP协议最后是用两个换行来标识结束的)

    3、我们看到,服务器被欺骗了,响应了我们的请求

    wps_clip_image-28823

    我们来看看这些代码:

    HTTP/1.1 200 OK

    Date: Mon, 04 Mar 2013 08:42:47 GMT

    Server: Apache/2.4.3 (Win32) PHP/5.4.10

    Last-Modified: Mon, 04 Mar 2013 08:07:18 GMT

    ETag: "a5-4d714d884f8e2"

    Accept-Ranges: bytes

    Content-Length: 165

    Keep-Alive: timeout=5, max=100

    Connection: Keep-Alive

    Content-Type: text/html

    <html>

    <head>

    This is the head

    <head>

    <body>

    <h1>welcome to server</h1>

    hahahahaha中文测试hahahaha

    <img src = "pic.png"></img>

    </body>

    </html>

    第一行还是表示他是HTTP1.1的协议,200  OK表示响应正常,大家还记得那个悲剧的404么,和200表示不同的状态。随后就是一些日期,服务器类型(apache)、连接信息之类的东西,大家注意看有个ETag,这是HTTP中一种有效的防治重复访问的手段,记住这个号下面能看到。最后通过那个模拟的服务器,将这段信息发送给服务器。

    4、最后通过那个模拟的服务器,将这段信息发送给浏览器。看是不是和直接访问一模一样?

    5、拓展讲解

    在浏览器中按刷新或者重新访问该地址,我们看到,这个请求发生了变化,浏览器发出了这个请求

    GET / HTTP/1.1

    Host: 192.168.0.130:8080

    Connection: keep-alive

    Accept: */*

    Accept-Language: zh-CN

    User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; QQDownload 718; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0)

    Accept-Encoding: gzip, deflate

    If-None-Match: "a5-4d714d884f8e2"

    If-Modified-Since: Mon, 04 Mar 2013 08:07:18 GMT

    注意他的ETag号,是不是和最开始收到的一样!我们再将这条消息发送给服务器,收到了如下消息:

    HTTP/1.1 304 Not Modified

    Date: Mon, 04 Mar 2013 08:57:00 GMT

    Server: Apache/2.4.3 (Win32) PHP/5.4.10

    Connection: Keep-Alive

    Keep-Alive: timeout=5, max=100

    ETag: "a5-4d714d884f8e2"

    304 Not Modified,就是告诉浏览器,这个页面没有发生变化,你不用更新显示了,这样一来,服务器就不用发送一大堆网页正文,节省了大量的带宽。所以,有时候我们一直刷新网页,其实服务器根本就连网页的内容都没有重新发过来,而是简单滴让浏览器保持原来的内容而已。

  • 相关阅读:
    vuejs学习小结(数据处理)
    vuejs的遇到的问题小结
    ES6 对象扩展
    webpack的两个难点
    Sass入门:第二章
    Sass入门:第一章
    Effective JavaScript :第六章
    Effective JavaScript :第五章
    Effective JavaScript :第四章
    Effective JavaScript :第三章
  • 原文地址:https://www.cnblogs.com/maplewizard/p/2950072.html
Copyright © 2011-2022 走看看