从一个url地址到最终页面渲染完成发生了什么

通常上网的时候,敲入一个域名地址,电脑会首先向DNS服务器搜索相对应的IP地址,服务器找到对应值之后,会把IP地址返回给你的浏览器,这时浏览器根据这个IP地址发出浏览请求,这样才完成了域名寻址的过程。操作系统会把你常用的域名IP地址对应值保存起来,当你浏览经常光顾的网站时,就可以直接从系统的DNS缓存里提取对应的IP地址,加快连线网站的速度。

1.DNS解析:浏览器会把输入的域名地址解析为ip地址

 DNS:全称-Domain name resolution  中文名:域名解析

过程:

  • 先读取浏览器的DNS缓存,如果有域名对应的IP地址,就会把IP地址返回给你的浏览器,这时浏览器根据这个IP地址发出浏览请求,如果没有

  • 就读取本地系统的DNS缓存,如果有域名对应的IP地址,就会把IP地址返回给你的浏览器,这时浏览器根据这个IP地址发出浏览请求,如果没有

  • 就读取路由器的DNS缓存(路由器存在并且路由器存在DNS缓存),如果有域名对应的IP地址,就会把IP地址返回给你的浏览器,这时浏览器根据这个IP地址发出浏览请求,如果没有

  • 就从网络运营商的DNS缓存读取,比如移动运营商的服务器上有DNS缓存,通常能从这四步找到IP地址,如果还是没找到

  • 需要做递归搜索,如:blog.baidu.com

    • .com根域名下查找DNS解析,如果有就使用,如果没有

    • 就在.baidu域名下查找DNS解析,如果有就使用,如果没有

    • 就在.blog域名下查找DNS解析,如果有就使用,如果没有,最终找不到IP

    • 那就出错了

DNS解析完之后有了IP地址,从而可以真正可以跟服务器进行交互

2.在交互之前有TCP连接,TCP是因特网中的传输层协议,使用三次握手协议建立连接

  • 第一次握手,由浏览器发起,告诉服务器我要发送请求了。

  • 第二次握手,服务器忙的时候不能接收客户端的请求,服务器有空的时候准备好一些空间、打开一些接口,由服务器发起,告诉浏览器我准备接受了,你赶紧发送吧。

  • 第三次握手,浏览器可能出问题不打算发请求了,浏览器确定无问题可发请求时,由浏览器发起,告诉服务器,我马上就发了,准备接受吧。

三次握手完成,TCP客户端和服务器端成功地建立连接,可以开始传输数据了。

3.发送请求:通过规定的协议(http)向目标主机发送请求

-请求报文,http协议的通信内容

4.接受响应

-响应报文

5.渲染页面

  • 遇见HTML标记,浏览器调用HTML解析器解析成Token并构建成dom树

  • 遇见style/link标记,浏览器调用css解析器,处理css标记并构建cssom树

  • 遇见script标记,调用JavaScript解析器,处理script代码(绑定事件,修改dom树/cssom树)

  • Render Tree: 将dom树和cssom树合并成一个渲染树(Render Tree)

  • layout,顾名思义就是计算出每个节点在屏幕中的位置(布局)

  • Painting:通过显卡,将Layout后的节点内容分别呈现到屏幕上。(渲染)

注意:这五个步骤不一定按照渲染顺序执行,如果dom树或cssom树被修改了,可能会执行多次布局和渲染往往实际页面中,这些步骤都会执行多次的。

6.断开连接,TCP四次挥手

  • 第一次挥手,由浏览器发起的,发送给服务器,我东西发完了(请求报文),你准备关闭吧。

  • 第二次挥手,由服务器发起的,告诉浏览器,我东西接受完了(请求报文),我准备关闭了,你也准备吧

  • 第三次挥手,由服务器发起,告诉浏览器,我东西发送完了(响应报文),你准备关闭吧。

  • 第四次挥手,由浏览器发起,告诉服务器,我东西接受完了,我准备关闭了,你也准备吧。

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