文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS 页面渲染 - 离屏渲染

上周介绍了一下iOS 页面渲染-UIView & CALayer，本周我们来聊一聊 iOS 页面渲染中的高频面试题--离屏渲染。...离屏渲染概念 先简单说下 iOS 页面渲染的正常流程。...FrameBuffer 如果有时因为面临一些限制，无法把渲染结果直接写入 Framebuffer，我们就需要先额外创建离屏渲染缓冲区 Offscreen Buffer，将提前渲染好的内容放入其中，等到合适的时机再将...OffscreenBuffer 对于上周文章所提到的利用 Core Graphics 的 API 进行页面绘制的方式有时候也会被称为离屏渲染（因为像素数据是暂时存入了 CGContext，而不是直接到了...所以如果layer不是静态，需要被频繁修改，比如处于动画之中，那么开启离屏渲染反而影响效率； 离屏渲染缓存内容有时间限制，缓存内容 100ms 内如果没有被使用，那么就会被丢弃，无法进行复用； 离屏渲染缓存空间有限

2K30
您找到你想要的搜索结果了吗？
是的
没有找到

ViewPager2实现内部Item的动态滚动

我们这是一个视频播放页+详情页，考虑到简单快捷，就想到了一个 ViewPager2 就可以实现，简单又快捷，为自己点赞。一想到如此easy,瞬时笑出了猪叫。...但是首先你要考虑的东西就很多，如果视频详情页超出一屏呢，也就是内部用了 RecyclerView或者NestedScrollView 呢，是不是还需要处理一下滑动冲突，当然这也不是很困难,内部拦截法就可以搞定...比如不可见，页面加载，总体相对来说并不是那么容易。 就在我以为又可以摸鱼一个ViewPager2就可以搞定之时。突然，产品同学发了新指示，下意识预感不妙。...产品：得加一个第一次使用时的提示啊，要不然用户都不知道页面可以下滑呢？效果我发你了，你看看： 下图为我实现好的简单样式，大意体会即可。...好家伙，不按套路出牌啊，我故作深沉，实则稳如老狗( ViewPager2 不是有一个 fakeDragBy() 方法设置偏移量吗)，这个有点麻烦，我得考虑考虑。

1.5K20

ViewPager2与Fragment

于是 , 在配合setOffscreenPageLimit预加载的时候 , 由于早期版本的ViewPager至少需要预加载右侧一个页面 , 所以导致在实现懒加载的过程中需要通过 : setUserVisibleHint...ViewPager2与Fragment配合使用 在ViewPager2中 , 官方将Fragment的生命周期纠正了 , 可以随着ViewPager2的左右切换来回调Fragment当前的状态....以下是ViewPager2与Fragment配合的代码 , 在生命周期中加入Log....向右再翻五页(即展示Fragment6) 当页面缓存超过7个时 , 会将最后使用的Fragment销毁回收 优先创建操作 , 然后再进行回收 , 最后进行展示 // 创建3 E/CardFragmentTag...回到桌面/锁屏 当Activity回到桌面或者锁屏后 , 开始按顺序回调当前缓存中的Fragment的onStop 最后再回调当前页面的onStop E/CardFragmentTag: onCreateView

2.5K20

Now in Android | 12 月刊 · 2019

我们的同事 Chris Banes 为各位开发者们发布了一个「手势导航」系列的文章，帮助大家处理 Android 10 中的手势变更的问题: 《手势导航 (一) | 开启全面屏体验》介绍了将应用构建到全面屏设备...，开启 "边到边" 的全面屏体验之旅。...ViewPager2 1.0.0 相比较旧版的 ViewPager，ViewPager2 所做的改进有: 支持 RTL (从右向左) 布局 支持竖直朝向布局 可靠的 Fragment 支持 (包括将变动信息传递给下层的...请阅读 ViewPager2 使用指南以了解如何在 Fragment 页面间完成滑动操作。 Transition 1.2.0 如果您的编译目标是 API 29，这次更新对您来说就非常重要。...Android 10 针对非 SDK 接口 (限制非公开 API 的使用) 做出的更改影响了一些方法，而这些方法影响到了 Transition 代码库的映射。

1.9K30

ConstraintLayout+ViewPager2打造《摇一摇新年幸运签》App

采用Kotlin语言进行编写，涉及到的技术有：ConstraintLayout、Drawable、 自定义View、Android动画、Viewpager2、字体的设置和传感器的使用。...之前写过一篇ViewPager2打造Banner轮播图的文章，这里在简单啰嗦两句，可能有的小伙伴没看之前的文章。...ViewPager2一屏多页效果 这里和ViewPager的一屏多页有很大区别，ViewPager采用为给自身设置margin并设置clipChildren属性为false。...滑动缩放 说到这就要讲一下PageTransformer了，它可以用来设置页面动画，还可以设置页面间距，间距和动画都要的话就要用到CompositePageTransformer了。...我这里如上一条，设置了页面间距并且用到了缩放效果，那么来看一下具体代码。

68820

ConstraintLayout+ViewPager2打造《摇一摇新年幸运签》App

采用Kotlin语言进行编写，涉及到的技术有：ConstraintLayout、Drawable、 自定义View、Android动画、Viewpager2、字体的设置和传感器的使用。...之前写过一篇ViewPager2打造Banner轮播图的文章，这里在简单啰嗦两句，可能有的小伙伴没看之前的文章。...ViewPager2一屏多页效果 这里和ViewPager的一屏多页有很大区别，ViewPager采用为给自身设置margin并设置clipChildren属性为false。...滑动缩放 说到这就要讲一下PageTransformer了，它可以用来设置页面动画，还可以设置页面间距，间距和动画都要的话就要用到CompositePageTransformer了。...我这里如上一条，设置了页面间距并且用到了缩放效果，那么来看一下具体代码。

1.7K20

10w单元格滚动卡顿如何解决？腾讯文档的7个秘笈

目录 1 前言 2 增量渲染 3 分析火焰图 4 禁用取色 5 减少搜索结果匹配 6 避免使用 clone 7 多卡片离屏渲染    7.1 多卡片 vs 整屏    7.2 实现 8 文本缓存 9...07 多卡片离屏渲染 绘制阶段要怎么去优化耗时呢？页面滚动的时候，每次其实只移动了一小段距离，只有这部分是新增的。...7.1 多卡片 vs 整屏 Smart Sheet 相比 Sheet 和 Word 来说会特殊一些，腾讯文档团队使用了 Konva 这个框架，它自身封装了一套渲染逻辑，所以对于 Word 这种离屏渲染来说...因此，针对看板的情况，可以针对多个卡片做离屏渲染。多个卡片离屏渲染比整屏离屏渲染更有优势。...对于第一种情况来说，此时没有新增卡片，多卡片离屏渲染只需要把离屏 Canvas 里面的内容绘制到主屏就行了。

4.5K51

浅谈RecyclerView的性能优化

众所周知，RecyclerView拥有四级缓存，它们分别是： Scrap缓存：包括mAttachedScrap和mChangedScrap，又称屏内缓存，不参与滑动时的回收复用，只是用作临时保存的变量。...CacheView缓存：mCachedViews又称离屏缓存，用于保存最新被移除(remove)的ViewHolder，已经和RecyclerView分离的视图，这一级的缓存是有容量限制的，默认最大数量为...如果一屏的item较多，那么RecyclerViewPool的大小就不能再使用默认的5，可适度增大Pool池的大小。...4.视情况使用setItemViewCacheSize(size)来加大CacheView缓存数目，用空间换取时间提高流畅度。...当RecyclerView的元素比较高，一屏只能显示一个元素的时候，第一次滑动到第二个元素会卡顿，这个时候就需要预留的额外空间，让RecyclerView预加载可重用的缓存。

1.7K10

腾讯文档Doc Canvas渲染引擎流程改造

canvas（在内存中创建的canvas元素，未dom挂载在页面上展示）；针对新渲染区域（滚动产生的新出现在可视范围的区域），则在离屏canvas中执行基础渲染，并将对应区域drawImage绘回主canvas...然而，问题就出在不同的浏览器以及系统平台对于canvas的支持度和兼容情况不尽相同，这里根据上述改造背景中的部分问题主要总结离屏canvas drawImage的三宗罪：iOS移动端存在canvas画布尺寸以及显存限制实际上各浏览器对...分页渲染流程改造方案3.1 滚动场景去掉离屏渲染（drawImage）通过上述分析，渲染流程上去掉canvas drawImage是比较迫切的需求，而drawImage的调用主要应用在滚动场景的离屏渲染...那么是否有方案可以不使用离屏渲染（drawImage）,同时又能复用渲染内容呢？...通过这样的流程改造后，有以下收益：可以完全弃用离屏canvas和drawImage，解决了drawImage带来的问题，减少了离屏canvas带来的额外显存和总画布尺寸占用一个分页对应一个canvas,

4.6K130

iOS面试之UI大全

一般来说，页面滑动流畅是60fps，也就是1s有60帧更新，即每隔16.7ms就要产生一帧画面，而如果CPU和GPU加起来的处理时间超过了16.7ms，就会造成掉帧甚至卡顿。...、销毁 2.预排版（布局计算、文本计算、缓存高度等等） 3.预渲染（文本等异步绘制，图片解码等） GPU: 纹理渲染，视图混合 一般遇到性能问题时，考虑以下问题： 是否受到CPU或者GPU的限制...是否有太多的离屏渲染操作？ 是否有太多的图层混合操作？ 是否有奇怪的图片格式或者尺寸？ 是否涉及到昂贵的view或者效果？ view的层次结构是否合理？...On-Screen Rendering:当前屏幕渲染，指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行 Off-Screen Rendering:离屏渲染，分为CPU离屏渲染和GPU离屏渲染两种形式...GPU离屏渲染指的是GPU在当前屏幕缓冲区外新开辟一个缓冲区进行渲染操作 应当尽量避免的则是GPU离屏渲染 GPU离屏渲染何时会触发呢？

55910

淘宝承接页是如何实现秒开的

承接页的秒开优化 首先来看未优化前的承接页，肉眼可见的“慢”，原始页面性能数据如下：页面首屏可视时间：低端机6.6s、中端机4.2s、高端机2.8s，平均首屏可视时间4.9s。...vs SSR） 承接页优化过程 中心化接口改造 最初的承接页，每个模块单独定制发请求，请求串行，页面渲染链路如下： ?...所以我们进行了中心化接口的改造，将模块中定制的请求逻辑抽离，将数据请求合并成一个。同时服务端改造，红包直塞和补贴计算的串行逻辑在服务端处理，前端模块通过一个动态加载器模块请求页面数据并分发给各个模块。...这是开启了数据预加载后的对比视频： （低端机y67 - CSR vs prefetch） 数据预加载虽然可以提前发出请求，但在传统的CSR链路中，首屏时间还是比较长，主要是因为基本JS+模块JS这部分资源加载还是很耗时...（低端机y67 - CSR vs prefetch vs SSR） 静态化SSR动画数据 静态化SSR方案，当用户缓存内容和真实内容有区别的时候，会有比较明显的数据刷新的过程，这对于用户体验来说，“不是不能用

2.2K40

基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型

，is 表示索引数组，uv 表示贴图坐标数组，如果想要单独定义某个面，可以通过***bottom_vs，bottom_is，bottom_uv，top_vs，top_is， top_uv*** 等来定义...; g3d.setFovy(oldFovy); g3d.setAspect(undefined); g3d.validateImp(); } 经过测试之后，通过该方法进行图像的获取会导致页面有所卡顿...，因为是获取当前 3d 场景的整体截图，由于当前3d场景是比较大的，所以 toDataURL 获取图像信息是非常慢的，因此我采取了离屏的方式来获取图像，具体方式如下： 创建一个新的 3d 场景，将当前场景的宽度与高度都设置为...，所以主屏与离屏的 3d 场景都共用同一个 dataModel，保证了场景的一致。...将之前对主屏获取图像的操作变成对离屏获取图像的操作，此时离屏图像的大小相对之前主屏获取图像的大小小很多，并且离屏获取不需要保存原来的眼睛 eyes 的位置以及 center 中心的位置，因为我们没有改变主屏的

1.3K20

基于 HTML5 WebGL + VR 的 3D 机房数据中心可视化

表示顶点坐标数组，is 表示索引数组，uv 表示贴图坐标数组，如果想要单独定义某个面，可以通过 bottom_vs，bottom_is，bottom_uv，top_vs，top_is， top_uv...g3d.setFovy(oldFovy); 14 g3d.setAspect(undefined); 15 g3d.validateImp(); 16 } 经过测试之后，通过该方法进行图像的获取会导致页面有所卡顿...，因为是获取当前 3d 场景的整体截图，由于当前3d场景是比较大的，所以 toDataURL 获取图像信息是非常慢的，因此我采取了离屏的方式来获取图像，具体方式如下： 1....) 来新建场景，其中的 dataModel 为当前场景的所有图元，所以主屏与离屏的 3d 场景都共用同一个 dataModel，保证了场景的一致。...将之前对主屏获取图像的操作变成对离屏获取图像的操作，此时离屏图像的大小相对之前主屏获取图像的大小小很多，并且离屏获取不需要保存原来的眼睛 eyes 的位置以及 center 中心的位置，因为我们没有改变主屏的

1.2K40

构建于 BS 端的 3D 摄像头可视化监控方案

表示顶点坐标数组，is 表示索引数组，uv 表示贴图坐标数组，如果想要单独定义某个面，可以通过 bottom_vs，bottom_is，bottom_uv，top_vs，top_is， top_uv...oldFovy); 14 g3d.setAspect(undefined); 15 g3d.validateImp(); 16 } 复制代码 复制代码 经过测试之后，通过该方法进行图像的获取会导致页面有所卡顿...，因为是获取当前 3d 场景的整体截图，由于当前3d场景是比较大的，所以 toDataURL 获取图像信息是非常慢的，因此我采取了离屏的方式来获取图像，具体方式如下： 1....) 来新建场景，其中的 dataModel 为当前场景的所有图元，所以主屏与离屏的 3d 场景都共用同一个 dataModel，保证了场景的一致。...将之前对主屏获取图像的操作变成对离屏获取图像的操作，此时离屏图像的大小相对之前主屏获取图像的大小小很多，并且离屏获取不需要保存原来的眼睛 eyes 的位置以及 center 中心的位置，因为我们没有改变主屏的

96600

iOS开发——影响图形性能的因素以及检测方法

但是在使用这个属性前，需要明确3点： 更新已经光栅化的CALayer会造成离屏渲染 被光栅化的bitmap如果超过100ms没有被使用则会被移除 系统限制缓存的大小为2.5 x screen size...2、Offscreen rendering(离屏渲染) 讨论造成离屏渲染的原因之前，先说明什么是离屏渲染：离屏渲染指的是在图像在绘制到当前屏幕前,需要先进行一次渲染,之后才绘制到当前屏幕。...因此，我们必须避免不必要的离屏渲染。...由此可见，很多常用属性都会造成离屏渲染，在性能要求高的地方，就需要使用另外的实现方案。...并非所有的黄色区域都是需要优化的，比如UINavigationBar，因为需要做背景模糊效果，因此它需要离屏渲染。

99420

BS 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化

表示顶点坐标数组，is 表示索引数组，uv 表示贴图坐标数组，如果想要单独定义某个面，可以通过 bottom_vs，bottom_is，bottom_uv，top_vs，top_is， top_uv...g3d.setFovy(oldFovy); 14 g3d.setAspect(undefined); 15 g3d.validateImp(); 16 } 经过测试之后，通过该方法进行图像的获取会导致页面有所卡顿...，因为是获取当前 3d 场景的整体截图，由于当前3d场景是比较大的，所以 toDataURL 获取图像信息是非常慢的，因此我采取了离屏的方式来获取图像，具体方式如下：    1....) 来新建场景，其中的 dataModel 为当前场景的所有图元，所以主屏与离屏的 3d 场景都共用同一个 dataModel，保证了场景的一致。    ...将之前对主屏获取图像的操作变成对离屏获取图像的操作，此时离屏图像的大小相对之前主屏获取图像的大小小很多，并且离屏获取不需要保存原来的眼睛 eyes 的位置以及 center 中心的位置，因为我们没有改变主屏的

68520

告别传统机房：3D 机房数据可视化实现智能化与VR技术的新碰撞

表示顶点坐标数组，is 表示索引数组，uv 表示贴图坐标数组，如果想要单独定义某个面，可以通过 bottom_vs，bottom_is，bottom_uv，top_vs，top_is， top_uv...经过测试之后，通过该方法进行图像的获取会导致页面有所卡顿，因为是获取当前 3d 场景的整体截图，由于当前3d场景是比较大的，所以 toDataURL 获取图像信息是非常慢的，因此我采取了离屏的方式来获取图像...) 来新建场景，其中的 dataModel 为当前场景的所有图元，所以主屏与离屏的 3d 场景都共用同一个 dataModel，保证了场景的一致。...将之前对主屏获取图像的操作变成对离屏获取图像的操作，此时离屏图像的大小相对之前主屏获取图像的大小小很多，并且离屏获取不需要保存原来的眼睛 eyes 的位置以及 center 中心的位置，因为我们没有改变主屏的...panel.setPositionRelativeTo('rightTop') 将面板的位置设置成右上角，并且通过 document.body.appendChild(panel.getView()) 将面板最外层的 div 添加进页面中

1.1K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券