js处理1千万条数据排序并且页面不卡顿

2021-03-19 13:32:50

参考地址 js处理1千万条数据排序并且页面不卡顿


我测试的100万一下,都是秒级的。

3000万也就卡那一下。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>js处理1千万条数据排序并且页面不卡顿</title></head><body><h1>我就是测试文字,看works会不会造成页面卡顿</h1><script>// 放在火狐浏览器测试      谷歌会默认跨域,必须是服务器环境let works = new Worker('works.js') // 1.新建worksworks.postMessage({max: 10000000}) // 2 给works发送参数works.onmessage = function (event) { // 6. 接收works的数据并处理操作console.log(event.data)works.terminate() // 7 关闭works主线程}</script></body></html>

  

self.addEventListener('message', function (e) {shui(e.data.max) // 3. works接收参数并处理 不会影响主线程 不会造成主页面卡顿}, false)function shui(numMax) {let arr = [] // 伪造大量测试数据function getRandom() {let random = Math.ceil(Math.random() * 10000)return random}for (let i = 0; i < numMax; i++) {    arr.push(getRandom())   }  arr.sort(function    (a, b) { return a - b } // 排序  )  postMessage(arr) // 4. works处理完数据 发送回主页面  self.close() // 5.记得要关闭哦}

  第1个是html文件,第二 个是js文件,实际火狐测试有效


  • 2017-11-28 14:53:05

    Vagrant 实战

    Vagrant 是一个可创建轻量级、高复用性和便于移植的开发环境的工具。 此文章是作者折腾vagrant的笔记, 希望大家看后,不再去网上搜罗资料, 能顺利搭建vagrant环境。vagrant更新较快, 还建议大家以官网为主。Vagrant官网

  • 2017-11-28 14:55:13

    使用 Vagrant 打造跨平台开发环境

    Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用,“代码在我机子上运行没有问题”这种说辞将成为历史。

  • 2017-11-28 14:57:19

    vagrant up 失败解决办法

    直接使用VirtualBox开启一个vm也会失败,基本上可以确定是VirtualBox版本的问题 有遇到过安装了VirtualBox-5.0.22-108108-Win.exe的版本在win7下用不了,卸载重装VirtualBox-4.3.12-93733-Win.exe之后可用。

  • 2017-12-05 22:30:02

    php7.0升级php7.2

    看电脑上的教程要备份7.0配置文件以及扩展啥的,我感觉不如卸载干净重新安装

  • 2017-12-06 09:35:10

    分页优化的四种方式

    在大数据量的情况下,原本很简单的分页如果没有处理好,你会发现分页的请求会消耗你大量的数据库时间。如果你遇到了这个问题,文章给了你几个很好的解决的方案。当然,初学者若能看完这篇文章,那么它会指导你写出更具有扩展性的分页代码。