当前位置: 首页 > news >正文

浏览器渲染原理

渲染过程

阶段 - Parse

1、解析HTML,浏览器将从服务器获取到的HTML文件之后,会产生一个渲染任务,交给消息队列(EventLoop/MessageLoop)。
2、在事件循环机制的作用下,会将渲染任务交给主线程
3、主线程在获取到渲染任务之后,会先解析HTML文件内容,遇到CSS解析CSS文件,遇到script内容则会执行JS。CSS交给预解析器,预解析器会分担一点下载JS的任务,JS会阻塞主线程
4、预解析器(线程)会快速浏览HTML文件,发现外部的CSS文件后,会通过网络线程下载CSS文件,进行初步的解析,再将资源交给渲染主线程,所以CSS渲染不会阻塞渲染主线程
5、预解析器(线程)会快速浏览HTML文件,发现外部的JS文件后,会通过网络线程下载JS文件,并将资源交给渲染主线程去执行JS,在JS执行过程中,会阻塞主线程,因为JS代码可能会改动DOM和CSSOM
6、上述过程后会得到两棵树(DOM, CSSOM)

样式计算 - Computed-style

渲染主线程会遍历得到的DOM树,依次为树中的每个节点计算出它最终的样式。
这一过程中,很多预设值会变成绝对值,比如颜色会变成rgb(x,x,x),em,rem会变成px
完成之后就会得到一颗带有样式的DOM树(renderTree)

布局 - Layout

布局阶段会依次遍历DOM树的每一个节点,计算每个节点的几何信息,例如节点的宽度、相对包含块的位置。
大部分时候,DOM树和布局不是一一对应的。
比如display: none的节点没有几何信息,不会生成到布局树;使用了伪元素选择器,虽然不出现在DOM中,但是拥有几何信息,会出现在布局树中。还有匿名行盒、匿名块盒等。

分层 - Layer

主线程会使用一套复杂的策略对整个布局树进行分层。
分层的好处,类似于局部刷新,只对有变动的图层进行修改,从而提升效率
例如:滚动条,堆叠上下文,transform,opacity等样式都或多或少的影响分层结果,也可以通过will-change属性更大程度的影响分层结果。可做为性能优化

绘制 - Paint

主线程会为每个层单独产生绘制指令集,用于描述如何将这些层的内容画出来。
完成绘制之后,主线程会将每个图层的绘制信息提交给合成线程,剩余工作由合成线程完成。

分块 - Tilinng

合成线程首先会对每个图层进行分块,将其划分为更多的小区域。
他会从线程池中拿出多个线程来完成分块工作。

光栅化 - Raster

合成线程会将块信息提交给GPU进程,并以极快的速度进行光栅化,。
GPU会开启多个线程进行光栅化,并优先处理靠近视口区域的块。
光栅化的结果就是一块一块的位图。

画 - Draw

合成线程拿到每个层、每个块的位图后,生成一个个quad(指引)信息
quad会标识出每个块应该画在屏幕上的哪个位置,以及会考虑到旋转缩放等变形
变形发生在合成线程,与渲染主线程无关,这就是transform效率高的原因。
合成线程会把quad提交给GPU进程,由GPU进程产生系统调用,提交给GPU硬件,完成最终的屏幕成像。

GPU加速

为了提高网页的渲染性能,现代浏览器还支持使用GPU进行渲染加速。GPU渲染可以将渲染树中的节点转换为GPU可识别的图形指令,然后交给GPU进行处理。GPU的并行计算能力可以大幅提高网页的渲染速度和流畅度。

总的来说,浏览器解析HTML到GPU渲染的过程是一个复杂的过程,需要涉及多个阶段和技术。对于网页开发者来说,理解这些过程能够帮助他们更好地优化网页性能,提高用户体验。

除了以上的技巧和优化,还可以考虑使用一些工具来辅助网页的开发和优化。例如,可以使用Chrome DevTools等开发工具来分析页面的性能和优化点。此外,还可以使用一些优化插件和库,如Lighthouse等,来自动化一些优化工作。

渲染过程

推荐像素的一生

相关文章:

浏览器渲染原理

阶段 - Parse 1、解析HTML,浏览器将从服务器获取到的HTML文件之后,会产生一个渲染任务,交给消息队列(EventLoop/MessageLoop)。 2、在事件循环机制的作用下,会将渲染任务交给主线程 3、主线程在获取到渲染…...

华为OD机试题 - 查找单入口空闲区域(JavaScript)| 含思路

华为OD机试题 最近更新的博客使用说明本篇题解:查找单入口空闲区域题目输入输出示例一输入输出说明示例二输入输出说明示例三输入输出说明示例四输入输出说明Code解题思路华为OD其它语言版本<...

制造型企业想要做好数字化改造,要注意以下几点!

很多企业在“工业4.0、智能制造、互联网”等概念满天飞的环境下迷失了方向&#xff0c;不知该如何下手&#xff0c;盲目跟风&#xff0c;看别人投自动化&#xff0c;自己也跟着投&#xff0c;看别人上信息化&#xff0c;自己也跟着上。 其实&#xff0c;智能制造也好&#xff…...

【蓝桥杯集训·每日一题】AcWing 1488. 最短距离

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴Dijkstra算法一、题目 1、原题链接 1488. 最短距离 2、题目描述 有 N 个村庄&#xff0c;编号 1 到 N。 村庄之间有 M 条无向道路&#xff0c;第 i 条道路连接村庄 ai 和村…...

比亚迪:全球最大电动汽车制造商的坎坷成长之路

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 特斯拉&#xff08;TSLA&#xff09;首席执行官埃隆马斯克表示&#xff0c;特斯拉最接近的竞争对手可能是一家中国电动汽车公司。猛兽财经认为&#xff0c;沃伦•巴菲特支持的比亚迪&#xff08;0211&#xff09;可能是马斯…...

Java开发 - Quartz初体验

前言 在上一篇博客中&#xff0c;我们对单点登录有了初步了解&#xff0c;这也让我们独立做系统有了最基础的保障。但在业务开发中&#xff0c;总是会出现一些定期处理的任务&#xff0c;我们首先想到的是Timer&#xff0c;但由于其调度功能单一&#xff0c;我们实际并不会用它…...

无头盔开发vr XR Device Simulator操作(更新)

1.摄像机&#xff08;未开启TY键&#xff09; 平移 上下左右&#xff1a;右键鼠标&#xff0c;移哪去哪 前后&#xff1a;右键快速滚动鼠标滚轮 旋转 XOY平面旋转&#xff1a;右键按住鼠标滚轮滚动鼠标滚轮 XOZ\YOZ平面旋转&#xff1a;右键按住鼠标滚轮移动鼠标 2.左手右手&am…...

《C++代码分析》第二回:函数重载const char* ,char*,const char[],char[]汇编代码上的区别

一、前言 C相比C是支持函数重载的&#xff0c;现在我们详细探讨一下C函数重载与类方法承载。 二、案例代码 我们编译如下代码&#xff0c;同样的我们关闭代码优化&#xff0c;删除符号链接文&#xff08;.pdb&#xff09; #include "windows.h" #include "w…...

【学习笔记】深入理解JVM之垃圾回收机制

【学习笔记】深入理解JVM之垃圾回收机制 更多文章首发地址&#xff1a;地址 参考&#xff1a; 《深入理解JAVA虚拟机》第三版 第三章尚硅谷 第134 - 203 集参考文章&#xff1a;https://blog.csdn.net/qq_48435252/article/details/123697193 1、概念 &#x1f33b; 首先我们…...

49.在ROS中实现local planner(2)- 实现Purepersuit(纯跟踪)算法

48.在ROS中实现local planner&#xff08;1&#xff09;- 实现一个可以用的模板实现了一个模板&#xff0c;接下来我们将实现一个简单的纯跟踪控制&#xff0c;也就是沿着固定的路径运动&#xff0c;全局规划已经规划出路径点&#xff0c;基于该路径输出相应的控制速度 1. Pur…...

Allegro如何设通孔Pin和Via的消盘操作指导

Allegro如何设通孔Pin和Via的消盘操作指导 用Allegro做PCB设计的时候,除了可以在光绘设置里面设置内层通孔Pin和Via的消盘,在设计过程中,同样也可以设置消盘效果,以便实时显示,如下图 如何设置,具体操作如下 点击Setup点击Unused Pads Suppression...

Android工厂模式

工厂模式分为三种 :简单工厂模式 、工厂方法模式 、抽象工厂模式 。 目录 简单工厂模式 UML图 实现 使用场景&#xff1a; 优点 &#xff1a; 缺点&#xff1a; 工厂方法模式 UML图 实现 使用场景&#xff1a; 优点&#xff1a; 缺点&#xff1a; 抽象工厂模式 UM…...

神经网络硬件加速器-架构篇

架构设计 常规架构通常包括两种&#xff1a; 1、全流水线架构&#xff0c;顾名思义&#xff0c;将整个神经网络进行平铺&#xff0c;并对每一层进行优化设计&#xff0c;优点&#xff1a;实现高吞吐率和低延时。缺点&#xff1a;消耗大量硬件资源&#xff0c;通常无法跨网络或…...

Python raise用法(超级详细,看了无师自通)

是否可以在程序的指定位置手动抛出一个异常&#xff1f;答案是肯定的&#xff0c;Python 允许我们在程序中手动设置异常&#xff0c;使用 raise 语句即可。 大家可能会感到疑惑&#xff0c;即我们从来都是想方设法地让程序正常运行&#xff0c;为什么还要手动设置异常呢&#…...

1.SpringSecurity快速入门

*SpringScurity的核心功能: 认证:验证当前访问系统的是不是本系统的用户,并且要确认具体是哪个用户 授权:经过认证后判断当前用户是否有权限进行某个操作 *第一步:创建springboot工程 *第二步:引入SpringSecurity依赖 *第三步:写controller,访问对应的url:localhos…...

Graph Partition: Edge cut and Vertex cut

Graph PartitionEdge cut and Vertex cutEdge cutVertex cut实际如何进行点分割和边分割的呢&#xff1f;Graph store format情况1&#xff1a;按照边列表存储&#xff1a;情况2&#xff1a;按照邻接表存储&#xff1a;Edge cut and Vertex cut 图结构描述了数据流动&#xff…...

Javascript周学习小结(初识,变量,数据类型)

JS的三大书写方式行内式如图所示&#xff1a;几点说明&#xff1a;JS的行内式写在HTML的标签内部&#xff0c;(常以on开头)&#xff0c;如onclick行内式常常使用单引号括住字符串以区分HTML的双引号可读性差&#xff0c;不建议使用引号易出错&#xff0c;不建议使用特殊情况下使…...

C语言-基础了解-10-C函数

C函数 一、C函数 函数是一组一起执行一个任务的语句。每个 C 程序都至少有一个函数&#xff0c;即主函数 main() &#xff0c;所有简单的程序都可以定义其他额外的函数。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的&#xff0c;但在逻辑上&…...

【LeetCode】剑指 Offer(16)

目录 题目&#xff1a;剑指 Offer 33. 二叉搜索树的后序遍历序列 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 题目&#xff1a;剑指 Offer …...

第三十九章 linux-并发解决方法二(互斥锁mutex)

第三十九章 linux-并发解决方法二&#xff08;互斥锁mutex&#xff09; 文章目录第三十九章 linux-并发解决方法二&#xff08;互斥锁mutex&#xff09;互斥锁的定义与初始化互斥锁的DOWN操作互斥锁的UP操作用count1的信号量实现的互斥方法还不是Linux下经典的用法&#xff0c;…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...