美文网首页UI安卓进阶
屏幕展示UI的原理

屏幕展示UI的原理

作者: NIIIICO | 来源:发表于2022-03-08 11:15 被阅读0次

一、基础概念

1、帧

帧(Frame),一帧就是一幅静止的画面。

2、FPS

FPS(Frames Per Second),显卡每秒钟输出多少帧画面。

3、显示器显示原理

显卡负责计算图像数据,显示器负责显示。当显卡计算完成后,会将数据输出给显示器进行显示,显示器会从左上角将画面一行行的显示在屏幕上。


逐行扫描&隔行扫描
4、刷新率

显示器每完成一次完整的扫描就是刷新一次,1秒内完成的刷新次数即刷新率。(如60Hz,代表每秒刷新60次)

二、显示问题与解决思路

1、画面撕裂

原因:

显卡不会将画面数据直接交给屏幕进行展示,而是通过帧缓存(在不进行任何设置的时候,显卡会有两个帧缓存);

正常显示

显卡将数据写入后缓存,然后交换前后缓存,显示器从前缓存读取数据进行展示。如果显卡计算速度和显示器的显示速度一样,那我我们看到的画面都是正常的,没有问题。

画面撕裂

当显卡与显示器速率不匹配,
(1)显示器速率<显卡速率 :显示器还没有扫描完,显卡已经计算完毕,此时交换前后缓存,显示器上就会出现上一帧的上半部分和下一帧的后半部分,导致撕裂。
(2)显示器速率>显卡速率 :显示器扫描完毕,显卡还未计算完毕,此时显示器只能继续绘制上一帧的画面,等显卡计算完毕后交换缓存,绘制新画面的下半部分,导致撕裂。

解决思路:垂直同步

垂直同步会强制显示器扫描完毕后显卡才能将前后缓存交换。如果显卡绘制完毕显示器还没有扫描完,显卡就会等待显示器绘制完毕,再进行画面传递。


垂直同步示例

如图所示,当出图速率>显示器速率 时,显卡出图完毕后会等待同步信号,收到同步信号后再交换前后缓存,避免出现画面撕裂的情况。

2、垂直同步引起的新问题:卡顿

原因:

垂直同步解决了显卡出图速率>显示器扫描速率的撕裂问题;但是当出图速率<显示器速率 时;如上图中倒数第二部分情况,收到同步信号后,显卡还没有渲染出新的图,显示器只能将前缓存的内容再显示一边,从而导致某一帧展示时间偏长,就会产生卡顿的感觉。

解决思路:

为了解决这个问题,NVIDIA推出了一个自适应垂直同步功能。在出图速率<显示器速率 时,自动关闭垂直同步,从而使画面更流畅;在出图速率>显示器速率 时,自动开启垂直同步,减少撕裂。

3、垂直同步引起的新问题:延迟

原因:

由于垂直同步显卡画完之后会等待显示器,就会出现游戏里的画面已经发生变化,但是还没有反馈到显示器上。

解决思路:

1、三重缓存 :前缓存,中缓存,后缓存,显卡可以多渲染一帧的画面,可以减缓延时;但是如果屏幕刷新率太低,还是会出现延迟的问题。
2、快速垂直同步 :允许中后两个缓存进行交换,不影响显示器的画面;但是由于中后缓存交换,会抛弃很多过往帧,导致画面出现卡顿 的现象。

相关文章

  • 屏幕展示UI的原理

    一、基础概念 1、帧 帧(Frame),一帧就是一幅静止的画面。 2、FPS FPS(Frames Per Sec...

  • UIScrollView

    UIScrollView UIScrollView处理的问题 1,当需要展示的内容超过屏幕后,普通UI无法满足此需...

  • 深入理解IOS离屏渲染

    目录:图像显示原理1.1 将图像显示到屏幕的流程1.2 显示器显示流程UI卡顿、掉帧2.1 屏幕撕裂 Screen...

  • 布局优化

    1Android绘制原理及工具选择 绘制原理 CPU负责计算显示内容GPU负责柵格化(UI元素绘制到屏幕上) 系统...

  • 全息展示柜的应用优势与价值

    全息展示柜是一种通过全息投影技术借助屏幕对全息玻璃的直射原理产生的立体悬浮成像的展示设备,可展示珠宝、首饰、名表、...

  • UITableView ──分页加载

    IOS开发UI展示之UITableView ──分页加载 在ios开中中,由于屏幕尺寸限制,如果需要显示的数据很多...

  • Android进阶篇:深度解析UI原理和高级的UI优化方式

    不知道UI原理如何做UI优化? 本文内容分为三个部分,UI原理、LayoutInflater原理、UI优化,篇幅有...

  • 无标题文章

    APP性能优化 UI卡顿优化 View的绘制原理 UI卡顿原理分析 UI卡顿检测分析 BlockCanary原理分...

  • iOS UI绘制原理

    iOS UI绘制原理 高质量的图形展示在app的交互界面中扮演非常重要的角色。高质量的图形展示让用户更能喜欢使用它...

  • SJ46 初探XML,属性与值

    VIEWS 在屏幕上展示内容的视图所有VIEW组合起来的叫布局(layout)所有布局组合成用户界面(UI) Te...

网友评论

    本文标题:屏幕展示UI的原理

    本文链接:https://www.haomeiwen.com/subject/svoprrtx.html