日常杂记系列(1)

原创 走火爱上鱼 随笔 日常杂记 314阅读 2017-05-10 16:50:32 举报

1.最简洁的缓动函数

html 代码

原文地址

2.js处理大规模数据渲染性能问题

设想一个情景,后台一次性返回200000条数据,让你用js渲染,最直接的办法是(电脑不好的请不要预览下面的结果)

html 代码

一般人都会用文档碎片进行渲染(注意文档碎片插入节点后,里面的内容会自动被清空,不用我们自己来清空)

html 代码

可以发现用了文档碎片以后,页面少转了几个圈就打开了,其实还可以更快,比如用定时器模拟多线程。
html 代码

评论 ( 1 )
最新评论
lingwer111 2017-05-11 01:15:53 1F

想讨论下楼主最后的js模拟多线程代码。 其实追求快。目的是减少卡顿时间,提高流畅度。用定时器模拟多线程的核心思想是 用最短的时间做完工作。但在模拟多线程有缺点,在短时间内往页面大量添加Dom节点还是会让浏览器吃不消,变的很卡。与目的相违背。而且楼主的代码功能集中在了一起,违背了单一职责原则。增加了日后维护的成本。不如换一个思想。把1分钟吃10个汉堡包,改为每隔1分钟吃1个汉堡包。。代码如下
html 代码

上面的timeChunk 函数是能分批处理数据。并且抽象出来,方便复用与维护。代码结构也清晰。