各位看官在面试的时候 是不是经常被面试官问到 什么是离屏渲染？ 哪些属性会引起离屏渲染？为什么会导致离屏渲染？
相信大家都会说出导致离屏的属性，可另外两个问题却回答不好，如果你遇到过这种情况 相信你看完这篇文章 再也不会茫然了。
我们对这四个字做一下拆分：
离屏渲染
离： 离开 ，谁离开， 从哪里离开， 又去哪里
屏：屏幕， 什么屏幕？是我们的手机屏幕吗？
渲染： 渲染什么？ 在哪里渲染？ 如何渲染？
当你打开一个app 进入某个页面 你就简单理解为 你看到了一张图片 没错 这个页面就是一张图片 ，这张图片怎么来的？
悄悄地告诉你 在你的手机里面 有一位非常厉害的高级画师（GPU） 这位画师有多厉害呢？ 他可以每秒绘制60张以上 美轮美奂的 精美图片 不服来挑战！！！
巧妇难为无米之炊 这位画师再厉害 也不能在空气中画图，，因此他要有一张画布（frame buffer） 在这张画布上画画，，
这张画布 你就可以理解为 离屏渲染的 ”屏“
这位画师（GPU） 离开了这张画布 去另一张画布上画画 就是离屏渲染， 不明白？ 继续向下看
它为什么要离开？ 还不是因为你刁难他，😄
我们想象一下现实中绘画的实际场景 一张大白纸 先画轮廓 在涂色 涂完一层 又一层 涂了一层 再来一层 ，，层层叠加 一张图片出来了，，
ok 回到我们的专业话题 一个页面 是有N个view 层层叠加 组合出来的，对吧？
假如一个页面 有四个view ， frame都是 （0 0 320 640） 层级关系是 view1里面嵌套view2，view2里面嵌套view3， view3里面嵌套view4
GPU 在绘制这个页面的时候 就是 一层一层的绘制 先绘制view1 接着 view2， view3， view4 依次绘制 这个绘制就给现实中画画一样，绘制到画布(屏幕)上 就再也无法撤回，，
那么接下来 我提个特殊的需求 view3 有圆角 并且设置了 clipstobounds属性，这种情况GPU会怎么绘制这个页面呢？？
所谓圆角就是剪裁 也就是 view3 画好以后需要剪裁 而且必须把view4 也剪裁了 因此要等view4绘制完成后在剪裁， 但是不能剪裁 view1 和view2
可是 剪裁是整个画布一起剪裁 不知道亲爱的读者你能否理解 这一句
因此如果在当前画布上进行剪裁 必然把 view1 和view2 也剪裁了 因为这两个view是先画上去，， 那如何确保view4绘制完成之后的剪裁 不会影响到view1 和view2呢？？
唯一的办法就是在创建一个画布 只在上面绘制view3 和view4 ，画好了 一起剪裁 ，，把剪裁好的画布 贴到 主画布上去，这样就不会影响到 view1 和view2了（两个画布需要内容交换：从主画布带着材料去另一个画布画画 画完了带着成果回到主画布 来来回回的交换确实够麻烦的）
这就是为什么 这位画师要离开当前画布 去别的画布 画画的原因，， 因为你的特殊需求（圆角）导致他不能在一张画布上完成所有的工作 ，，
所以它（GPU）离开了当前画布 去另一个画布 画画去了 == 离屏渲染 明白了嘛？？
总结： 一些view的特殊属性导致GPU无法在一个画布上完成所有绘制 ，而开辟另一个画布去绘制 这就是离屏渲染
离屏渲染的缺点
两张画布 必然 内存增加
两张画布合成 必然增加了GPU工作量 因而导致这位画师单位时间内 绘制的图片减少 无法保证1秒60张图片的工作量了 ，，结果 页面卡了，，，
网友评论