一种页面渲染方法及装置制造方法及图纸

技术编号:22330284 阅读:18 留言:0更新日期:2019-10-19 12:18
公开了一种页面渲染方法及装置。一种页面渲染方法,该方法包括:JS主线程创建辅助线程;JS主线程将页面中基于时间条件触发的事件分派至辅助线程;针对页面中任一基于时间条件触发的事件,辅助线程监测触发条件是否满足;并在监测到触发条件满足后,向JS主线程发送通知消息;JS主线程在接收到所述通知消息后,确定触发条件满足的基于时间条件触发的事件;根据预设的事件与渲染策略的对应关系,确定渲染策略;并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。

【技术实现步骤摘要】
一种页面渲染方法及装置
本说明书实施例涉及互联网
,尤其涉及一种页面渲染方法及装置。
技术介绍
众所周知,由于浏览器内核自身特性,浏览器内核的页面渲染线程和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主线程创建辅助线程,该辅助线程可本文档来自技高网...

【技术保护点】
1.一种页面渲染方法,所述方法包括:JS主线程创建辅助线程,所述JS主线程与所述辅助线程相互独立;JS主线程将页面中基于时间条件触发的事件分派至辅助线程;针对页面中任一基于时间条件触发的事件,辅助线程监测触发条件是否满足;并在监测到触发条件满足后,向JS主线程发送通知消息;JS主线程在接收到所述通知消息后,确定触发条件满足的基于时间条件触发的事件;根据预设的事件与渲染策略的对应关系,确定渲染策略;并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。

【技术特征摘要】
1.一种页面渲染方法,所述方法包括:JS主线程创建辅助线程,所述JS主线程与所述辅助线程相互独立;JS主线程将页面中基于时间条件触发的事件分派至辅助线程;针对页面中任一基于时间条件触发的事件,辅助线程监测触发条件是否满足;并在监测到触发条件满足后,向JS主线程发送通知消息;JS主线程在接收到所述通知消息后,确定触发条件满足的基于时间条件触发的事件;根据预设的事件与渲染策略的对应关系,确定渲染策略;并通知页面渲染线程利用所确定的渲染策略对页面进行渲染。2.根据权利要求1所述的方法,所述针对页面中任一基于时间条件触发的事件,辅助线程监测触发条件是否满足,包括:辅助线程将页面中基于时间条件触发的事件添加至任务栈中;针对任务栈中任一基于时间条件触发的事件,辅助线程监测触发条件是否满足。3.根据权利要求2所述的方法,所述针对任务栈中任一基于时间条件触发的事件,辅助线程监测触发条件是否满足,包括:针对任务栈中任一基于时间条件触发的事件,辅助线程根据预设的事件与监测周期的对应关系,确定监测周期;辅助线程根据所述监测周期监测触发条件是否满足。4.根据权利要求1至3任一项所述的方法,所述在监测到触发条件满足后,向JS主线程发送通知消息,包括:在监测到触发条件满足后,通知辅助线程本地消息中心该基于时间条件触发的事件触发条件满足;由辅助线程本地消息中心向JS主线程发送通知消息。5.根据权利要求4所述的方法,所述JS主线程在接收到所述通知消息后,确定触发条件满足的基于时间条件触发的事件,包括:JS主线程在接收到由辅助线程本地消息中心发送的所述通知消息后,根据所述通知消息中携带的事件标识,确定触发条件满足的基于时间条件触发的事件。6.一种页面渲染装置,所述装置包括:线程创建模块,...

【专利技术属性】
技术研发人员:杨文锦
申请(专利权)人:阿里巴巴集团控股有限公司
类型:发明
国别省市:开曼群岛,KY

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1