页面渲染方法、装置、设备和计算机可读存储介质制造方法及图纸

本公开提供一种页面渲染方法、装置、设备和计算机可读存储介质，其中，方法包括：响应于浏览器运行请求，调取预先注册的异步运行脚本监测页面数据获取请求；响应于监测到页面数据获取请求，通过异步运行脚本获取与页面数据获取请求对应的页面渲染数据；控制页面数据获取请求对应的渲染主线程根据页面渲染数据进行页面渲染处理。在本公开的实施例中，将有关页面渲染数据的获取由预先创建的异步运行脚本来执行，而不是由渲染主线程执行，提升了页面渲染效率，且不影响渲染主线程的其他渲染任务的执行，避免了主线程的渲染卡顿问题。避免了主线程的渲染卡顿问题。避免了主线程的渲染卡顿问题。

【技术实现步骤摘要】
页面渲染方法、装置、设备和计算机可读存储介质


[0001]本公开涉及计算机应用
，尤其涉及一种页面渲染方法、装置、设备和计算机可读存储介质。

技术介绍

[0002]随着计算机技术的发展，通过浏览器进行网页页面的加载成为一种常见的交互方式，比如，可以通过浏览器进行聊天界面的渲染等。
[0003]相关技术中，通过浏览器的渲染主线程进行有关网页页面的所有页面数据拉取和渲染，但是当页面待渲染的页面数据较多时，主线程加载页面过长可能会导致渲染页面出现卡顿的问题。

技术实现思路

[0004]根据本公开的一方面，提供了一种页面渲染方法，包括：响应于浏览器运行请求，调取预先注册的异步运行脚本监测页面数据获取请求；响应于监测到所述页面数据获取请求，通过所述异步运行脚本获取与所述页面数据获取请求对应的页面渲染数据；控制所述页面数据获取请求对应的渲染主线程根据所述页面渲染数据进行页面渲染处理。
[0005]根据本公开的另一方面，提供了一种页面渲染装置，包括：监测模块，用于响应于浏览器运行请求，调取预先注册的异步运行脚本监测页面数据获取请求；获取模块，用于响应于监测到所述页面数据获取请求，通过所述异步运行脚本获取与所述页面数据获取请求对应的页面渲染数据；渲染处理模块，用于控制所述页面数据获取请求对应的渲染主线程根据所述页面渲染数据进行页面渲染处理。
[0006]根据本公开的另一方面，提供了一种电子设备，包括：处理器；以及存储程序的存储器，其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器实现上述实施例所提到的页面渲染方法。
[0007]根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行上述实施例所提到的页面渲染方法。
[0008]根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现上述实施例所提到的页面渲染方法。
[0009]本公开实施例中提供的一个或多个技术方案：响应于浏览器运行请求，调取预先注册的异步运行脚本监测页面数据获取请求，响应于监测到页面数据获取请求，通过异步运行脚本获取与页面数据获取请求对应的页面渲染数据，进而，控制页面数据获取请求对应的渲染主线程根据页面渲染数据进行页面渲染处理。在本公开的实施例中，将有关页面渲染数据的获取由预先创建的异步运行脚本来执行，而不是由渲染主线程执行，提升了页面渲染效率，且不影响渲染主线程的其他渲染任务的执行，避免了主线程的渲染卡顿问题。
附图说明
[0010]在下面结合附图对于示例性实施例的描述中，本公开的更多细节、特征和优点被公开，在附图中：
[0011]图1示出了根据本公开示例性实施例的页面渲染方法的流程图；
[0012]图2示出了根据本公开示例性实施例的页面渲染场景示意图；
[0013]图3示出了根据本公开示例性实施例的页面渲染装置的结构示意图；
[0014]图4示出了能够用于实现本公开的实施例的示例性电子设备的结构框图。
具体实施方式
[0015]下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。
[0016]应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
[0017]本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
[0018]本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
[0019]以下参照附图描述本公开的页面渲染方法，其中，页面渲染方法可由页面渲染装置执行，其中，该页面渲染装置可采用软件和/或硬件实现，一般可集成在电子设备中。图1为本公开实施例提供的一种页面渲染方法的流程示意图，如图1所示，该方法包括：
[0020]步骤101，响应于浏览器运行请求，调取预先注册的异步运行脚本监测页面数据获取请求。
[0021]其中，异步运行脚本可以理解为任意可以充当web应用程序、浏览器和网络之间的代理服务器，异步运行脚本本质上是浏览器在后台运行的脚本，它是完全独立于它正在处理或服务的网页，比如，该异步运行脚本可以为service worker脚本等。
[0022]在本实施例中，预先在浏览器中注册异步运行脚本，以便于后续基于异步运行脚本独立于渲染主线程执行渲染任务。
[0023]在注册异步运行脚本时，可以确定与页面浏览器对应的运行源代码，在运行源代码中安装异步运行脚本，响应于获取到异步运行脚本的安装完成事件，对异步运行脚本进行脚本激活处理，以实现对异步运行脚本的注册。
[0024]举例而言，当异步运行脚本为service worker脚本，则在javascript代码里面注入service worker脚本，注入脚本成功之后，就会触发安装事件，安装过程中，浏览器会加
载并缓存一些静态资源，如果所有的文件被缓存成功，service worker就安装成功了。安装成功之后，开始激活service worker，必须要在service worker安装成功之后，才能开始激活步骤，当service worker安装完成后，会接收到一个激活事件(activate event)作为通知消息，进而，激活成功的service worker完成了注册。其中，在一些可能的实施例中，若是浏览器当前没有安装对应的异步运行脚本，则可以在启动浏览器后开始异步运行脚本的添加。
[0025]在本公开的一个实施例中，在异步运行脚本注册完毕后，在浏览器运行时异步运行脚本即可以控制对应的页面，可以通过异步运行脚本来监测页面数据获取请求，比如，当一步运行脚本为service worker时，可以拦截全局的fetch事件，因此，在本实施例中，可以用于拦截页面数据获取请求，比如，可通过service worker来拦截ajax请求。
[0026]在一些可能的实施例中，通过异步运行脚本监测浏览器对应的渲染主线程发送的页面数据获取请求，通过异步运行脚本拦截渲染主线程发送的页面数据获取请求，其中，比如，当前本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法，包括：响应于浏览器运行请求，调取预先注册的异步运行脚本监测页面数据获取请求；响应于监测到所述页面数据获取请求，通过所述异步运行脚本获取与所述页面数据获取请求对应的页面渲染数据；控制所述页面数据获取请求对应的渲染主线程根据所述页面渲染数据进行页面渲染处理。2.如权利要求1所述的方法，其中，在所述调取预先注册的异步运行脚本监测页面数据获取请求之前，包括：确定与页面浏览器对应的运行源代码；在所述运行源代码中安装所述异步运行脚本；响应于获取到所述异步运行脚本的安装完成事件，对所述异步运行脚本进行脚本激活处理，以实现对所述异步运行脚本的注册。3.如权利要求1所述的方法，其中，所述调取预先注册的异步运行脚本监测页面数据获取请求，包括：通过所述异步运行脚本监测所述浏览器对应的渲染主线程发送的页面数据获取请求；所述通过所述异步运行脚本获取与所述页面数据获取请求对应的页面渲染数据，包括：响应于监测到所述页面数据获取请求，通过所述异步运行脚本获取与所述页面数据获取请求对应的页面渲染数据。4.如权利要求3所述的方法，其中，所述通过所述异步运行脚本获取与所述页面数据获取请求对应的页面渲染数据，包括：获取所述页面数据获取请求对应的数据标识信息；通过所述异步运行脚本向预设服务器发送携带所述数据标识信息获取请求，以获取所述预设服务器反馈的所述页面渲染数据。5.如权利要求3所述的方法，其中，在所述通过所述异步运行脚本获取与所述页面数据获取请求对应的页面渲染数据之前，还包括：向所述渲染主线程反馈页面数据获取通知消息。6.如权利...

【专利技术属性】
技术研发人员：闫晓林，
申请(专利权)人：北京新唐思创教育科技有限公司，
类型：发明
国别省市：