粉丝362获赞7629

之前分享过,如果后端一次性返回十万条数据,我们前端应该怎么处理?用虚拟列表的形式,比如说这个,这个是咱们这个电脑的屏幕这么高,但是后端的数据他可能需要这么多, 对吧?其实整个用户看到的也就是这个区域,所以说我只渲染用户能看到的部分,其他的这些可能有十万条数据,我不去渲染,那么这样的话页面就不会卡退,用虚拟这边向实现。那么今天咱们分享一种更简单的方式,两行 cs 就可以搞定。 在分享这个之前,那么你首先要了解一个 cs 新增的属性,那么这个新增的属性就是这个内容,可见咱们可以看一下这三个字分别是什么。首先这个是我定了两个 div, 首先第一个他是直接微的宝,其实这个和咱们平常的没啥区别,那么他圈的出来就是这样的。第二个 那么我可以把它直改成 heading, 改成 heading 之后大家可以看一下,你可以看一下就是说这个 div 有没有发现它里面的内容不见了,但是这个 div 它还在, 是吧?他和咱们平常的这种 displan 是不一样的,如果是设成 displan 的话,可以想一下,那 div 就消失了,他还有一个字叫包头,包头是什么意思呢?那么其实咱们就用它实现这种虚拟列表的功能。首先咱们看咱们第二个页面,第二页面咱们可以想象一下,其实为什么叫虚拟列表呢? 比如说这个,这个是我的虚拟代表,里面有好多的内容,对吧?类似于后端可能返回这么多的内容,那么我如果一次性全都渲染完,那么页面肯定会卡,那么他其实是这样的,那么我可以在这地方去设置他的样式,那么这个样式,比如说我把它设成这个字的时候,凹凸的时候,大家可以看一下 这个滚动条的高度,他其实是这么这么长的,左侧这个滚动条是吧?也就是说他渲染的内容他其实没有完全渲染完,是吧?但是如果把它删掉的话,这就和咱们平常的鞋带没啥区别。那么你可以看一下他的滚动条,他是这么长的,所以说能明显的感觉到是什么呢?也就说你色沉凹凸的时候, 也就说在你页面的这个可见的区域内,这个是可见区域,那么他这个内容他是渲染的,是吧?但是在没可见的地方其实他没有渲染,所以说我们用它可以实现虚拟列表的功能,也就是说他渲染的内容永远是什么?就是用户看到的这个区域,我们用户看不到的 他的上部分和下部分,他没有渲染,也就说我们这一行代码就可以搞定。但是这个地方搞定完了之后,你会发现还有一个小问题,比如说我滑动的时候,你可以看一下他会出现这种抖动的情况,这个问题怎么样解呢? 其实他还有一个属性,那么这个属性是啥呢?这个属性就是他的高度,就是这个值,那么我们要设他的高度,那么这个高度设成什么值呢?这高度就是要设置成和你每一个元素他的高度是一样的,那么我每一个元素的高度大概就是三百二,那么我把它设成三百二,这时候我保存一下,那么我再划的时候,你可以看一下 他其实会特别的顺畅。你可以看一下他官方提供的这个带帽,你看他的滚动条是非常小的,我可以永远的一直往下滑,一直滑滑 划到就是永远划不进,这就他用这个 cs 实现的这个功能是不是特别强大?以前我们如果用虚拟代表去实现这种后端一次性返回十万条数据前来,怎么样处理?那其实要写好多个逻辑,那么现在这两行代码就可以搞定了。 咱们可以分析一下他的性能啊,整个你用训练练本之后,你会发现他的性能是有一个很大的提升的。你看一下如果我设置了他的属性,你会发现他这个渲染六十 一毫秒,如果没设置相当于两秒多这个属性,他对于这种长文本、长列表功能的优化是显而易见的。但是这个属性他还有一些问题,如果你们知道可以评论区留言,这个问题我下节课讲。

后端一次性返回十万条数据,给大家说一下最优的直线方案,看,我实现了一个呆木,这个是相当于我渲染了八条滑的时候,你看它每次都有八条,不管上滑下滑,里面永远都有十个倒霉元素,这样浏览器肯定不会卡顿。给大家说一下理论怎么样实现这个叫虚名列表方式, 那就是他只对可见区域进行渲染,因为你的可见区域他其实固定高度的,对非可见区域的数据不渲染,或者进行部分渲染窗外达到极高的这种渲染性能,是我的一个可见的区域,对吧?但是我真实的列表长度可能是有这这么长,比如我有十万条数据, 比如我的可见区域的高度是二十 ps, 对吧?而且每个列表像,这个列表像可能就二十 ps, 那么我最多就可见十条了,那么我怎么处理呢?我往下滑的时候,其实我的可视区域他变了, 对吧?但这个真实的列表操作是没有变的,也就说他的缩影质变了,对吧?他现在要选择是从第三个到第十一个,这个时候我们要动态的计算可视区域,也就是说他从起始的缩影啊,是从这个包括结束的缩影,还有一个偏移的位置。 对于我现在的处理呢,我需要监听整个这个外边的这个滚动的事件,这可是区域,也就是这一块区域,我要给他一个固定的这个高度,包括每个列表他的高度也是固定的,包括列表的数据,也就是我总共多少条数据,也就十万条数据,这个也是固定的, 包括我当前滚动的位置,当前滚动的位置,也就是说他距上面的高度,那么我其实可以推算出总高度,也就说我总的数据乘以每个列表的高度,那么我可显示列表数,其实我需要除一下我整个可视区域处于每个的高度 啊,那么我的骑士缩影其实也很简单,他距上部滚动的高度处于我每个列表的高度,这个结束的缩影,其实我从开始缩影加上我这个可视机域显示的数量,包括我最终显示的数据,我其实用速度的开始缩影,取最后一个缩影值 就要拼了,这个其实就是我外边的这个整个的这个这个盒子,对吧?这个是我整个的所有的数据的一个高度,这个所有的数据,这是这个滚动圈,对吧?这滚动圈的位置, 这个真实的要渲染的,可是区域的范围也就是这一块,是吧?这个是每一个啊层,我要动态的获取总列片的高度,包括我要显示的列片的数量,我要算出来 获取实际我要显示的数据,一个总数据里面进行截取,那么我滚动的时候,我要设置他距上面的高度,我要我要算他开始缩影和结束缩影,我好 还有设置他的偏移量,这个偏移量说白了就是我要设置这个可视区域啊,他在歪柱上的位置一直是在变化的,包括上滑下滑也是一样,但是这种方式也不是最完美的方案,你看我这样选上他,我划的时候他有一个白屏的闪动,大家发现没有?

手机建议横屏或全屏观看,可达到更好观影效果。扣的函数 我们会坚持制作一系列的 sl 入门中级及高级教程,会避免找不到我们,请点关注按钮关注我们。 此函数在仓库人事管理中会用到 扣的函数。 函数的作用, 根据当前计算机的字符级返回文本字符串第一个字符对应的数字代码 与法格式 参数。一、必须要返回其中第一个字符的数字代码的文本可以是任意文本、多个字符或者单元格的引用。不同的操作系统使用不同的字符级, windows 操作系统使用 a, n, s, i 字符级。 mechantose 操作系统使用 mechantose 字符机。这就导致同一个字符不同的操作系统会返回不同的数字代码。 视力说明, 提取单元格中第一个字符对应的数字代码 计算机内的每一个字符都有一个相对应的数字代码。输入计算公式,在输出单元格中输入等于号输入函数 code 左括号 参数直接输入或者选择需要提取数字代码的单元格 a。 二、输入公式完毕,按艾特尔检查询结果, 查看结果,大写字母 a 返回数字代码六十五,正好和串儿还说互腻。 在输出单元格右下方点击加号拖拽,完成表格公式填充。查询其他文本对应的数字代码,他只会对文本第一个字符 进行查询,无论是数字中文还是特殊符号等都有对应的数字代码。 注意事项,一、函数在 windows 系统和麦克系统中的转化结果是不一样。二、参数中包含多个文本字符时,该函数只返回第一个字符的字符编码。三、 可以按组 alt 键和小键盘数字组合,输入数字代码,放开 alt 键即可显示为对应的特殊符号和文字 扣的函数。就讲到这里,谢谢大家关注,我不迷路,喜欢就给我点赞加收藏吧!

前端开发人员必备的 vs code 插件 neve server 实时服务器,按照这个插件之后,你可以在本地得到一台网页服务器,并且能够实时更新你的页面。我给大家演示一下,新建一个 html, 然后随便写一点吧,对嘛?然后右键 oppo mvize new server, 看到没有,直接显示出来了,但是注意看一点啊,那地址栏上面他是一个服务器地址啊,幺二七点零点零点幺点五五零零这个端口的,他是用通过服务器打开的,所以说他不是直接打开文件看一看,他实时更新的效果 挺快的。你在 vs 扣子里面安装,你不用配置,可以直接使用的。但是如果说你需要修改啊,服务器的地址啊,还有段子号啊,也是可以做设置的。

之前发了一条后端返回百万条数据,大家都说没有这种业务场景,其实是有的,这是群里同学问的一个问题,他用地图绘制六千条数据,数据特别卡,那大概时间得十多秒, 而且浏览器根本卡的都用不了。这种业务场景是存在的,只是你没有遇到对于这种地图的业务场景,在这地方我引入了百度地图,创建了一万个点,那么正常的话,这一万个点是从服务端拉取的。 第一种方案我是这么做的,我进行数据的分段加载,那么在这里方定了一个发值,每次我去渲染十条数据,在渲染十条数据之前,我要把之前的数据给它清空掉。还有另外一种方案是什么呢?是根据地图, 除了缩放的比例,他的视野的范围我可以获取到,根据这两个发支与获取这个可视区域内数据的点,也不会一次性的往页面上进行炫。当然还有这种数据聚合的方式, 类似于这种地图的数据已经放到最大了,那么这个最大可视的区域他就有几千个点,怎么办?那么我们可以采用数据聚合,你这样绘制起来是非常的密,看起来也没啥意义,那么我们可以把这个数据的点合起来, 比如说几百个,几十个聚合成一个点,就类似于这种方式就聚合起来了。当然还有其他的方式,比如说那个使用地图的瓦片,将数据按照瓦片的方式加载,只加载当前视野范围内的瓦片数据。其实以上的这么几种方式就是 让渲染的数据减少,不会一次性的我都给它渲染上。当然还有一种方式,你使用 covers 绘制,因为 covers 绘制的数据点他不是这种盗墓元素, 而且他更适合这种大量的数据点的绘制。本身百度地图也提供了这样的 api, 你们做这种业务场景的时候有没有遇到这种问题,可以评论区留言一块探讨。
![编程这块确实是知识盲区了[捂脸]#人生感悟](https://p3-pc-sign.douyinpic.com/tos-cn-p-0015/oMLiBfA5BAd0i3UAj5ixOgE1PBDI2jwg4DeoOA~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2082592800&x-signature=WUf%2Ff%2FUq0gkuYkURTHLujCh9xjA%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=202601011030402968C142C638858A0ABF)



大屏后端返回大量数据怎么处理?返回大量数据的话有几种方案啊?第一的话我们可以通过 service worker 去做啊,说白了就是多开线程啊,因为我们知道 gs 它是一个什么 gs 的一个单线程的啊。 yboc 和 soviece worker 就是解决单线程的问题,比如说我现在开一个线程,它并不阻塞当前 gs 线程的一个主逻辑, 他们两个之间呢?需要通过 post mess 的通讯啊。其实我扭一个 walker 相当于开一个县城,扭一个 walker 去开一个县城。 g s 是单现成的,但是 walk walker, 注意 walk walker 属于外部 a p i。 首先 g s 是我们的一个 g s 处理器,那么外部 a p i 呢?它相当于给我们提供了一种能力啊,提供了一种叫做多开线程的能力,就是你的外部容器里边,你的这个浏览器里边,你的 g s 本身是单线的,但,但是我在 g s 单线程旁边,我再开一个线程,他们两个可以通讯,明白了吗?