摘要：之所以在遍历的时候被卡住，就是因为我们遍历的时候，占用主线程，导致其他程序无法进行。因此，将主线程中一个可能需要用到的计算移到另外一个线程中，主线程程序可以无缝继续执行，通过来接收线程返回的数据，做到无缝对接。
最近在给公司的grid组件进行性能测试和改善，其中非常重要的一个点就是grid加载100k级别的数据时，竟然出现的状况是，渲染不是问题，初始化的时候遍历数据才是问题。
之所以渲染不是问题，是因为组件采用了特殊的渲染方式，它并没有把所有数据一次性渲染到可视区域中，而是通过滚动条的计算，找出对应应该显示的那些条目，仅仅渲染了部分数据，所以加入的DOM节点就少到可怜，自然快很多。
现在的问题，完全放在了初始化的时候，要对这么大的数据量进行遍历，并且对每一个cell的数据执行format操作，可想而知，在不同的机器上，性能自然受到很大的影响。
我所采用的解决方案，是利用HTML5的新特性web worker来解决。worker的应用场景本来就是在backend进行大规模或持久化计算，用在这里正好。之所以在遍历的时候被卡住，就是因为我们遍历的时候，占用js主线程，导致其他程序无法进行。就算使用Promise优化，也会因为排队造成排队之后的操作被卡住。worker是在主线程之外另外开了一个线程，和主线程完全隔离，因此在内存分配上和进程占用上都不一样，worker线程中的程序执行完全不影响主线程中的执行。因此，将主线程中一个可能需要用到500+ms的计算移到另外一个线程中，主线程程序可以无缝继续执行，通过Promise来接收worker线程返回的数据，做到无缝对接。
下面来看具体实现：
1 获取quicker-worker源码
quicker-worker是我在结合了自己对其他开发者的代码阅读之后撰写的两个函数，站在前人的肩膀上倍感愉悦～
你可以通过 https://github.com/tangshuang... 获取源码。
2 使用run函数
在quicker-worker的readme中我详细阐述了它的使用方法，这里就不具体介绍，为了解决上面的grid的问题，我们使用run函数来实现对grid组件的改造。
在grid组件中，有一个遍历，在遍历过程中，对每一个元素进行format。我们如下进行操作：
// .. 其他初始化
run(`function(data, formatter) {
data.forEach(function(item) {
formatter(item)
})
return data
}`, [data, formatter])
.then(data => {
this.set(data)
// .. 后续操作
})
就是这么简单，没有任何拖泥带水的操作，就像一个promise一样。
使用quicker-worker还可以实现非常漂亮的后台监控，每隔一段时间去查询数据是否变化。
let wk = create(`function(data, compare) {
return $xhr.get("/api/books").then(function(res) {
if (compare(data, res)) return res
})
}`, {
interval: 60*1000,
xhr: true,
})
wk.invoke([data, compare]).then(newdata => {
if (newdata) updateData(newdata)
})
就是这么简单。如果你有什么疑问，可以在github上给我提issue。关注我的博客 www.tangshuang.net 给我留言。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84350.html
摘要：正如我标题所说，简历被拒。看了我简历之后说头条竞争激烈，我背景不够，点到为止。。三准备面试其实从三月份投递简历开始准备面试到四月份收，也不过个月的时间，但这都是建立在我过去一年的积累啊。 本文是 无精疯 同学投稿的面试经历 关注微信公众号：进击的java程序员K，即可获取最新BAT面试资料一份 在此感谢 无精疯 同学的分享 目录： 印象中的头条 面试背景 准备面试 ...
摘要：正如我标题所说，简历被拒。看了我简历之后说头条竞争激烈，我背景不够，点到为止。。三准备面试其实从三月份投递简历开始准备面试到四月份收，也不过个月的时间，但这都是建立在我过去一年的积累啊。 本文是 无精疯 同学投稿的面试经历 关注微信公众号：进击的java程序员K，即可获取最新BAT面试资料一份 在此感谢 无精疯 同学的分享目录：印象中的头条面试背景准备面试头条一面（Java+项目）头条...
摘要：问题简述给予一个多维数组和一个描述取值路径的一维数组通过调用函数返回取值路径描述的值，如原问题传送门之所以想记录一下是因为之前有在刷题的习惯，后来工作忙就怠慢了，今天闲来无事就准备刷几道玩玩，然后就挑了一个比较简单的中的难度评级的题。 问题简述 给予一个多维数组和一个描述取值路径的一维数组, 通过调用函数f返回取值路径描述的值，如f([[1, 2], [3, 4], [5, 6]], ...
摘要：忽略了的版本这是一个在上不断被人提起的问题。不幸的是它只运行在系统上。误解了全局解释器锁意味着只有一个线程在一个程序可以运行在任何时间。规定的解决方案是使用模块。滥用使得上的一个大神花了很多时间去解决它。这可能会产生一些非常不必要的后果。 原文链接放在这里:1: http://nafiulis.me/potential-pythonic-pitfalls.html 很多问题没搞懂，先放...
摘要：前言开发爬虫是一件有趣的事情。的可配置爬虫是基于的，因此天生是支持并发的。遵守协议这个默认是开启的。的可配置爬虫降低了爬虫的开发时间，增加了爬虫开发效率，完善了工程化水平，将爬虫工程师从日常的繁琐配置工作中解放出来。 前言 开发爬虫是一件有趣的事情。写一个程序，对感兴趣的目标网站发起HTTP请求，获取HTML，解析HTML，提取数据，将数据保存到数据库或者存为CSV、JSON等格式，再...
阅读 1021·2021-10-11 10:59
阅读 3583·2021-09-26 09:55
阅读 878·2019-08-30 15:55
阅读 2628·2019-08-30 15:44
阅读 389·2019-08-30 14:06
阅读 643·2019-08-30 11:26
阅读 3305·2019-08-30 10:49
阅读 2411·2019-08-29 12:53
