浏览器的渲染原理

浏览器的渲染原理

来总结一下最近理解的浏览器渲染原理和流程
首先浏览器是多进程的,分为渲染进程、插件进程、主进程、网络进程以及GPU进程
而我们打包出来的js html css文件,经过浏览器的渲染进程,就会展示出看到的页面。下面主要来了解一下浏览器的渲染进程
整个渲染流程分为一下几个阶段:
DOM构建、CSSOM构建、布局、分层、绘制、分块、光栅化、绘制

DOM构建

解析HTML转为DOM树。解析时,会把每个HTML标签解析成文档对象,再把每个文档对象用树形结构链接起来,最后把所有的文旦对象挂在document上,就形成了DOM树
需要注意的是,在解析HTML的时候,通常会有我们定义的link和script,解析过程中如果遇到css就解析css,遇到js解析js。所以为了提高解析效率,浏览器在解析前回启动一个预解析的线程,率先下载HTML中的外部引用文件和JS文件
如果在解析过程中遇到link文件还没有下载解析好,则放入预解析进程中解析,主线程继续HTML,不会被css阻塞;
如果主线程解析到script文件,则会挂起HTML解析,等待js解析完,这是因为js执行过程中可能会修改当前的DOM树,因此js会阻塞HTML的渲染进程

CSSOM构建

浏览器在构建DOM树的同时,会加载样式文件,同步进行CSSOM构建,CSSOM树主要是描述选择器之间的层级关系,也包括样式值

渲染树构建

渲染树是对DOM树和CSSOM树的结合,因为CSSOM树与DOM树并不是一一对应的,因为DOM树可能存在不展示的元素,因此需要进行DOM树遍历和CSSOM树查找。
遍历整个DOM树,生成一个渲染树,对于不需要展示的元素(display: none)则不会出现在渲染树中,再从CSSOM树里后序遍历查找样式,如果有多个样式命中一个节点,根据样式优先级挂载渲染树。

布局

至此以及有了渲染树和样式信息。遍历渲染树的每个节点,计算每个节点的几何信息,比如宽高位置等,将元素间的嵌套关系以盒模型的实行写入文档流,和模型在布局中会计算元素的确切位置和大小,将相应的信息协会渲染树上,生成布局渲染树。同时每个盒子携带样式信息,为后续绘制提供基础

分层

为了提升每一帧的渲染效率和复杂效果,主线程通过分层的方法,生成对应的图层树。之后某个图层有更改直接修改对应图层的样式,而不用重新构建CSSOM。
以hao123页面为例,可以看到分层效果

在这里插入图片描述

将一个页面分解成多个图层的操作就称之为分层,将这些图层合并到一层的操作就是合成。

通常情况,每个节点都包含一个图层,如果没有对应则属于父节点的图层。那怎么创建图层,可以通过以下方式:

  • 背景边框
  • z-index 负值 0 正值的定位元素
  • 块级盒
  • overflow

绘制

完成分层树之后,主线程就会为每个图层单独生产绘制指令,这些指令就形成了一个待绘制的列表,主线程将每个图层的绘制列表交给合成线程,剩余工作将由合成线程完成。如图所示

在这里插入图片描述

分块

合成线程拿到绘制列表后,首先会从线程池中拿去多个线程,进行图层的分块。

光栅化

完成分块之后,合成线程会将信息交给GPU进程,GPU则会开启多个线程快速进行光栅化,光栅化就是将所有的图块变成位图,它优先处理靠近视口附近的图块。
所谓的光栅化就是将绘制列表中的指令生成图片

绘制

至此所有图块都被光栅化。合成线程拿到光栅化信息后会生成指引(quad)指令,quad指令会包含每个位图的展示位置,旋转变形等。之后合成线程会将quad交给GPU进程,有GPU进程生产系统调用,交给GPU硬件,最终完成了屏幕成像。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/471617.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mysql索引实现

什么是索引失效 在MySQL中,索引失效指的是查询语句无法有效地使用索引,而必须进行全表扫描。索引失效可能会导致查询性能下降,特别是在处理大量数据时。 索引失效的原因 1.索引列进行了运算或函数操作 如果对索引列进行了运算或使用了函数…

第十届电气工程、控制和机器人技术国际会议(ICRAS 2024)即将召开!

2024年第十届电气工程、控制和机器人技术国际会议(ICRAS 2024)将于2024年6月21日至23日在日本东京举行。本次会议由中国地质大学(武汉)和北京控制机器人与智能技术研究所主办。ICRAS 2024旨在聚集来自世界各地的教授、研究人员、学…

遇到大量的照片需要尺寸调整怎么办?跟着小编往下看 轻松帮你解决照片尺寸修改的烦恼

在日常的摄影后期处理中,我们可能会遇到需要将大量照片上传至社交媒体、制作相册、或者进行打印等需求。不同的平台或用途对照片的尺寸有不同的要求,因此我们需要对照片的尺寸进行调整以满足这些要求。此外,随着手机、相机等设备的普及&#…

开源问卷调查系统

Java Vue 开源问卷调查系统 附项目地址 Astar问卷调查系统 基于SpringBootVue前后端分离的问卷调查系统 平台简介 本项目旨在提供一个简单易用的问卷调查平台,帮助用户创建、分享问卷,并收集、分析调查数据。我们希望能够为各行各业的调查需求提供一种…

【python】python结合js逆向,让有道翻译成为你的翻译官,实现本地免费实时翻译

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN新星创作者等等。 🏆《博客》:Python全栈,前后端开发,人工智能,js逆向,A…

理清大数据技术与架构

大数据并不是一个系统软件,更不是一个单一的软件,它实际上是一种技术体系、一种数据处理方法,甚至可以说是一个服务平台。在这个技术体系中,涵盖了许多不同的部件,比如Hadoop服务平台。这一服务平台可以根据具体情况自…

管理类联考–复试–英文面试–问题–WhatWhyHow--纯英文汇总版

文章目录 Do you have any hobbies? What are you interested in? What do you usually do in your spare time? Could you tell me something about your family? Could you briefly introduce your family? What is your hometown like? Please tell me so…

复旦发布层次性奖励学习框架,增强大模型人类偏好对齐

在人工智能领域,强化学习(Reinforcement Learning, RL)一直是实现智能体自主学习的关键技术之一。通过与环境的交互,智能体能够自我优化其行为策略,以获得更多的奖励。然而,当涉及到复杂的人类偏好时&#…

顶顶通呼叫中心中间件-机器人话术编辑器意向问题详解

文章目录 前言联系我们意向页面和分类页面的区别意向权重意向权重的计算意向权重的作用 分类规则如何分类 前言 顶顶通旗下有一款机器人话术可视化编辑工具,可以根据用户的需求编辑话术流程。针对该话术编辑工具的意向功能进行讲解: 机器人话术可视化工…

案例练习:敲桌子

大家好: 衷心希望各位点赞。 您的问题请留在评论区,我会及时回答。 案例描述 从1开始数到数字100,如果数字的个位含有7,或者数字是7的倍数,我们打印输出“敲桌子”,其余数字直接打印输出。 代码 #includ…

婴儿洗衣机硬核测评:希亦、鲸立、小吉婴儿洗衣机性能大比拼!

如果你非常注重婴儿衣物的卫生问题,那么婴儿洗衣机则是非常理想的选择。毕竟,在婴儿吃奶或者接触其他材料时,其抵抗力是比较弱的,再加上普通洗衣机无法对婴儿的衣物进行有效的消毒处理,轻则会对婴儿的健康造成威胁&…

libVLC windows开发环境搭建

1.简介 LibVLC是一个强大的开源库,它构成了VLC媒体播放器的核心部分。 LibVLC提供了一系列的功能接口,使得VLC能够处理流媒体的接入、音频和视频输出、插件管理以及线程系统等核心任务。 跨平台性:VLC作为一个跨平台的多媒体播放器&#x…

设计师最常用的UI设计软件

无论您的设计侧重于用户体验设计还是用户界面设计,您都需要一个高效的界面设计工具来帮助您完成设计项目。根据设计的不同界面功能,合适的 UI 界面设计工具也会有所不同。本文总结了市场上 5 款流行的界面设计软件。每个界面设计工具都有自己的优点和缺点…

DevEco Studio 项目创建

安装DevEco Studio后开始使用,双击桌面DevEco Studio 快捷方式弹出界面: 选择Application —> Empty Ability,点击Next 项目配置 Project name:工程的名称,可以自定义,由大小写字母、数字和下划线组成。…

HarmonyOS NEXT应用开发之听歌识曲水波纹特效案例

介绍 在很多应用中,会出现点击按钮出现水波纹的特效。 效果图预览 使用说明 进入页面,点击按钮,触发水波纹动画。再次点击按钮,停止水波纹动画。 实现思路 本例涉及的关键特性和实现方案如下: 要实现存在两个连续…

vue el-table 前端js实现导出数据为Excel

目录 一、背景描述 二、功能分析 三、详细开发 1.导出为excel 2.导出为cvs 四、总结 一、背景描述 有些业务常见,例如前端已经获取到表格的所有数据了,并且后端技术人员比较繁忙,总会提出前端分页,前端排序,甚至…

CycleGAN训练及测试过程细节记录

CycleGAN训练及测试过程细节记录 文章目录 关于训练关于测试 关于训练 1、训练前将数据配置好,并在Pycharm中写好配置信息 2、关于训练过程的参数配置在 options/train_options.py options/base_options.py batch_size:批大小 crop_size:…

Vue.js前端开发零基础教学(一)

目录 第一章 初识Vue.js 前言 开发的好处 一.前端技术的发展 什么是单页Web应用? 二. Vue的简介 三. Vue的特性 四. Vue的版本 五.常见的包管理 六.安装node环境 第一章 初识Vue.js 学习目标: 了解前端技术的发展 了解什么是Vue掌握使用方…

凡事不以规矩不成方圆,合同协议模板范本大全

一、资料描述 本套合同协议资料,大小18.42M,24个压缩文件。 二、资料目录 01-租赁合同.rar(112个文件) 02-装修协议.rar(32个文件) 03-转让或承包协议.rar(32个文件) 04-员工手…

羊大师揭秘,孩子适不适合喝羊奶?

羊大师揭秘,孩子适不适合喝羊奶? 羊奶,这个古老而珍贵的营养饮品,近年来在家长们中间逐渐走红。它以其独特的营养价值和口感受到了众多家庭的青睐。但是,面对市面上琳琅满目的羊奶产品,家长们常常陷入选择…