前端入门:从输入URL到网站页面展示,发生了什么?


问题:用户打开浏览器,输入 baidu.com,页面展示百度首页。整个过程发生了什么?


一、大致过程概述:

1.用户在浏览器输入URL,发起访问网页的请求;

2.浏览器开始解析域名,查找URL对应的IP地址;

3.浏览器通过IP地址与网页服务器建立联系;

4.网页服务器接收用户请求交给后台处理器处理,并返回处理结果给浏览器;

5.浏览器接收服务器返回的处理结果,对其进行解析、渲染并最终绘制网页。


基本概念名词

URL:Uniform Resource Locater,统一资源定位符

  1. 作用:浏览器在茫茫互联网中通过URL寻找资源的具体位置,通俗说就是“网址”

  2. 结构:

标准格式如下:

协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

完整格式如下:

协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

其中【访问凭证信息@ :端口号 ?查询 #片段ID】都属于选填项。

  1. 语法:
  • 传送协议。

  • 层级URL标记符号。(为" // ",固定不变)

  • 访问资源需要的凭证信息(可省略)

  • 服务器。(通常为" 域名 "),有时为IP地址

  • 端口号。(以数字方式表示,若为默认值可省略)

  • 路径。(以“/”字符区别路径中的每一个目录名称)

  • 查询。(GET模式的窗体参数,以“?”字符为起点,每个参数以“&”隔开,再以“=”分开参数名称与数据,通常以UTF8的URL编码,避开字符冲突的问题)

  • 片段。以“#”字符为起点



以* https://baike.baidu.com:80/item/url/110640?fr=aladdin *为例, 其中:

  1. " https ",是协议;

  2. " baike.baidu.com ",是服务器(域名);

  3. " 80 ",是服务器上的网络端口号;

  4. " /item/url/110640 ",是路径;

  5. " ?fr=aladdin ",是询问。

常见协议有:http (最常见、不加密)、https(常用、加密))、flp、file等



域名 :Domain Name, 简称 " 域名"、" 网域 ",是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位

1.作用:域名可以说是一个IP地址的代称,目的是为了便于记忆后者。

2.举例:" baidu.com "是一个域名,和IP地址相对应。人们可以直接访问" baidu.com "来代替IP地址,然后域名系统(DNS)就会将它转化成便于机器识别的IP地址。这样,人们只需要记忆 " baidu.com "这一串带有特殊含义的字符,而不需要记忆没有含义的IP数字。

3.域名系统(DNS):Domain Name System,域名解析协议

-DNS的作用:通过分级管理可以有效的管理全球上亿的域名信息,通过分级和分类区分国家地区(.us/.cn/.hk)、公司服务器(谷歌8.8.8.8、国内知名114.114.114.114)等



IP:Internet Protocol Address,网际协议地址,用于根据源主机和目的主机的地址来传送数据

  • 每个处于互联网中的设备都有IP;

  • 每个域名对应着IP;

  • IP可分为局域网IP(多机器共用路由器WIFI,小圈子内可通过通一IP访问其他机器;外部网络不可访问)、公网IP(公开都可访问,需特定申请)和本机IP(固定为127.0.0.1)。



网页服务器:Web Server, 网页服务器,安装了系统的机器中处理请求的应用叫网页服务器(Web Server),常见系统中如Linux、Windows Server 2012等

  • 常见的Web Server产品有:Apache、Nginx、IIS和Lighttpd等;

  • 功能(负责连接用户和Web站点,承上启下):

(1)接收来自浏览器端的HTTP请求

(2)请求转发给指定Web站点程序(后者由Web开发者编写,负责处理请求)

(3)向浏览器发送请求处理结果


二、具体过程描述:

  1. 用户在浏览器中输入URL,例如:baidu.com,发起访问此网页的请求;

  2. 浏览器无法识别URL代表什么,开始按一定规律解析域名依次来查找资源的位置,如查找不到会继续下一步,顺序为:

(1)查找 浏览器缓存 ,DNS中保存着最近访问过的URL记录;

(2)查找 系统缓存,系统的Hosts文件中保存DNS访问记录;

(3)查找 路由器缓存

(4)查找 ISP DNS缓存,如网络服务商(电信)的DNS记录;

(5)如通过以上方式都没找到,会开始查找根域名服务器对应的IP,根域名服务器会向下级服务器转达请求,层层下发,直到找到对应的 IP 为止。

  1. 当浏览器找到了域名对应的IP,服务器(Web Server)作为管理入口接收baidu的Https协议,开始提交给后台服务器处理用户请求,返回处理结果给浏览器;
  • 后台处理器的处理流程:
    目前有很多框架来进行处理,常用的框架有MVC(Model View Controller)模型,它将服务器的应用程序分为三个部分:模型(Model)、视图(Model)和控制器(Controller),基本运作方式为:


    MVC网站处理流程
  1. 浏览器接收到网页服务器返回的HTML字符串后,一句句进行加载和解析;
  • 解析到不同的标签发送请求获取不同的代码语言,例如:HTML请求获取HTML、Link请求获取CSS、Script请求获取JS、IMG请求获取图片资源;
  • 解析的过程就是生成DOM(Document Object Model 文本对象模型)树的过程;
  • 浏览器通过一定的渲染规则,将DOM树进行可视化处理,最终实现网站页面的绘制并展现。


参考来源:

  1. wiki URL

  2. wiki 域名

  3. wiki IP地址

  4. wiki 网页服务器

  5. 知乎:老生常谈的从 URL 输入到页面展现背后发生的事 By Oli Zhao

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容