木头的博客

点开一个网站浏览器背后究竟做了哪些事情

在你浏览网页的时候, 会碰到点击某个链接结果告诉我网站错误 403 / 404, 或者 500 之类的错误代码, 阿洗吧, 本来快乐的心情一下子变得很糟糕啊, 勾起了我的好奇心却不让我进去!! 该死的网站管理员!!

example-404

本文主要通过访问我的学校官网来介绍你从点击一个链接到显示出来这个过程中, 浏览器在后台都干了些什么.

1. 访问某个域名地址

当我们通过浏览器点击超链接、访问收藏夹或者直接敲入地址时, 这个请求首先会通过 DNS 服务器将域名地址转化为 IP 地址, 也就是说你通过校园网访问 www.cqjtu.edu.cn 会被解析成 202.202.240.6, 而当 DNS 服务器出错时直接访问 IP 地址是可以进入校内主页的.

ping

上图请求超时请忽略(可能是校方屏蔽了 ping 请求), 但是我们能看到 www.cqjtu.edu.cn 已经成功的被 DNS 解析到了 202.202.240.6

所以有些时候你会发现电脑能上 QQ, 但是网页却打不开, 这就是 DNS 服务配置或 DNS 服务器出现了问题.不要慌张, 重置本机 DNS 配置即可.

win7 中修改和重置 DNS 可参考以下步骤:

  1. 右击右下角网络图标;
  2. 再单击 “打开网络和共享中心”;
  3. 单击活动网络下的需要修改的网络连接, 点击 “属性” ;
  4. 或者单击左边的 “更改适配器设置” , 再右击 “本地连接” , 选择 “属性” ;
  5. 双击下面的 “INTERNET协议版本4(TCP/IPv4), 选择下面的 “自动获得DNS服务器地址” ;
  6. 到这里, 再试下能否正常访问网页, 如果可以则可跳过下列步骤.
  7. 然后, 点击 “开始” 菜单, 点击 “程序” , 选择 “附件” ;
  8. 在击 “命令提示符” , 选择 “以管理员身份运行” ;
  9. 输入 “ipconfig /flushdns” 命令并回车即可.

2. 得到该域名指向的 IP 地址

好了, 现在主机找到了, 开始访问吧.首先要建立一个 socket 连接, 因为 socket 是通过 ip 和端口建立的, 所以之前还有一个 DNS 解析过程, 现在我们已经得到了 IP 地址, 就差端口号了.如果 url 里不包含端口号, 则会使用该协议的默认端口号. http 协议使用的默认端口号为 80, https 协议使用的默认端口号为 443, 其他网络传输协议(如 ftp / ssh 等)本文暂不详谈.

socket 原理简述: 服务器主机就像一个房间, 而端口就像各式各样的插座, 两孔三孔 220V 交流电插座, 有线电视数据插孔, RJ45 电话线插孔等等.客户端则将设备插入约定好的插孔按照约定开始工作.通过 http 访问服务器时会默认使用 80 端口(指定访问其他端口也可), 主机监听到有 “设备” 访问 80 端口时会引导该 “设备” 去该去的地方.

3. 向服务器发送访问请求

现在成功建立了一个 socket 连接, 接下来开始像服务器提交一个访问请求, 这个请求一般是 GET 或 POST 命令 ( POST一般用于提交表单 ) . GET 命令的格式为:

GET 路径/文件名 HTTP/1.0

文件名指出所访问的文件, HTTP/1.0 指出 Web 浏览器使用的 HTTP 版本.现在可以发送GET命令: GET /index.html HTTP/1.0, 主机会将请求引导至服务器根目录下的相应路径.

注意这里我们说的主机和服务器不是一个概念, 服务器是安装在主机内的一款软件, 常用的服务器软件有 IIS、Apache、Nginx 等等, 而主机是一台机器, 指的是含有 CPU 内存等等的硬件设备.

4. 应答请求, 进行处理

服务器收到 GET 访问请求后, 从它的文档空间中找到文件 index.html, 并应答该请求( Request ).如果找到该文件, 服务器把该文件内容传送给相应的 Web 浏览器.

为了告知浏览器, 服务器首先传送一些 HTTP 头信息(上一步的 GET 请求的 HTTP 头称为请求头, 这里得到应答的 HTTP 头称为响应头), 然后传送具体内容 ( 即 HTTP 体信息 ) , HTTP 头信息和 HTTP 体信息之间用一个空行分开.

http-head

HTTP响应头举例:
① HTTP 1.0 200 OK
② MIME_Version:1.0
③ content_type:text/html
④ content_length:24321

HTTP 1.0 200 OK: 这是 Web 服务器应答的第一行, 列出服务器正在运行的 HTTP 版本号和应答代码.代码 “200 OK” 表示请求完成.我们俗称返回了一个 200, 也就是请求成功;若服务器没有找到该文件则会返回 4 字头的错误, 如 403, 404 等, 该部分内容在本文底部有详解, 这里略过.

MIME_Version:1.0 它指示 MIME 类型的版本.

content_type: 响应类型, 这个头信息指示 HTTP 体信息的MIME类型.如: content_type:text/html 指示传送的数据是 HTML 文档.这就是辨别一个地址的文件内容是什么的依据了, 如果是 exe (可执行文件)则调用系统下载器进行下载, 如果是 doc 文档则根据系统设置来在线预览或发起下载请求.

content_length: 长度值, 它指示 HTTP 体信息的长度 ( 字节 ) .

5. 关闭连接, 渲染页面

现在我们已经得到了 index.html 的内容, 这意味着本次请求已经完成, 现在必须关闭连接以便节约主机服务器资源以便于给其他用户建立连接.

因为 socket 这种连接的特性, 导致服务器主机的性能瓶颈, 短时间内遇到大量访问时会造成客户端 “排队” 甚至服务器死机, 你所看到的页面就是浏览器的小图标一直在转圈.会有恶意访客建立大量的连接导致其他用户不能访问该站点, 这就是著名的 DDoS 攻击.

ddos

与此同时, 浏览器开始对 index.html 文件进行解析并进行渲染最终输出到用户的屏幕上, 也会因为各浏览器对相同的 html 文件的解析能力不同而产生不同的画面, 因浏览器对页面解析兼容性的问题(任意门)不在本文讨论范围内.

到这里网络传输层就结束了, 这就是系统在后台从点击链接到显示画面产生的所有动作.

一些干货

现在, 如果你以后还遇到这些问题, 就可以自己分析为什么会出现这样的结果并自行解决啦. 我列举一些常见的状态码解释一下

  • 400: 400 分为 bad request 和 invalid hostname, 前者是因服务器绑定域名配置出错产生的问题, 需要请网站管理员来解决; 而后者往往是自己输错了域名如: ww.cqjtu.edu.cn 或 www.cqjtu.educn 等等, 如果出现了 400 invalid hostname, 那么检查一下你输入的地址是否正确.
  • 403: 这是一个被拒绝的响应, 这说明服务器运行正常但是把你的 IP 地址列入了黑名单, 你可以向管理员请求帮助或使用代理软件重新访问.
  • 404: 没有找到文件, GET 请求被导向到一个不存在的文件路径, 如果是点击超链接导致返回了 404, 那么向管理员请求帮助, 如果是自己手动输入的地址, 那么检查一下路径是否正确.
  • 500: 服务器内部错误, 请求成功了但是服务器没有给出响应方案, 一般是服务端代码语法错误, 用户一般很少看见 500, 但作为一个程序猿看见这个页面简直把牙都咬碎了就是找不见错误. 遇见 500 了就狠狠地嘲笑一番网站的管理员吧!

更多状态码参考百度百科 HTTP状态码

参考文献