腾讯面试题,js处理1千万条数据排序并且页面不卡顿
<!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千万条数据排序并且页面不卡顿的更多相关文章
- 面试题：js如何渲染十万条数据并不卡住界面
这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...
- orcle 如何快速插入百万千万条数据
有时候做实验测试数据用到大量数据时可以用以下方法插入: 方法一:使用xmltable create table bqh8 as select rownum as id from xmltable('1 ...
- mysql自定义函数并在存储过程中调用，生成一千万条数据
mysql 自定义函数,生成 n 个字符长度的随机字符串 -- sql function delimiter $$ create function rand_str(n int) returns VA ...
- LOAD DATA INFILE读取CSV中一千万条数据至mysql
作业要求 构建一个关系模式和课本中的关系movies(title,year,length,movietype,studioname,producerC)一样的关系,名称自定,在这个关系中插入1000万 ...
- [MyBatis]五分钟向MySql数据库插入一千万条数据 批量插入 用时5分左右
本例代码下载:https://files.cnblogs.com/files/xiandedanteng/InsertMillionComparison20191012.rar 我的数据库环境是mys ...
- java之5分钟插入千万条数据
虽说不一定5分钟就插入完毕,因为取决去所插入的字段,如果字段过多会稍微慢点,但不至于太慢.10分钟内基本能看到结果. 之前我尝试用多线程来实现数据插入(百万条数据),半个多小时才二十多万条数据. 线程 ...
- WebGIS项目中利用mysql控制点库进行千万条数据坐标转换时的分表分区优化方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 项目中有1000万条历史案卷,为某地方坐标系数据,我们的真实 ...
- 【腾讯Bugly干货分享】TRIM：提升磁盘性能，缓解Android卡顿
Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处.在业内,Android 手机一直有着 ...
- python+mysql:实现一千万条数据插入数据库
作业要求 构建一个关系模式和课本中的关系movies(title,year,length,movietype,studioname,producerC)一样的关系,名称自定,在这个关系中插入1000万 ...
随机推荐
- [译文]Domain Driven Design Reference（七）—— 大型战略设计结构
本书是Eric Evans对他自己写的<领域驱动设计-软件核心复杂性应对之道>的一本字典式的参考书,可用于快速查找<领域驱动设计>中的诸多概念及其简明解释. 上周末电脑硬盘文件 ...
- C#单元测试，带你快速入门
注:本文示例环境 VS2017 XUnit 2.2.0 单元测试框架 xunit.runner.visualstudio 2.2.0 测试运行工具 Moq 4.7.10 模拟框架 为什么要编写单元测试 ...
- [Swift]LeetCode887. 鸡蛋掉落 | Super Egg Drop
You are given K eggs, and you have access to a building with N floors from 1 to N. Each egg is ident ...
- Unable to preventDefault inside passive event listener due to target being treated as passive
Unable to preventDefault inside passive event listener due to target being treated as passive 今天在做项目 ...
- 使用google搜索时的10个小技巧！
为大家分享一些google的技巧,很多工作了好几年的同学还不知道如何高效的利用这些技巧,希望同学们掌握!此为google的技巧,百度现在也基本上都实现了这些功能. 使用搜索引擎的10个搜索技巧 ...
- Python中面向对象的概念（科普）
面向对象(OOP)基本概念 面向对象编程 —— Object Oriented Programming 简写 OOP 目标 了解 面向对象 基本概念 01. 面向对象基本概念 我们之前学习的编程方式就 ...
- Kubernetes系列之监控Metres-server实战篇
本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 介绍 从 Kubernetes 1.8 开始,Kubernetes 通过 Metrics AP ...
- java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.love5/com.example.love5.Main11Activity}: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.
若有 java.lang.RuntimeException和 java.lang.NullPointerException: Attempt to invoke virtual method 'voi ...
- hadoop退出安全模式Name node is in safe mode
在使用 hdfs 的时候出现如下错误: 18/01/12 09:04:34 INFO fs.TrashPolicyDefault: Namenode trash configuration: Dele ...
- RabbitMQ学习笔记（六） RPC
什么RPC? 这一段是从度娘摘抄的. RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的 ...