<!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.新建works

    works.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文件,实际火狐测试有效

腾讯面试题,js处理1千万条数据排序并且页面不卡顿的更多相关文章

  1. 面试题：js如何渲染十万条数据并不卡住界面

    这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...

  2. orcle 如何快速插入百万千万条数据

    有时候做实验测试数据用到大量数据时可以用以下方法插入: 方法一:使用xmltable create table bqh8 as select rownum as id from xmltable('1 ...

  3. mysql自定义函数并在存储过程中调用，生成一千万条数据

    mysql 自定义函数,生成 n 个字符长度的随机字符串 -- sql function delimiter $$ create function rand_str(n int) returns VA ...

  4. LOAD DATA INFILE读取CSV中一千万条数据至mysql

    作业要求 构建一个关系模式和课本中的关系movies(title,year,length,movietype,studioname,producerC)一样的关系,名称自定,在这个关系中插入1000万 ...

  5. [MyBatis]五分钟向MySql数据库插入一千万条数据 批量插入 用时5分左右

    本例代码下载:https://files.cnblogs.com/files/xiandedanteng/InsertMillionComparison20191012.rar 我的数据库环境是mys ...

  6. java之5分钟插入千万条数据

    虽说不一定5分钟就插入完毕,因为取决去所插入的字段,如果字段过多会稍微慢点,但不至于太慢.10分钟内基本能看到结果. 之前我尝试用多线程来实现数据插入(百万条数据),半个多小时才二十多万条数据. 线程 ...

  7. WebGIS项目中利用mysql控制点库进行千万条数据坐标转换时的分表分区优化方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 项目中有1000万条历史案卷,为某地方坐标系数据,我们的真实 ...

  8. 【腾讯Bugly干货分享】TRIM：提升磁盘性能，缓解Android卡顿

    Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处.在业内,Android 手机一直有着 ...

  9. python+mysql:实现一千万条数据插入数据库

    作业要求 构建一个关系模式和课本中的关系movies(title,year,length,movietype,studioname,producerC)一样的关系,名称自定,在这个关系中插入1000万 ...

随机推荐

  1. kali linux 网络渗透测试学习笔记（二）OWASP ZAP工具扫描SQL injection漏洞失败

    按照惯例,利用OWASP ZAP工具扫描SQL injection漏洞时,应该很快就可以扫描出来,但是在笔者进行扫描的时候,却遇到了以下状况: 这说明了该工具根本就没能够扫描出SQL注入的漏洞,不知道 ...

  2. emWin监护仪界面设计，含uCOS-III和FreeRTOS两个版本

    第5期:监护仪界面设计 配套例子:V6-908_STemWin提高篇实验_监护仪界面设计(uCOS-III)V6-909_STemWin提高篇实验_监护仪界面设计(FreeRTOS) 例程下载地址:h ...

  3. Web安全之XSS Platform搭建及使用实践

    Web安全之XSS Platform搭建及使用实践 一.背景 XSS Platform 是一个非常经典的XSS渗透测试管理系统,原作者在2011年所开发,由于后来长时间没有人维护,导致目前在PHP7环 ...

  4. SDL 开发实战（一）：SDL介绍及开发环境配置

    一.什么是SDL? SDL是 “Simple DirectMedia Layer”的缩写,SDL是一个开源的跨平台的多媒体库,封装了复杂的音视频底层操作,简化了音视频处理的难度. SDL使用C语言写成 ...

  5. [Swift]LeetCode302. 包含黑色像素的最小矩形 $ Smallest Rectangle Enclosing Black Pixels

    An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The black ...

  6. Java部署项目命令学习小结

    前言: 暂无 零:java -h 和很多linux命令一样,我们第一步先通过“java -h”命令查看java命令的使用语法,其输出如下 [root@wxapp203 basesoft]# java ...

  7. 【Spark篇】---Spark调优之代码调优，数据本地化调优，内存调优，SparkShuffle调优，Executor的堆外内存调优

    一.前述 Spark中调优大致分为以下几种 ,代码调优,数据本地化,内存调优,SparkShuffle调优,调节Executor的堆外内存. 二.具体    1.代码调优 1.避免创建重复的RDD,尽 ...

  8. Asp.Net Core WebApi (Swagger+EF Core/Code First)

    Swagger简介: Swagger™的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看不到文档或者不能通过网络流量检测的情况下能发现和理解各种服务的功能. ...

  9. Python爬虫入门教程 12-100 半次元COS图爬取

    半次元COS图爬取-写在前面 今天在浏览网站的时候,忽然一个莫名的链接指引着我跳转到了半次元网站 https://bcy.net/ 打开之后,发现也没有什么有意思的内容,职业的敏感让我瞬间联想到了 c ...

  10. 精读《useEffect 完全指南》

    1. 引言 工具型文章要跳读,而文学经典就要反复研读.如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章,那么 16.7 带来的 Hooks 就要像文学经典一样反复研读. Hoo ...