CN115292158A - 获取和配置页面加载进度的方法及装置 - Google Patents

获取和配置页面加载进度的方法及装置 Download PDF

Info

Publication number
CN115292158A
CN115292158A CN202210751601.0A CN202210751601A CN115292158A CN 115292158 A CN115292158 A CN 115292158A CN 202210751601 A CN202210751601 A CN 202210751601A CN 115292158 A CN115292158 A CN 115292158A
Authority
CN
China
Prior art keywords
page
progress
loading
point
information
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202210751601.0A
Other languages
English (en)
Other versions
CN115292158B (zh
Inventor
魏银鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Uc Mobile China Co ltd
Original Assignee
Uc Mobile China Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Uc Mobile China Co ltd filed Critical Uc Mobile China Co ltd
Priority to CN202210751601.0A priority Critical patent/CN115292158B/zh
Publication of CN115292158A publication Critical patent/CN115292158A/zh
Application granted granted Critical
Publication of CN115292158B publication Critical patent/CN115292158B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00Error detection; Error correction; Monitoring
    • G06F11/36Preventing errors by testing or debugging software
    • G06F11/362Software debugging
    • G06F11/3636Software debugging by tracing the execution of the program
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00Error detection; Error correction; Monitoring
    • G06F11/36Preventing errors by testing or debugging software
    • G06F11/362Software debugging
    • G06F11/3644Software debugging by instrumenting at runtime
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44521Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请实施例公开了一种获取和配置页面加载进度的方法及装置。其中,主要技术方案包括:接收页面在加载过程中被执行到的第一插桩点发送的信息,其中所述页面的代码中预先插入有多个第一插桩点;依据第一插桩点发送的信息确定当前的页面加载进度,并在展现所述页面的终端界面上展现指示当前的页面加载进度的页面元素。本申请能够使得用户能够清楚地获知页面的实际加载进度,提升用户体验。

Description

获取和配置页面加载进度的方法及装置
技术领域
本申请涉及计算机应用技术领域,特别是涉及一种获取和配置页面加载进度的方法及装置。
背景技术
用户在使用计算机处理任务时,往往希望能够获知任务的处理进度,以提升对任务处理的控制感和预期感,也能够对长时间无处理进度的任务及时终止,避免浪费时间和系统资源。目前已经有很多处理任务向用户展示处理进度,例如复制、删除某个文件的进度,安装应用程序的进度,下载媒体文件的进度,等等。然而,对于页面的实际加载进度却没有很好的获取方案。
发明内容
有鉴于此,本申请提供了一种获取和配置页面加载进度的方法及装置,以实现获取页面的实际加载进度。
本申请提供了如下方案:
第一方面,提供了一种获取页面加载进度的方法,该方法包括:
接收页面在加载过程中被执行到的第一插桩点发送的信息,其中所述页面的代码中预先插入有多个第一插桩点;
依据第一插桩点发送的信息确定当前的页面加载进度,并在展现所述页面的终端界面上展现指示当前的页面加载进度的页面元素。
根据本申请实施例中一可实现的方式,所述页面的代码中预先插入有多个第一插桩点包括:
所述页面的头文件代码和脚本代码中的多个代码执行位置分别设置有第一插桩点。
根据本申请实施例中一可实现的方式,在所述脚本代码中依据代码量均匀插入多个第一插桩点。
根据本申请实施例中一可实现的方式,所述依据第一插桩点发送的信息确定当前的页面加载进度包括:
获取所述第一插桩点发送的信息中携带的插桩点标识,依据预设的插桩点标识与进度信息之间的对应关系,确定所述第一插桩点发送的信息中携带的插桩点标识对应的进度信息作为当前的页面加载进度;或者,
从预设的页面组件或第二插桩点获取进度配置信息,所述进度配置信息包含插桩点标识与进度信息之间的对应关系;获取所述第一插桩点发送的信息中携带的插桩点标识,依据所述对应关系确定所述第一插桩点发送的信息中携带的插桩点标识对应的进度信息作为当前的页面加载进度;或者,
获取所述第一插桩点发送的信息中携带的进度信息,依据该进度信息确定当前的页面加载进度。
根据本申请实施例中一可实现的方式,所述方法由接收器执行;
所述接收器为客户端API,则所述第一插桩点通过调用所述客户端API发送信息;或者,
所述接收器为页面组件,所述第一插桩点通过事件总线向所述页面组件发送信息;或者,
所述接收器为页面进程,所述第一插桩点通过进程间通信的方式向所述页面进程发送信息。
根据本申请实施例中一可实现的方式,该方法还包括:
响应于指示文档结构加载完成的事件或指示所有页面元素均加载完成的事件,确定当前的页面加载进度为已完成加载,隐藏所述页面元素。
根据本申请实施例中一可实现的方式,所述页面加载进度采用进度百分比表示;
所述指示当前的页面加载进度的页面元素为进度条和/或百分比的数字文本。
第二方面,提供了一种配置页面加载进度的方法,该方法包括:
记录触发请求加载页面的系统时间作为加载开始时间;
记录接收到所述页面在加载过程中被执行到的第三插桩点所发送信息的系统时间,其中在所述页面的代码中如第一方面所述的第一插桩点的位置分别插入有第三插桩点;
记录所述页面加载完毕的系统时间作为加载完毕时间;
利用接收到各第三插桩点所发送信息的系统时间在所述加载开始时间与所述加载完毕时间之间的时间区间的位置,确定各第三插桩点对应的进度信息;
将各第三插桩点对应的进度信息分别作为同一插入位置的第一插桩点对应的进度信息进行配置。
第三方面,提供了一种获取页面加载进度的装置,该装置包括:
信息接收单元,被配置为接收页面在加载过程中被执行到的第一插桩点发送的信息,其中所述页面的代码中预先插入有多个第一插桩点;
进度确定单元,被配置为依据第一插桩点发送的信息确定当前的页面加载进度,并在展现所述页面的终端界面上展现指示当前的页面加载进度的页面元素。
第四方面,提供了一种配置页面加载进度的装置,该装置包括:
信息接收单元,被配置为接收页面在加载过程中被执行到的第三插桩点发送的信息,其中在所述页面的代码中如第三方面所述的第一插桩点的位置分别插入有第三插桩点;
时间记录单元,被配置为记录触发请求加载所述页面的系统时间作为加载开始时间;记录所述信息接收单元接收到各第三插桩点所发送信息的系统时间;记录所述页面加载完毕的系统时间作为加载完毕时间;
进度确定单元,被配置为利用所述信息接收单元接收到各第三插桩点所发送信息的系统时间在所述加载开始时间与所述加载完毕时间之间的时间区间的位置,确定各第三插桩点对应的进度信息;
进度配置单元,被配置为将各第三插桩点对应的进度信息分别作为同一插入位置的第一插桩点对应的进度信息进行配置。
根据第五方面,提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现上述第一方面和第二方面中任一项所述的方法的步骤。
根据第六方面,提供了一种电子设备,其特征在于,包括:
一个或多个处理器;以及
与所述一个或多个处理器关联的存储器,所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时,执行上述第一方面和第二方面中任一项所述的方法的步骤。
根据本申请提供的具体实施例,本申请公开了以下技术效果:
1)在页面中通过插桩的方式,由被执行到的而第一插桩点向接收器发送信息,以便接收器确定当前页面的实际加载进度并进行展现,使得用户能够清楚地获知页面的实际加载进度,提升用户体验。
2)在页面中通过在第一插桩点相同的位置插入第三插桩点,利用各第三插桩点发送的系统时间在加载开始时间与加载完毕时间之间的时间区间的位置,确定各第三插桩点对应的进度信息,并将各第三插桩点对应的进度信息分别作为同一插入位置的第一插桩点对应的进度信息,从而实现对第一插桩点对应进度信息的配置或校准。
当然,实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1示出了可以应用本申请实施例的示例性系统架构图;
图2为本申请实施例提供的获取页面加载进度的方法流程图;
图3是本申请实施例提供的终端界面的一个示意图;
图4为本申请实施例提供的配置页面加载进度的方法流程图;
图5示出了根据一个实施例的页面加载进度的装置的示意性框图;
图6示出了根据一个实施例的配置页面加载进度的装置的示意性框图;
图7为本申请实施例提供的电子设备的架构图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员所获得的所有其他实施例,都属于本申请保护的范围。
在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。
应当理解,本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
取决于语境,如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地,取决于语境,短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。
目前在一些已有的产品中有些在页面加载过程中使用了进度条对页面加载进度进行展示,但该进度条仅仅是一个预设的动画,并未对页面加载的实际进度进行获取,因此也就没有真实反映页面加载进度。本申请则提供了一种能够真实反映页面加载进度的获取方式。
为了方便对本申请的理解,首先对本申请所基于的系统架构进行简单介绍。图1示出了可以应用本申请实施例的示例性系统架构。如图1中所示,该系统主要包括Web服务器和终端设备。Web服务器和终端设备之间可以通过网络建立连接,可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
其中Web服务器可以主动向终端设备推送页面,也可以响应于终端设备的请求而向终端设备返回页面。
上述Web服务器可以是单一服务器,也可以是多个服务器构成的服务器群组,还可以是云服务器。云服务器又称为云计算服务器或云主机,是云计算服务体系中的一项主机产品,以解决传统物理主机与虚拟专用服务器(VPs,Virtual Private Server)服务中存在的管理难度大,服务扩展性弱的缺陷。
终端设备上运行有客户端或浏览器,用户可以通过客户端或浏览器加载来自Web服务器的页面,并通过显示屏、显示器等进行显示。
上述终端设备可以包括但不限于诸如:智能移动终端、智能家居设备、可穿戴式设备、PC(个人计算机)等。其中智能移动设备可以包括诸如手机、平板电脑、笔记本电脑、PDA(个人数字助理)、互联网汽车等。智能家居设备可以包括智能家电设备,诸如智能电视、智能冰箱等等。可穿戴式设备可以包括诸如智能手表、智能眼镜、智能手环、虚拟现实设备、增强现实设备、混合现实设备(即可以支持虚拟现实和增强现实的设备)等等。
本申请实施例中所涉及的页面,也可以称为Web页面,可以是基于超文本标记语言(HyperText Markup Language,HTML)编写的网页(Web Page),即HTML页面,或者还可以是基于HTML和Java语言编写的网页,即Java服务器页面(Java Server Page,JSP),或者还可以为其他语言编写的网页,本实施例对此不进行特别限定。
在本申请实施例中,客户端或浏览器侧运行有接收器,在页面中通过插桩的方式,由被执行到的插桩点向接收器发送信息,以供该接收器执行本申请实施例所提供的方法获取页面加载进度并进行展现。该接收器可以采用多种实现方式,可以包括不限于以下形式:客户端API(Application Programming Interface,应用程序编程接口)、页面组件或页面进程。具体将在后续实施例中详述。
应该理解,图1中的终端设备、网络和Web服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和Web服务器。
图2为本申请实施例提供的获取页面加载进度的方法流程图,该方法流程可以由图1所示系统中的接收器执行。如图1中所示,该方法可以包括以下步骤:
步骤202:接收页面在加载过程中被执行到的第一插桩点发送的信息,其中页面的代码中预先插入有多个第一插桩点。
步骤204:依据第一插桩点发送的信息确定当前的页面加载进度,并在展现页面的终端界面上展现指示当前的页面加载进度的页面元素。
由上面流程可以看出,本申请实施例在页面中通过插桩的方式,由被执行到的而第一插桩点向接收器发送信息,以便接收器确定当前页面的实际加载进度并进行展现,使得用户能够清楚地获知页面的实际加载进度,提升用户体验。
需要说明的是,本公开中涉及的“第一”、“第二”、“第三”等限定并不具备大小、顺序和数量等方面的限制,仅仅用以在名称上加以区分,例如“第一插桩点”、“第二插桩点”和“第三插桩点”仅仅用以在名称上区分三种插桩点。
下面对上述流程中的各步骤进行详细描述。
首先结合实施例对上述步骤202即“接收页面在加载过程中被执行到的第一插桩点发送的信息”进行详细描述。
本申请实施例中,预先在页面的代码中插入多个第一插桩点。插桩就是在代码中插入一段自定义的代码,该代码会一起被编译到可执行文件中。因此可执行文件在运行过程中必然会执行插入的代码。
由于Web开发基本上都是基于Webpack等打包器进行打包,因此上述插入多个第一第一插桩点的处理可以通过预设的诸如Webpack插件等打包器插件执行。
作为其中一种可实现的方式,可以在页面的头文件(head)代码和脚本代码中的多个代码执行位置分别设置第一插桩点。例如,在页面的head顶部插入一个第一插桩点,在页面的js代码中插入N个第一插桩点,其中N为预设的正整数。
作为一种较为优选的实施方式,可以在脚本代码中依据代码量均匀插入多个第一插桩点。例如,在脚本代码中依据代码量均匀插入10个第一插桩点,每个第一插桩点对应10%的页面加载进度。
在页面的代码中插入的多个第一插桩点可以作为“发射器”向接收器发送信息。其中,发送的信息可以携带插桩点标识,也可以携带进度信息,例如携带指示百分比的信息。
上面已经提及接收器可以实现为客户端API、页面组件或页面进程等。
若接收器为客户端API,则被执行到的第一插桩点可以通过调用客户端API来发送信息,例如将插桩点标识或进度信息通过调用客户端API时传递的参数发送给客户端。
若接收器为页面组件,则被执行到的第一插桩点可以通过事件总线向页面组件发送插桩点标识或进度信息等信息。其中,组件(Component)是最强大的页面元素之一,组件可以扩展HTML元素,封装可重用的代码。若采用页面组件的方式,则最好在页面中尽可能早的位置来实现该页面组件,以便该页面组件能够在加载页面时尽可能早的运行于终端设备从而完成接收器的功能。
若接收器为页面进程(Web Worker),则被执行到的第一插桩点可以通过进程间通信的方式向页面进程发送插桩点标识或进度信息等信息。该页面进程可以是独立于浏览器或客户端的一个进程,可以随着浏览器或客户端的启动而同时启动,在用户通过浏览器或客户端加载页面的过程中,页面进程作为接收器获取页面加载进度并进行展现。
下面结合实施例对上述步骤204即“依据第一插桩点发送的信息确定当前的页面加载进度,并在展现页面的终端界面上展现指示当前的页面加载进度的页面元素”进行详细描述。
本步骤中依据第一插桩点发送的信息确定当前的页面加载进度可以采用但不限于以下三种实现方式:
第一种方式:获取第一插桩点发送的信息中携带的插桩点标识,依据预设的插桩点标识与进度信息之间的对应关系,确定第一插桩点发送的信息中携带的插桩点标识对应的进度信息作为当前的页面加载进度。
在这种方式中,可以在接收器侧预先配置插桩点标识与进度信息之间的对应关系,当接收器接收到第一插桩点发送的信息后,根据信息中携带的插桩点标识确定对应的进度信息。例如,预先在接收器侧配置如下对应关系:
Id1—10%,Id2—20%,Id3—30%,…,Id9—90%。
则当接收器接收到第一插桩点发送的携带Id2的信息后,可以确定当前的页面加载进度为20%。
第二种方式:从预设的页面组件或第二插桩点获取进度配置信息,进度配置信息包含插桩点标识与进度信息之间的对应关系;获取第一插桩点发送的信息中携带的插桩点标识,依据对应关系确定第一插桩点发送的信息中携带的插桩点标识对应的进度信息作为当前的页面加载进度。
这种方式与第一种方式不同的是,插桩点标识与进度信息之间的对应关系并非预先配置于接收器侧,而是采用配置信息的形式从页面组件或第二插桩点来获取。例如,预先在页面代码中按照加载顺序最初的位置,至少在第一个插桩点之前的位置,设置一个页面组件用以将配置信息发送给接收器,该配置信息中包含有插桩点标识与进度信息之间的对应关系。再例如,预先在页面代码中按照加载顺序最初的位置,至少在第一个插桩点之前的位置,设置第二插桩点,第二插桩点被执行到时发送配置信息给接收器。
显然,这种方式可以通过配置信息的方式,针对不同页面灵活配置插桩点标识与进度信息之间的对应关系,实现方式更加灵活,也方便对插桩点标识与进度信息之间的对应关系进行修正。
第三种方式:获取第一插桩点发送的信息中携带的进度信息,依据该进度信息确定当前的页面加载进度。
这种方式中无需配置插桩点标识与进度信息之间的对应关系,而是直接将进度信息配置在各第一插桩点中。被执行到的第一插桩点将配置于自身的进度信息发送给接收器,接收器直接就能够获知当前的页面加载进度。
例如可以在发送的信息中采用不同的数值指代不同的进度信息,接收器通过对数值的解析就能够获知进度信息。
对于页面加载完成(例如100%进度)信息的获取,可以通过第一插桩点来发送信息。例如在页面代码最后的位置设置第一插桩点来发送信息,接收器接收到该第一插桩点的信息时确定当前页面已完成加载。
作为另一种可实现的方式,可以响应于指示文档结构加载完成的事件或指示所有页面元素均加载完成的事件,接收器确定当前的页面加载进度为已完成加载。例如,当文档结构加载完成时会产生document.ready事件,接收器获取到该document.ready事件的信息后,确定当前的页面加载进度为已完成加载。再例如,当所有页面元素均加载完成时会产生window.onload事件,接收器获取到该window.onload事件的信息后,确定当前的页面加载进度为已完成加载。
接收器可以在展现页面的终端界面上展现指示当前的页面加载进度的页面元素。作为其中一种可实现的方式,上述页面加载进度采用进度百分比进行表示。指示当前的页面加载进度的页面元素可以为进度条、百分比的数字文本等多种形式。
可以采用动画的形式在进度条中显示不同的页面加载进度。进度条的形式和位置可以灵活设置。例如,可以在展现页面的终端界面靠下端的位置展示页面加载进度,也可以在展现页面的终端界面靠上端的位置展示页面加载进度,等等,只要不影响页面数据的正常展现即可。进度条可以采用条形的形式,也可以采用扇形的形式,等等。
以图3为例,若接收器确定当前的页面加载进度为50%,则确定进度条应该所处的比例,然后通过渲染引擎对进度条进行渲染。图3中在终端界面靠下端的位置展示条形的进度条,同时采用数字文本的形式展现百分比。
若接收器确定页面已完成加载,则可以隐藏指示页面加载进度的页面元素。也可以保持该页面元素,例如显示进度条为100%。
通过上述实施例所示的方法能够在终端界面上加载并展现页面内容的同时,展现真实的页面加载进度。但在上述实施例所示的方法之前,需要实现进度信息的配置或校准,以确定各第一插桩点对应的进度信息。具体可以采用如图4中所示的流程确定各第一插桩点对应的进度信息,该方法流程也可以由接收器完成,该接收器是用以实现配置或校准的接收器,可以是不同于执行图2所示流程的接收器的另一接收器。如图4中所示,该方法流程可以具体包括以下步骤:
步骤402:在页面的代码中各第一插桩点的位置分别插入第三插桩点。
也就是说,在各第一插桩点的相同位置分别对应插入第三插桩点,第三插桩点用以在被执行时发送信息。发送的信息中可以携带插桩点标识,也可以携带系统时间。
步骤404:记录触发请求加载页面的系统时间作为加载开始时间。
例如,当某个页面链接被点击,则点击时间可以作为加载开始时间。再例如,当用户在浏览器输入页面地址并点击打开组件,则点击时间可以作为加载开始时间。等等。
步骤406:接收并记录页面在加载过程中被执行到的第三插桩点发送信息的系统时间。
各第三插桩点在被执行时会发送信息,若信息中携带插桩点标识,则接收器可以记录插桩点标识对应的系统时间。若信息中直接携带系统时间,则接收器可以直接记录该系统时间。
步骤408:记录页面加载完毕的系统时间作为加载完毕时间。
本步骤中可以记录指示文档结构加载完成的事件或指示所有页面元素均加载完成的事件的发生时间。例如获取到document.ready事件或window.onload事件的时间作为加载完毕时间。
步骤410:利用各第三插桩点发送的系统时间在加载开始时间与加载完毕时间之间的时间区间的位置,确定各第三插桩点对应的进度信息。
例如,加载开始时间为time0,各第三插桩点发送信息的系统时间分别为:time1~timeN,加载完毕时间为time(N+1)。则可以确定第一个第三插桩点对应的进度信息为
Figure BDA0003721190620000081
第二个插桩点对应的进度信息为:
Figure BDA0003721190620000082
以此类推。
步骤412:将各第三插桩点对应的进度信息分别作为同一插入位置的第一插桩点对应的进度信息并进行配置。
在确定出各第三插桩点对应的进度信息后,该进度信息实际上也是同一插入位置的第三插桩点对应的进度信息。可以将各第一插桩点与进度信息的对应关系配置于执行图2所示流程的接收器侧,以便于接收器能够在接收到第一插桩点发送的信息时,能够依据该对应关系确定对应的进度信息。也可以将各第一插桩点与进度信息的对应关系配置于预设的页面组件或第二插桩点中,执行图2所示流程的接收器能够从该预设的页面组件或第二插桩点获取进度配置信息,获取到第一插桩点发送的信息时,依据该对应关系确定对应的进度信息。还可以将各第一插桩点对应的进度信息对应配置于各第一插桩点以使得各第一插桩点被执行时发送该进度信息给接收器。
另外,在上述流程中可以利用数量众多的用户数据,例如将插入第三插桩点的页面投放于实际应用中,在用户请求该页面的过程中执行图4所示流程。这样就能够获取到大量的数据,可以将所有获取到的各第三插桩点对应的进度信息进行平均处理,利用求平均得到的各第三插桩点对应的进度信息进行配置。
上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的或者可能是有利的。
根据另一方面的实施例,提供了一种获取页面加载进度的装置。图5示出根据一个实施例的页面加载进度的装置的示意性框图,该装置设置于图1所示架构中的接收器。如图5所示,该装置500包括:信息接收单元501和进度确定单元502。其中各组成单元的主要功能如下:
信息接收单元501,被配置为接收页面在加载过程中被执行到的第一插桩点发送的信息,其中所述页面的代码中预先插入有多个第一插桩点.
进度确定单元502,被配置为依据第一插桩点发送的信息确定当前的页面加载进度,并在展现所述页面的终端界面上展现指示当前的页面加载进度的页面元素。
作为其中一种可实现的方式,页面的头文件代码和脚本代码中的多个代码执行位置分别设置有第一插桩点。作为一种优选的实施方式,可以在所述脚本代码中依据代码量均匀插入多个第一插桩点。
在本申请实施例中,进度确定单元502依据第一插桩点发送的信息确定当前的页面加载进度时,可以采用以下方式:
获取所述第一插桩点发送的信息中携带的插桩点标识,依据预设的插桩点标识与进度信息之间的对应关系,确定所述第一插桩点发送的信息中携带的插桩点标识对应的进度信息作为当前的页面加载进度;或者,
从预设的页面组件或第二插桩点获取进度配置信息,所述进度配置信息包含插桩点标识与进度信息之间的对应关系;获取所述第一插桩点发送的信息中携带的插桩点标识,依据所述对应关系确定所述第一插桩点发送的信息中携带的插桩点标识对应的进度信息作为当前的页面加载进度;或者,
获取所述第一插桩点发送的信息中携带的进度信息,依据该进度信息确定当前的页面加载进度。
上述页面加载进度的装置500可以为客户端API,上述第一插桩点通过调用所述客户端API发送信息;或者,
上述页面加载进度的装置500可以为页面组件,上所述第一插桩点通过事件总线向所述页面组件发送信息;或者,
上述页面加载进度的装置500可以为页面进程,所述第一插桩点通过进程间通信的方式向所述页面进程发送信息。
作为其中一种可实现的方式,进度确定单元502响应于指示文档结构加载完成的事件或指示所有页面元素均加载完成的事件,确定当前的页面加载进度为已完成加载,隐藏所述页面元素。
作为一种较为典型的形式,所述页面加载进度采用进度百分比表示;所述指示当前的页面加载进度的页面元素为进度条和/或百分比的数字文本。
根据另一方面的实施例,提供了一种配置页面加载进度的装置。图6示出根据一个实施例的配置页面加载进度的装置的示意性框图。如图6所示,该装置600包括:信息接收单元601、时间记录单元602、进度确定单元603和进度配置单元604。其中各组成单元的主要功能如下:
信息接收单元601,被配置为接收页面在加载过程中被执行到的第三插桩点发送的信息,其中在所述页面的代码中第一插桩点的位置分别插入有第三插桩点。
作为其中一种可实现的方式,第三插桩点发送的信息中可以携带插桩点标识,也可以携带系统时间。
时间记录单元602,被配置为记录触发请求加载所述页面的系统时间作为加载开始时间;记录所述信息接收单元接收到各第三插桩点所发送信息的系统时间;记录所述页面加载完毕的系统时间作为加载完毕时间。
进度确定单元603,被配置为利用所述信息接收单元接收到各第三插桩点所发送信息的系统时间在所述加载开始时间与所述加载完毕时间之间的时间区间的位置,确定各第三插桩点对应的进度信息。
进度配置单元604,被配置为将各第三插桩点对应的进度信息分别作为同一插入位置的第一插桩点对应的进度信息进行配置。
在确定出各第三插桩点对应的进度信息后,该进度信息实际上也是同一插入位置的第三插桩点对应的进度信息。可以将各第一插桩点与进度信息的对应关系配置于图5所示的接收器侧,以便于接收器能够在接收到第一插桩点发送的信息时,能够依据该对应关系确定对应的进度信息。也可以将各第一插桩点与进度信息的对应关系配置于预设的页面组件或第二插桩点中,图5所示的接收器能够从该预设的页面组件或第二插桩点获取进度配置信息,获取到第一插桩点发送的信息时,依据该对应关系确定对应的进度信息。还可以将各第一插桩点对应的进度信息对应配置于各第一插桩点以使得各第一插桩点被执行时发送该进度信息给接收器。
图5所示装置和图6所示装置可以设置于同一接收器,也可以设置于不同接收器。
需要说明的是,本申请实施例中可能会涉及到对用户数据的使用,在实际应用中,可以在符合所在国的适用法律法规要求的情况下(例如用户明确同意,对用户切实通知等),在适用法律法规允许的范围内在本文描述的方案中使用用户特定的个人数据。
另外,本申请实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现前述方法实施例中任一项所述的方法的步骤。
以及一种电子设备,包括:
一个或多个处理器;以及
与所述一个或多个处理器关联的存储器,所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时,执行前述方法实施例中任一项所述的方法的步骤。
其中,图7示例性的展示出了电子设备的架构,具体可以包括处理器710,视频显示适配器711,磁盘驱动器712,输入/输出接口713,网络接口714,以及存储器720。上述处理器710、视频显示适配器711、磁盘驱动器712、输入/输出接口713、网络接口714,与存储器720之间可以通过通信总线730进行通信连接。
其中,处理器710可以采用通用的CPU、微处理器、应用专用集成电路(ApplicationSpecific Integrated Circuit,ASIC)、或者一个或多个集成电路等方式实现,用于执行相关程序,以实现本申请所提供的技术方案。
存储器720可以采用ROM(Read Only Memory,只读存储器)、RAM(RandomAccessMemory,随机存取存储器)、静态存储设备,动态存储设备等形式实现。存储器720可以存储用于控制电子设备700运行的操作系统721,用于控制电子设备700的低级别操作的基本输入输出系统(BIOS)722。另外,还可以存储网页浏览器723,数据存储管理系统724,以及获取页面加载进度的装置725等等。上述获取页面加载进度的装置725就可以是本申请实施例中具体实现前述各步骤操作的应用程序。总之,在通过软件或者固件来实现本申请所提供的技术方案时,相关的程序代码保存在存储器720中,并由处理器710来调用执行。
输入/输出接口713用于连接输入/输出模块,以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出),也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等,输出设备可以包括显示器、扬声器、振动器、指示灯等。
网络接口714用于连接通信模块(图中未示出),以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信,也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。
总线730包括一通路,在设备的各个组件(例如处理器710、视频显示适配器711、磁盘驱动器712、输入/输出接口713、网络接口714,与存储器720)之间传输信息。
需要说明的是,尽管上述设备仅示出了处理器710、视频显示适配器711、磁盘驱动器712、输入/输出接口713、网络接口714,存储器720,总线730等,但是在具体实施过程中,该设备还可以包括实现正常运行所必需的其他组件。此外,本领域的技术人员可以理解的是,上述设备中也可以仅包含实现本申请方案所必需的组件,而不必包含图中所示的全部组件。
通过以上的实施方式的描述可知,本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统或系统实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
以上对本申请所提供的技术方案进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的方法及其核心思想;同时,对于本领域的一般技术人员,依据本申请的思想,在具体实施方式及应用范围上均会有改变之处。综上所述,本说明书内容不应理解为对本申请的限制。

Claims (12)

1.一种获取页面加载进度的方法,其特征在于,该方法包括:
接收页面在加载过程中被执行到的第一插桩点发送的信息,其中所述页面的代码中预先插入有多个第一插桩点;
依据第一插桩点发送的信息确定当前的页面加载进度,并在展现所述页面的终端界面上展现指示当前的页面加载进度的页面元素。
2.根据权利要求1所述的方法,其特征在于,所述页面的代码中预先插入有多个第一插桩点包括:
所述页面的头文件代码和脚本代码中的多个代码执行位置分别设置有第一插桩点。
3.根据权利要求2所述的方法,其特征在于,在所述脚本代码中依据代码量均匀插入多个第一插桩点。
4.根据权利要求1所述的方法,其特征在于,所述依据第一插桩点发送的信息确定当前的页面加载进度包括:
获取所述第一插桩点发送的信息中携带的插桩点标识,依据预设的插桩点标识与进度信息之间的对应关系,确定所述第一插桩点发送的信息中携带的插桩点标识对应的进度信息作为当前的页面加载进度;或者,
从预设的页面组件或第二插桩点获取进度配置信息,所述进度配置信息包含插桩点标识与进度信息之间的对应关系;获取所述第一插桩点发送的信息中携带的插桩点标识,依据所述对应关系确定所述第一插桩点发送的信息中携带的插桩点标识对应的进度信息作为当前的页面加载进度;或者,
获取所述第一插桩点发送的信息中携带的进度信息,依据该进度信息确定当前的页面加载进度。
5.根据权利要求1所述的方法,其特征在于,所述方法由接收器执行;
所述接收器为客户端API,则所述第一插桩点通过调用所述客户端API发送信息;或者,
所述接收器为页面组件,所述第一插桩点通过事件总线向所述页面组件发送信息;或者,
所述接收器为页面进程,所述第一插桩点通过进程间通信的方式向所述页面进程发送信息。
6.根据权利要求1所述的方法,其特征在于,该方法还包括:
响应于指示文档结构加载完成的事件或指示所有页面元素均加载完成的事件,确定当前的页面加载进度为已完成加载,隐藏所述页面元素。
7.根据权利要求1至6中任一项所述的方法,其特征在于,所述页面加载进度采用进度百分比表示;
所述指示当前的页面加载进度的页面元素为进度条和/或百分比的数字文本。
8.一种配置页面加载进度的方法,其特征在于,该方法包括:
记录触发请求加载页面的系统时间作为加载开始时间;
记录接收到所述页面在加载过程中被执行到的第三插桩点所发送信息的系统时间,其中在所述页面的代码中如权利要求1至7中任一项所述的第一插桩点的位置分别插入有第三插桩点;
记录所述页面加载完毕的系统时间作为加载完毕时间;
利用接收到各第三插桩点所发送信息的系统时间在所述加载开始时间与所述加载完毕时间之间的时间区间的位置,确定各第三插桩点对应的进度信息;
将各第三插桩点对应的进度信息分别作为同一插入位置的第一插桩点对应的进度信息进行配置。
9.一种获取页面加载进度的装置,其特征在于,该装置包括:
信息接收单元,被配置为接收页面在加载过程中被执行到的第一插桩点发送的信息,其中所述页面的代码中预先插入有多个第一插桩点;
进度确定单元,被配置为依据第一插桩点发送的信息确定当前的页面加载进度,并在展现所述页面的终端界面上展现指示当前的页面加载进度的页面元素。
10.一种配置页面加载进度的装置,其特征在于,该装置包括:
信息接收单元,被配置为接收页面在加载过程中被执行到的第三插桩点发送的信息,其中在所述页面的代码中如权利要求9所述的第一插桩点的位置分别插入有第三插桩点;
时间记录单元,被配置为记录触发请求加载所述页面的系统时间作为加载开始时间;记录所述信息接收单元接收到各第三插桩点所发送信息的系统时间;记录所述页面加载完毕的系统时间作为加载完毕时间;
进度确定单元,被配置为利用所述信息接收单元接收到各第三插桩点所发送信息的系统时间在所述加载开始时间与所述加载完毕时间之间的时间区间的位置,确定各第三插桩点对应的进度信息;
进度配置单元,被配置为将各第三插桩点对应的进度信息分别作为同一插入位置的第一插桩点对应的进度信息进行配置。
11.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现权利要求1至8任一项所述的方法的步骤。
12.一种电子设备,其特征在于,包括:
一个或多个处理器;以及
与所述一个或多个处理器关联的存储器,所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时,执行权利要求1至8任一项所述的方法的步骤。
CN202210751601.0A 2022-06-29 2022-06-29 获取和配置页面加载进度的方法及装置 Active CN115292158B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210751601.0A CN115292158B (zh) 2022-06-29 2022-06-29 获取和配置页面加载进度的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210751601.0A CN115292158B (zh) 2022-06-29 2022-06-29 获取和配置页面加载进度的方法及装置

Publications (2)

Publication Number Publication Date
CN115292158A true CN115292158A (zh) 2022-11-04
CN115292158B CN115292158B (zh) 2024-01-23

Family

ID=83820621

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210751601.0A Active CN115292158B (zh) 2022-06-29 2022-06-29 获取和配置页面加载进度的方法及装置

Country Status (1)

Country Link
CN (1) CN115292158B (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103914302A (zh) * 2014-04-02 2014-07-09 北京京东尚科信息技术有限公司 一种网页加载进度监控方法和装置
CN107291852A (zh) * 2017-06-07 2017-10-24 北京金山安全软件有限公司 进度条显示的优化方法、装置及电子设备
WO2019169587A1 (zh) * 2018-03-07 2019-09-12 华为技术有限公司 一种分功能模块安装应用程序的方法
CN110851756A (zh) * 2019-10-12 2020-02-28 平安普惠企业管理有限公司 页面加载方法、装置、计算机可读存储介质及终端设备
WO2020077765A1 (zh) * 2018-10-18 2020-04-23 网宿科技股份有限公司 网页加载方法、中间服务器和网页加载系统
CN113986413A (zh) * 2021-09-22 2022-01-28 阿里巴巴(中国)有限公司 页面显示方法、装置、设备及存储介质
CN114003311A (zh) * 2021-10-29 2022-02-01 平安国际智慧城市科技股份有限公司 基于人工智能的进度条配置方法及相关设备
CN114675945A (zh) * 2021-05-21 2022-06-28 腾讯云计算(北京)有限责任公司 一种服务调用方法、装置、计算机设备及存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103914302A (zh) * 2014-04-02 2014-07-09 北京京东尚科信息技术有限公司 一种网页加载进度监控方法和装置
CN107291852A (zh) * 2017-06-07 2017-10-24 北京金山安全软件有限公司 进度条显示的优化方法、装置及电子设备
WO2019169587A1 (zh) * 2018-03-07 2019-09-12 华为技术有限公司 一种分功能模块安装应用程序的方法
WO2020077765A1 (zh) * 2018-10-18 2020-04-23 网宿科技股份有限公司 网页加载方法、中间服务器和网页加载系统
CN110851756A (zh) * 2019-10-12 2020-02-28 平安普惠企业管理有限公司 页面加载方法、装置、计算机可读存储介质及终端设备
CN114675945A (zh) * 2021-05-21 2022-06-28 腾讯云计算(北京)有限责任公司 一种服务调用方法、装置、计算机设备及存储介质
CN113986413A (zh) * 2021-09-22 2022-01-28 阿里巴巴(中国)有限公司 页面显示方法、装置、设备及存储介质
CN114003311A (zh) * 2021-10-29 2022-02-01 平安国际智慧城市科技股份有限公司 基于人工智能的进度条配置方法及相关设备

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
DUC HOANG BUI 等: "Rethinking Energy-Performance Trade-Off in Mobile Web Page Loading", 《MOBICOM \'15: PROCEEDINGS OF THE 21ST ANNUAL INTERNATIONAL CONFERENCE ON MOBILE COMPUTING AND NETWORKING》, vol. 2015 *
RABENDA: "php⻚⾯加载进度条,网⻚加载进度条的JS程序开发思路与实际应用", pages 1 - 4, Retrieved from the Internet <URL:《CSDN:https://blog.csdn.net/weixin_33256627/article/details/115988267》> *
张瀚方 等: "面向二进制程序的导向性模糊测试方法", 《计算机应用》, vol. 39, no. 5 *

Also Published As

Publication number Publication date
CN115292158B (zh) 2024-01-23

Similar Documents

Publication Publication Date Title
CN110708346B (zh) 信息处理系统和方法
CN107688529B (zh) 组件调试方法和装置
CN110808897A (zh) 代理访问方法、用户设备、存储介质、装置及系统
CN106874519B (zh) 页面展现方法和装置
CN109684188B (zh) 测试方法和装置
CN110955409B (zh) 在云平台上创建资源的方法和装置
CN111400172B (zh) 程序调试方法及装置
CN110320378B (zh) 质控测试申请方法、装置、设备及计算机可读存储介质
US8726182B1 (en) Multi-stage throbber
CN110619096B (zh) 用于同步数据的方法和装置
CN111444103A (zh) 一种Web页面自动化测试方法及相关设备
CN113010827A (zh) 页面渲染方法、装置、电子设备以及存储介质
CN108319474B (zh) 一种页面信息生成方法、装置和设备
CN111079048A (zh) 一种页面加载方法及装置
CN112148395A (zh) 页面显示方法、装置、设备及存储介质
CN111783010B (zh) 网页空白页面监测方法、装置、终端及存储介质
CN115292158B (zh) 获取和配置页面加载进度的方法及装置
US9886290B2 (en) Component loading based on user preferences
CN113672225B (zh) 用户界面的处理方法、装置、设备及存储介质
CN114816637A (zh) 一种嵌入小程序上的应用显示方法、装置及系统
CN114443460A (zh) 一种运行环境切换方法、装置、设备和存储介质
CN112947918A (zh) 数据展示方法和装置
CN108459890B (zh) 用于应用的界面显示方法和装置
CN113722019B (zh) 平台程序的显示方法、装置及设备
CN113704079A (zh) 基于Protobuf的接口测试方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant