美文网首页
iOS面试题--页面卡顿原因以及如何解决卡顿

iOS面试题--页面卡顿原因以及如何解决卡顿

作者: 奋斗的小马达 | 来源:发表于2021-02-24 10:54 被阅读0次

    一、CPU 和GPU

    在屏幕成像的过程中,CPU和GPU起着至关重要的作用
    1、CPU(Central Processing Unit,中央处理器)
         对象的创建和销毁、对象属性的调整、布局计算、文本的计算和排版,
    图片的格式转换和解码、图像的绘制(Core Graphics)
    
    2、GPU(Graphics Processing Unit,图形处理器)
         纹理的渲染
     
    在iOS中是双缓冲机制,有前帧缓存、后帧缓存
    

    整体过程如下图所示


    屏幕成像过程.png

    二、屏幕成像原理

    通常来时,计算机系统的CPU、GPU、显示器是以一种类似于串行的方式协同工作的。
    如下图,CPU计算好显示的内容提交给GPU;GPU把CPU提交过来的内容渲染成显示器可以显示的格式(也就是我们常说的一帧)。
    GPU渲染完成后将渲染结果(也就是一帧画面)放到屏幕的帧缓冲区(此处的帧缓冲区和离屏渲染的屏幕缓冲区、屏幕外缓冲区是一回事);
    随后视频控制器会按照VSync(垂直同步信号)读取帧缓冲区的数据,经过数模转换传递给显示器显示
    
    屏幕成像原理图.png

    三、页面卡顿的原因

    掉帧,也就是说CPU处理数据和GPU渲染时间过长导致掉帧 页面显示也就是卡顿
    
    

    四、解决卡顿的思路

    尽可能减少CPU、GPU资源消耗
    
    

    五、优化方案
    1、卡顿优化 - CPU

    1、尽量用轻量级的对象,比如用不到事件处理的地方,可以考虑使用CALayer取代UIView
    
    2、不要频繁地调用UIView的相关属性,比如frame、bounds、transform等属性,尽量减少不必要的修改
    
    3、尽量提前计算好布局,在有需要时一次性调整对应的属性,不要多次修改属性
    
    4、Autolayout会比直接设置frame消耗更多的CPU资源
    
    5、图片的size最好刚好跟UIImageView的size保持一致
    
    6、控制一下线程的最大并发数量
    
    7、尽量把耗时的操作放到子线程
          文本处理(尺寸计算、绘制)
         图片处理(解码、绘制)
    
    

    2、

    1、尽量避免短时间内大量图片的显示,尽可能将多张图片合成一张进行显示
    
    2、GPU能处理的最大纹理尺寸是4096x4096,一旦超过这个尺寸,就会占用CPU资源进行处理,所以纹理尽量不要超过这个尺寸
    
    3、尽量减少视图数量和层次
    
    4、减少透明的视图(alpha<1),不透明的就设置opaque为YES
    
    5、尽量避免出现离屏渲染
    
    

    什么是离屏渲染

    在OpenGL中,GPU有2种渲染方式
    On-Screen Rendering:当前屏幕渲染,在当前用于显示的屏幕缓冲区进行渲染操作
    Off-Screen Rendering:离屏渲染,在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作
    
    离屏渲染消耗性能的原因
    需要创建新的缓冲区
    离屏渲染的整个过程,需要多次切换上下文环境,先是从当前屏幕(On-Screen)切换到离屏(Off-Screen);等到离屏渲染结束以后,将离屏缓冲区的渲染结果显示到屏幕上,又需要将上下文环境从离屏切换到当前屏幕
    
    哪些操作会触发离屏渲染?
    光栅化,layer.shouldRasterize = YES
    
    遮罩,layer.mask
    
    圆角,同时设置layer.masksToBounds = YES、layer.cornerRadius大于0
    考虑通过CoreGraphics绘制裁剪圆角,或者叫美工提供圆角图片
    
    阴影,layer.shadowXXX
    如果设置了layer.shadowPath就不会产生离屏渲染
    
    

    相关文章

      网友评论

          本文标题:iOS面试题--页面卡顿原因以及如何解决卡顿

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