产品经理学技术(2)-打开网页需要几步?

打开网页需要几步?

1、打开浏览器;

2、输入网址;

3、敲下回车键。

这是从用户行为的角度来描述。

然而,从敲下回车键到网页加载完成的短短几秒内,浏览器默默地做了很多事情:

1、向服务器发送请求;

2、服务器响应请求返回数据;

3、浏览器展示数据。

理解到这个层面,一般也就够了,不过实际上远不止这么简单。作为互联网的从业人员,尤其是产品经理,了解网络请求的全过程,会是一个加分项。很多公司面试产品,也会拿这个问题考察面试者的技术储备。下面就来说说,打开网页究竟需要几步?

浏览器正式发送请求前,会有很多的准备工作。首先得知道服务器的地址,也就是IP地址,例如14.215.177.38(百度)。如下图,输入这串数字,敲下回车,百度首页就会加载出来,就和我们平常输入www.baidu.com一样。但是这串数字太难记了,所以会有www.baidu.com这样的网址(以下统称域名)出现,方便我们平时上网。

用IP地址打开百度首页

因此,打开网页的第一步,需要将域名转化为IP地址。浏览器会找到域名服务器(DNS:Domain Name System,里面存着互联网所有域名与IP地址的映射关系,解析域名,就能获取对应的IP地址 ),将www.baidu.com转化成14.215.177.38。这时,服务器的地址找到了。

现在知道了出发点(浏览器)与目的地(服务器)的地址,然而并没有什么卵用。如果我在杭州,想去北京,还不知道怎么走呢。假设坐高铁,沿途会停靠很多站台,在网络中,这一个个站台,就是路由器,如下图。高铁遵循一定的规则与调度,网络也一样,它遵循协议。通过协议的规定与调度,浏览器会找到去往目的地的最优路径。这里的协议主要指IP协议、ARP协议和OSPF协议,感兴趣的童鞋可以自己研究,本人也仅了解概念。

网络简易示意图

OK,现在找到去往目的地的最优路径了。可以发起请求了么?还不行,请求也不是随便乱请,需要浏览器与服务器互相确认3次,才能建立发送请求的连接。

第1次确认,浏览器:服务器,我准备向你发送请求;

第2次确认,服务器:好的,我会响应并返回数据的;

第3次确认,浏览器:OK,收到!

这3次确认也叫3次握手,机制比我描述的肯定复杂很多,这里只是介绍大概的意思。

完成3次握手,通过TCP协议(传输控制协议),浏览器与服务器就建立了可发送请求的TCP连接。

接着,浏览器会向服务器发送HTTP请求,服务器收到请求,将数据包返回到浏览器,返回的数据包,简单来说一般包含3部分代码:HTML、CSS和JavaScript。其中HTML负责搭建网页的结构,CSS负责展示网页的样式,JavaScript负责监听事件与交互。

浏览器收到数据包,就解析数据包中的HTML、CSS和JavaScript代码,并渲染到屏幕上。

至此,大功告成!

我们来总结一下,打开网页究竟需要几步?

1、DNS服务器解析域名,获得服务器的IP地址

2、浏览器与服务器建立发送消息的最优路径

3、浏览器与服务器经历3次握手,互相确认可以发送HTTP请求

4、浏览器向服务器发送HTTP请求

5、服务器响应HTTP请求,并返回数据包到浏览器

6、浏览器收到数据包,读取数据

7、浏览器解析HTML、CSS、JavaScript代码,并进行渲染

8、网页加载完成

最后再强调一下,真实的网络请求远比我所描述的复杂地多。而作为产品认识到这8步应该够用,如果想再深入,可以与身边的前端后台大牛多聊聊,当然也可以自己去学着写代码。最近在慕课网上学习JS,想在下篇文章中分析一小段代码,借此说明程序员常说的对象、方法、属性与事件,敬请期待!

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,103评论 18 139
  • 1. 基础知识 1.1 3种常见的计算机体系结构划分 OSI分层(7层):物理层、数据链路层、网络层、传输层、会话...
    Mr希灵阅读 19,701评论 6 120
  • 名词延伸 通俗的说,域名就相当于一个家庭的门牌号码,别人通过这个号码可以很容易的找到你。如果把IP地址比作一间房子...
    杨大虾阅读 20,395评论 2 57
  • 我这表露的怅惘 如花瓣样的断链 她是否将我留给了遗忘 晴天里的雨,显出乌云的隐情 是谁落魄如此,隐藏的那么深
    吾梦雨和姜德佳阅读 108评论 0 3
  • 今天又是一个星期日,是个大晴天。 经过了一周的晴天、多云天、阴天、下雨天,我每天都会去观察它,妈妈也会注意给它浇水...
    Jackie_牛阅读 80评论 0 3