从 URL 输入到页面展现发生了什么

最近开始学习前端,看了网上许多相关的文章,老师和已工作的朋友也都证实,“在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么”是绕不开的面试题之一。如果我被面试到这个题目,该如何回答呢?所以我来自问自答一番。

这个过程分为以下几个步骤:

1.域名解析

这里首先解释3个名词:

  • URL(Uniform Resource Locator)
    统一资源定位符,即域名,也就是我们常说的网址。比如http://www.baidu.com 就是百度网站的URL。http超文字传输通讯协定是WWW万维网和浏览器最主要的沟通方式。www.google.com指服务器地址,必要时会加上端口号若为HTTP的默认值“:80”可省略。在WWW中想要连结到某个网页,便需要给浏览器一个位址,而URL在此的功能就是告知浏览器某个资源在哪个位置。

  • IP地址
    IP是因特网中的每台连接到网络的计算机为实现相互通信而遵循的规则协议。互联网上每一台计算机的唯一标识是它的IP地址,形如202.108.22.5,IP地址并不方便记忆。 为了便于记忆或辨识,用户使用域名来登录网站,每个域名背后有对应的IP地址。每个网站就是靠IP来定位的。浏览器并不能识别URL是什么,因此URL输入后,浏览器首先要做得是域名解析。

  • DNS
    DNS(Domain Name System,域名系统)是互联网的一项服务。 它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。DNS实际上充当了一个翻译的角色,实现了网址到IP地址的转换。

了解这几点,再讲网址到IP地址转换的过程就很容易理解了。

浏览器首次登陆或者相隔一段时间内登陆某个网站,解析过程如下:
(1)输入URL地址后,浏览器会从电脑C盘的hosts文件查找是否有存储DNS信息,查找是否有目标域名和对应的IP地址;

(2)从路由器的缓存DNS信息中查找;

(3)ISP DNS缓存查找,从网络服务商(比如电信)的DNS缓存信息中查找;

(4)经由以上三种查找方法还没查找到目标URL对应的IP的话,就会向根域名DNS服务器查找目标URL的对应IP,根域名服务器会向下级服务器转送请求,层层下发,直至找到对应IP并把它缓存到本地,供下次查询使用。

如果是近期登陆过的网站,本地浏览器会有DNS缓存,可以直接查找到IP地址。知道IP地址之后,通过IP地址查找到对应的服务器,浏览器将用户发起的http请求发送给服务器。

2.服务器处理用户请求

服务器是一台安装系统的机器。常见的服务器有Linux、Windows server 2012等。系统里安装的处理请求的软件叫Web server。

Web server是一个统一管控的工具。结合配置文件,Web server把接收到的用户请求交给网站代码,或者接受请求反向代理到其他Web server,然后返回后才程序处理的结果。

3.网站处理流程

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

MVC是一个设计模式,将应用程序分成三个核心部件:模型(model)-- 视图(view)--控制器(controller),它们各自处理自己的任务,实现输入、处理和输出的分离。

(1)视图(view)

视图是用户看到并与之交互的界面。这是前端工作的主要部分。

(2)模型(model)

模型是将实际开发中的业务规则和所涉及的数据格式模型化,应用于模型的代码只需写一次就可以被多个视图重用。在MVC的三个部件中,模型拥有最多的处理任务。一个模型能为多个视图提供数据。

(3)控制器(controller)

控制器接受用户的输入并调用模型和视图去完成用户的需求。Controller处于管理角色,从视图接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示模型处理返回的数据。

总结而言,首先控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回html字符串给浏览器,浏览器呈现网页给用户。因此,下一步就来到浏览器处理阶段。

4.浏览器处理

通过后台处理返回的html字符串结果会被浏览器读取解析,对应就是html页面加载、解析、渲染的工作。

(1)加载

HTML字符串被浏览器接受后被一句句读取解析,解析到link 标签后重新发送请求获取css;解析到 script标签后发送请求获取 js,并执行代码;解析到img 标签后发送请求获取图片资源。并同步进行加载解析。

(2)解析、渲染

解析的过程,其实就是生成解析树,即dom树。dom树是由dom元素及属性节点组成,加上css解析的样式对象和js解析后的动作实现。而渲染,就是将DOM树进行可视化表示。下一步就来到了绘制网页的工作阶段。

5.绘制网页

浏览器根据 HTML 和 CSS 计算得到渲染树,绘制到屏幕上,js 会被执行,由此最终完成了页面展示。

总结

这篇文章写得很纠结,很多步骤我自己心里知道是那么回事,但没有能力用自己的语言表述出来,只会照本宣科地把自己学的内容搬过来。这也跟我的计算机基础比较薄弱有关,以后会注意加强这一块的补充,把知识潜移默化到自己头脑中。

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

推荐阅读更多精彩内容