在输入URL后,前端浏览器的工作流程

这是一个经久不衰的面试题,整理一下。

浏览器

浏览器是一个多进程的架构。

主进程:主要适用于界面的显示,用户的交互,子进程管理。

渲染进程:将HTML,css,JS转换成页面,V8引擎以及排版用的Blink引擎都是在渲染进程中。

GPU进程:绘制UI界面。

网络进程:负责网络资源的加载。

插件进程等......进程之间的通信是通过ipc来通信。


主进程中:在输入一个网址后,开始处理输入信息,开始导航,进入网络进程浏览器访问的应该是IP地址,那么首先会输入的域名转换为ip 地址。

 DNS域名解析:

有很多网页都跟着.com .cn等,因为都隶属于这些域名来管理,而这些.com 是由.来进行划分和管理的,最后都是由根统一管理的,但也没有必要写.root来表示,以下就是域名结构树。

04225fd8f771448190909b27176f96a6.png

 这个根是由一群服务器组成的,称为根域名服务器,在它的下面,包括.com .cn等,称为顶级域名服务器,它们会管理各自的域名服务器,比如bilibili,QQ等,它们称作权威域名服务器,然后管理各自的主机。

所以在输入网址后,浏览器先查看缓存中是否含有对应的ip 记录,同时查看主机本地文件里是否有文件记录,如果有记录那么就不用解析了,如果没有,浏览器进行域名解析,向DNS服务器发送请求,需要调用解析器,通过域名获取ip地址。

请求和响应

通过DNS解析以后,获取到了相应的站点,会通过safeBrowsing来检查站点是否是恶意站点,如果是则展示为恶意站点,会阻止访问。

计算机网络模型有7层的osi模型,还有5层以及TCP/IP的4层的模型,浏览器通过http协议发送请求,那么首先在应用层利用DNS服务器解析域名,获得ip地址,通过http或者https封装,包括请求头等信息。

接下来数据来到传输层:再次将上层内容封装,封装为TCP/UDP报文;

网络层:再次进行封装为IP报文;

数据链路层:将IP报文进行分组形成帧;

物理层:帧封装成0/1信号,就是bit单位,再进行传输;

然后就是网线传输

到了服务端其实就是一套逆行:bit->帧->IP报文,之后服务器再进行响应,流程与发送请求类似。

到了浏览器,获取到了返回的数据,则开始渲染页面。

一切准备就绪后,网络进程会告知UI进程,UI进程会开启一个渲染器进程来渲染页面,浏览器进程通过IPC管道将数据传递给渲染器进程。

渲染进程

一般请求获取到的数据都是HTML文件,相当于网页的框架结构,不过一开始获取到的是字节形式的HTML文件,通过解析转化得到字符代码,然后再到tokens符号标签,最后变为节点对象,讲这些节点对象连在一起形成文本对象模型,也就是dom,dom就是浏览器自己的语言,每个节点对象项连,形成父子关系。

与此同时css样式会以link标签的形式引入,在渲染HTML文件的过程中,遇到link标签,会向服务器请求css文件,具体解析与HTML相同,最后节点会结合为css对象模型,也就是cssom,dom和cssom都已经有了,基本也就完成了,两者结合就是渲染树,渲染树的任务就是匹配dom和cssom的节点,并且捕获可见内容。

在渲染树构造完成之后,页面也是不能被马上渲染的,还需要获取渲染树的结构,节点位置和大小来进行布局,是根据盒子模型来进行,每个元素都用一个盒子来表示,然后这些盒子在页面上进行排列和嵌套,生成layout-tree,在布局以后,浏览器就可以安排页面的绘制了,为了保证展示正确的层级,渲染进程的主线程会遍历layout-tree,创建一个绘制记录表,该表记录了绘制的顺序(z-index),然后渲染进程的主线程将数据传递给合成器线程,合成器线程将每个图层栅格化,由于一层可能像页面的整个长度一样大,因此合成器线程会将他们切分为很多图块,然后将每个图块发送给栅格化线程,栅格化线程栅格化每个图块,并将他们存储在GPU内存中,当栅格化完成后,合成器线程将收集称为"draw quads"的图块信息,信息中记录了图块在内存的位置,以及在页面需要绘制的位置,根据这些信息,合成器线程生成了一个合成器帧,通过IPC进程传递给浏览器进程,接着浏览器进程将合成器帧传入GPU,然后GPU渲染展示到屏幕上,当滚动滚轮,都会生成一个新的合成器帧,新的帧再传给GPU,再次渲染到屏幕上,这样就以像素的形式绘制在页面,页面就呈现出来了,当我们改变一个元素的尺寸位置属性时,会重新进行样式计算,布局绘制以及后面的流程,这种行为叫做重排(回流),如果改变了元素的颜色,不会重新触发布局,但还是会触发样式计算和绘制,这个就是重绘

但是在实际情况中,我们还会遇到script标签,还会向服务器请求js文件,如果先返回并解析完成js文件是会发生堵塞的,所以必须等到Cssom构建完成后才执行js文件,而且js可以改变css样式。cssom构建就是渲染中一个重要的阻塞原因,其实dom也会,但是dom可以部分解析,cssom不可以。cssom的构建和js文件的请求和解析是可以同时进行的,等cssom结束构建后,就可以执行js文件。

js会阻塞HTML的解析,因为js既可以操作dom,又可以操作cssom,如果不等js下载解析执行完以后再构建dom,页面有些内容会可能会出现了又消失,所以不管是行内js代码还是外部js代码,都会让HTML的解析停止下来,虽然dom可以部分解析,但对于网页来说,就相当于阻塞了第一次的渲染,js执行完之前,页面什么都没有,执行完以后就都正常了,形成渲染树,进行布局,绘制等。

猜你喜欢

转载自blog.csdn.net/m0_59962790/article/details/130988036