iOS-底层原理35-界面优化
2021-02-18 本文已影响0人
一亩三分甜
《iOS底层原理文章汇总》
上一篇文章iOS-底层原理34-内存管理(下)和RunLoop介绍了内存管理底层原理和RunLoop,本文接着介绍界面优化
1.卡顿原理:掉帧
双缓冲区,垂直同步信号VSync
后置缓冲区第二帧渲染耗时,第三帧显示信号VSync发送过来切换到前置缓冲区,渲染完正常显示,显示第四帧信号VSync发送切换到后置缓冲区,覆盖了第二帧,第二帧完美错过,过候不等,掉帧
![](https://img.haomeiwen.com/i4193251/d2af46e905211b88.png)
![](https://img.haomeiwen.com/i4193251/3ae4ce6f8d0a617e.png)
2.卡顿检测
I.FPS检测卡顿
CADisplayLink
![](https://img.haomeiwen.com/i4193251/f8c99e6aa7a4bb99.png)
![](https://img.haomeiwen.com/i4193251/4df7ab2b00c9d4e0.png)
![](https://img.haomeiwen.com/i4193251/ed2a4ef5ee192b61.png)
II.Runloop卡顿检测
监控runloop运行事务的耗时:事务的状态
![](https://img.haomeiwen.com/i4193251/9dcc656e7e46d8a4.png)
III.微信卡顿检测工具:matrix
![](https://img.haomeiwen.com/i4193251/1d363dd15a7ad32a.png)
![](https://img.haomeiwen.com/i4193251/90c91ceb1cdc95cc.png)
![](https://img.haomeiwen.com/i4193251/a5f36b74cbbb9493.png)
超时时间为2秒
![](https://img.haomeiwen.com/i4193251/d177a48b08039284.png)
IV.滴滴卡顿方案:DoraemonKit
3.实战优化项目
tableView,maskToBound圆角
A.预排版:提前计算,内存缓存
![](https://img.haomeiwen.com/i4193251/92566eb8c41ac8cc.png)
B.预解码:图片加载
![](https://img.haomeiwen.com/i4193251/4d3e3decb71da704.png)
![](https://img.haomeiwen.com/i4193251/67ca3d51ba0191a2.png)
SDWebImage中的图片预解码:新起一个编解码队列
![](https://img.haomeiwen.com/i4193251/ad645ea5ae1c071f.png)
![](https://img.haomeiwen.com/i4193251/8f4f7a730f75f79f.png)
![](https://img.haomeiwen.com/i4193251/4427e5d8cd8e55a6.png)
![](https://img.haomeiwen.com/i4193251/01779fab9dcfa6c4.png)
查看imageView的编解码流程:编解码发生在主线程,给了主线程压力,可以像SDWebImage优化到子线程中
![](https://img.haomeiwen.com/i4193251/a733d602e84ee7ca.png)
![](https://img.haomeiwen.com/i4193251/404b87add5f53316.png)
C.按需加载
![](https://img.haomeiwen.com/i4193251/7c1114a730271ccf.png)
D.异步渲染
UIView的drawRect前后,分别做了什么?
![](https://img.haomeiwen.com/i4193251/d5a2aa7b8be2892e.png)
![](https://img.haomeiwen.com/i4193251/2448d3bf8a9b7c43.png)
面试题:UIView和CALayer的关系
I.UIView的底层是通过CALayer来驱动的
II.UIView能够交互
III.UIView侧重于显示 layer侧重于内容的绘制
IV.UIView会成为CALayer的代理 UIView的显示交给CALayer的display方法进行渲染
Graver渲染流程
![](https://img.haomeiwen.com/i4193251/0e09fcfd1f08cd58.png)
![](https://img.haomeiwen.com/i4193251/70a23baa143b21b4.png)
![](https://img.haomeiwen.com/i4193251/bbe99ee343d85513.png)
位图赋值
![](https://img.haomeiwen.com/i4193251/63462ebecb36fc18.png)
![](https://img.haomeiwen.com/i4193251/e980a07602110288.png)
位图具有响应功能:WMGMixedView-->WMGCanvasControl-->WMGCanvasView-->WMGAsyncDrawView-->UIView,满足响应链机制
![](https://img.haomeiwen.com/i4193251/1d98104538d6fb3f.png)
![](https://img.haomeiwen.com/i4193251/5a4a85307f607d98.png)
![](https://img.haomeiwen.com/i4193251/73c294d34428fdde.png)
![](https://img.haomeiwen.com/i4193251/b19c27966bcd78b6.png)
![](https://img.haomeiwen.com/i4193251/de05e2033b0fc0c4.png)