一种大量计算下的浏览器页面性能优化方法及装置制造方法及图纸

本申请公开了一种大量计算下的浏览器页面性能优化方法及装置，方法包括：判断当前浏览器页面是否存在大量计算逻辑；若没有，则正常执行浏览器页面逻辑；若有，则创建Worker线程，并将大量计算逻辑迁移到Worker线程中等待运行通知；当需要大量计算时，通知Worker线程进行计算，并将所需参数传输至Worker线程；接收Worker线程的计算结果，并根据计算结果做相应处理。本申请利用Worker线程来提升页面性能，将原本的异步处理变为另外一个线程并行处理，提前了处理时间，并避免了因为处理大量计算从而阻塞了主线程，大大提升了浏览器页面的计算能力，在应对复杂场景时有很好的性能提升。升。升。

【技术实现步骤摘要】
一种大量计算下的浏览器页面性能优化方法及装置


[0001]本申请涉及互联网
，具体涉及一种大量计算下的浏览器页面性能优化方法及装置。

技术介绍

[0002]浏览器在运行js脚本时，是单线程机制，所以在面对一些大量的计算时，会出现阻塞情况，导致页面出现类似于卡顿的情况，影响用户的使用和体验。通常情况下，会把这些计算放到异步的队列中，等到浏览器空闲时再执行，如放到异步的宏任务队列中，因为浏览器的脚本执行机制，会在下次页面渲染之前执行，从而避免对当前的页面渲染和同步脚本的执行阻塞。例如虚拟dom的diff算法，通过对比两次虚拟dom的不同，来更新页面元素。但是，因为diff算法比较耗时，如果频繁的进行diff算法，会严重阻塞页面的渲染，让用户感觉到页面的卡顿，从而影响用户的体验和使用。所以diff算法逻辑通常都会放到异步的宏任务队列中，因为浏览器的渲染机制，异步函数不会立马执行，会等到当前的页面渲染结束，同步脚本执行完后才会去执行，所以会降低diff算法的阻塞性。
[0003]综上可知，异步执行大量的计算逻辑，只是滞后了执行时机，在执行到这部分异步逻辑时，浏览器依然会被阻塞。如果在执行异步的计算逻辑时，耗时很长，则依然会让用户感觉到卡顿的不好体验。

技术实现思路

[0004]为此，本申请提供一种大量计算下的浏览器页面性能优化方法及装置，以解决现有技术存在的浏览器在运行大量计算逻辑时，会出现阻塞，导致页面卡顿的情况的问题。
[0005]为了实现上述目的，本申请提供如下技术方案：
[0006]第一方面，一种大量计算下的浏览器页面性能优化方法，包括：
[0007]判断当前浏览器页面是否存在大量计算逻辑；
[0008]若没有，则正常执行浏览器页面逻辑；
[0009]若有，则创建Worker线程，并将大量计算逻辑迁移到所述Worker线程中等待运行通知；
[0010]当需要大量计算时，通知所述Worker线程进行计算，并将所需参数传输至所述Worker线程；
[0011]接收所述Worker线程的计算结果，并根据所述计算结果做相应处理。
[0012]作为优选，所述Worker线程和主线程之间通过postMessage方式进行通信。
[0013]作为优选，所述将所需参数传输至所述Worker线程后继续执行原有逻辑，并监听来自所述Worker线程的通信。
[0014]作为优选，所述判断当前浏览器页面是否存在大量计算逻辑之前，还包括：初始化当前浏览器页面。
[0015]第二方面，一种大量计算下的浏览器页面性能优化装置，包括：
[0016]判断模块，用于判断当前浏览器页面是否存在大量计算逻辑；
[0017]Worker线程创建模块，用于创建Worker线程，并将大量计算逻辑迁移到所述Worker线程中等待运行通知；
[0018]发送模块，用于当需要大量计算时，通知所述Worker线程进行计算，并将所需参数传输至所述Worker线程；
[0019]接收模块，用于接收所述Worker线程的计算结果，并根据所述计算结果做相应处理。
[0020]作为优选，所述Worker线程和主线程之间通过postMessage方式进行通信。
[0021]第三方面，一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现大量计算下的浏览器页面性能优化方法的步骤。
[0022]第四方面，一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现大量计算下的浏览器页面性能优化方法的步骤。
[0023]相比现有技术，本申请至少具有以下有益效果：
[0024]本申请提供了一种大量计算下的浏览器页面性能优化方法及装置，方法包括：判断当前浏览器页面是否存在大量计算逻辑；若没有，则正常执行浏览器页面逻辑；若有，则创建Worker线程，并将大量计算逻辑迁移到Worker线程中等待运行通知；当需要大量计算时，通知Worker线程进行计算，并将所需参数传输至Worker线程；接收Worker线程的计算结果，并根据计算结果做相应处理。本申请利用Worker线程来提升页面性能，将原本的异步处理变为另外一个线程并行处理，提前了处理时间，并避免了因为处理大量计算从而阻塞了主线程，大大提升了浏览器页面的计算能力，在应对复杂场景时有很好的性能提升。
附图说明
[0025]为了更直观地说明现有技术以及本申请，下面给出几个示例性的附图。应当理解，附图中所示的具体形状、构造，通常不应视为实现本申请时的限定条件；例如，本领域技术人员基于本申请揭示的技术构思和示例性的附图，有能力对某些单元(部件)的增/减/归属划分、具体形状、位置关系、连接方式、尺寸比例关系等容易作出常规的调整或进一步的优化。
[0026]图1为本申请实施例一提供的一种大量计算下的浏览器页面性能优化方法流程图。
具体实施方式
[0027]以下结合附图，通过具体实施例对本申请作进一步详述。
[0028]在本申请的描述中：除非另有说明，“多个”的含义是两个或两个以上。本申请中的术语“第一”、“第二”、“第三”等旨在区别指代的对象，而不具有技术内涵方面的特别意义(例如，不应理解为对重要程度或次序等的强调)。“包括”、“包含”、“具有”等表述方式，同时还意味着“不限于”(某些单元、部件、材料、步骤等)。
[0029]本申请中所引用的如“上”、“下”、“左”、“右”、“中间”等的用语，通常是为了便于对照附图直观理解，而并非对实际产品中位置关系的绝对限定。在未脱离本申请揭示的技术
构思的情况下，这些相对位置关系的改变，当亦视为本申请表述的范畴。
[0030]实施例一
[0031]请参阅图1，本实施例提供了一种大量计算下的浏览器页面性能优化方法，通过WebWorker为JavaScript创造多线程环境，允许主线程创建Worker线程，将需要大量计算的任务分配给Worker线程运行。在主线程运行的同时，Worker线程在后台运行，两者互不干扰，等到Worker线程完成计算任务，再把结果返回给主线程。
[0032]具体包括：
[0033]S1：判断当前浏览器页面是否存在大量计算逻辑；
[0034]具体的，初始化浏览器页面后，判断当前浏览器页面是否有大量计算逻辑。
[0035]S2：若没有，则正常执行浏览器页面逻辑；
[0036]S3：若有，则创建Worker线程，并将大量计算逻辑迁移到Worker线程中等待运行通知；
[0037]具体的，创建Worker线程成功后，将需要大量计算的逻辑放到Worker线程中，等待主线程的通知运行。
[0038]S4：当需要大量计算时，通知Worker线程进行计算，并将所需参数传输至Worker线程；
[0039]具体的，主线程继续执行页面原有逻辑，当需要大量计算时本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种大量计算下的浏览器页面性能优化方法，其特征在于，包括：判断当前浏览器页面是否存在大量计算逻辑；若没有，则正常执行浏览器页面逻辑；若有，则创建Worker线程，并将大量计算逻辑迁移到所述Worker线程中等待运行通知；当需要大量计算时，通知所述Worker线程进行计算，并将所需参数传输至所述Worker线程；接收所述Worker线程的计算结果，并根据所述计算结果做相应处理。2.根据权利要求1所述的大量计算下的浏览器页面性能优化方法，其特征在于，所述Worker线程和主线程之间通过postMessage方式进行通信。3.根据权利要求1所述的大量计算下的浏览器页面性能优化方法，其特征在于，所述将所需参数传输至所述Worker线程后继续执行原有逻辑，并监听来自所述Worker线程的通信。4.根据权利要求1所述的大量计算下的浏览器页面性能优化方法，其特征在于，所述判断当前浏览器页面是否存在大量计算逻辑之前，还包括：初始化当前浏览器页面。5.一...

【专利技术属性】
技术研发人员：陈宇，
申请(专利权)人：金茂云科技服务北京有限公司，
类型：发明
国别省市：