前端面试考官:从你输入网址,到网页出现,这过程到发生了什么?

一、你平日在浏览器输入网址这个方式,叫URL。

URL 是什么?

正式名称为 Uniform Resource Locator (简称:URL) ,中文称为统一资源定位符,就是访问网络上的资源的途径。 你在网络上看到的网页,影片,图片等一切资源都是通过URL去访问或获取。

就像现实生活一样,你通过地址门牌去找到不同的地方。

URL 一般格式如下:

协定型式://伺服器位址:埠号(必要时需加上埠号)/路径/档名

以本文章URL为例: //www.greatytc.com/u/123

  • http:// 是与web伺服器通讯采用http协议协定型式
  • www.greatytc.com是简书伺服器域名地址
  • u/123 是所访问的文件存在于伺服器上的路径档名

URL 协定型式主要用作不同的传输方式与内容类型,以下是最常见到的形式:

  • http 超文本传输协定资源,是网路最广泛的协定之一,专门负责HTML网页的发布与接收。就像你目前观看的本文章
  • https 用加密传送的超文本传输协定,传输的网页经过加密,现普遍采用,有关加密资料可参见这里
  • ftp 档案传输协定,负责档案传输,可以进行档案共享
  • mailto 电子邮件位址,专门负责电子邮件的传输,@是电子邮件必须有的

更多的协定型式可参考这里

二、当你输入网址后,发生了什么?

先了解什么是 IP 地址

正式名称为 Internet Protocol (简称:IP) ,中文称为网际协议。每个处于互联网中的设备都有 IP 地址,以实现相互通讯。例如127.0.0.1是代表本机的 IP。IP 又分为区域网 IP 和公网 IP。简单而言:

  • 区域网 IP 属于非注册地址,专门为组织机构内部使用,通过网际网路是不能访问私有IP的,就如你公司中的内联网。
  • 公网 IP 则是需要注册,通过它直接访问网际网路,在任何地方只有能连网都能访问公网 IP。

理论上,我们知道 IP 地址,就可以访问网络上的网页等资源。但恐怕你也记不了这些难辨认又没有意思的数字吧。于是就有域名的出现。

你输入的网址名称就是域名

域名就是把 IP 地址语义化,使人容易记忆及辨认。利用域名对应 IP 地址。

//www.greatytc.com 为例,浏览器不会知道 www.greatytc.com 到底是在网络哪个位置,它需要查找 www.greatytc.com 这个域名背后对应所在伺服器的 IP 地址,才能找到目标。这个过程叫域名解析

三、进行域名解析

当你输入网址后,浏览器会进行以下一系列流程,透过域名伺服器(Domain Name Server, DNS) ,去进行域名解析,查找域名是对应哪个 IP 地址,最后从该 IP 地址获取网页等网络资源。

  1. 查找浏览器缓存

如果你先前在浏览器曾经到访过网站。浏览器会缓存DNS记录一段时间,这样就找到对应的 IP 地址。域名解析结束。如果未曾到访过网站就会继续进行域名解析。

  1. 查找系统缓存

从电脑系统中 Hosts 的文件查找有没有DNS记录,是否有相关的对应的 IP 地址。如果没有,域名解析继续。

  1. 查找路由器缓存

如果有其他设备使用的路由器曾经到访过网站。路由器也会缓存DNS记录,是否有相关的对应的 IP 地址。如果没有,域名解析继续。

  1. 查找 ISP DNS 缓存

以上还是没有,就会向你的网络供应商 (Internet Service Provider, ISP) 查找有没有相关DNS记录。

  1. 查找根域名伺服器供应商

ISP DNS 缓存还是没有,就会向根域名伺服器供应商,查找相关对应的 IP 地址。根域名伺服器把请求转发给下一级,直到找到对应的IP为止。

  • 为什么修改 DNS 为 114.114.114.114 或 8.8.8.8 可以解决电脑上不了网的问题?

8.8.8.8 是谷歌提供的DNS伺服器的 IP 地址,114.114.114.114 是国内电信网络供应商。如果我们网页显示不了,就说明我们以上一系列流程都找不到相关 IP 地址,你可以尝试直接从谷歌或电信提供的DNS伺服器中查找相关的 IP 地址

  • 什么是DNS挟持?

例如:以上1-5流程中,其中hosts或缓存资料遭篡改,导致域名解析到不正确的IP地址,导致访问错误的 IP 地址。如将一个银行域名指向不正确的 IP 地址,造成威胁

四、当域名解析成功,找到相关 IP 地址,接下来到Web伺服器处理请求

每台伺服器上都会安装处理请求的应用:Web server。常见的web server 有apachenginxIISLighttpd等。

当 web serve r接收到一个 HTTP 请求 (request),便会进行一个网站处理流程,最后产生一个 HTML 的响应(response)给浏览器。

伺服器内网站处理流程

网站处理是实际后台处理的工作。后台开发现在有很多框架,但大部分都还是按照MVC设计模式进行搭建的。

MVC是一个设计模式,将应用程序分成三个核心部件:

模型(model),视图(view),控制器(controller)

MVC的处理过程:

  1. 每一个用户输入的请求
  2. 首先被路由接收,再交由控制器决定用哪个模型来进行处理
  3. 将用户输入的指令数据传给模型进行
  4. 进行业务逻辑判断,按需要向数据库存取
  5. 根据业务逻辑选择视图
  6. 控制器用业务逻辑相应的数据填入视图模型
  7. 将处理好的视图模版的HTML交回控制器
  8. 生成 HTML 字符串返给浏览器处理,并通过显示页面呈现给用户。

五、最后伺服器将处理好的HTML,交给浏览器处理,最后显示在你的屏幕上

接下来就是浏览器进行处理, 伺服器将处理好的HTML字符串交给浏览器后被一句句读取解析。过程主要分为

载入,解析,渲染

  • 载入
    由于浏览器对 HTML 页面加载顺序是从上而下的。如果加载过程中遇到外部 css (如下)
<html>
<head>
<script type="text/javascript" src="style.js"></script>
<script type="text/javascript" src="style1.js"></script>
<script type="text/javascript" src="style2.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello, world!
</body>
</html>

浏览器另外发出一个请求,来获取 CSS 文件。遇到图片资源,浏览器也会另外发出一个请求,来获取图片资源。但必须留意当文档加载过程中遇到 Javascript(js) 文件(如上例),HTML 文档加载解析渲染同步,不仅要等待文档中 js 文件加载完毕,还要等待解析执行完毕,才可以恢复 HTML 文档的渲染线程,导致 styles.css 样式文件和<body>标签都无法被加载,这会影响到页面加载的速度,带来不良用户体验

  • 解析,渲染
    浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。

总结

从你输入网址,到网页出现这个看似简单且短的时间过程中,原来背后是牵涉这么多的步骤及概念,这真不简单喔。通过写这篇文章,对前端这条热门面试题目,也有初步的了解了。

本文是小弟学习前端写有关于从你输入网址,到网页出现,这过程到发生了什么的博文,请大家多多指教。如有任何意见及交流,可在下方留言,谢谢!

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

推荐阅读更多精彩内容