网页代码的优化方法及装置制造方法及图纸

本申请提供了一种网页代码的优化方法及装置，其中，该方法包括：检测JavaScript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；按照预设规则拆分所述长任务代码为多个短任务代码；在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。采用上述方案，将检测出的长任务代码拆分成多个短任务，执行完一个短任务后，JavaScript归还浏览器的主线程，主线程可以执行其他优先级更高的任务，例如接收用户的输入，后续再执行剩余短任务，保证页面刷新的流畅度，解决了相关技术中网页代码中存在长任务导致网页卡顿的问题。

【技术实现步骤摘要】
网页代码的优化方法及装置
本申请涉及但不限于计算机领域，具体而言，涉及一种网页代码的优化方法及装置。
技术介绍
在相关技术中，随着互联网时代的快速发展，全球广域网web页面也变得越来越复杂。由原先的展示型页面发展到web应用程序app，网页应用的JavaScript脚本也正变得越来越复杂，也面临越来越多的性能挑战。从用户的输入，再到显示器在视觉上给用户的输出，这一过程如果超过100ms，那么用户会察觉到网页的卡顿，所以为了解决这个问题，每个任务不能超过50ms，W3C性能工作组在长任务LongTask规范中也将超过50ms的任务定义为长任务。JavaScript逻辑的中一些耗时任务(如批量文档对象模型DOM操作、大量循环计算任务)常常超过50ms，甚至秒级，因为代码同步执行，必须等到耗时任务执行完毕，JavaScript才会让出主线程的控制权，让浏览器控制其他任务。所以常常导致用户行为长时间得不到反馈，出现页面卡顿的情况。针对相关技术中网页代码中存在长任务导致网页卡顿的问题，目前还没有有效的解决方案。
技术实现思路
本申请实施例提供了一种网页代码的优化方法及装置，以至少解决相关技术中网页代码中存在长任务导致网页卡顿的问题。根据本申请的另一个实施例，还提供了一种网页代码的优化方法，包括：检测JavaScript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；按照预设规则拆分所述长任务代码为多个短任务代码，形成优化后的网页代码，其中，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。根据本申请的另一个实施例，还提供了一种网页代码的优化装置，包括：检测模块，用于检测JavaScript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；拆分模块，用于按照预设规则拆分所述长任务代码为多个短任务代码，形成优化后的网页代码，其中，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。根据本申请的又一个实施例，还提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。根据本申请的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。通过本申请，检测JavaScript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；按照预设规则拆分所述长任务代码为多个短任务代码；在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。采用上述方案，将检测出的长任务代码拆分成多个短任务，执行完一个短任务后，JavaScript归还浏览器的主线程，主线程可以执行其他优先级更高的任务，例如接收用户的输入，后续再执行剩余短任务，保证页面刷新的流畅度，解决了相关技术中网页代码中存在长任务导致网页卡顿的问题。附图说明此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1是本申请实施例的一种网页代码的优化方法的计算机终端的硬件结构框图；图2是根据本申请实施例的网页代码的优化方法的流程图。具体实施方式下文中将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。JavaScript是一门单线程的非阻塞的脚本语言，代码在执行的任何时候，都只有一个主线程来处理所有的任务。JavaScript的非阻塞实现的关键是事件队列(TaskQueue)：JavaScript引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕，主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码。受启发于操作系统的时间片轮转法：系统将所有的就绪进程按先来先服务的原则排成一个队列，每次调度时，把中央处理器CPU分配给队首进程，并令其执行一个时间片。时间片的大小从几毫秒(ms)到几百毫秒(ms)。当执行的时间片用完时，由一个计时器发出时钟中断请求，调度程序便据此信号来停止该进程的执行，并将它送往就绪队列的末尾；然后，再把处理机分配给就绪队列中新的队首进程，同时也让它执行一个时间片。实施例一本申请实施例一所提供的方法实施例可以在计算机终端、计算机终端或者类似的运算装置中执行。以运行在计算机终端上为例，图1是本申请实施例的一种网页代码的优化方法的计算机终端的硬件结构框图，如图1所示，计算机终端可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)和用于存储数据的存储器104，可选地，上述计算机终端还可以包括用于通信功能的传输装置106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述计算机终端的结构造成限定。例如，计算机终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。存储器104可用于存储应用软件的软件程序以及模块，如本申请实施例中的网页代码的优化方法对应的程序指令/模块，处理器102通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机终端的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(NetworkInterfaceController，NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(RadioFrequency，RF)模块，其用于通过无线方式与互联网进行通讯。在本实施例中提供了一种运行于上述计算机终端的网页代码的优化方法，图2是根据本申请实施例的网页代码的优化方法的流程图，如图2所示，该流程包括如下步骤：步骤S202，检测JavaScript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；在相关技术中浏览器的界面刷新帧数是每秒60帧，当长任务的执行时间超过两帧本文档来自技高网...

【技术保护点】
1.一种网页代码的优化方法，其特征在于，包括：检测JavaScript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；按照预设规则拆分所述长任务代码为多个短任务代码，形成优化后的网页代码，其中，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。

【技术特征摘要】
1.一种网页代码的优化方法，其特征在于，包括：检测JavaScript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；按照预设规则拆分所述长任务代码为多个短任务代码，形成优化后的网页代码，其中，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。2.根据权利要求1所述的方法，其特征在于，按照预设规则拆分所述长任务代码为多个短任务代码，包括以下之一：按照所述长任务代码的长度位进行拆分，包括：获取所述长任务代码的第一长度位，拆分所述第一长度位的长任务代码为多个第二长度位的短任务代码；按照执行所述长任务代码的时间长度进行拆分，包括：设置执行代码的第一时间长度，在执行所述长任务代码的时长达到所述第一时间长度时，跳出所述长任务的执行过程。3.根据权利要求1所述的方法，其特征在于，检测JavaScript代码中待执行的长任务，包括：通过谷歌浏览器的开发者工具的性能分析工具查找出所述JavaScript代码中的长任务。4.根据权利要求1所述的方法，其特征在于，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾，包括：使用setTimeout和/或requestIdleCallback，将剩余未执行的短任务代码调度至事件队列末尾，等待之后的事件循环来执行。5.根据权利要求1所述的方法，其特征在于，在执行完一个或多个短任务代码后，所...

【专利技术属性】
技术研发人员：盛顺炎，唐李梅，江金红，
申请(专利权)人：北京明略软件系统有限公司，
类型：发明
国别省市：北京,11