00:00
大家好,我是上硅谷H5学科的熊健,在程序员节日到来之际呢,和大家分享一道面试题,好题目呢,就是从一个URL地址到最中网页渲染完成,这个过程中发生了什么?好,接下来呢,我们就研究这个过程到底做些什么事,那么我们会说呢,这个过程中呢,其实大致呢,分为六个部分,那第一步呢,当我输入一个域名地址到网页上的时候呢,它第一步做的是我们叫做DNS解析。电子解析是什么意思呢?啊,它呢,就是将啊我这个域名地址。解析为IP地址。好,那这一步呢,就是我浏览器会去做的,那做这个解析的过程中,它到底做些什么事,过程中又发生什么呢?那整个这个步骤呢,会比较麻烦,他呢会读取一些缓存啊,整个步骤呢,它会这样做啊,他们先会去读取啊浏览器的DNS缓存。
01:07
好,如果有就使用,那么如果没有的话呢,他又会去本地,就是你系统的计算机的缓存去读取。会读取你系统DNS的缓存,那如果有它也对应的从你这个域名地址找到对应的IP地址,从而去解析,好如果还没有的话呢,它会去你的路由器缓存中去读看啊,当然前提是呢,你路你要有路由器存在,并且呢啊是走路由器中的存在着DNS缓存,这时候看。如果还来不到的话呢,他又会去咱们的这个网络运营商缓存。比方说你是啊,这个移动的网络,那么呢,就是移动运营商啊,如果是联通,就是联通运营商,他们的服务器上呢,有相应的DDNS缓存,从而能够去解析成正确的IP地址。
02:02
那么呢,通常情况下,我们呢,都能从这四部分呢,找到我们对应的IP地址,其中呢,最最麻烦的可能我们来到这第四步可能找到了,那如果这第四步还找不到的话呢,那就麻烦了,那就麻烦大了啊,这时候呢,他需要去做这个递归搜索。好地搜索是做什么事呢?比如说我这个网址呢,叫做block。点百度点。com。假设是个这样的网址,他呢,先会去这个点CRM跟域名下。查找有没有你想的解析。啊,如果有就使用,如果还没有的话呢,他又会去点百度这个域名下去查找有没有你想要的东西,如果没有的话呢,最终呢,他会来到这个block这里去查找有没有你想要的,如果还没有的话呢,最终呢,就会找不到你的DNS解析,从而呢你看不到你的页面了啊到这里呢,就会出问题了啊。
03:13
到这就会出错了啊,他就会一步一步在这些域名下面去查找对应的DNS解析。好,那这呢是我们第一步DNS解析,那么接下来呢,DNS解析完之后啊,我就IP地址了,从而呢,我就能去真正的去跟服务器进行交互,那么在这里面呢,在交互之前啊,我们又有一个步骤叫做TCP连接。你得和你的服务器呢建立起联系来,那这个连接呢,我们称之为啊TCP的三次握手。好,这三次握手是怎么一回事呢?我们来一个一个分析啊,首先第一次握手啊。它呢,是由我的浏览器发起的。
04:03
好,发起来是干嘛的呢,它呢用来告诉服务器我将要发送请求了,说白了就是告诉服务器啊,你准备一下我要发送请求了。好,这是第一次握手,那么第二次握手呢?啊,就是由服务器发起。啊,告诉浏览器。我准备接收了。啊,你赶紧发送吧。啊,高速浏览器好,接着还有第三次握手。有我的浏览器发起的。
05:01
他呢,告诉服务器。我马上就发了。啊,准备接收吧。啊,就是这三次好这三次呢,我发现啊,诶有同学可能会想啊,明明我这第一次呢就已经够了,为什么我TCP还得三次握手呢。那我们想一个这样的场景啊,来这呢代表的是我们的browse浏览器端,那么这边呢,代表我们server服务器端,每次呢,我server浏览器要跟服务器进行通信之前呢,他得去做这个TCP连接,而假设呢,它只连接了一次,它只告诉你服务器要去发送请求了,那么这个时候呢,我服务器呢比较忙,他没时间去处理你当前的请求,那么这时候你想我的浏览器呢,并不知道服务器到底好没好,我就直接把数据发过去了,那这时候服务器还没准备接收,那数据能接收得到吗?
06:01
哎,那这时候呢,是接受不到数据的啊,所以说我需要服务器给我一个回应,告诉我你准备好了,好,那么这有两次了,那光靠服务器告诉浏览器准备好了行吗?好,那这时候服务器已经做好准备了,诶他已经准备好了一定的空间,打开这个接口,准备让你浏览器发送东西,那么此时此刻呢,我浏览器又出问题了,它由于某某问题呢,它又不打发了,那这时候我浏览器我服务器呢,在这一块呢,就干等着,那也不行,这样呢干等着呢,对于我服务器来讲的话呢,它也会有无形的一些消耗,所以这时候呢,需要第三次你浏览器再次告诉我,诶,你要发送通过这三次确定啊,来确保我浏览器和服务器呢都没有问题了,诶此时此刻呢,再去发送请求的话呢,就不会存在诶,我浏览器或者服务器之间断开连接的问题,或者说它不接受的问题,这时候才能保证双方的通信是OK的。
07:01
所以说这是TCP的三次握手,接下来第三步呢,就真正的去发送请求啊。建立起联系来了,就发送请求,发送请求的内容呢,其实就是我们请求报文。哎,什么是请求报文呢?啊,就是HTP协议。啊,规定的发送一些东西,就属于协议的一些规定的一些发送东西。通信的内容啊。就是这个请求报文,那么具体呢,大家到时候可以看一看啊,报文的相关部分,好,那么第四步呢,就是接收。响应啊,浏览器的接收响应,那接收的响应的内容呢,其实就是响应包括。啊,他们统称的微报文,但是能通过请求和响应方呢,可能会分为请求报文和响应报文,对应的呢,有一些些区别啊,有一点点区别,但是具体大体呢都是差不多的啊,就是响应报温好接着呢开始第五步了啊第五步呢叫做浏览器接受完之后呢,就开始去渲染这个页面了,开始渲染页面了,好渲染页面的时候呢,比较麻烦啊,比较麻烦他做了些什么事呢。
08:10
首先,假设你要渲染的是一个HTML文件,好,这时候呢,它会遇见HTML标记。遇见没有标记的话呢,它会调用啊,浏览器呢会调用。会调用HTML解析器。解析成对应的一个ton。一个token token标记啊,Token标记,那这个token标记呢,最终呢,就会构成一个总数。并构成一个。好,那这个托管标记呢,你可以理解为就像我们的一个个啊,一个个对象上的一个属性,属性名和属性值的方式一样,就是它最终呢,会构建成一个这样的一个一个这样的token的一个字段,然后最终呢,把这些东西组合在一起呢,形成一个数,这是遇见HML标记,好如果遇见HML标记,他可能会遇见啊或者link标记。
09:22
好,遇见这些标记呢,我浏览器会做什么事呢?浏览器啊会。调用CS解析器。要用它来去处理CS标记,并且构建处理CS的标记。并构建我们叫做C数的。构建这个数,就是遇到这个好,接下来呢,你可能还还会遇到标签。好,遇到这个呢,它会调用JS解析器。Javascript解析器。
10:04
Javascript解析器解析这个script标记。解析它的这些代码呢,那像比如说去绑定事件啊。绑定事件啊,或者是修改DOM啊,或者是修改DOM数或者是数都很难起到的。就是他可能会去修改这些DOM对应的这个节点,也可能去修改CS的样式,从而去间接的去操作这个DOM数和SM数,就是遇到script标记好,那么接下来呢,可能还会做些事情啊,当他这些东西都处理好了之后呢,他会将啊这个DOM数。合并成一个我们称之为渲染数的东西,会合并成一个这个东西合并完之后呢,就开始啊,去计算布局啊,那我们根据这个渲染数。
11:09
来计算布局,来计算布局,我呢到底这个东西,这个这个标签,这个元素,这个div到底体现在我的页面上哪里是左边是右边,高度又是多少,宽度是多少,把这个位置信息呢给你计算好。啊,就是说白了就是计算啊。每个节点就是每个标记啊,每个节点的几何信息。位置啊,大小啊等等啊,就是这些信息好这呢,我们称之为布局。这道题呢,我瞅这布局,接下来呢,我们就是另外一个了,然后布完局之后呢,它会将各个节点的颜色。会知道。一子会知道。屏幕上。啊,这个呢,就是渲染了啊这一步呢,我们称之为渲染了,那么一共呢,就这几些部分。
12:07
啊,但是呢,大家注意就是啊,这里要注意注意什么呢?嗯,这个呢,这五个步骤啊,并不是说一定是按照顺序执行的。不一定。按照顺序执行。啊,可能会反复执行,已执行多次啊。啊,如果。多数。CS。被修改了。啊,后面的话呢,都会执行多次啊这些呢,就会可能会执行多次渲布局和渲染。会执行多次的布局和渲染,那么往往呢,往往啊,开发中实际往往实际页没中啊。
13:06
这个几个步骤呢,都会执行多次啊这些步骤。都会执行。执行多次的啊,往往都会执行多次的,这是这一个,那么这些呢,就是我们渲染页面他做的一些事情。好,那么渲染页面的时候就结束了吗?哎,还不够,它还有最后一个步骤,我们叫做断开连接。啊,这个动态连接呢,指的就是啊,我TCP的四次。好,这四次挥手,那我们来看一下啊,他做了些什么事,他呢,第一次挥手做什么?第二次挥手做什么啊,第一次。它呢,是由浏览器发起的。浏览器发起呢,它发给服务器。
14:00
啊,告诉他呢,我东西发送完了。说白了就是这个东西是什么呢?指的就是那个请求报文啊,我请求报文发送完了,你准备关闭吧。你准备关闭了啊,这是第一次,那第二次回手呢。只有。服务器发起的。啊,告诉。浏览器。告诉那什么呢啊,我东西。接收完了什么东西呢?就是请求报文啊,请求报文接收完了啊,我准备关闭了。你也准备吧。好,就是这个,这是呢,是在我发送请求的过程中呢,他做的一些事情,接下来呢,就是接收响应的过程,第三次挥手。
15:02
服务器发起。好,由服务器发起呢,他会告诉浏览器啊,告诉浏览器。告诉同学们,我东西发送完了啊,你准备完毕吧。啊,什么东西呢,这里呢,指的就是响应报额。是响应保温好,那么最后一步呢,就是第四次挥手。啊,这个呢,是由浏览器发起。那么告诉服务器。好,我东西介绍完了。你准备?我准备关闭了。你也准备吧,啊,就是这样的一个过程啊,要告诉服务器呢,我东西接收完了,你准备关闭吧,这东西呢,就是我们的响应保温啊响应报温好,那往往呢,这时候呢,它呢会先是我服务器鲜花,然后再是我浏览器鲜花,因为我浏览器要告诉完服务器之后呢,它才能关,那此时告诉完服务器之后呢,我服务器已经关完了,接下来才是浏览器在关啊,那这以上呢,就是我们这六个步骤。
16:29
也是我们整个的这个ul到页面最终渲染完成发生的过程啊,先DNS解析,再进行TCP连接,建立起联系来,建立起联系来之后呢,才好去发送请求,好发送完之后呢,接收完响应之后呢,就开始去渲染页面了。啊,渲染完页面之后啊,大家记得连接呢还在存在着,所以说呢,在这个过程中呢,我就要去断开这个连接啊,这时候就涉及到TCB的四次回手啊,这个动态连接呢,包含着整个过程啊,包含着请求的过程,包含着响应的过程,总之最后呢,我服务器呢,最终会关闭这个连接,同时我的浏览器呢也会去关闭好这以上呢,就是咱们这个面试题的解析了。
我来说两句