Web前端—浏览器渲染原理

浏览器渲染原理

  • 浏览器渲染原理
    • 渲染时间点
    • 渲染流水线
      • 1. 解析HTML—Parse HTML
      • 2. 样式计算—Recalculate Style
      • 3. 布局—Layout
      • 4. 分层—Layer
      • 5. 绘制—Paint
      • 6. 分块—Tiling
      • 7. 光栅化—Raster
      • 8. 画—Draw
      • 完整过程
    • 面试题
      • 1. 浏览器是如何渲染页面的?
      • 2. 什么是 reflow?
      • 3. 什么是 repaint?
      • 4. 为什么 transform 的效率高?

浏览器渲染原理

渲染 render
html字符串 >> 渲染 >> 像素信息

渲染时间点

渲染时间点

渲染流水线

渲染流水线

1. 解析HTML—Parse HTML

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • ① HTML解析过程中遇到CSS代码怎么办?

    • 为了提高解析效率,浏览器会启动一个预解析器率先下载和解析CSS。

在这里插入图片描述

  • ② HTML解析过程中遇到JS代码怎么办?

    • 渲染主线程遇到JS时必须暂停一切行为,等待下载执行完后才能继续。
    • 预解析线程可以分担一点下载JS的任务。

在这里插入图片描述

2. 样式计算—Recalculate Style

  • 得到每一个节点的最终样式(计算后的样式—computed style)
    在这里插入图片描述

3. 布局—Layout

  • DOM树和Layout树不一定是一一对应的
  • “找到每个元素的几何信息”
  • 内容必须在行盒中
  • 行盒和块盒不能相邻

在这里插入图片描述

4. 分层—Layer

在这里插入图片描述

堆叠上下文有关的属性,有可能会影响分层
will-change可以更大程度的影响分层

5. 绘制—Paint

  • 这里的绘制,是为每一层生成如何绘制的指令

在这里插入图片描述

  • 渲染主线程的工作到此为止,剩余步骤交给其他线程完成
    在这里插入图片描述

6. 分块—Tiling

  • 分块会将每一层分为多个小的区域

在这里插入图片描述

  • 分块的工作是交给多个线程同时进行的
    在这里插入图片描述

7. 光栅化—Raster

  • 光栅化是将每个块变成位图

  • 优先处理靠近视口的块
    在这里插入图片描述

  • 此过程会用到GPU加速
    在这里插入图片描述

8. 画—Draw

  • 合成线程计算出每个位图在屏幕上的位置,交给GPU进行最终呈现
    在这里插入图片描述

完整过程

在这里插入图片描述

面试题

1. 浏览器是如何渲染页面的?

当浏览器的网络线程收到 HTML 文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。

在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。


整个渲染流程分为多个阶段,分别是: HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画

每个阶段都有明确的输入输出,上一个阶段的输出会成为下一个阶段的输入。

这样,整个渲染流程就形成了一套组织严密的生产流水线。


渲染的第一步是解析 HTML

解析过程中遇到 CSS 解析 CSS,遇到 JS 执行 JS。为了提高解析效率,浏览器在开始解析前,会启动一个预解析的线程,率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。

如果主线程解析到link位置,此时外部的 CSS 文件还没有下载解析好,主线程不会等待,继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。

如果主线程解析到script位置,会停止解析 HTML,转而等待 JS 文件下载好,并将全局代码解析执行完成后,才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树,所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

第一步完成后,会得到 DOM 树和 CSSOM 树,浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。


渲染的下一步是样式计算

主线程会遍历得到的 DOM 树,依次为树中的每个节点计算出它最终的样式,称之为 Computed Style。

在这一过程中,很多预设值会变成绝对值,比如red会变成rgb(255,0,0);相对单位会变成绝对单位,比如em会变成px

这一步完成后,会得到一棵带有样式的 DOM 树。


接下来是布局,布局完成后会得到布局树。

布局阶段会依次遍历 DOM 树的每一个节点,计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。

大部分时候,DOM 树和布局树并非一一对应。

比如display:none的节点没有几何信息,因此不会生成到布局树;又比如使用了伪元素选择器,虽然 DOM 树中不存在这些伪元素节点,但它们拥有几何信息,所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应。


下一步是分层

主线程会使用一套复杂的策略对整个布局树中进行分层。

分层的好处在于,将来某一个层改变后,仅会对该层进行后续处理,从而提升效率。

滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果,也可以通过will-change属性更大程度的影响分层结果。


再下一步是绘制

主线程会为每个层单独产生绘制指令集,用于描述这一层的内容该如何画出来。


完成绘制后,主线程将每个图层的绘制信息提交给合成线程,剩余工作将由合成线程完成。

合成线程首先对每个图层进行分块,将其划分为更多的小区域。

它会从线程池中拿取多个线程来完成分块工作。


分块完成后,进入光栅化阶段。

合成线程会将块信息交给 GPU 进程,以极高的速度完成光栅化。

GPU 进程会开启多个线程来完成光栅化,并且优先处理靠近视口区域的块。

光栅化的结果,就是一块一块的位图


最后一个阶段就是

合成线程拿到每个层、每个块的位图后,生成一个个「指引(quad)」信息。

指引会标识出每个位图应该画到屏幕的哪个位置,以及会考虑到旋转、缩放等变形。

变形发生在合成线程,与渲染主线程无关,这就是transform效率高的本质原因。

合成线程会把 quad 提交给 GPU 进程,由 GPU 进程产生系统调用,提交给 GPU 硬件,完成最终的屏幕成像。

2. 什么是 reflow?

reflow 的本质就是重新计算 layout 树。

当进行了会影响布局树的操作后,需要重新计算布局树,会引发 layout。

为了避免连续的多次操作导致布局树反复计算,浏览器会合并这些操作,当 JS 代码全部完成后再进行统一计算。所以,改动属性造成的 reflow 是异步完成的。

也同样因为如此,当 JS 获取布局属性时,就可能造成无法获取到最新的布局信息。

浏览器在反复权衡下,最终决定获取属性立即 reflow。
在这里插入图片描述

3. 什么是 repaint?

repaint 的本质就是重新根据分层信息计算了绘制指令。

当改动了可见样式后,就需要重新计算,会引发 repaint。

由于元素的布局信息也属于可见样式,所以 reflow 一定会引起 repaint。
在这里插入图片描述

4. 为什么 transform 的效率高?

因为 transform 既不会影响布局也不会影响绘制指令,它影响的只是渲染流程的最后一个「draw」阶段

由于 draw 阶段在合成线程中,所以 transform 的变化几乎不会影响渲染主线程。反之,渲染主线程无论如何忙碌,也不会影响 transform 的变化。

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Golang获取音视频时长信息

文章目录 一、工具简介二、使用golang获取时间长 一、工具简介 这些工具都是与多媒体处理和流媒体相关的开源工具,它们都属于 FFmpeg 多媒体框架。 FFmpeg 是一个用于处理多媒体内容(音频、视频、图像等)的命令行工具。它可以执行各种各样…

每日一题 --- 两两交换链表中的节点[力扣][Go]

两两交换链表中的节点 题目:24. 两两交换链表中的节点 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示例 1&a…

基于Java中的SSM框架实现考研指导平台系统项目【项目源码+论文说明】

基于Java中的SSM框架实现考研指导平台系统演示 摘要 应对考研的学生,为了更好的使校园考研有一个更好的环境好好的学习,建议一个好的校园网站,是非常有必要的。提供学生的学习提供一个交流的空间。帮助同学们在学习高数、学习设计、学习统计…

【boost_search搜索引擎】2.正排索引和倒排索引

首先,要制作搜索引擎,我们首先要了解,什么是正排索引,什么是倒排索引,这是一个搜索引擎的关键。 1.正排索引 正排索引,其实就是我们的每一个文档,对应一个文档id。 正如vector容器一样&#xf…

【Docker】常用命令 docker info

文章目录 什么是docker info命令基本用法实际示例查看Docker系统信息 输出格式常用选项--format:自定义输出格式-f, --format:指定输出模板文件 总结 在Docker中, docker info命令是用于查看Docker系统信息的主要命令之一。本文将深入探讨 …

计算机视觉研究方向

计算机视觉是一个广泛且快速发展的领域,涵盖了多种研究方向和技术。主要的研究方向包括图像处理、目标检测与识别、图像生成、三维视觉、行为识别、深度学习与计算机视觉、多媒体分析、视频理解、风格化、全向视觉传感器等。这些研究方向和技术不断进步,…

Python+django+vue开发的家教信息管理系统

一直想做一款管理系统,看了很多优秀的开源项目但是发现没有合适的。 于是利用空闲休息时间开始自己写了一套管理系统。 功能介绍 平台采用B/S结构,后端采用主流的Pythondjango进行开发,前端采用主流的Vue.js进行开发。 整个平台包括前台和…

go实现TCP服务器

package main import ( "fmt" "net" ) func main() { // 监听TCP端口 listener, err : net.Listen("tcp", "localhost:50000") if err ! nil { fmt.Println("Error listening:", err.Error…

Arduino智能家居

文章目录 一、接线框图1、下载fritzing 二、Arduino IDE 下载三、实现代码 一、接线框图 1、下载fritzing https://github.com/fritzing/fritzing-app/releases打开的软件界面如下: 二、Arduino IDE 下载 官网地址 P.S. 如果upload代码过程中出现cant open de…

2024年阿里云轻量应用服务器优惠价格_2核2G_2核4G报价

阿里云轻量应用服务器2核2G和2核4G配置优惠价格表,轻量2核2G3M带宽61元一年,轻量2核4G4M带宽165元1年,均不限制月流量,阿里云活动链接 aliyunfuwuqi.com/go/aliyun 活动打开如下图: 阿里云轻量应用服务器价格 61元/年…

力扣刷题之21.合并两个有序链表

仅做学习笔记之用。 题目: 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,4]示例 2: 输入&#xf…

MySQL数据库基本操作(增删改查)与用户授权

前言 SQL(Structured Query Language,结构化查询语言)是一种用于管理关系数据库系统的语言。SQL的设计目标是提供一种简单、直观的语言,使得用户可以通过编写SQL语句来处理他们想要的数据和操作。 目录 一、结构介绍 1. 查看信…

自定义android音频焦点

接着上一篇音频策略的分析,接下来看下音频焦点 音频焦点机制是Android系统提供的一种约定: 1 播放声音前申请音频焦点,播放结束的时候释放音频焦点, 2 获得焦点才能开始播放,失去音频焦点应该暂停播放或者降低音量 一…

使用Django实现信号与消息通知系统【第154篇—Django】

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 使用Django实现信号与消息通知系统 在Web应用程序中,实现消息通知系统是至关重…

华为数通 HCIP-Datacom H12-831 题库补充

2024年 HCIP-Datacom(H12-831)最新题库,完整题库请扫描上方二维码,持续更新。 缺省情况下,PIM报文的IP协议号是以下哪一项? A:18 B:59 C:103 D:9 答案&a…

从抛硬币试验看概率论的基本内容及统计方法

一般说到概率,就喜欢拿抛硬币做例子。大多数时候,会简单认为硬币正背面的概率各为二分之一,其实事情远没有这么简单。这篇文章会以抛硬币试验为例子并贯穿全文,引出一系列概率论和数理统计的基本内容。这篇文章会涉及的有古典概型…

【jvm】young gc full gc

何时触发YoungGC或FullGC YoungGC的触发时常在发生&#xff0c;当新生代的Eden区满了之后就会触发YoungGC。 FullGC在多个情况下都会被触发&#xff1a; 1、发生Young GC之前进行检查&#xff0c;如果“老年代可用的连续内存空间” < “新生代历次Young GC后升入老年代的对象…

ubuntu20.04安装 ffmpeg 开发环境

参考&#xff1a;参考1 一些相关软件包&#xff0c;已打包整理好&#xff0c;如下 源码包 1、安装步骤 创建安装目录 sudo mkdir -p /usr/local/ffmpeg/lib 解压源码 tar -jxf ffmpeg-4.3.2.tar.bz2 到指定ffmpeg目录进行配置 cd ffmpeg-4.3.2/ 配置&#xff1a;会报错很多…

实现分页查询的一种方法,使用Microsoft SQL Server数据库

实现分页查询的一种方法,使用Microsoft SQL Server数据库 一、SQL语言用于分页的语句二、后端过程设计示例三、前端实现逻辑总结 各数据库均提供了分页查询的语句和相应的方法&#xff0c;但是如果查询的结果较为复杂&#xff0c;如查询结果需要结过再计算、分段、添加汇总行等…

Zookeeper(八)序列化与协议

目录 一 序列化与反序列化1.1 Jute序列化工具1.1 Recor接口1.2 OutputArchive和InputArchive 二 通信协议2.1 请求部分2.1.1 请求头2.2.2 请求体2.1.3 案例分析 2.2 响应部分2.2.1 响应头2.2.2 响应内容2.2.3 案例分析 官网&#xff1a;Apache ZooKeeper 一 序列化与反序列化 …