从URL输入到页面展现

1.输入URL

  • URL:统一资源定位符,是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示。
  • URL包含以下几部分:协议、服务器名称(或IP地址)、路径、参数和查询。
  • 举例说明:
  • 常用协议:
协议 中文名称 默认端口号
http 超文本传输协议 80
https 用安全套接字层传送的超文本传输协议 443
ftp 文件传输协议 21
TELNET 远程终端协议 23

如果地址不包含端口号,根据协议的默认端口号确定一个。

2.根据URL,在本地DNS缓存中查找域名对应的IP地址

浏览器和操作系统在获取网站域名的实际IP地址后会对其IP进行缓存,在短时间内重复访问同一域名时,会直接在DNS缓存中读取域名对应的IP地址,以减少网络请求的损耗(先在浏览器DNS缓存中查找,如果没有找到,则会在操作系统DNS缓存中查找)。浏览器和操作系统都有一个固定的DNS缓存时间,其中Chrome的过期时间是1分钟,在这个期限内不会重新请求DNS。Chrome浏览器看本身的DNS缓存时间比较方便,在地址栏输入:

chrome://net-internals/#dns

就可以查看本地DNS缓存:


3.查询hosts文件

  • 如果在本地DNS缓存中没有找到域名对应的IP地址,则会查询hosts文件,看其中是否已经有与当前域名对应的 IP 地址,如果有就会直接采用,如果没有,那么就得由DNS服务器进行域名解析完成域名与IP的转换工作。

4.域名解析

  • 域名系统DNS(Domain Name System):用来把人们使用的域名转换为IP地址的系统。它是一个联机分布式数据库系统,采用客户服务器方式。
  • 域名到IP地址的解析:当浏览器需要把域名解析为IP地址时,会调用解析程序,并成为DNS的一个客户,把带解析的域名放在DNS请求报文中,以UDP用户数据报方式发送给本地域名服务器可以是路由器或者是运营商服务器)。本地域名服务器在查找域名后,把对应的IP地址放在回答报文中返回。浏览器在获取相应的IP地址后即可进行下一步的通信。
  • 若本地域名服务器查找不到对应的IP,则此域名服务器就暂时成为DNS中的另一个客户,并向其他域名服务器发出查询请求。这种过程直至找到能够回答该请求的域名服务器为止。

5.浏览器与服务器建立连接,并发送请求给服务器

  • 当浏览器得到域名对应的IP地址后,则会使用TCP协议,和服务器建立连接(三次握手)。
  • 和服务器建立连接后,浏览器则会使用相关协议(http或https),向服务器发送请求。
  • HTTP协议请求方法主要有:get、post、put、delete等几种方式。

6.服务器收到请求并处理,最后返回结果

  • 服务器是一台安装系统的机器,常见的系统如Linux、windows server 2012,系统中安装的处理请求的应用叫Web server。常见的Web服务器有 Apache、Nginx、IIS、Lighttpd,Web服务器接收用户的请求,或者接受请求反向代理到其他Web服务器。

  • (以MVC框架为例)当服务器收到来自用户的请求后,首先Controller(控制器)根据用户的请求调用相应的Model(模型)去处理用户请求相关的业务逻辑(包括对数据库的增删改查),然后将处理结果传递给对应的View(视图),构造显示页面(HTML文件)。最后服务器使用HTTP响应返回相应的资源(HTML文件)。

7.浏览器处理响应

  • 浏览器收到来自服务器的响应后,会将响应中的HTML字符串一句句读取解析,解析到link标签后重新发送请求下载css文件,解析到script标签后重新发送请求下载js文件,并执行代码,解析到img标签后重新发送请求获取图片资源。
  • 浏览器根据html、css计算得到渲染树,结合相关js的执行结果,最终将网页绘制到屏幕上,。
  • 这一部分只了解了个大概,在今后的学习过程中再慢慢深入学习这部分的内容吧。在查找资料的过程中,看到一篇简单易懂还挺有趣的文章:

HTML页面加载和解析流程

  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
  4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
  5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
  7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
  8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。突然少了这么一个元素,浏览器不得不重新渲染这部分代码;
  9. 终于等到了</html>的到来,浏览器泪流满面……
  10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
  11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容