关于浏览器展示页面的那些事儿

一、应用层DNS解析域名

首先,浏览器会查找本地域名DNS缓存,不同浏览器会储存个自固定的一个时间(2分钟到30分钟不等);若找到则返回响应的IP地址。若没找到则请求上级DNS服务器,直至找到或到根节点。(本机计算机找到其中一台解析域名的服务器(可能是.com),如果没有找到对应的IP地址,那么就会去找根域名服务器,根域名服务器知道所有的子服务器,所以他肯定知道该域名所对应的IP地址在那个子服务器中,所以告诉第一次查询的服务器要他去另一台服务器上找,找到了,就将其返回给计算机,以后在有另一台计算机也通过这个域名访问,那么第一台服务器会有原来的域名IP地址的缓存,就不用去找根服务器了。)

DNS查找示意图

二、浏览器给web服务器发送一个HTTP请求

HTTP请求头信息图解

1、Request URL:浏览器给web服务器发送一个HTTP请求的完整地址

2、Request Method:http请求方法

3、Host:主机名 www.baidu.com

4、User-Agent:浏览器标识信息

5、Accept:能接收的数据类型有哪些

6、Accept-Language:表示用户希望优先想得到的版本,一次排列下去,先是中文,再是英文

7、Accept-Encoding:通知服务端可以发送的数据压缩格式

8、Cookie:浏览器端的一个技术,在服务器上记录用户信息,但是也会在浏览器中保存一份。

9、Connection:连接的方式,有两种,非持续连接和持续连接,非持续连接,一次请求/响应就对应一个TCP连接,接到了响应该连接就关闭,然后在发送请求就在建立TCP连接,持续连接就相反,这里使用的是持续连接

10、Referer:告诉服务器该请求是从哪个页面链接过来的,服务器基此可以获得一些信息用于处理。

11、Referrer Policy:无论是同源请求还是非同源请求,都发送完整的 URL(移除参数信息之后)作为引用地址。

三、传输层TCP传输报文

1、三次握手机制

一开始客户端和服务端都市关闭状态,但是在某个时刻,客户端需要和服务端进行通信,此时双方都会各自准备好端口,服务器段的端口会处于监听状态,等待客户端的连接。客户端可会知道自己的端口号,和目的进程的端口号,这样才能发起请求。

三次握手图解

第一次握手:客户端想与服务器进行连接了,所以状态变为主动打开,同时发送一个连接请求报文给服务器段SYN=1,并且会携带x个字节过去。发送完请求连接报文后,客户端的状态就变为了SYN_SENT,可以说这个状态是等待发送确认(为了发送第三次握手时的确认包)

第二次握手:服务端接收到连接请求报文后,从LSTTEN状态变为被动打开状态,然后给客户端返回一个报文。这个报文有两层意思,一是确认报文,二可以达到告诉客户端,我也打开连接了。发完后,变为SYN_RCVD状态(也可以说是等待接受确认状态,接受客户端发过来的确认包)

第三次握手:客户端得到服务器端的确认和知道服务器端也已经准备好了连接后,还会发一个确认报文到服务器端,告诉服务器端,我接到了你发送的报文,接下来就让我们两个进行连接了。客户端发送完确认报文后,进入ESTABLISHED,而服务器接到了,也变为ESTABLISHED

进入到ESTABLISHED状态后,连接就已经完成了,可以进行通信了。

问题:为什么需要第三次握手,有前面两次不就已经可以了吗?

假设没有第三次握手,客户端发送一个连接请求报文过去,但是因为网络延迟,在等待了一个超时时间后,客户端就会在重新发一个请求连接报文过去,然后正常的进行,服务器端发回一个确认连接报文,然后就开始通讯,通讯结束后,那个第一次因为网络延迟的请求连接报文到了服务器端,服务器端不知道这个报文已经失效,也发回了一个确认连接报文,客户端接收后,发现自己并没有发送连接请求(因为超时了,所以就认为自己没有发),所以对这个确认连接请求就什么也不做,但是此时服务端不这么认为,他认为i连接已经建立了,就一直打开着等待客户端传数据过来,这就造成了极大的浪费。如果有了第三次握手,那么客户端就可以通知服务器了。所以第三次握手也很重要。( 第三次握手是确保双方能通信顺畅,没有网络拥堵的情况

四、服务器响应请求   

经过前面的6个步骤,服务器收到了我们的请求,也处理我们的请求,到这一步,它会把它的处理结果返回,也就是返回一个HTPP响应。

经过前面几个步骤,服务器已经接受客户端发出的请求,也处理我们的请求,到这一步,服务端会将运算结果返回至客户端,即返回一个http请求。浏览器的返回状态可以根据状态代码判别,第一个数字定义了响应的类别,且有五种可能取值。如下:

1xx:信息性状态码,表示服务器已接收了客户端请求,客户端可继续发送请求。

100 Continue

101 Switching Protocols

2xx:成功状态码,表示服务器已成功接收到请求并进行处理。

200 OK 表示客户端请求成功

204 No Content 成功,但不返回任何实体的主体部分

206 Partial Content 成功执行了一个范围(Range)请求

3xx:重定向状态码,表示服务器要求客户端重定向。

301 Moved Permanently 永久性重定向,响应报文的Location首部应该有该资源的新URL

302 Found 临时性重定向,响应报文的Location首部给出的URL用来临时定位资源

303 See Other 请求的资源存在着另一个URI,客户端应使用GET方法定向获取请求的资源

304 Not Modified 服务器内容没有更新,可以直接读取浏览器缓存

307 Temporary Redirect 临时重定向。与302 Found含义一样。302禁止POST变换为GET,但实际使用时并不一定,307则更多浏览器可能会遵循这一标准,但也依赖于浏览器具体实现

4xx:客户端错误状态码,表示客户端的请求有非法内容。

400 Bad Request 表示客户端请求有语法错误,不能被服务器所理解

401 Unauthonzed 表示请求未经授权,该状态代码必须与 WWW-Authenticate 报头域一起使用

403 Forbidden 表示服务器收到请求,但是拒绝提供服务,通常会在响应正文中给出不提供服务的原因

404 Not Found 请求的资源不存在,例如,输入了错误的URL

5xx:服务器错误状态码,表示服务器未能正常处理客户端的请求而出现意外错误。

500 Internel Server Error 表示服务器发生不可预期的错误,导致无法完成客户端的请求

503 Service Unavailable 表示服务器当前不能够处理客户端的请求,在一段时间之后,服务器可能会恢复正常

五、浏览器显示HTML

在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了,浏览器是如何把页面呈现在屏幕上的呢?不同浏览器可能解析的过程不太一样,这里我们只介绍webkit的渲染过程,下图对应的就是WebKit渲染的过程,这个过程包括:

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

浏览器在解析html文件时,会”自上而下“加载,并在加载过程中进行解析渲染。在解析过程中,如果遇到请求外部资源时,如图片、外链的CSS、iconfont等,请求过程是异步的,并不会影响html文档进行加载。

DOM渲染流程

解析过程中,浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。

DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为relow;当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repain。

页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。因为JS有可能会修改DOM,最为经典的document.write,这意味着,在JS执行完成前,后续所有资源的下载可能是没有必要的,这是js阻塞后续资源下载的根本原因。所以我明平时的代码中,js是放在html文档末尾的。

--------------------------------------------------------------------分割线------------------------------------------------------------------------------------------

大致的过程应该就这么多,更多的细节没有去扩展了;写这边文章主要还是出去面试的时候被别人问的太丢面儿,故而详细的去网上了解查询了下,方便自己以后的温故知新。文中许有部分不正确的地方,还望不吝指出。

参考链接:https://segmentfault.com/a/1190000006879700

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

推荐阅读更多精彩内容