深入了解浏览器的工作原理-解析-布局和绘制-渲染 (浏览深度是什么意思)
解析
当您在浏览器中输入一个网址并按回车键时,浏览器首先会向服务器发送一个请求来获取该网址对应的网页内容。服务器返回的网页内容通常包括HTML、CSS和JavaScript代码。浏览器会对这些代码进行解析,将其转化为浏览器能够理解和处理的数据结构。 HTML代码会被解析成一个DOM树(Document Object Model)。DOM树表示网页的结构,它包含了网页中的所有元素、属性和内容。 CSS代码会被解析成一个CSSOM树(CSS Object Model)。CSSOM树表示网页的样式,它包含了所有用于定义网页外观的样式规则。 JavaScript代码会被解析成可被浏览器JavaScript引擎执行的代码。JavaScript引擎负责处理网页中的交互功能。渲染
解析完成后,浏览器会使用DOM树和CSSOM树构建一个渲染树。渲染树是由DOM树和CSSOM树中与页面显示相关的所有元素组成的。渲染树的构建过程会忽略一些不需要显示的元素,比如隐藏的元素或设置了display属性为none的元素。布局和绘制
渲染树构建完成后,浏览器会执行布局和绘制操作。 布局是指计算元素在页面中的位置和大小。浏览器会根据渲染树的结构和样式信息,计算每个元素在页面中的准确位置和尺寸。布局的过程是递归进行的,从根节点开始,依次计算每个元素的位置和大小。布局的结果会影响到后续的绘制过程。 绘制是指将元素绘制到屏幕上。在绘制过程中,浏览器会根据元素的位置和大小,将它们绘制成像素,然后显示在屏幕上。绘制的过程是通过图形处理单元(GPU)来完成的,这样可以提高绘制的效率和性能。绘制的顺序是按照渲染树的结构进行的,从根节点开始,依次绘制每个元素。JavaScript引擎执行
在用户与网页交互的过程中,浏览器的JavaScript引擎会解释和执行JavaScript代码。JavaScript代码可以修改DOM树和CSSOM树的内容,从而影响到渲染树的结构和样式。根据JavaScript代码的执行结果,浏览器可能需要更新渲染树,并重新进行布局和绘制,以反映出交互的变化。总结
通过解析、渲染、布局、绘制和JavaScript引擎的执行,浏览器能够将接收到的网页内容转化为用户可见的页面,并实现交互功能。了解浏览器的工作原理对于前端开发人员来说是非常重要的,可以帮助他们更好地优化网页性能和用户体验。同时,对于普通用户来说,了解浏览器的工作原理也有助于更好地理解和使用互联网。前端开发者应知必会:浏览器是如何渲染网页的
主要由渲染引擎完成,渲染引擎主要包括:HTML解释器CSS解释器布局(layout)JavaScript引擎HTML解释器:解释HTML文本的解释器,主要作用是将HTML文本解释成DOM(文档对象模型)树,DOM是一种文档的表示方法;CSS解释器:级联样式表的解释器,它的作用是为DOM中的各个元素对象计算出样式信息,从而为计算机最后网页的布局提供基础设施;布局:在DOM创建之后,Webkit需要将其中的元素对象跟样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型;JacaScript引擎:使用JavaScript代码可以修改网页的内容,也能修改CSS的信息,JavaScript引擎能够解释JavaScript代码并通过DOM接口和CSSOM接口来修改网页内容和样式信息,从而改变渲染的结果;绘图:使用图形库将布局计算后的各个网页的节点绘制成图形结果(例如:需要依赖2D/3D图形库,音频视频和图片解码器等来实现高性能的网页绘制和网页的3D渲染);此内容摘自webkit内核书上复制下来的
浏览器运行原理
数据持久层
一、浏览器进程的UI线程会扑捉你的输入内容 二、如果是网址,UI线程会启动一个网络线程请求DNS进行域名解析,连接服务器获取数据
1、safeBrowsing 检查站点是否是恶意站点
2、网络线程通知UI线程准备好了
3、UI线程会创建一个渲染器进程渲染页面
4、浏览器进程会通过IPC管道将数据传递给渲染器进程,进入渲染流程
5、重排:当我们改变元素尺寸位置,会重新进行样式计算,布局、绘制
6、重绘:修改颜色属性,不会触发布局,还是会样式计算和绘制
7、优化:重排、重绘,js 也在主线程,多次触发重排、重绘,js 还没执行完毕主线程还没归还,会造成程卡顿。1、requestAnimationFrame,每一帧被调用2、transform 不会经过布局和绘制,直接运行在合成器线程和删格线程,不会收到主线程js的影响
免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。