浅析浏览器输入URL到页面展现

前言

我们每天都在浏览器中输入URL,再到页面呈现也就几秒的时间。看似一个随意的举动,但是作为一个前端工程师,便要知道短短的这段时间里发生了什么?

主要概念

URL(uniform resource location)统一资源定位符: 俗称网页地址,是因特网上标准的资源地址(Address)。
在一个简单的地址中包括一下部分,如图:


IP(Internet Protocol):网络之间互联的协议。链接互联网的每一台设备都有且只有一个IP地址,用来标识自己。有不同的类型,感兴趣自己去查阅。

域名(Domain Name): IP协议规定使用数字来标记一个地址,但日常生活中人们很难记忆若干地址,所以发明了一些好记的字符来标识设备地址,那就是域名。

DNS(Domain Name System): 既然有了域名让人类记忆一个地址,但是计算机记录的还是各个设备的IP地址,这样需要一个能够将域名转化为IP地址的相互映射一个分布式数据库,DNS提供的就是这样的服务。

HTTP(HyberText Transfer Protocol)超文本传输协议:所有的www文件都必须遵守这个标准。

浅析

地址解析

敲下回车之后,浏览器就开始解析域名,为了寻找域名映射的IP地址(目标: 域名 --> IP地址),解析的经历这几个阶段:

  1. 查询浏览器本身DNS缓存中是否有域名相关的信息
  2. 查询本机的host文件中是否有域名相关的信息
  3. 查询离本地最近的路由器中DNS的缓存中是否有域名相关的信息
  4. 查询ISP(互联网服务提供商,例如电信,移动)中的DNS服务器中是否有目标域名的信息
  5. 查询根域名服务器是否有目标域名的信息,如果没有,则传至子域名服务器进行查询, 以此递推,直到找到了IP地址为止

发送请求

找到了IP地址后,开始建立TCP链接(三次握手),与目标服务器建立连接,浏览器(客户端)通过HTTP发送请求到目标服务器。
请求报文

  1. 报文首部
    1.1 请求行 方法、URI、HTTP版本 (GET / HTTP/1.1)
    1.2 请求首部字段
    1.3 通用首部字段
    1.4 其他 cookie之类
  2. 空行
  3. 报文主体

服务器处理阶段

假设用户请求的访问的是PHP文件,Web服务器(自身不能处理PHP文件)收到了请求后,将对应的请求的PHP文件交给PHP应用服务器处理,若文件中有对数据库的数据进行处理,PHP服务器会链接数据库,通过SQL语句对数据进行处理,待PHP服务器将最终的数据生成HTML文件交给Web服务器,Web服务器将文件传输给客户端。

响应阶段

客户端接收服务器发来的响应结果,解析响应报文。
响应报文

  1. 报文头部
    1.1 状态行 HTTP版本、状态码、状态语句(HTTP1.1 200 ok)
    1.2 响应首部字段
    1.3 通用首部字段
    1.4 实体首部字段
    1.5 其他 cookie之类
  2. 空行
  3. 报文主体

解析、渲染阶段

  1. 浏览器解析HTML文件,顺序自上而下
  2. HTML解析器将HTML结构构建为DOM树
  3. CSS解析器将CSS解析为CSSOM树
  4. DOM树和CSSOM树开始渲染每一个节点的样式,最终将整个渲染树显示在浏览器上

注:如果解析过程中遇见<script>标签,会去下载JS文件并执行它,解析器也会停止对HTML的解析,这就是白屏闪屏现象产生的原因,所以会建议将<script>写在文档的最后

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

推荐阅读更多精彩内容