网页代码的优化方法及装置与流程

本申请涉及但不限于计算机领域，具体而言，涉及一种网页代码的优化方法及装置。

背景技术：

在相关技术中，随着互联网时代的快速发展，全球广域网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/60秒，或者更大。

步骤s204，按照预设规则拆分所述长任务代码为多个短任务代码，形成优化后的网页代码，其中，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。

将长任务代码拆分为多个短任务代码后，javascript执行完一个短任务代码后，不影响页面刷新，浏览器主线程及时执行用户输入，鼠标移动等高优先级的任务，用户就不会感受到页面卡顿。至于短任务的标准可以是执行时间短于第一阈值，或者短任务的代码长度位小于第二阈值。

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

可选地，按照预设规则拆分所述长任务代码为多个短任务代码，包括以下之一：按照所述长任务代码的长度位进行拆分，包括：获取所述长任务代码的第一长度位，拆分所述第一长度位的长任务代码为多个第二长度位的短任务代码；按照执行所述长任务代码的时间长度进行拆分，包括：设置执行代码的第一时间长度，在执行所述长任务代码的时长达到所述第一时间长度时，跳出所述长任务的执行过程。采用上述方案，可以通过两种方案拆分长代码，以使得拆分后的短代码不影响页面刷新速度。

可选地，检测javascript代码中待执行的长任务，包括：通过谷歌浏览器的开发者工具的性能分析工具查找出所述javascript代码中的长任务。采用该方案，在执行上述javascript代码时，可以通过上述的开发者工具或者控制后台实时监控代码的执行过程，从而选择出占用主线程的时间较长的长任务，监控结果用于后续的代码优化过程。

可选地，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾，包括：使用settimeout和/或requestidlecallback，将剩余未执行的短任务代码调度至事件队列末尾，等待之后的事件循环来执行。

可选地，在执行完一个或多个短任务代码后，释放所述主线程的控制权；在所述主线程中执行优先级比所述多个短任务更高的第三任务。优先级更高的第三任务可以是用户输入任务，鼠标移动任务等，即与用户实时交互的任务优先级高，其余任务的优先级可以依次设置。

下面结合本申请另一个实施例进行说明。

本实施例为了解决上述问题，提出了一种基于任务调度的网页性能优化方案，让网页运行更流畅。

本实施例的方案流程如下：

步骤1、通过谷歌chrome浏览器的开发者工具的性能(performance)分析工具，找出代码中javascript执行的长任务(javascript连续执行时间过长)；

步骤2、改造javascript长任务代码，使其能够分块执行(如将for循环分成n段完成)；

步骤3、利用settimeout/requestidlecallback进行任务调度，将剩余未完成任务放到事件队列末尾，等待之后的事件循环(tick)来执行；

步骤1中找到一个需要优化性能的代码块举例如下，下面的代码中langtask函数就是一个长任务，如果直接调用执行，javascript会连续暂用主线程两三秒，导致一小段时间内，页面无法响应用户的操作，代码如下：

步骤2中的改造长任务代码，实现任务分块，调度可以包括两种方式，方案a：基于任务长度分块。将长度位100000的长任务，分成每一块为1000的短任务，每次执行完之后，返还主线程的控制权，查看是主线程栈是否有优先级更高的任务(如响应用户输入)，代码如下：

步骤2中的改造长任务代码，实现任务分块，调度可以包括两种方式，方案b：基于时间片长度分块：利用浏览器的performance应用程序编程接口api，可以获取当前任务已经执行的时间；基于这个机制，可以将长任务分成用户自定义时间长度的短任务，进行调度；例如每1/60秒执行一个短任务，代码如下：

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

实施例二

在本实施例中还提供了一种网页代码的优化装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

根据本申请的另一个实施例，还提供了一种网页代码的优化装置，包括：

检测模块，用于检测javascript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；

拆分模块，用于按照预设规则拆分所述长任务代码为多个短任务代码，形成优化后的网页代码，其中，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。

可选地，所述拆分模块还用于按照所述长任务代码的长度位进行拆分，包括：获取所述长任务代码的第一长度位，拆分所述第一长度位的长任务代码为多个第二长度位的短任务代码；或者用于，按照执行所述长任务代码的时间长度进行拆分，包括：设置执行代码的第一时间长度，在执行所述长任务代码的时长达到所述第一时间长度时，跳出所述长任务的执行过程。

可选地，所述检测模块还用于通过谷歌浏览器的开发者工具的性能分析工具查找出所述javascript代码中的长任务。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

实施例三

本申请的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的程序代码：

s1，检测javascript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；

s2，按照预设规则拆分所述长任务代码为多个短任务代码，形成优化后的网页代码，其中，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。

可选地，在本实施例中，上述存储介质可以包括但不限于：u盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

本申请的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输装置以及输入输出设备，其中，该传输装置和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

s1，检测javascript代码中待执行的长任务，所述长任务的被执行过程占用浏览器的主线程超过阈值；

s2，按照预设规则拆分所述长任务代码为多个短任务代码，形成优化后的网页代码，其中，在执行完一个或多个短任务代码后，将剩余未执行的短任务代码调度至所述主线程的事件队列末尾。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。