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

这是一道经典的面试常见问题,涉及到了很多方面的知识。
这篇文章简单介绍当你访问一个URL时,背后到底发生了什么。

1. 输入URL

URL全称Uniform Resource Locator(统一资源定位器), 用于定位互联网上的资源
完整的URL包含

  • 协议,如http、https、ftp
  • 域名,如baidu.com
  • 端口,如http一般使用80端口
  • 文件路径 ,如/htm_data/20/1510/1441477.html

2. DNS解析

要想知道具体那台服务器上有你需要的资源,需要知道它的IP地址。由于IP地址不方便记忆,所以互联网的设计者发明了域名。当输入一个URL时,比如输入https://www.baidu.com,需要将其中的域名baidu.com转换为IP地址。DNS(Domain Name System)提供的服务就是将域名转换到对应的IP地址。

DNS解析的过程如下

  1. 从浏览器缓存中查询。浏览器会缓存一段时间的DNS记录。
  2. 从操作系统缓存中查询。如果浏览器中没有包含对应的记录,讲继续查询操作系统缓存。系统缓存主要存在hosts文件中。
  3. 从路由器中查询DNS缓存。路由器通常也会有自己的DNS缓存。
  4. 从ISP的DNS缓存中查询。
  5. 从域名服务器中递归查询。由本地域名服务器依次查询根域名服务器、顶级域名服务器、主域名服务器,查询到后相应给客户端主机。


    image

3. 浏览器发送HTTP请求到Web服务器

HTTP是应用层协议,它使用TCP作为其传输层协议。
浏览器构建HTTP请求报文并通过TCP协议发送至服务器制定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文由请求行、请求报头和请求正文三部分组成。

GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,zh-TW;q=0.8,en-US;q=0.7,en;q=0.6
Cookie: BAIDUID=BE...

常用的HTTP请求方法有GET, PUT, POST, DELETE。
Header中的各字段:User-Agent表示发出请求的客户端的类型。Accept和Accept-Encoding表示接受何种类型的响应。Cookies是网站保存在客户端本地的键值对,一般包含用户登录信息和一些用户设置。

4. Web服务器处理请求并返回HTTP响应

Web服务器接收这个HTTP请求,处理这个请求,并返回响应结果。

Web服务器接收HTTP请求并决定使用哪个请求处理程序处理这个请求。常见的 web服务器有 Apache、Nginx、IIS、Lighttpd。

请求处理程序读取请求和参数以及cookies。它会读取以及可能更新一些存储在服务器的数据,接着请求处理程序会生成一个HTML响应。这个过程就是后端工程师所关心的部分。一般会用到一些服务端的Web框架,如Djnago(Python)和Express(Node/Javascript)。

HTTP/1.1 200 OK
Bdpagetype: 1
Bdqid: 0xd47475a20004bb07
Cache-Control: private
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Cxy_all: baidu+39f5578e2dd536a8ec249b22b2c3b62d
Date: Wed, 18 Apr 2018 02:03:13 GMT
Expires: Wed, 18 Apr 2018 02:02:18 GM

HTTP响应也由三部分组成:状态码, 响应报头和响应报文。

TODO: 详细说明HTTP

5. 浏览器解析并渲染页面

浏览器一边接收HTTP文件,一边渲染页面。

随着浏览器渲染HTML,浏览器会注意到有些标签需要请求其他URLs的资源,浏览器将会重复以上的步骤,如在DNS中查询域名,并向URL发送请求等步骤。

  • 遇到link标签引用的CSS文件
  • 遇到script标签引用的JavaScript文件
  • 遇到img标签引用的图片

浏览器执行script标签中的JavaScript代码

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

推荐阅读更多精彩内容