CN110347947B - 一种页面渲染方法及装置 - Google Patents

一种页面渲染方法及装置 Download PDF

Info

Publication number
CN110347947B
CN110347947B CN201910522952.2A CN201910522952A CN110347947B CN 110347947 B CN110347947 B CN 110347947B CN 201910522952 A CN201910522952 A CN 201910522952A CN 110347947 B CN110347947 B CN 110347947B
Authority
CN
China
Prior art keywords
thread
event
page
met
triggered based
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.)
Active
Application number
CN201910522952.2A
Other languages
English (en)
Other versions
CN110347947A (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.)
Advanced New Technologies Co Ltd
Advantageous New Technologies Co Ltd
Original Assignee
Advanced New Technologies 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 Advanced New Technologies Co Ltd filed Critical Advanced New Technologies Co Ltd
Priority to CN201910522952.2A priority Critical patent/CN110347947B/zh
Publication of CN110347947A publication Critical patent/CN110347947A/zh
Application granted granted Critical
Publication of CN110347947B publication Critical patent/CN110347947B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements 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/46—Multiprogramming arrangements
    • G06F9/50—Allocation of resources, e.g. of the central processing unit [CPU]
    • G06F9/5005—Allocation of resources, e.g. of the central processing unit [CPU] to service a request
    • G06F9/5027—Allocation of resources, e.g. of the central processing unit [CPU] to service a request the resource being a machine, e.g. CPUs, Servers, Terminals
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

公开了一种页面渲染方法及装置。一种页面渲染方法，该方法包括：JS主线程创建辅助线程；JS主线程将页面中基于时间条件触发的事件分派至辅助线程；针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；并在监测到触发条件满足后，向JS主线程发送通知消息；JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。

Description

一种页面渲染方法及装置
技术领域
本说明书实施例涉及互联网技术领域，尤其涉及一种页面渲染方法及装置。
背景技术
众所周知，由于浏览器内核自身特性，浏览器内核的页面渲染线程和javascript(简称JS)主线程是互斥的，即在某个时刻，浏览器内核只能运行页面渲染线程或JS主线程，两者不能同时运行，也就意味着在JS主线程运行的过程中，页面渲染线程处于停滞状态(即运行JS主线程则会阻塞页面渲染线程的运行)。
在当前页面中基于时间条件触发的事件触发条件是否满足，需要由JS主线程监测的场景中，JS主线程需要周期性地监测页面中基于时间条件触发的事件触发条件是否满足。例如，对于红包定时发放事件，JS主线程需要周期性地监测红包定时发放事件触发条件是否满足，即JS主线程需要周期性地判断当前时刻是否达到红包发放时刻。
如此JS主线程需要长时间地、高频率地监测页面中基于时间条件触发的事件触发条件是否满足，与此同时导致页面渲染线程的运行被JS主线程长时间地、高频率地阻塞。如此长时间地、高频率地阻塞页面渲染线程的运行，对于用户而言，可能感觉到页面存在卡顿等现象，降低了用户体验。
发明内容
针对上述技术问题，本说明书实施例提供一种页面渲染方法及装置，技术方案如下：
一种页面渲染方法，所述方法包括：
JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；
JS主线程将页面中基于时间条件触发的事件分派至辅助线程；
针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；并在监测到触发条件满足后，向JS主线程发送通知消息；
JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
一种页面渲染装置，所述装置包括：
线程创建模块，用于JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；
事件分派模块，用于JS主线程将页面中基于时间条件触发的事件分派至辅助线程；
监测模块，用于针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；
消息发送模块，用于在监测到触发条件满足后，辅助线程向JS主线程发送通知消息；
事件确定模块，JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；
策略确定模块，用于JS主线程根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
本说明书实施例所提供的技术方案，JS主线程通过创建辅助线程，针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足，并在监测到触发条件满足后，向JS主线程发送通知消息，JS主线程确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。由于由辅助线程监测任一基于时间条件触发的事件触发条件是否满足，且辅助线程与JS主线程相互独立，如此JS主线程被释放，页面渲染线程可以正常运行，避免了页面卡顿等现象的发生，提高了用户体验。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本说明书实施例。
此外，本说明书实施例中的任一实施例并不需要达到上述的全部效果。
附图说明
为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书实施例中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。
图1是本说明书实施例的页面渲染方法的实施流程示意图；
图2是本说明书实施例的页面渲染装置的结构示意图；
图3是用于配置本说明书实施例装置的一种设备的结构示意图。
具体实施方式
众所周知，由于浏览器内核自身特性，浏览器内核的页面渲染线程以及JS主线程是互斥的，即在某个时刻，浏览器内核只能运行页面渲染线程或JS主线程，JS主线程和页面渲染线程不能同时运行，也就是意味着在JS主线程运行的过程中，页面渲染线程处于停滞状态(即运行JS主线程则会阻塞页面渲染线程的运行)，在页面渲染线程运行的过程中，JS主线程处于停滞状态(即运行页面渲染线程则会阻塞JS主线程的运行)。
在当前页面中基于时间条件触发的事件触发条件是否满足，需要由JS主线程监测的场景中，JS主线程需要周期性地监测页面中基于时间条件触发的事件触发条件是否满足。例如，对于红包定时发放事件，JS主线程需要周期性地监测红包定时发放事件触发条件是否满足，即JS主线程需要周期性地判断当前时刻是否达到红包发放时刻。
如此JS主线程需要长时间地、高频率地监测页面中基于时间条件触发的事件触发条件是否满足，与此同时导致页面渲染线程的运行被JS主线程长时间地、高频率地阻塞。如此长时间地、高频率地阻塞页面渲染线程的运行，对于用户而言，可能感觉到页面存在卡顿等现象，降低了用户体验。
针对上述技术问题，本说明书实施例提供一种页面渲染的技术方案，JS主线程通过创建辅助线程，针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足，并在监测到触发条件满足后，向JS主线程发送通知消息，JS主线程确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。由于由辅助线程监测页面中任一基于时间条件触发的事件触发条件是否满足，且辅助线程与JS主线程相互独立，如此JS主线程被释放，页面渲染线程可以正常运行，避免了页面卡顿等现象的发生，提高了用户体验。
具体的，本说明书实施例提供的技术方案如下：
JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；JS主线程将页面中基于时间条件触发的事件分派至辅助线程；针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；并在监测到触发条件满足后，向JS主线程发送通知消息；JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
为了使本领域技术人员更好地理解本说明书实施例中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行详细地描述，显然，所描述的实施例仅仅是本说明书的一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于保护的范围。
如图1所示，为本说明书实施例提供的页面渲染方法的实施流程示意图，该方法具体可以包括以下步骤：
S101，JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；
在本说明书实施例中，为了减少JS主线程对页面渲染线程的阻塞时间，由JS主线程创建辅助线程，由辅助线程代替JS主线程来监测一部分事件，这部分事件为页面中基于时间条件触发的事件。
其中所创建的辅助线程与JS主线程相互独立，运行辅助线程不会妨碍JS主线程的运行。运行辅助线程监测页面中基于时间条件触发的事件触发条件是否满足，可以使得JS主线程被释放，可以同时运行页面渲染线程，使得浏览器支持多线程运行。
由JS主线程创建辅助线程，该辅助线程可以基于HTML5Web Worker技术进行创建，所创建的辅助线程可以是Worker线程。其中具体由JS主线程调用预设脚本程序创建辅助线程，例如由JS主线程的Worker Adapter调用预设脚本程序创建辅助线程。
S102，JS主线程将页面中基于时间条件触发的事件分派至辅助线程；
在创建上述辅助线程之后，JS主线程将页面中基于时间条件触发的事件分派至辅助线程，由辅助线程代替JS主线程来监测页面中基于时间条件触发的事件触发条件是否满足。如此JS主线程将页面中基于时间条件触发的事件分派至辅助线程，且辅助线程与JS主线程相互独立，如此JS主线程被释放，不会长时间地、高频地阻塞页面渲染线程的运行，页面渲染线程可以正常运行。
例如，对于当前页面中基于时间条件触发的事件：事件A、事件B、事件C、事件D，将上述所有事件分派至辅助线程，意味着对于当前页面中基于时间条件触发的事件，全部交由辅助线程来监测页面中基于时间条件触发的事件触发条件是否满足。
S103，针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；并在监测到触发条件满足后，向JS主线程发送通知消息；
辅助线程在接收到JS主线程分派的基于时间条件触发的事件之后，将基于时间条件触发的事件添加至任务栈中，针对任务栈中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足。
其中，针对任务栈中任一基于时间条件触发的事件，辅助线程根据预设的事件与监测周期的对应关系，确定监测周期，根据该监测周期监测触发条件是否满足。在本说明书实施例中，监测周期可以与基于时间条件触发的事件一一对应。
例如，预先配置基于时间条件触发的事件与监测周期的对应关系，如下表1所示。
监测周期 基于时间条件触发的事件
T1(200ms) A
T2(200ms) B
T3(100ms) C
表1
由上述表1可知，基于时间条件触发的事件A与监测周期T1一一对应，基于时间条件触发的事件B与监测周期T2一一对应，基于时间条件触发的事件C与监测周期T3一一对应，其中监测周期T1、监测周期T2、监测周期T3，可以相同，也可以互不相同，本说明书实施例对此不作限定。
根据上述表1中基于时间条件触发的事件与监测周期的对应关系，针对任务栈中基于时间条件触发的事件A，辅助线程确定监测周期T1，根据该监测周期T1监测触发条件是否满足。
再者，对于根据该监测周期，监测基于时间条件触发的事件触发条件是否满足，可以是：根据该监测周期，监测基于时间条件触发的事件的计时器是否到期。例如，可以是根据该监测周期，监测基于时间条件触发的事件的计时器(24H)是否到期(归零)。
另外，对于根据该监测周期，监测基于时间条件触发的事件触发条件是否满足，也可以是：根据该监测周期，监测基于时间条件触发的事件的当前时刻是否达到预设时刻。例如，可以是根据该监测周期，监测基于时间条件触发的事件的当前时刻是否达到12:00。
对于任务栈中任一基于时间条件触发的事件，在监测到触发条件满足后，向JS主线程发送通知消息，具体可以通过以下方式发送通知消息：
在监测到触发条件满足后，通知辅助线程本地消息中心该基于时间条件触发的事件触发条件满足，由辅助线程本地消息中心向JS主线程发送通知消息。对于通知消息，其中可以携带事件标识，用于确定触发条件满足的基于时间条件触发的事件。
例如，在监测到该基于时间条件触发的事件A触发条件满足后，通知辅助线程本地消息中心该基于时间条件触发的事件A触发条件满足，由辅助线程本地消息中心向JS主线程发送通知消息，该通知消息中携带事件标识A。
S104，JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
在JS主线程这一侧，监听是否接收到由辅助线程本地消息中心发送的通知消息，在监听接收到由辅助线程本地消息中心发送的通知消息后，确定触发条件满足的基于时间条件触发的事件。具体是，JS主线程根据所述通知消息中携带的事件标识，确定触发条件满足的基于时间条件触发的事件。
例如，JS主线程监听是否接收到由辅助线程本地消息中心发送的通知消息，在监听接收到由辅助线程本地消息中心发送的通知消息后，根据该通知消息中携带的事件标识A，确定触发条件满足的基于时间条件触发的事件A。
在确定触发条件满足的基于时间条件触发的事件之后，根据预设的事件与渲染策略的对应关系，确定该基于时间条件触发的事件对应的渲染策略。
例如，预先配置基于时间条件触发的事件与渲染策略的对应关系，如下表2所示。
Figure BDA0002097282640000071
Figure BDA0002097282640000081
表2
根据上述表2可知，基于时间条件触发的事件A与渲染策略1一一对应，基于时间条件触发的事件B与渲染策略2一一对应，基于时间条件触发的事件C与渲染策略3一一对应。
例如，在确定触发条件满足的基于时间条件触发的事件A之后，根据上述表2中的基于时间条件触发的事件与渲染策略的对应关系，可以确定基于时间条件触发的事件A对应的渲染策略1。
在确定渲染策略之后，可以通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
例如，页面渲染线程利用所确定的渲染策略对页面进行渲染，可以使页面背景由与早晨对应的页面背景切换至与中午对应的页面背景，或者由与中午对应的页面背景切换至与傍晚对应的页面背景。
例如，页面渲染线程利用所确定的渲染策略对页面进行渲染，可以使蚂蚁森林中未成熟的能量切换至成熟状态。
现结合如下具体应用场景，对本发明实施例提供的技术方案进行详细说明：
在支付宝蚂蚁森林中，用户每天的低碳行为(例如行走、地铁出行、网上购票等)会产生不同的能量，能量成熟需要一定时间，能量消失亦需要一定时间(这里时间指的是相对时间)。为了对能量状态进行监测，针对用户每天的低碳行为所产生的能量，会生成相应的基于时间条件触发的事件，监测基于时间条件触发的事件的计时器是否到期(归零)，以此来监测能量是否成熟或者消失，如下表3所示：
Figure BDA0002097282640000082
/>
Figure BDA0002097282640000091
表3
对于当前蚂蚁森林页面中，存在上述行走能量成熟事件A、地铁出行能量成熟事件B、购票能量成熟事件C，各自事件中计时器初始计时剩余时间分别为5H、4H、6H，意味着在经过5H之后，行走能量成熟，在经过4H之后，地铁出行能量成熟，在经过6H之后，购票能量成熟。
JS主线程将上述行走能量成熟事件A、地铁出行能量成熟事件B、购票能量成熟事件C分派至辅助线程，由辅助线程代替JS主线程来监测上述行走能量成熟事件A、地铁出行能量成熟事件B、购票能量成熟事件C中计时器是否到期，即监测事件中计时器剩余时间是否归零；
辅助线程在接收到上述行走能量成熟事件A、地铁出行能量成熟事件B、购票能量成熟事件C之后，将上述行走能量成熟事件A、地铁出行能量成熟事件B、购票能量成熟事件C添加至任务栈中。
针对任务栈中行走能量成熟事件A，辅助线程按照监测周期T1(200ms)，监测事件中的计时器剩余时间(5H)是否归零；
针对任务栈中地铁出行能量成熟事件B，辅助线程按照监测周期T2(200ms)，监测事件中的计时器剩余时间(4H)是否归零；
针对任务栈中购票能量成熟事件C，辅助线程按照监测周期T3(200ms)，监测事件中的计时器剩余时间(6H)是否归零。
针对任务栈中行走能量成熟事件A，在某个监测周期中，监测事件中的计时器剩余时间(5H)归零，通知辅助线程本地消息中心行走能量成熟事件A计时器剩余时间(5H)归零，由辅助线程本地消息中心向JS主线程发送通知消息，其中在通知消息中携带事件标识A。
在JS主线程这一侧，在接收到通知消息之后，根据该通知消息中携带的事件标识A，确定计时器剩余时间(5H)归零的行走能量成熟事件A，确定与行走能量成熟事件A对应的渲染策略1(能量由未成熟状态切换至成熟状态)，通知页面渲染线程利用渲染策略1对蚂蚁森林页面进行渲染。
页面渲染线程利用渲染策略1对蚂蚁森林页面进行渲染，可以使行走能量成熟事件A对应的能量由未成熟状态切换为成熟状态。
通过上述对本说明书实施例提供的技术方案的描述，JS主线程通过创建辅助线程，针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足，并在监测到触发条件满足后，向JS主线程发送通知消息，JS主线程确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。由于由辅助线程监测任一基于时间条件触发的事件触发条件是否满足，且辅助线程与JS主线程相互独立，如此JS主线程被释放，页面渲染线程可以正常运行，避免了页面卡顿等现象的发生，提高了用户体验。
相应于上述方法实施例，本说明书实施例还提供一种页面渲染装置，参见图2所示，该装置可以包括：线程创建模块210、事件分派模块220、监测模块230、消息发送模块240、事件确定模块250、策略确定模块260。
线程创建模块210，用于JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；
事件分派模块220，用于JS主线程将页面中基于时间条件触发的事件分派至辅助线程；
监测模块230，用于针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；
消息发送模块240，用于在监测到触发条件满足后，辅助线程向JS主线程发送通知消息；
事件确定模块250，JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；
策略确定模块260，用于JS主线程根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
在本说明书实施例的一种具体实施方式中，所述监测模块230包括：
事件添加子模块231，用于辅助线程将页面中基于时间条件触发的事件添加至任务栈中；
监测子模块232，用于针对任务栈中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足。
在本说明书实施例的一种具体实施方式中，所述监测子模块232具体用于：
针对任务栈中任一基于时间条件触发的事件，辅助线程根据预设的事件与监测周期的对应关系，确定监测周期；
辅助线程根据所述监测周期监测触发条件是否满足。
在本说明书实施例的一种具体实施方式中，所述消息发送模块240具体用于：
在监测到触发条件满足后，通知辅助线程本地消息中心该基于时间条件触发的事件触发条件满足；
由辅助线程本地消息中心向JS主线程发送通知消息。
在本说明书实施例的一种具体实施方式中，所述事件确定模块250具体用于：
JS主线程在接收到由辅助线程本地消息中心发送的所述通知消息后，根据所述通知消息中携带的事件标识，确定触发条件满足的基于时间条件触发的事件。
上述装置中各个模块的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。
通过上述对本说明书实施例提供的技术方案的描述，JS主线程通过创建辅助线程，针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足，并在监测到触发条件满足后，向JS主线程发送通知消息，JS主线程确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。由于由辅助线程监测任一基于时间条件触发的事件触发条件是否满足，且辅助线程与JS主线程相互独立，如此JS主线程被释放，页面渲染线程可以正常运行，避免了页面卡顿等现象的发生，提高了用户体验。
本说明书实施例还提供一种计算机设备，其至少包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，处理器执行所述程序时实现前述的页面渲染方法，该方法至少包括：
JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；
JS主线程将页面中基于时间条件触发的事件分派至辅助线程；
针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；并在监测到触发条件满足后，向JS主线程发送通知消息；
JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
图3示出了本说明书实施例所提供的一种更为具体的计算设备硬件结构示意图，该设备可以包括：处理器310、存储器320、输入/输出接口330、通信接口340和总线350。其中处理器310、存储器320、输入/输出接口330和通信接口340通过总线350实现彼此之间在设备内部的通信连接。
处理器310可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本说明书实施例所提供的技术方案。
存储器320可以采用ROM(Read Only Memory，只读存储器)、RAM(Random AccessMemory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器320可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器320中，并由处理器310来调用执行。
输入/输出接口330用于连接输入/输出模块，以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。
通信接口340用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。
总线350包括一通路，在设备的各个组件(例如处理器310、存储器320、输入/输出接口330和通信接口340)之间传输信息。
需要说明的是，尽管上述设备仅示出了处理器310、存储器320、输入/输出接口330、通信接口340以及总线350，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本说明书实施例方案所必需的组件，而不必包含图中所示的全部组件。
本说明书实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述的页面渲染方法，该方法至少包括：
JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；
JS主线程将页面中基于时间条件触发的事件分派至辅助线程；
针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；并在监测到触发条件满足后，向JS主线程发送通知消息；
JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本说明书实施例可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本说明书实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本说明书实施例各个实施例或者实施例的某些部分所述的方法。
上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，在实施本说明书实施例方案时可以把各模块的功能在同一个或多个软件和/或硬件中实现。也可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
以上所述仅是本说明书实施例的具体实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本说明书实施例原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本说明书实施例的保护范围。

Claims (7)

1.一种页面渲染方法，所述方法包括：
JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；
JS主线程将页面中基于时间条件触发的事件分派至辅助线程；
针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；并在监测到触发条件满足后，向JS主线程发送通知消息；JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染；
其中，所述针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足，包括：
辅助线程将页面中基于时间条件触发的事件添加至任务栈中；
针对任务栈中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足，包括：
针对任务栈中任一基于时间条件触发的事件，辅助线程根据预设的事件与监测周期的对应关系，确定监测周期；
辅助线程根据所述监测周期监测触发条件是否满。
2.根据权利要求1所述的方法，所述在监测到触发条件满足后，向JS主线程发送通知消息，包括：
在监测到触发条件满足后，通知辅助线程本地消息中心该基于时间条件触发的事件触发条件满足；
由辅助线程本地消息中心向JS主线程发送通知消息。
3.根据权利要求2所述的方法，所述JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件，包括：
JS主线程在接收到由辅助线程本地消息中心发送的所述通知消息后，根据所述通知消息中携带的事件标识，确定触发条件满足的基于时间条件触发的事件。
4.一种页面渲染装置，所述装置包括：
线程创建模块，用于JS主线程创建辅助线程，所述JS主线程与所述辅助线程相互独立；
事件分派模块，用于JS主线程将页面中基于时间条件触发的事件分派至辅助线程；
监测模块，用于针对页面中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；所述监测模块包括：
事件添加子模块，用于辅助线程将页面中基于时间条件触发的事件添加至任务栈中；
监测子模块，用于针对任务栈中任一基于时间条件触发的事件，辅助线程监测触发条件是否满足；所述监测子模块具体用于：
针对任务栈中任一基于时间条件触发的事件，辅助线程根据预设的事件与监测周期的对应关系，确定监测周期；
辅助线程根据所述监测周期监测触发条件是否满足；
消息发送模块，用于在监测到触发条件满足后，辅助线程向JS主线程发送通知消息；
事件确定模块，JS主线程在接收到所述通知消息后，确定触发条件满足的基于时间条件触发的事件；
策略确定模块，用于JS主线程根据预设的事件与渲染策略的对应关系，确定渲染策略；并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。
5.根据权利要求4所述的装置，所述消息发送模块具体用于：
在监测到触发条件满足后，通知辅助线程本地消息中心该基于时间条件触发的事件触发条件满足；
由辅助线程本地消息中心向JS主线程发送通知消息。
6.根据权利要求5所述的装置，所述事件确定模块具体用于：
JS主线程在接收到由辅助线程本地消息中心发送的所述通知消息后，根据所述通知消息中携带的事件标识，确定触发条件满足的基于时间条件触发的事件。
7.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如权利要求1至3任一项所述的方法。
CN201910522952.2A 2019-06-17 2019-06-17 一种页面渲染方法及装置 Active CN110347947B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910522952.2A CN110347947B (zh) 2019-06-17 2019-06-17 一种页面渲染方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910522952.2A CN110347947B (zh) 2019-06-17 2019-06-17 一种页面渲染方法及装置

Publications (2)

Publication Number Publication Date
CN110347947A CN110347947A (zh) 2019-10-18
CN110347947B true CN110347947B (zh) 2023-06-06

Family

ID=68182278

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910522952.2A Active CN110347947B (zh) 2019-06-17 2019-06-17 一种页面渲染方法及装置

Country Status (1)

Country Link
CN (1) CN110347947B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111694619A (zh) * 2020-06-09 2020-09-22 重庆锐云科技有限公司 基于刷新率的定时器实现方法、装置、设备及存储介质
CN117130774A (zh) * 2023-04-28 2023-11-28 荣耀终端有限公司 一种线程加速处理方法和装置

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108280027A (zh) * 2018-02-08 2018-07-13 金蝶软件（中国）有限公司 一种脚本的并发调试渲染方法及装置
CN109491655A (zh) * 2018-10-08 2019-03-19 北京小米移动软件有限公司 一种输入事件处理方法及装置
CN109739505A (zh) * 2019-01-08 2019-05-10 网易（杭州）网络有限公司 一种用户界面的处理方法和装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8589950B2 (en) * 2011-01-05 2013-11-19 Blackberry Limited Processing user input events in a web browser

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108280027A (zh) * 2018-02-08 2018-07-13 金蝶软件（中国）有限公司 一种脚本的并发调试渲染方法及装置
CN109491655A (zh) * 2018-10-08 2019-03-19 北京小米移动软件有限公司 一种输入事件处理方法及装置
CN109739505A (zh) * 2019-01-08 2019-05-10 网易（杭州）网络有限公司 一种用户界面的处理方法和装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
多线程技术在移动设备增强现实应用中的性能优化研究;张生等;《软件导刊》;20180905(第11期);全文 *

Also Published As

Publication number Publication date
CN110347947A (zh) 2019-10-18

Similar Documents

Publication Publication Date Title
CN106557407B (zh) 一种设备负载的监控方法和装置
CN110347947B (zh) 一种页面渲染方法及装置
CN111290866B (zh) 业务处理方法及装置
CN110022260B (zh) 一种跨环境回执消息处理方法及系统
JP2006277062A (ja) アプリケーション管理装置およびそのソフトウェアを格納した記憶媒体
CN109101371B (zh) 一种容灾切换方法及装置
CN110020383B (zh) 一种页面数据请求处理方法及装置
CN107835984B (zh) 热减轻用户体验
CN111381273A (zh) 一种地震预警方法、装置及设备
CN108665251A (zh) 一种支付渠道恢复的处理方法及装置
CN110852754A (zh) 一种风险识别方法、装置及设备
CN108334345A (zh) 应用程序处理方法、装置、可读存储介质和移动终端
CN106462235B (zh) 用于提供用户认知负荷服务的系统和方法
CN110188975B (zh) 一种资源获取方法及装置
CN111858252B (zh) 基于前端框架的动态埋点方法及装置
CN110020264B (zh) 一种无效超链接的确定方法及装置
CN112965799A (zh) 任务状态的提示方法、装置、电子设备和介质
CN110960857B (zh) 一种游戏数据监控方法、装置、电子设备及存储介质
CN114785714B (zh) 一种报文传输时延检测方法、存储介质及设备
CN112817701B (zh) 定时器处理方法、装置、电子设备和计算机可读介质
CN112258300B (zh) 一种针对订单生成的审核方法及装置
CN109901925B (zh) 一种任务处理方法及系统
CN114221878A (zh) 一种故障节点检测方法、系统、电子设备及存储介质
CN110032404B (zh) 一种刷新任务的管理方法及装置
US9800740B2 (en) Push/pull hybrid for wireless device usage metering

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
TA01 Transfer of patent application right

Effective date of registration: 20200927

Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Applicant after: Advanced innovation technology Co.,Ltd.

Address before: A four-storey 847 mailbox in Grand Cayman Capital Building, British Cayman Islands

Applicant before: Alibaba Group Holding Ltd.

Effective date of registration: 20200927

Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Applicant after: Innovative advanced technology Co.,Ltd.

Address before: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Applicant before: Advanced innovation technology Co.,Ltd.

TA01 Transfer of patent application right
GR01 Patent grant
GR01 Patent grant