将昂贵的渲染(可滚动容器)与舞台的其余部分分开

将昂贵的渲染(可滚动容器)与舞台的其余部分分开是一种优化技术，旨在提高前端应用的性能和用户体验。这种技术通常被称为虚拟滚动或无限滚动。

虚拟滚动的基本原理是只渲染当前可见区域的内容，而不是一次性渲染整个滚动容器的内容。这样可以减少渲染的工作量，提高页面加载速度和响应性能。

虚拟滚动的主要优势包括：

提高性能：只渲染可见区域的内容，减少了渲染的工作量，提高了页面加载速度和响应性能。
节省资源：减少了内存占用和网络传输的数据量，节省了服务器和客户端的资源消耗。
改善用户体验：滚动容器可以流畅地滚动，不会出现卡顿或延迟，提供更好的用户体验。

虚拟滚动适用于需要展示大量数据的场景，例如社交媒体的消息流、电子商务的商品列表、新闻网站的文章列表等。

在腾讯云的产品中，推荐使用云原生技术来实现虚拟滚动。云原生是一种基于容器化、微服务和自动化的应用开发和部署方法，可以提供高度可伸缩、弹性和可靠的应用环境。

腾讯云的相关产品是腾讯云容器服务（Tencent Kubernetes Engine，TKE），它是一种托管式的容器服务，提供了高度可伸缩、弹性和可靠的容器集群环境。您可以使用TKE来部署和管理虚拟滚动的应用程序，实现高性能和高可用性。

更多关于腾讯云容器服务的信息，请访问以下链接： https://cloud.tencent.com/product/tke

相关·内容

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

Modal navigation drawers 使用遮罩来阻止用户与 app 内容的其余部分进行交互。它们高于大多数 app 元素，不会影响屏幕的布局网格。主要用于屏幕空间有限的移动设备。...用与容器相同长度的dividers将组分开；不要将每个目的地都分开 ---- Header（标题） Navigation drawer 的 header 区域是一个灵活的空间，可用于品牌表达（如 app...---- Scrim（遮罩，仅用于modal 和 bottom） Modal navigation drawers 使用遮罩来阻止用户与 app 其余部分的交互。...行为滚动 Navigation drawers 可以垂直滚动，独立于屏幕内容和 UI 的其余部分。...比 top app bar 更低的高度 ---- Modal drawer 用法 Modal navigation drawers 会通过遮罩阻止用户与 app 内容的其余部分进行交互。

3.8K4 0

css3系列-2.css中常见的样式属性和值

列表样式定位属性浮动和清除浮动滚动条样式显示和隐藏字体与颜色 font-family:微软雅黑;/*字体名称（类型）：微软雅黑，黑体，楷体，宋体*/ font-size: 20px;/*字体大小...background-repeat:no-repeat;/*背景图片是否允许重复no-repeat repeat*/ background-attachment:fixed;/*规定背景图像是否固定或者随着页面的其余部分滚动...作为一个知识的存储。往下面看！浮动 /*浮动*/ .float{ float: right; } 这句话的意思是将这个块（暂时称为一个块吧）浮动到右边，或是移动。...3.第三种方式父容器使用伪类after和zoom。伪类选择器还没讲过，争取这两天写一份详细的选择器文章。...内容不会被修剪，内容溢出容器。 hidden 内容会被修剪，并且其余内容是不可见的,不会出现滚动条。

1.3K2 0

一个简洁、有趣的无限下拉方案

不知你是否从上面这张图中注意到了什么，比如只是渲染了可视区域的部分 DOM ，滚动过程中只是外层容器的 padding 在改变？...它为开发人员提供一种便捷的新方法来异步查询元素相对于其他元素或视窗的位置，消除了昂贵的 DOM 查询和样式读取成本。...先概览下总体思路：监听一个固定长度列表的首尾元素是否进入视窗；更新当前页面内渲染的第一个元素对应的序号；根据上述序号，获取目标数据元素，列表内容重新渲染成对应内容；容器 padding 调整，模拟滚动实现...存在的缺陷： padding 的计算依赖列表项固定的高度。这是一个同步渲染的方案，也就是目前容器 padding 的计算调整，无法计算异步获取的数据，只跟用户的滚动行为有关。...这看起来与实际业务场景有些不符。解决思路：思路 1、利用 Skeleton Screen Loading 来同步渲染数据元素，不受数据异步获取的影响。

1.9K2 0

前端架构探索与实践

再往上，是容器层。容器提供一些可插拔的 hooks 能力。并且根据 component 的配置来渲染不同的组件到页面中，首屏组件和按需加载组件。最后，支撑到每一个对应的页面里面。分工组织 ?...首先拿到基本的接口数据，通过自定义的状态管理，挂载到全局 state 对应的组件名下。容器层通过组件的配置文件，渲染对应的组件。最终呈现出完成的一个页面。...页面容器 ❝基于拍卖通用容器组件改造 ❞ 改造点：「基于 body 滚动」。因为我们目前页面都是 h5 页面了，之前则是 weex 的。...所以对于容器的底层，之前使用的 RecycleView ：固定 div 高度，基于 overflow 来实现滚动的。虽然，在 h5 里面这种滚动机制有些”难受“，但是罪不至”换“。...与手动下拉页面容器的橡皮筋效果冲突，而「倒是页面疯狂抖动」。所以。。。。重构。旧版容器功能点 ❝源码页面中使用的部分 ❞ ? 重构后的使用 ❝基本没有太大改变 ❞ ?

9882 0

Unity2D开发入门-UI 菜单页面

你可以将Canvas看作是UI元素的舞台，它负责渲染UI元素并处理它们在屏幕上的位置和交互。 Panel（面板）： Panel是一种特殊类型的UI元素，用于组织和分组其他UI元素。...Panel可以用于创建复杂的用户界面布局。使用Canvas的情况：当你需要在游戏中创建用户界面时，你应该将Canvas作为UI元素的容器。...总结： Canvas是必须的，作为UI元素的容器和渲染目标。而Panel是在Canvas中更具体的组件，用于组织和控制UI元素的布局、样式和交互行为。...子对象将按照从左到右、从上到下的顺序填充网格。 Content Size Fitter（内容尺寸适配器）：该组件可根据子对象的大小调整容器的大小。...你可以设置调整方式，如根据内容的最小或最大大小进行调整。这在需要根据内容自动调整大小的滚动视图和弹出窗口中非常有用。

6204 0

非样式布局

对中文来讲，文字的底部才是基线位置；同时文字的对齐是使用顶线或底线来对齐的。 * 为什么行高不一样，然而渲染的高度却是一样的呢？...文字的背景色是根据字体的大小来渲染的，底线和顶线之间。 * 为什么图片底部有空白？...空隙的大小视字体大小而定(如果字体大小是12px，那么缝隙会是3px左右的) * 解决方法：将图片的vertial-align设置为bottom即可。...* 滚动行为和滚动条的显示/隐藏 visible: 内容撑出容器内容全部显示 hidden：超出容器的部分进行隐藏，不会显示超出的部分 scroll：内容超出容器后，允许滚动...显示其余部分，滚动条始终显示 auto：内容超出容器后，允许滚动显示其余部分，滚动时才显示滚动条。

1.8K2 0

vue系列教程之微商城项目|分类

如果将overflow:hidden;属性取消，多出的内容就会溢出屏幕. 内容滚动需要内容滚动的区域有左侧导航栏和右侧商品分类列表，需要分开处理。...需要注意的是：better-scroll必须要在需要滚动的内容元素渲染完成之后再初始化，否则无法正常使用....但这样做better-scroll可能仍然无法正常运行，因为页面渲染是迟与js代码的，this.goods=res.data执行完之后，页面中很有可能还有其他元素在渲染，那this....滚动联动介绍 better-scroll提供了快速制作索引列表的模块，它将滚动容器中的父元素视为列表，把该父元素中的子元素视为列表项，通过给定对应的列表项下标，即可滚动到对应的子元素....通过vant-ui文档可知，当前选中的导航栏元素下标与this.activeKey动态绑定，再通过组件的@change监听导航栏点击事件，每次点击重新初始化右侧的better-scroll对象，将this.activeKey

6.4K1 0

实现图文消息的正确加载

经过一番排查后，终于解决了这个问题，本文就跟大家分享下我的解决方案与思路，欢迎各位感兴趣的开发者阅读本文。...那么，问题可能出在获取消息容器高度时，没有获取正确，于是我尝试了下将scrollHeight改为99999，这样它的滚动条就肯定在底部了。...此时，我们就找到了问题，那么我们就可以得到下述解决思路：获取页面内的所有聊天图片遍历获取到的图片每一张图片加载完成后就获取可滚动容器的高度，然后修改滚动条位置滚动条触顶分析触顶加载数据时，也是因为图片的缘故...nextTick()后，等待150ms，然后获取消息容器的可滚动高度. 计算滚动条的位置修改滚动条位置实现代码接下来，我们来看下具体的实现代码。...，是因为我发现当加载的消息超过20页时，等待150ms已经拿不到正确的可滚动容器高度了，需要等待400ms。

1.3K3 0

浅谈弹幕的设计

形式单条弹幕的基本模式有三种：滚动弹幕：自右向左滚动过屏幕的弹幕，以自上而下的优先度展示。顶部弹幕：自上而下静止居中的弹幕、以自上而下的优先度展示。...在相同时刻发送的弹幕基本上也具有相同的主题。互动性强：直播时的互动及时弹幕在视频直播场景中也能够成为主播与观众直接互动的方式。...舞台要做的事情是控制整个弹幕的节奏，当每一帧进行渲染时，都判断其中的轨道是否有空位，从等待队列中取合适的弹幕送往合适的轨道。...舞台的能力可以通过实现舞台基类以及对应的抽象函数，让具体类型的舞台去实现对应的舞台逻辑。从而实现不同渲染能力（Canvas、HTML+CSS）以及不同类型（滚动、顶部固定、底部固定）的弹幕控制。...轨道从我们平常见到的弹幕中可以看到，其实舞台中间会存在多条平行的轨道，舞台和轨道之间的关系是1对多的关系。当弹幕运行时，依次渲染轨道中的弹幕。

1.5K3 1

AnyView 对 SwiftUI 性能的影响

例如，如果你有 100 毫秒的卡顿，这意味着此帧显示晚于预期的 100 毫秒，从而使用户可以看到挂起。卡顿可以出现在提交阶段或渲染阶段。...在这个测试中，我们将通过整个消息列表三次滚动。没有 AnyView下面是没有泛型实现的动画卡顿记录。...没有 AnyView在没有 AnyView 包装器的情况下进行测试产生了与常规滚动测试相似的结果（58-59 FPS）。这也是预期的，因为 SwiftUI 知道视图的标识和结构。...其中一些视图相当昂贵（例如 GIF），因此重新绘制可能是一项相当昂贵的操作。通过使用 AnyView，效果类似于将 id 修饰符的值设置为 UUID() - 这将在发生更改时始终更新视图项目。...这也解释了为什么 AnyView 实现随着时间的推移变慢 - 每次重绘时都需要从头开始创建更多内容。总结总而言之，在这些情景中（包含异构视图的可滚动列表），最好为容器中的不同视图使用具体类型。

1210 0

从15个点来思考前端大量数据渲染与频繁更新的方案

节省资源：只加载用户可以看到的内容，可以节省带宽和服务器资源，对于用户和服务器都是有益的，尤其是在流量费用昂贵或网络连接不佳的情况下。...动态计算：虚拟列表组件会动态计算并调整滚动容器的滚动高度，以确保滚动行为与真实的数据量相匹配，为用户提供准确的滚动体验。...虚拟列表会计算当前应该显示内容的正确大小和位置，调整滚动容器的高度，使得滚动行为看起来和感觉上就像是在处理全部数据，虽然实际上只渲染了一部分内容。...handleScroll方法在容器滚动时触发，用来重新渲染可视区域内的项目。 render方法计算当前应该显示哪些项目，并更新DOM来反映这些更改。...限制：并非所有的Web应用都能从SSR中受益，特别是那些高度交互性的应用，客户端渲染可能是更合适的选择。动画优化其实动画优化包括了逐帧渲染，但是我还是分开来说比较好。

1.7K4 2

2023 年了解即将推出的 CSS 功能

CSS 锚点定位使用场景当用户向下滚动页面时跟随用户的元素。当用户单击按钮时展开和折叠的手风琴。根据多个锚点位置调整图像大小显示在页面其余部分的模式对话框。...这使你可以创建与页面上特定位置相关的形状。...在下面的示例中， shape-overflow: clip 将允许内容溢出形状，但它将被限制在元素的笔画框内：滚动捕捉(scroll snap) CSS 滚动捕捉模块提供的属性可让您通过定义捕捉位置来控制平移和滚动行为...当用户滚动滚动容器内的溢出内容时，内容可以被捕捉到位，从而提供分页和滚动定位。...滚动对齐：新的 scroll-snap-align 属性允许你控制元素在对齐到对齐位置时的对齐方式。例如，你可以使用此属性来确保元素始终与滚动容器的顶部、底部、中心或左/右对齐。

2233 0

微信小程序实践：2.3 可滚动的容器组件之 scroll-view

关于这个组件，有以下几个问题值得思考： 1，当我们说滚动时，涉及到外面的滚动容器与里面的可滚动实体两个对象，我们说滚动到顶部、滚动到底部，指的是什么呢？是什么到顶部，什么到底部了？...数据与页面数据分开。...我在vue项目中曾实现过一个类似的长列表组件，以前推过文章，可以在这里查看：15 v-if 条件渲染与 v-for 列表渲染。...不支持也情有可原，因为要滚动，普通组件与原生组件都不在一个层，一个要上面，一个要下面，怎么同步？网上有人说，小程序scroll-view不支持嵌套textarea等组件，那是旧版本。...这里主要需要实现两个功能：单击左侧菜单，右侧滚动到相应位置在右侧滚动，左侧菜单自动同步高亮第一个功能点，可以通过scroll-into-view属性实现，将左侧菜单与右侧每块区域的id对应起来，单击时更新

14.9K3 0

前端性能优化方案

CSS Sprite CSS Sprite也就是俗称的雪碧图，将多张图片合并到一张图片中，可以减少图片的数量，此外由于合并图片相对分开的图片减少了存储信息的开销如颜色表和格式信息等，合并图片后的大小比分开的图片的大小的总和要趋于更小...优化资源加载样式表位置根据浏览器渲染的顺序，将CSS在中引入或者嵌入，相对于将CSS放到或者页面底部来说，可以使页面渲染速度加快，这对于页面内容比较丰富的网站或者网络链接较慢时相当重要...解决这些问题的方法有很多例如异步加载脚本等，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载与页面渲染的影响。...，CSS计算的频率要远远超出我们的想象，不仅在页面显示和缩放时会进行计算，在页面滚动或者移动鼠标都会重新计算一次，从而影响到页面的性能。...例如使用PHP，则可以使用函数flush()将部分就绪的HTML响应发送到浏览器，以便浏览器可以在后端忙于处理HTML页面的其余部分时开始获取资源，好处主要体现在繁忙的后端或轻量级前端。

2.7K3 1

【Spring 篇】编织魔法：用XML实现Spring AOP

欢迎来到Spring的神奇世界，在这里，我们将穿越到编程的魔法舞台，一起学习如何使用XML实现Spring AOP。这是一个充满创意和优雅的舞台，而今我们将揭开其神秘的面纱。...AOP的魅力在编程的大舞台上，AOP（Aspect-Oriented Programming）犹如一场舞蹈，将代码的横切关注点与主要业务逻辑分开，使得代码更加模块化、清晰和可维护。...AOP的舞台布景在Spring中，AOP的舞台布景就是XML配置文件。XML充当着指挥家的角色，将各种音符组织成一支优美的交响曲。我们来看看如何在XML中定义AOP的各个组成部分。...缓存管理: 在方法执行前检查缓存，避免执行昂贵的操作。舞者告别：结束语在这个充满魔法和创意的AOP舞台上，我们学会了如何使用XML配置来实现Spring AOP。...AOP为我们提供了一种优雅的方式来处理与主要业务逻辑无关的关注点，使得我们的代码更加模块化、清晰和可维护。愿你在编程的旅途中，能够在AOP的舞台上舞出属于自己的优美编程之舞。

1661 0

content-visibility 缩短页面加载速度

因为content-visibility可跳过不在屏幕上的内容渲染，包括布局和渲染，直到真正需要布局渲染的时候为止。所以利用它可以使初始用户加载速度更快，还能与屏幕上的内容进行更快的交互。 ?...当容器的内容发生变化时，浏览器考虑到其他元素可能也会发生变化，于是就会去检查页面中所有的元素。一直以来浏览器都是这么做的，大家都习以为常了。...这意味着该元素将布局为好像是空的。如果元素没有在常规块布局中指定的高度，则其高度为0。这可能不是理想的，因为滚动条的大小会发生变化，这取决于每个具有非零高度的内容。...但是，与auto不同，它不会自动开始在屏幕上渲染。这给了您更多的控制权，使您可以隐藏元素的内容并稍后快速取消隐藏它们。...将其与其他隐藏元素内容的常见方式进行比较： display：none：隐藏元素并破坏其渲染状态。这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵。

1.8K1 0

CSS背景1-概述

no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承。 1.5、background-size background-size 属性规定背景图像的尺寸。...background-size : 100% 100% 与 cover 和 contain 区别。 100% 100% 图片宽度和高度的比例会被改变，填满盒子。...contain 图片宽度和高度比例不变，容器内至少有一张完整的图，容器留白区，铺不下的再裁掉。 1.6 background-clip background-clip 属性规定背景的绘制区域。...1.7 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。值描述 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。...fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。

5902 0

初探富文本之基于虚拟滚动的大型文档性能优化方案

在Arco给予的示例中我们可以看到其传递了height属性，此时如果我们将这个属性删除的话虚拟列表是无法正常启动的，那么实际上Arco就是通过列表元素的数量与每个元素的高度，从而计算出了整个容器的高度，...，对于性能可优化的空间会更大，例如可以更方便地调度闲时渲染配合缓存等策略，从而更好地优化快速滚动时的体验。...首先我们来看Scroll Event，这是最常见的滚动监听方式，通过监听滚动事件我们可以获取到滚动容器的滚动距离，然后通过计算视口的高度与滚动距离来计算出当前视口内需要渲染的行，然后在视图层根据计算的状态来决定是否要渲染...那么动态高度的虚拟滚动与固定高度的虚拟滚动区别有什么，首先是滚动容器的高度，我们在最开始不能够知道滚动容器实际有多高，而是在不断渲染的过程中才能知道实际高度；其次我们不能直接根据滚动的高度计算出当前需要渲染的节点...，因为我们此时有实际占位，所以就不再需要预估整个容器的高度，而且只需要实际滚动到相关位置将节点渲染即可。

2021 0

学习 PixiJS — 视觉效果

，并且与普通精灵的工作方式相同。...1是标准分辨率; 2是高密度分辨率; 你将越来越多地发现一些报告3的超高密度显示器。下一步是将此值分配给渲染选项的 resolution 属性。...每个 Point 的 x 位置（第一个参数）将与下一个 Point 分开一个 ropeSegment 的距离。...('snake.png'), points); 将蛇添加到一个容器中，这样可以更容易定位。...然后将容器添加到舞台并定位它。

3.2K4 0

「前端进阶」高性能渲染十万条数据(虚拟列表)

由于只是对可视区域内的列表项进行渲染，所以为了保持列表容器的高度并可正常的触发滚动，将Html结构设计成如下结构： ...= listData.slice(startIndex,endIndex) 当滚动后，由于渲染区域相对于可视区域已经发生了偏移，此时我需要获取一个偏移量 startOffset，通过样式控制将渲染区域偏移至...列表项动态高度在之前的实现中，列表项的高度是固定的，因为高度固定，所以可以很轻易的获取列表项的整体高度以及滚动时的显示数据与对应的偏移量。...2.将列表项渲染到屏幕外，对其高度进行测量并缓存，然后再将其渲染至可视区域内。...为了使页面平滑滚动，我们还需要在可见区域的上方和下方渲染额外的项目，在滚动时给予一些缓冲，所以将屏幕分为三个区域：可视区域上方： above 可视区域： screen 可视区域下方： below

10.4K7 4

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云