页面渲染方法、装置、存储介质及电子设备制造方法及图纸

本公开涉及计算机技术领域，涉及一种页面渲染方法、装置、存储介质及电子设备，以减少页面卡顿。该页面渲染方法包括：响应于浏览器显示的页面改变，确定待渲染的页面元素；控制主线程加载页面元素，并确定在预设时长内加载完成的目标页面元素；将当前执行的主线程切换至渲染线程，以渲染目标页面元素；在目标页面元素渲染完成后，将当前执行的渲染线程切换回主线程，针对剩余待渲染的页面元素执行控制主线程加载页面元素至渲染目标页面元素的步骤，直到待渲染的页面元素渲染完成。到待渲染的页面元素渲染完成。到待渲染的页面元素渲染完成。

【技术实现步骤摘要】
页面渲染方法、装置、存储介质及电子设备


[0001]本公开涉及计算机
，具体地，涉及一种页面渲染方法、装置、存储介质及电子设备。

技术介绍

[0002]目前，越来越多的公司在运维方面借助可视化图表来监控各项业务指标，从而提前感知风险以及保持业务稳定。相关技术通常采用画布（Canvas）技术来对可视化图表进行渲染，在渲染过程中涉及调用GPU（图形处理器，Graphics Processing Unit）执行相应的绘制任务，从而将可视化图表显示在浏览器的页面中。针对三维图表，还涉及使用基于WebGL（Web Graphics Library）的三维绘图技术。随着需要监控的指标日益增多，页面中承载的可视化图表越来越多，造成较大的性能开销。在一段时间内需要渲染的图表过多时，就会出现页面卡顿现象。

技术实现思路

[0003]本公开的目的是提供一种页面渲染方法、装置、存储介质及电子设备，以减少页面卡顿。
[0004]为了实现上述目的，本公开实施例的第一方面提供一种页面渲染方法，所述页面渲染方法包括：响应于浏览器显示的页面改变，确定待渲染的页面元素；控制主线程加载所述页面元素，并确定在预设时长内加载完成的目标页面元素；将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素；在所述目标页面元素渲染完成后，将当前执行的所述渲染线程切换回所述主线程，针对剩余待渲染的页面元素执行所述控制主线程加载所述页面元素至渲染所述目标页面元素的步骤，直到所有待渲染的页面元素渲染完成。
[0005]可选地，所述将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素，包括：在所述主线程加载所述目标页面元素的实际时长小于所述预设时长的情况下，将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素。
[0006]可选地，所述将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素，包括：调用请求空闲回调接口，以在所述主线程加载所述目标页面元素的实际时长小于所述预设时长的情况下，将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素。
[0007]可选地，所述响应于浏览器显示的页面改变，确定待渲染的页面元素，包括：在所述页面中的至少一个监测页面元素与所述页面的视口相交的情况下，确定所述浏览器显示的页面改变；
基于所述至少一个监测页面元素，确定待渲染的页面元素。
[0008]可选地，所述监测页面元素为所述页面的滚动条，或者为预先注册到相交监视器的页面元素，或者为所述页面中所有的页面元素。
[0009]可选地，所述监测页面元素为预先注册到相交监视器的页面元素，所述方法还包括：调用相交监视器，以确定所述监测页面元素是否与所述页面的视口相交。
[0010]可选地，所述页面元素至少包括图表元素。
[0011]本公开实施例的第二方面提供一种页面渲染装置，所述页面渲染装置包括：响应模块，被配置为响应于浏览器显示的页面改变，确定待渲染的页面元素；控制模块，被配置为控制主线程加载所述页面元素，并确定在预设时长内加载完成的目标页面元素；切换模块，被配置为将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素；执行模块，被配置为在所述目标页面元素渲染完成后，将当前执行的所述渲染线程切换回所述主线程，针对剩余待渲染的页面元素执行所述控制主线程加载所述页面元素至渲染所述目标页面元素的步骤，直到所有待渲染的页面元素渲染完成。
[0012]本公开实施例的第三方面提供一种计算机可读存储介质，其上存储有计算机程序指令，该程序指令被处理器执行时实现本公开第一方面中任一项所提供的页面渲染方法的步骤。
[0013]根据本公开实施例的第四方面，提供一种电子设备，包括：存储器，其上存储有计算机程序；处理器，用于执行所述存储器中的所述计算机程序，以实现第一方面中任一项所提供的页面渲染方法的步骤。
[0014]通过上述技术方案，响应于浏览器显示的页面改变，确定待渲染的页面元素。在此基础上，通过控制主线程一次加载待渲染的页面元素的时长，也即控制主线程在预设时长内进行加载任务，从而可以确定在预设时长内加载完成的目标页面元素，由此可以将当前执行的主线程切换至渲染线程，以渲染目标页面元素。在目标页面元素渲染完成后，可以将当前执行的渲染线程切换回主线程，针对剩余待渲染的页面元素执行控制主线程加载页面元素至渲染目标页面元素的步骤，直到所有待渲染的页面元素渲染完成。这样，将主线程加载所有待渲染的页面元素的过程划分为多次，并在每一次加载完成部分待渲染的页面元素后，对这部分待渲染的页面元素进行渲染，以及在渲染完成后继续下一次加载以及渲染页面元素的步骤，从而减少一次加载页面元素过多导致渲染任务阻塞而页面出现卡顿的情况。
[0015]本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。
附图说明
[0016]附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：图1 是根据相关技术示出的一种页面渲染的示意图。
[0017]图2是根据一示例性实施例示出的一种页面渲染方法的流程图。
[0018]图3是根据一示例性实施例示出的一种页面渲染的示意图。
[0019]图4是根据一示例性实施例示出的一种确定待渲染的页面元素的示意图。
[0020]图5是根据一示例性实施例示出的一种页面渲染装置的框图。
[0021]图6是根据一示例性实施例示出的一种电子设备的框图。
具体实施方式
[0022]以下结合附图对本公开的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本公开，并不用于限制本公开。
[0023]如
技术介绍
所言，相关技术通常借助可视化图表来监控各项业务指标，而在将可视化图表这样的图表元素或者其他页面元素显示在浏览器的页面中时，通常涉及如下几个步骤：步骤1：通过对浏览器所显示页面对应的DOM（文档对象模型，Document Object Model）树中元素的监听或者定时轮询，借助一些计算方法确定是否存在符合渲染条件的页面元素。
[0024]步骤2：在确定符合渲染条件的页面元素后，通过网络请求该页面元素对应的业务数据。
[0025]步骤3：将符合渲染条件的页面元素加载到DOM树中，并在加载完成后利用浏览器绘制能力进行页面渲染。
[0026]其中，符合渲染条件的页面元素可以是指响应于浏览器显示的页面改变而展示到页面视口（Viewport）的页面元素。步骤3对于一次加载少量页面元素时性能尚可，但是对于大屏场景或者满足渲染条件的页面元素过多时，往往涉及一次加载大量的页面元素，这导致较大的性能负担。这时用于加载页面元素的主线程（JS线程）抢占了渲染线程执行的时长，从而导致渲染线程无法及时重画图层以及更新视图，造成页面在一段时间内无法响应任何交互且无法展示更新内容，也即出现页面卡顿现象。
[00本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法，其特征在于，所述页面渲染方法包括：响应于浏览器显示的页面改变，确定待渲染的页面元素；控制主线程加载所述页面元素，并确定在预设时长内加载完成的目标页面元素；将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素；在所述目标页面元素渲染完成后，将当前执行的所述渲染线程切换回所述主线程，针对剩余待渲染的页面元素执行所述控制主线程加载所述页面元素至渲染所述目标页面元素的步骤，直到所有待渲染的页面元素渲染完成。2.根据权利要求1所述的页面渲染方法，其特征在于，所述将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素，包括：在所述主线程加载所述目标页面元素的实际时长小于所述预设时长的情况下，将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素。3.根据权利要求2所述的页面渲染方法，其特征在于，所述将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素，包括：调用请求空闲回调接口，以在所述主线程加载所述目标页面元素的实际时长小于所述预设时长的情况下，将当前执行的所述主线程切换至渲染线程，以渲染所述目标页面元素。4.根据权利要求1所述的页面渲染方法，其特征在于，所述响应于浏览器显示的页面改变，确定待渲染的页面元素，包括：在所述页面中的至少一个监测页面元素与所述页面的视口相交的情况下，确定所述浏览器显示的页面改变；基于所述至少一个监测页面元素，确定待渲染的页面元素。5.根据权利要求4所述的页面渲染方法，其特征在于，所述监测页面元素...

【专利技术属性】
技术研发人员：周镒梵，李绪财，王鲲，陈飞，邹懋，
申请(专利权)人：北京趋动智能科技有限公司，
类型：发明
国别省市：