浏览器详解(四) 渲染

大家好,我是半虹,这篇文章来讲浏览器渲染


1、基本介绍

浏览器是多进程多线程的架构,包括有浏览器进程、渲染器进程、GPU 进程、插件进程等

上篇文章中我们介绍过浏览器进程,作为浏览器主进程,负责浏览器基本界面的交互和底层功能的执行

在这篇文章中我们来介绍渲染器进程,这是浏览器的内核,也称为渲染进程


渲染进程负责标签页内所发生的事情,主要包括页面渲染、脚本执行、事件处理等

其中包含多个重要的线程以协同工作:

  1. GUI 渲染线程:负责页面的渲染,解析 HTML、CSS,构建 DOM、CSSOM,布局和绘制等

            如果页面要回流或重绘,也由该线程去执行

  2. JS  引擎线程:负责解析和执行 JavaScript 脚本,注意  JS 引擎线程与 GUI 渲染线程互斥

  3. 事件触发线程: 控制事件循环,并管理事件队列

            若当 JS 引擎执行触发异步事件,会将对应的任务交给相应的线程执行处理

            等到任务完成之后,把任务对应的回调添加到事件队列,等待 JS 引擎处理

  4. 定时触发线程: 负责处理特定任务,具体来说就是用于 setTimeoutsetInterval 计时

            等到计时结束,通知事件触发线程,由事件触发线程将对应的回调加入队列

  5. 异步请求线程: 负责处理特定任务,具体来说就是处理 AJAX 请求

            等到请求完成,通知事件触发线程,由事件触发线程将对应的回调加入队列


下面我们通过例子,异步请求和定时操作,来说明线程之间如何协同工作

线程协作

上述多个线程大体上可以分成两组

  1. 渲染引擎:其中核心为 GUI 渲染线程
  2. 脚本引擎:其中核心为  JS  引擎线程,辅助为事件触发线程、定时触发线程、异步请求线程

目前市面主流浏览器使用的渲染引擎和脚本引擎总结如下:

浏览器渲染引擎脚本引擎
SafariWebkit / WebCoreWebkit / JavaScriptCore
ChromeBlinkV8
FirefoxGeckoSpiderMonkeyTraceMonkeyJaegerMonkey
IETridentChakra
EdgeEdgeHTMLChakra

在这篇文章中我们主要介绍渲染过程,至于 JS 的解析过程,以后有空的话会专门再讲

好了,下面来正式开始介绍浏览器中的渲染过程


2、渲染流程

渲染引擎渲染页面的过程,也称为关键渲染路径,具体步骤如下:

  1. 解析 HTML 构建 DOM

    具体步骤如下:

    转换:从网络或磁盘读取 HTML 文件原始字节,根据文件编码将字节转换为字符串

    分词:根据 HTML 规范,将上述字符串切分为不同的标记,如 <html><body>

    语法 分析:将上述标记转换为对象,对象中包含语法信息,如属性、属性值等信息

    DOM 构建:将上述对象链接在树状的结构中以标识父子和兄弟关系,这个树状结构就是 DOM


    需要注意的是:

    在读取 HTML 时,DOM 的构建已经开始,可以将上面的步骤理解成是流水线并行

    上一个步骤每完成一点,就会将结果传递给下一个步骤,不会等一个步骤完全执行完才进行下一个步骤


    关于脚本资源

    当 HTML 解析器遇到 <script> 标签时,会暂停 HTML 的解析,并开始加载、解析和执行 JavaScript

    这是因为  JavaScript 可能会修改 DOM 的结构,若明确  JavaScript  不会修改 DOM, 那么:

    你可以为  <script> 标签加 async  属性,这样是异步加载 JavaScript,但是加载完马上就会开始执行

    也可以为  <script> 标签加 defer  属性,这也是异步加载 JavaScript,且等 DOM 构建完才开始执行

    线程协作

    其实如果  JavaScript 确实要修改 DOM 某节点,那也该将其放到 DOM 的构建之后

    否则有些获取元素的 操作可能就不能生效


    关于外部资源

    一个网页通常包含多个外部资源,例如图片、CSS、JavaScript、字体等等

    在解析 DOM 过程中,会按文档的顺序逐一发起请求 ,但是为了提高效率会同时运行预加载扫描器

    预加载扫描器查看已切分的标记,从中寻找资源地址并告知网络线程请求

    如此当 HTML解析被 JavaScript 阻塞时,预加载扫描器也能继续请求资源


  2. 解析 CSS 构建 CSSOM

    具体步骤如下:

    搜集:从内联样式、内部样式表、外部样式表、浏览器代理样式中,搜集所有样式规则

    构建:按上述规则构建 CSSOM 树状结构,其中每个节点表示一个样式规则,包含选择器以及样式声明

    匹配:遍历 DOM 节点匹配选择器,并为匹配的节点执行样式设置

    计算:计算 DOM 节点的最终样式,这些样式可通过以下接口查看:window.getComputedStyle()


    需要注意的是:

    上述匹配步骤,CSS 选择器会从右往左匹配 DOM 节点,举个例子,假设 CSS 选择器为 .nav span

    那么匹配之时,首先找到所有 span 节点,然后对每个 span 节点,向上找 .nav 节点


    另外注意的是:

    构建 DOM 和构建 CSSOM 是同时进行的,但是这并不意味着二者不会相互影响

    因为 CSSOM 构建会阻塞脚本执行,而脚本执行会阻塞 DOM 构建,有一个间接的影响

    线程协作
  3. 布局 (Layout)

    有了 DOM 和 CSSOM 后,需要根据二者构建出渲染树 (RenderObject Tree)

    渲染树只会包含可见元素,像 head 节点和 display 为 none 的节点,则不会出现在渲染树中


    至此,其实已经知道每个可见节点的样式,接下来需要根据渲染树进行布局计算

    即根据盒子模型和视觉格式化模型来计算每个节点在设备视口内的位置以及大小


    当页面布局和几何信息发生变化时,浏览器需要重新布局,这个过程被称为回流 (reflow)

    具体又可分为全局布局和局部布局,常见的引起回流阶段的操作如下:

    • 页面第一次进行渲染
    • 窗口的尺寸发生改变
    • 增加或删除可见元素
    • 元素的位置发生改变
    • 元素的大小发生改变

  4. 绘制 (Paint)

    绘制实际上就是遍历渲染树,在屏幕中绘制出对应的节点内容,简单来说就是个像素填充的过程

    绘制过程在多个层上完成的,这些层被称为渲染层 (Render Layer)


    渲染树中每个节点都是一个渲染对象,处于相同坐标空间 (z 轴) 的渲染对象会合并到同一个渲染层

    对于满足层叠上下文条件的渲染对象,浏览器会为其自动创建新的渲染层,常见情况如下:

    • 根元素
    • mask 属性
    • filter 属性
    • reflection 属性
    • position 属性且值为 absoluterelativefixedsticky
    • backface-visibility 属性且值为 hidden
    • transform 属性且值不为 none
    • overflow 属性且值不为 visible
    • opacity 属性且值小于 1
    • opacitytransformfilter 等属性应用动画

    满足上述条件的渲染对象拥有独立的渲染层,但这并不意味着这些渲染对象独享该渲染层

    这是因为不满足上述条件的渲染对象将会与第一个拥有渲染层的父元素共用同一个渲染层


    当元素样式有变化但不影响布局时,浏览器需要重新绘制,这个过程被称为重绘 (repaint)

    具体又可分为全局绘制和局部绘制,常见的引起重绘阶段的操作如下:

    • 修改元素 color
    • 修改元素 background-color

    值得注意的是:回流一定引起重绘,重绘不一定引起回流


  5. 合成 (Composite)

    合成阶段中,多个渲染层按照恰当的重叠顺序进行合并,而后生成位图,最终通过显卡展示在屏幕上

    在这过程中,某些渲染层会被浏览器自动提升为合成层 (Compositing Layer), 常见情况如下:

    • will-change 属性
    • position 属性且值为 fixed
    • transform 属性且值为 translate3dtranslateZ 等 3D 变换
    • canvasvideoiframe 等元素
    • opacitytransformfilter 等属性应用动画

    每个合成层拥有单独的 Graphics Layer 用于生成位图,并上传到 GPU 对其进行合成,绘制到屏幕上

    其它不是合成层的渲染层与第一个拥有 Graphics Layer 的父层级共用


    合成层有什么用?答案是硬件加速,即把某些需要频繁回流和重绘的元素单独提升成为合成层

    这样不仅可以提高绘制的效率,也能减少这些元素修改时对其它元素影响

    例如修改合成层的 transform  时,不会带来回流或重绘,只需要将多个图层再次合并,而后生成位图

    这样我们可以通过 transform:translate 修改元素位置,通过 transform:scale 修改元素大小


渲染进程的工作对浏览器性能有重要影响,常见渲染优化包括:

  1. 关键样式资源放在头部加载,善用 preloadprefetch
  2. 脚本资源通常放在脚部加载,善用 asyncdefer
  3. 尽量减少回流以及重绘操作,例如 批量修改 DOM 、离线修改 DOM 等等
  4. 对于画布,常用的技术包括有分层 canvas、离屏 canvas 等等
  5. 对于动画,使用 requireAnimationFrame 代替 setTimeout
  6. 硬件加速

类似方法有很多,这些都需要在日常开发中不断地积累,并有意识地应用到未来开发中



好啦,本文到此结束,感谢您的阅读!

如果你觉得这篇文章有需要修改完善的地方,欢迎在评论区留下你宝贵的意见或者建议

如果你觉得这篇文章还不错的话,欢迎点赞、收藏、关注,你的支持是对我最大的鼓励 (/ω\)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
完整版:https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。
东南亚位于我国倡导推进的“一带一路”海陆交汇地带,作为当今全球发展最为迅速的地区之一,近年来区域内生产总值实现了显著且稳定的增长。根据东盟主要经济体公布的最新数据,印度尼西亚2023年国内生产总值(GDP)增长5.05%;越南2023年经济增长5.05%;马来西亚2023年经济增速为3.7%;泰国2023年经济增长1.9%;新加坡2023年经济增长1.1%;柬埔寨2023年经济增速预计为5.6%。 东盟国家在“一带一路”沿线国家中的总体GDP经济规模、贸易总额与国外直接投资均为最大,因此有着举足轻重的地位和作用。当前,东盟与中国已互相成为双方最大的交易伙伴。中国-东盟贸易总额已从2013年的443亿元增长至 2023年合计超逾6.4万亿元,占中国外贸总值的15.4%。在过去20余年中,东盟国家不断在全球多变的格局里面临挑战并寻求机遇。2023东盟国家主要经济体受到国内消费、国外投资、货币政策、旅游业复苏、和大宗商品出口价企稳等方面的提振,经济显现出稳步增长态势和强韧性的潜能。 本调研报告旨在深度挖掘东南亚市场的增长潜力与发展机会,分析东南亚市场竞争态势、销售模式、客户偏好、整体市场营商环境,为国内企业出海开展业务提供客观参考意见。 本文核心内容: 市场空间:全球行业市场空间、东南亚市场发展空间。 竞争态势:全球份额,东南亚市场企业份额。 销售模式:东南亚市场销售模式、本地代理商 客户情况:东南亚本地客户及偏好分析 营商环境:东南亚营商环境分析 本文纳入的企业包括国外及印尼本土企业,以及相关上下游企业等,部分名单 QYResearch是全球知名的大型咨询公司,行业涵盖各高科技行业产业链细分市场,横跨如半导体产业链(半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件)、光伏产业链(设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端)、新能源汽车产业链(动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩)、通信产业链(通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI)、先进材料产业链(金属材料、高分子材料、陶瓷材料、纳米材料等)、机械制造产业链(数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机)、食品药品、医疗器械、农业等。邮箱:market@qyresearch.com
浏览器渲染机制可以分为以下几个步骤: 1. 构建 DOM 树:根据 HTML 文本构建 DOM 树,即将 HTML 文本解析成一个个的节点,然后将这些节点按照其在文档中的层级关系组成一棵树。 2. 构建 CSSOM 树:根据 CSS 文本构建 CSSOM 树,即将 CSS 文本解析成一个个的样式规则,然后将这些样式规则按照其在文档中的层级关系组成一棵树。 3. 合并生成渲染树:将 DOM 树和 CSSOM 树组合成渲染树(也称为呈现树或布局树)。渲染树只包含需要显示的节点和这些节点的样式信息。渲染树的构建过程中,浏览器会忽略掉那些不需要显示的节点,例如 head 标签、display:none 的节点等。 4. 计算布局信息:根据渲染树计算每个节点在屏幕上的位置和大小,这个过程被称为布局或排版(layout 或 reflow)。布局是一个相当昂贵的操作,因为浏览器需要遍历渲染树的每个节点,并根据节点的样式、大小、位置等信息计算其在屏幕上的位置和大小。 5. 绘制页面:根据渲染树和布局信息,将页面绘制到屏幕上,这个过程被称为绘制(painting 或 rasterization)。绘制的过程中,浏览器会将渲染树中每个节点的内容转换成位图,然后将这些位图组合成一张完整的页面。 6. 提交更新:将绘制好的页面提交到 GPU,由 GPU 将其显示到屏幕上。 以上是浏览器渲染机制的主要流程,其中布局(layout 或 reflow)是整个渲染过程中最耗时的步骤,因此在开发中需要尽可能减少布局的次数,以提高页面的性能表现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值