精华内容
下载资源
问答
  • 这是一道面试题,刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀!面试官说那是从后台的角度来考虑的。从前端的角度呢?emmmmm...我思考了一下,分批加载,懒加载。监听用户的滑动分批显示...
    0f3635f91b825e7e055c8554c092f233.png

    这是一道面试题,刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀!面试官说那是从后台的角度来考虑的。从前端的角度呢?emmmmm...我思考了一下,分批加载,懒加载。监听用户的滑动分批显示数据。接着又问,如果我要对这些大量数据做计算做处理呢,同时又不能让页面崩掉、假死。该如何操作呢?顿时我就懵逼了,这。。这个要怎么操作呀。心想做计算啥的不是应该在后台做完吗!

    而且怎么可能一下子给前端这么多数据吗,~~

    抱怨归抱怨,吐槽归吐槽~~

    后来问了下面试官,实现的大概思路。后来面试官说是通过worker来做子线程来实现的。

    好,那我们就来学习一下这个worker

    什么是worker

    运行者 Worker 接口是Web Workers API的一部分,代表一个后台任务,它容易被创建并向创建者发回消息。创建一个运行者只要简单的调用Worker()构造函数,指定一个脚本,在工作线程中执行。(引自MDN)复制代码

    看概念可能有点枯燥,通俗点讲就是:因为js是单线程运行的,在遇到一些需要处理大量数据的js时,可能会阻塞页面的加载,造成页面的假死。这时我们可以使用worker来开辟一个独立于主线程的子线程来进行哪些大量运算。这样就不会造成页面卡死。也说明 worker可以用来解决大量运算是造成页面卡死的问题。

    worker的语法

    const worker=new Worker(aURL, options)复制代码

    它有两个参数:

    aURL(必须)是一个DOMString 表示worker 将执行的脚本的URL。它必须遵守同源策略。

    options (可选)它的一个作用就是指定 Worker 的名称,用来区分多个 Worker 线程

    worker的属性

    Worker.onerror:指定 error 事件的监听函数

    Worker.onmessage:指定 message 事件的监听函数,发送过来的数据在Event.data属性中。

    Worker.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。

    worker的方法

    Worker.postMessage():向 Worker 线程发送消息。

    Worker.terminate():立即终止 Worker 线程。

    使用worker的注意点

    1.同源限制

    分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

    2.DOM 限制

    Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。

    3.通信联系

    Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

    4.脚本限制

    Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

    5.文件限制

    Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

    我们来看个实列

    没有使用worker情况

    求斐波纳茨数列的第38项

     

    使用了woroker的情况

    self.onmessage = function (event) { var data = event.data; var ans = fibonacci(data); this.postMessage(ans);};function fibonacci(n) { return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);}复制代码

    身边有电脑的小伙伴可以把上面代码复制到电脑上运行下,对比下,看下效果。就会明白这worker的作用了。

    作者:寒江水

    链接:https://juejin.im/post/5cb03fbee51d456e853f810b

    展开全文
  • 简单说明下这是一道面试题,刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀!面试官说那是从后台的角度来考虑的。从前端的角度呢?emmmmm...我思考了一下,分批加载,懒加载。监听用户的滑动...
    a68634fa12ac40bffd8485d08d020af8.png

    前言

    写博客主要是用来总结、巩固知识点,加深自己对这个知识点的理解。同时希望帮助到有需要的人。如有不正确的地方。可以在评论区指出。你们的支持。是我不断进步的源泉。

    简单说明下

    这是一道面试题,刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀!面试官说那是从后台的角度来考虑的。从前端的角度呢?emmmmm...我思考了一下,分批加载,懒加载。监听用户的滑动分批显示数据。接着又问,如果我要对这些大量数据做计算做处理呢,同时又不能让页面崩掉、假死。该如何操作呢?顿时我就懵逼了,这。。这个要怎么操作呀。心想做计算啥的不是应该在后台做完吗!

    而且怎么可能一下子给前端这么多数据吗,~~

    抱怨归抱怨,吐槽归吐槽~~

    后来问了下面试官,实现的大概思路。后来面试官说是通过worker来做子线程来实现的。

    好,那我们就来学习一下这个worker

    什么是worker

    运行者 Worker 接口是Web Workers API的一部分,代表一个后台任务,

    它容易被创建并向创建者发回消息。创建一个运行者只要简单的调用Worker()构造函数,指定一个脚本,在工作线程中执行。(引自MDN)

    看概念可能有点枯燥,通俗点讲就是:因为js是单线程运行的,在遇到一些需要处理大量数据的js时,可能会阻塞页面的加载,造成页面的假死。这时我们可以使用worker来开辟一个独立于主线程的子线程来进行哪些大量运算。这样就不会造成页面卡死。也说明 worker可以用来解决大量运算是造成页面卡死的问题。

    worker的语法

    edd48f5f2d7824697927a7da166fa998.png

    它有两个参数:

    aURL(必须)是一个DOMString 表示worker 将执行的脚本的URL。它必须遵守同源策略。

    options (可选)它的一个作用就是指定 Worker 的名称,用来区分多个 Worker 线程

    worker的属性

    Worker.onerror:指定 error 事件的监听函数

    Worker.onmessage:指定 message 事件的监听函数,发送过来的数据在Event.data属性中。

    Worker.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。

    worker的方法

    Worker.postMessage():向 Worker 线程发送消息。

    Worker.terminate():立即终止 Worker 线程。

    使用worker的注意点

    1.同源限制

    分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

    2.DOM 限制

    Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。

    3.通信联系

    Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

    4.脚本限制

    Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

    5.文件限制

    Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

    我们来看个实列

    没有使用worker情况

    求斐波纳茨数列的第38项

    3a2539da796cad3c26c91c60636e9d56.png

    使用了woroker的情况

    a830cc0c636263ad789bc09bfbbb0817.png
    02f2a87ad22ab4e5da3837587d1e3b89.png

    身边有电脑的小伙伴可以把上面代码复制到电脑上运行下,对比下,看下效果。就会明白这worker的作用了。

    作者:寒江水链接:https://juejin.im/post/5cb03fbee51d456e853f810b来源:掘金
    展开全文
  • 前端如何处理十万级别的大量数据

    万次阅读 2019-04-14 22:38:03
    这是一道面试题,刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀!面试官说那是从后台的角度来考虑的。从前端的角度呢?emmmmm...我思考了一下,分批加载,懒加载。监听用户的滑动分批显示...

    简单说明下

    这是一道面试题,刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀!面试官说那是从后台的角度来考虑的。从前端的角度呢?emmmmm...我思考了一下,分批加载,懒加载。监听用户的滑动分批显示数据。接着又问,如果我要对这些大量数据做计算做处理呢,同时又不能让页面崩掉、假死。该如何操作呢?顿时我就懵逼了,这。。这个要怎么操作呀。心想做计算啥的不是应该在后台做完吗!

    而且怎么可能一下子给前端这么多数据吗,~~

    抱怨归抱怨,吐槽归吐槽~~

    后来问了下面试官,实现的大概思路。后来面试官说是通过worker来做子线程来实现的。

    好,那我们就来学习一下这个worker

    什么是worker

    
    运行者 Worker 接口是Web Workers API的一部分,代表一个后台任务,
    它容易被创建并向创建者发回消息。创建一个运行者只要简单的调用Worker()构造函数,指定一个脚本,在工作线程中执行。(引自MDN)
    
    复制代码

    看概念可能有点枯燥,通俗点讲就是:因为js是单线程运行的,在遇到一些需要处理大量数据的js时,可能会阻塞页面的加载,造成页面的假死。这时我们可以使用worker来开辟一个独立于主线程的子线程来进行哪些大量运算。这样就不会造成页面卡死。也说明 worker可以用来解决大量运算是造成页面卡死的问题。

    worker的语法

    
    const worker=new Worker(aURL, options)
    
    复制代码

    它有两个参数:

    aURL(必须)是一个DOMString 表示worker 将执行的脚本的URL。它必须遵守同源策略。

    options (可选)它的一个作用就是指定 Worker 的名称,用来区分多个 Worker 线程

    worker的属性

    Worker.onerror:指定 error 事件的监听函数

    Worker.onmessage:指定 message 事件的监听函数,发送过来的数据在Event.data属性中。

    Worker.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。

    worker的方法

    Worker.postMessage():向 Worker 线程发送消息。

    Worker.terminate():立即终止 Worker 线程。

    使用worker的注意点

    1.同源限制

    分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

    2.DOM 限制

    Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。

    3.通信联系

    Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

    4.脚本限制

    Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

    5.文件限制

    Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

    我们来看个实列

    没有使用worker情况

    求斐波纳茨数列的第38项

     <div style="width:100px;height:100px;background-color:red;"></div>
     document.querySelector('div').onclick=function(){
        console.log('hello world');
      }
      function fibonacci(n){
        return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);
       }
    console.log(fibonacci(38));
    复制代码

    使用了woroker的情况

    <div style="width:100px;height:100px;background-color:red;"></div>
     
    var worker=new Worker('worker.js');
    worker.postMessage(40);
    worker.onmessage=function(event){
        var data=event.data;
        console.log(data)
    };
    worker.onerror=function(event){
        console.log(event.fileName,event.lineo,event.message);
    };
    复制代码
    <!--worker.js-->
    self.onmessage = function (event) {
        var data = event.data;
        var ans = fibonacci(data);
        this.postMessage(ans);
    };
    
    function fibonacci(n) {
        return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
    }
    复制代码

    身边有电脑的小伙伴可以把上面代码复制到电脑上运行下,对比下,看下效果。就会明白这worker的作用了。


    作者:寒江水
    链接:https://juejin.im/post/5cb03fbee51d456e853f810b
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • List<UserModel> userModels = UserModelRespository.findByRegisteredAndCreateTimeLessThan("1",start);...其中通过数据库查询出来的userModels会有几十万数据,用foreach遍历的话会有什么影响,有什么解决办法
    List<UserModel> userModels = UserModelRespository.findByRegisteredAndCreateTimeLessThan("1",start);
    for (UserModel userModel: userModels) {
        OtherModel othermodel = getOtherModel(userModel);
    }
    

    其中通过数据库查询出来的userModels会有几十万条数据,用foreach遍历的话会有什么影响,有什么解决办法

    展开全文
  • 我现在用的是最平常的子查询,可是java中出报出内存溢出的异常(偶尔能查询出来,不过那速度真的忍受不了),我就想问问各位大侠你们怎么处理这样的大数据量,而且有复杂的关联关系的查询啊? 问题表述不清,还请...
  • 四大:不想被淘汰,就得学Python四大不仅借助Python实现底稿的批量自动化处理。还推出了自己的财务机器人解决方案。投行:想做Banker,先学Python不仅做量化投资需要掌握Python,所有与金融数据相关的工作都需要通过...
  • 系统现在有一个表,数据量为百万,用户筛选自己的数据后估计也有几十万,在页面显示当然通过分页显示了,如果用户要导出excel或pdf的话,是不是要把这几十万的数据全部导出啊?这么大的数据肯定很占内存,这个要怎么...
  • 对于数据量很小,怎么玩都是可以的。 but!!! 如果有几十万或者百万级别的数据,该怎么处理,请往下面看
  • 前端页面如何正确渲染大量数据

    千次阅读 2019-06-27 15:54:40
    当前端开发人员面对成千上万条记录要显示的时候,我们该怎么处理?... // 插入十万数据 const total = 100000 // 一次插入 * 条,如果觉得性能不好就减少 const once = 200 // 渲染数据总共需要几次 ...
  • 几万条甚至几十万数据。 导入的数据我们第一个想到的当然是excel导入数据。那几万条数据我们需要怎么处理呢。 首先像想一下,我先写满一行数据,20个字段,ok,搞定,然后我们来……下拉,拉到一半然后 你就...
  • 服务端一张数据表(数据量十万,且数据有可能发生变化),需要被多个客户端同步下去; 在各个客户端通过定时任务,定时去服务端请求,请求发生过改变的数据同步; 现在的处理方式是按照2的N次方给每个客户端一个个同步...
  • 使用阻塞式队列处理大数据

    万次阅读 多人点赞 2016-01-27 16:00:23
    此时我们经常想到的一个问题是如何利用多线程来解决数据处理效率的问题,如果你面对的是两个不同的数据库文件对导,那多线程读/写将不成为问题,随你怎么发挥都可以,关键在于对于一个含有大数据量的文件如何用多...
  • Dash是比较新的软件包,它是用纯Python构建数据可视化app的理想选择,因此特别适合处理数据的任何人。Dash是Flask,Plotly.js和React.js的混合体。 2. Pygame Pygame是SDL多媒体库的Python装饰器,
  • 在系统中,我们经常会遇到这样的需求:将大量(比如几十万、甚至上百万)的对象进行排序,然后只需要取出最Top的前N名作为排行榜的数据,这即是一个TopN算法。常见的解决方案有三种: (1)直接使用List的Sort方法...
  • 大话数据结构

    2019-01-10 16:35:22
    1.2你数据结构怎么学的? 3 他完成开发并测试通过后,得意地提交了代码。项目经理看完代码后拍着桌子对他说:“你数据结构是怎么学的?” 1.3数据结构起源 4 1.4基本概念和术语 5 正所谓“巧妇难为无米之炊”,再...
  • 小白:Mr.林,快救救我,我被那些...数据下下来又20多个表呢,每张表的数据量有几十万,如何合并起来,EXCEL肯定是放不下的,更别说进行处理、分析了。如果一个个导入数据库的话,也够呛的。有什么办法可以批量合并...
  • 大话数据结构 程杰

    2018-09-01 10:06:43
    1.2你数据结构怎么学的? 3 他完成开发并测试通过后,得意地提交了代码。项目经理看完代码后拍着桌子对他说:“你数据结构是怎么学的?” 1.3数据结构起源 4 1.4基本概念和术语 5 正所谓“巧妇难为无米之炊”,再...
  • 项目经理看完代码后拍着桌子对他说:“你数据结构是怎么学的?” 1.3数据结构起源 4 1.4基本概念和术语 5 正所谓“巧妇难为无米之炊”,再强大的计算机,也要有“米”下锅才可以干活,否则就是一堆破铜烂铁。这个...
  • 大话数据结构-程杰

    2014-07-13 23:45:52
    1.2 你数据结构怎么学的? 3 他完成开发并测试通过后,得意地提交了代码。项目经理看完代码后拍着桌子对他说:"你数据结构是怎么学的?" 1.3 数据结构起源 4 1.4 基本概念和术语 5 正所谓"巧妇难为无米之炊",再...
  • 云计算就是将处理数据这个步骤放在网络的远程端进行,因为手机、平板和个人电脑等个人设备的数据处理性能(CPU、内存、硬盘和GPU等)是非常有限的,而让用户购买甚至上百万的高性能服务器是非常不现实的;...
  • 项目经理看完代码后拍着桌子对他说:“你数据结构是怎么学的?” 1.3数据结构起源 4 1.4基本概念和术语 5 正所谓“巧妇难为无米之炊”,再强大的计算机,也要有“米”下锅才可以干活,否则就是一堆破铜烂铁。这个...
  • 1.2 你数据结构怎么学的? 3 他完成开发并测试通过后,得意地提交了代码。项目经理看完代码后拍着桌子对他说:"你数据结构是怎么学的?" 1.3 数据结构起源 4 1.4 基本概念和术语 5 正所谓"巧妇难为无米之炊",...
  • 尤其是涉及到极高数量的数据,动辄、上百万的数据量。此时,采用自动化的方式对超大量级的数据进行批处理,以及对结果的自动化统计就显得尤为的重要。这里就对在日常工作中最常遇见的一些文件、数据操作方式...
  • Mysql索引

    2019-12-10 11:21:53
    Javaweb的一个实习生过来问我:我现在有两张表数据量很大,每张都有五条呢,做了关联后几分钟都没有出结果,估计得用大数据技术处理,给我提个建议。 我一脸迷惑:不超过千万条的数据,完全用不到大数据技术...

空空如也

空空如也

1 2 3
收藏数 54
精华内容 21
关键字:

十万数据量怎么处理