页面渲染方法及电子设备技术

技术编号:38770681 阅读:23 留言:0更新日期:2023-09-10 10:43
本申请实施例公开了页面渲染方法及电子设备,该方法包括:响应于用户对页面的访问请求,确定需要进行服务端渲染的目标组件,根据对应的组件依赖关系树,从服务端本地存储系统的存储目录中将对应组件的第一编译结果加载到服务端执行环境中,以便完成对所述目标组件的服务端渲染;其中,所述页面是利用预先开发并编译的同构化组件进行页面搭建而生成的,所述同构化组件对应的编译结果包括服务端可执行的所述第一编译结果,以及客户端可执行的第二编译结果;生成客户端渲染代码,并与服务端渲染结果组装成页面标记语言文档。通过本申请实施例,能够基于组件搭建的方式进行支持同构渲染的页面开发,从而提升页面开发效率,降低资源浪费。资源浪费。资源浪费。

【技术实现步骤摘要】
页面渲染方法及电子设备


[0001]本申请涉及页面渲染
,特别是涉及页面渲染方法及电子设备。

技术介绍

[0002]在前端
,传统的页面渲染方案是由客户端渲染,也即,前端服务将渲染逻辑推给客户端侧的浏览器,由浏览器执行页面元素的渲染还原等处理,并完成展现。但是,这种客户端渲染方式的问题在于,页面逻辑传给客户端侧浏览器执行渲染的过程需要花费一段时间,以至于用户打开某页面的过程中,可能会首先看到白屏,然后一点点逐渐展示出页面内容,让用户感觉到明显的延迟。
[0003]另一种方式是服务端渲染,也即,在用户发起页面访问请求后,可以在服务端完成渲染,将页面展示需要的数据组装好发给客户端,客户端可以直接进行展示,这样,可以减少客户端页面的白屏时间,使得缩短页面内容触达用户的时间。另外,这种服务端渲染的方式除了能够有效提升页面的展现性能,同时也能有效提升页面的展现稳定性及兼容性。
[0004]但是,如果全部通过服务端渲染通常也是不现实的,这是因为,首先,用户请求数量众多,全部由服务端完成整个页面的渲染会导致服务端的压力巨大;另外,本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法,其特征在于,包括:响应于用户对页面的访问请求,确定需要进行服务端渲染的目标组件,根据对应的组件依赖关系树,从服务端本地存储系统的存储目录中将对应组件的第一编译结果加载到服务端执行环境中,以便完成对所述目标组件的服务端渲染;其中,所述页面是利用预先开发并编译的同构化组件进行页面搭建而生成的,所述同构化组件对应的编译结果包括服务端可执行的所述第一编译结果,以及客户端可执行的第二编译结果;所述组件依赖关系树是通过对所搭建页面的页面描述信息进行遍历而生成的;按照客户端渲染的执行逻辑生成客户端渲染代码,并根据所述客户端渲染代码以及服务端渲染结果组装成页面标记语言文档,以便客户端对已完成服务端渲染的目标组件进行展示,并根据所述客户端渲染代码,对尚未进行渲染的组件对应的第二编译结果进行脚本下载,并进行客户端渲染及展示。2.根据权利要求1所述的方法,其特征在于,在对所述同构化组件进行编译时,如果所述同构化组件依赖外部代码,则获取到所述外部代码的原始代码;分别按照服务端、客户端可识别的封装规范,将所述外部代码的原始代码封装成伪装组件,并提供所述伪装组件的组件标识;在生成所述第一编译结果以及第二编译结果时,将所述同构化组件对所述外部代码的依赖关系转换为对所述伪装组件的依赖,并将对所述伪装组件的依赖关系嵌入到组件代码中,以便在进行服务端渲染或者客户端渲染时,对于多个组件依赖同一份外部代码的情况,通过对所述伪装组件的代码进行单次下载,完成对所述多个组件的渲染。3.根据权利要求1所述的方法,其特征在于,在对所述同构化组件进行编译时,如果所述同构化组件依赖其他组件,则将对其他组件的依赖关系信息添加到组件的配置信息中,以便在进行服务端或客户端渲染时,根据所述配置信息获取所述依赖关系信息,并进行组件的递归解析。4.根据权利要求3所述的方法,其特征在于,在生成页面的组件依赖关系树时,根据页面中包括的各组件的配置信息,确定所述同构化组件依赖的其他组件的标识,并通过去重处理后,生成所述页面的组件依赖关系树,以便在进行服务端渲染或者客户端渲染时,根据所述组件依赖关系树将组件的编译结果加载到内存中执行,以使得在多个组件依赖同一组件时,该被依赖的同一组件进行单次加载。5.根据权利要求1所述的方法,其特征在于,所述第一编译结果为函数,所述函数的参数包括服务端依赖的解析辅助对象以及所述用户请求的上下文信息,其中,所述解析辅助对象用于服务端渲染时获取组件实例。6.根据权利要求1所述的方法,其特征在于,所述按照客户端渲染的执行逻辑生成客户端渲染代码,包括:根据所述组件依赖关系树确定各组件之间的加载先后顺序信息,并提供对应组件的第二编译结果的下载地址,以便进行客户端渲染时,通过脚本的方式,按照所述加载先后顺序信息依次将组件的第二编译结果从所述下载地址下载到客户端本地。7.根据...

【专利技术属性】
技术研发人员:陈康施海斌王致富叶克良
申请(专利权)人:浙江天猫技术有限公司
类型:发明
国别省市:

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

1