摘要:直入正题假设有十万条数据的列表要展示,该如何优化如果直接上,不管你是一条一条插入,还是先存入再一次性插入,白屏时间都在,浏览器应该是合并了更新操作,如果不做优化,并不会分批渲染。
直入正题:假设有十万条数据的列表要展示,该如何优化?
如果直接上,不管你是一条一条插入,还是先存入fragment再一次性插入,白屏时间都在6s+,浏览器应该是合并了dom更新操作,如果不做优化,并不会分批渲染。
注意:测试所用的item结构是极其简单的,一旦渲染的item是复杂结构那么渲染的时间倍增
item.innerHTML =
${text}
测试;优化一,分批渲染requestAnimationFrame
requestAnimationFrame和setTimeout的区别就不多复述了,网上一大把。先渲染一部分,然后执行循环逻辑。但是这个部分到底是多少,需要自己调试了,我写的是300,但不一定适用。
const totalFn = () => { window.requestAnimationFrame(() => { if (i <= data.length) { computedHeight(data.slice(i, i + 300)); // 执行插入dom操作 i += 300; totalFn(); } else { root.style.height = max + "px" } }) } totalFn();
这样能做到秒开,无长时间白屏。
but,如果只是这样就回答的太简单了点,可能面试官还希望更深入的解答,比如我十万条数据就算能秒加载,但是渲染复杂逻辑,说不定会卡卡的,因为页面元素太多了。在不考虑分页的情况下,如何进一步优化。
优化二,只渲染可视区范围内的dom(只提供思路了)
这块涉及的交互就略复杂了,首先为了保证和一次性加载出来的效果一致,比如有滚动惯性,需要计算总高度。
简单的玩法,每一个item是同样的高度,那么计算高度就很简单了,但是如果每个item的高度不同,那么要就需要隐藏计算(把dom插入隐藏域,而且需要采用优化一的手段,不然会卡),但是那样又会导致整个计算过程过于漫长,需要寻找到最适合的点。
得到高度后,绑定scroll事件,根据scrollTop的值,动态计算展示哪一块内容,为了保证位置,还需要在首部填充空白块占位。
仍然可能存在的问题,比如scroll触发的时机,scroll在ios下是不能做到实时触发的,比如在惯性滚动过程中,触发不了scroll事件,可能会导致部分白屏(暂时没有想到如何解决),如果用iscroll.js,不知道能不能
模拟到原生的效果。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105234.html
摘要:懒加载方式常见的有淘宝一屏用元素占据一定的高度,然后再去拉图片数据。但这种方式还是需要元素占位,淘宝一页的数据量其实不算大,因为它结合了分页。 背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大数据项目根据用户输入代码查询数据,用户的代码不可控(比如select from db limit 5000),有可能...
摘要:本篇内容将记录并介绍使用进行自动化网页测试,并依靠约定来避免反复修改测试用例的方案。总结根据以上的功能划分,我们很好的将一整个应用拆分成各个测试单元进行单元测试。 本篇内容将记录并介绍使用Puppeteer进行自动化网页测试,并依靠约定来避免反复修改测试用例的方案。主要解决页面众多时,修改代码导致的牵连错误无法被发现的运行时问题。文章首发于个人博客。对前端感兴趣希望一起讨论的可以加我v...
摘要:策略减少检测次数当输入属性不变时,可以跳过整个变更检测子树。现在当执行更改检测时,它将从上到下进行。并且一旦更改检测运行结束,它将恢复整个树的状态。 Angular 2.x+ 脏检查机制理解 目前几种主流的前端框架都已经实现双向绑定特性,但实现的方法各有不同: 发布者-订阅者模式(backbone.js) 脏值检查(angular.js) 数据劫持 + 发布者-订阅者模式(vue.j...
摘要:迭代次,重复执行三次重复计算了三次,使用相同的图片,相同的卷积神经网络模型,相同的迭代次数次,却得到了区别明显的三张结果图。推测原因由于卷积神经网络中的若干层,实际是对图像进行了均值处理,导致了边缘细节的丢失。 作为一个脱离了低级趣味的码农,春节假期闲来无事,决定做一些有意思的事情打发时间,碰巧看到这篇论文: A neural style of convolutional neural ne...
摘要:一诞生的性能瓶颈,主要有以下原因。注意组件类的第一个字母必须大写,否则会报错。组件并不是真实的节点,而是存在于内存之中的一种数据结构,叫做虚拟。此外,还提供两种特殊状态的处理函数。不会随着时间改变可能不是。 本文为学习笔记,适合入门的童鞋,如有错误,请多多指教。 一、react诞生 Web app的性能瓶颈,主要有以下原因。 (1)Web基于DOM,而DOM很慢。浏览器打开网页时,需要...
阅读 3565·2023-04-25 14:20
阅读 1179·2021-09-10 10:51
阅读 1146·2019-08-30 15:53
阅读 452·2019-08-30 15:43
阅读 2307·2019-08-30 14:13
阅读 2785·2019-08-30 12:45
阅读 1199·2019-08-29 16:18
阅读 1155·2019-08-29 16:12