[发明专利]一种页面加载方法和用于页面加载的客户端、服务端在审
申请号: | 202110319788.2 | 申请日: | 2021-03-25 |
公开(公告)号: | CN113779456A | 公开(公告)日: | 2021-12-10 |
发明(设计)人: | 冉君军 | 申请(专利权)人: | 北京沃东天骏信息技术有限公司;北京京东世纪贸易有限公司 |
主分类号: | G06F16/957 | 分类号: | G06F16/957;G06Q30/06 |
代理公司: | 中原信达知识产权代理有限责任公司 11219 | 代理人: | 王志远;王安娜 |
地址: | 100176 北京市北京经济技术*** | 国省代码: | 北京;11 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 一种 页面 加载 方法 用于 客户端 服务端 | ||
本发明公开了一种页面加载方法和用于页面加载的客户端、服务端,涉及计算机技术领域。该方法的一具体实施方式包括:向服务端发送页面加载请求,以从内容分发网络中获取所述服务端预先生成的与页面对应的预渲染文件;加载所述预渲染文件,并向所述服务端发送动态数据获取请求,以获取与所述预渲染文件对应的动态数据;在所加载的预渲染文件中渲染所述动态数据以生成展示页面。该实施方式降低了用户等待页面加载的时间,提高了页面加载性能,进而提高了用户体验。
技术领域
本发明涉及计算机技术领域,尤其涉及一种页面加载方法和用于页面加载的客户端、服务端。
背景技术
随着互联网技术的发展,为了吸引越来越多的用户,对于用户浏览的页面,常采用复杂酷炫的交互效果。但随着页面复杂度的提高,页面需要加载的数据量增加,页面加载性能逐渐下降,尤其是当页面加载时间过长时,用户会因不愿意等待而放弃浏览页面,反而造成了用户流失。因此,如何提高页面的加载性能成为了亟待解决的问题。
页面的加载性能则主要取决于页面加载时采用的渲染方式,目前常用的页面渲染方式主要有以下两种:服务端渲染、客户端渲染。
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:在服务端进行渲染时,尤其是在交互效果复杂、需要传输的数据量大的情况下,网络传输速度对页面加载性能造成了制约,导致用户体验不佳;在客户端进行渲染时,只有在页面文件全部加载完成的情况下才能显示页面内容,用户等待时间长,有时甚至会产生白屏,用户体验差。
发明内容
有鉴于此,本发明实施例提供了一种页面加载方法,能够先直接从内容分发网络中获取预渲染文件,减少了从服务端传输的数据量,降低了网络速度对加载性能的制约,提高开了页面加载性能;同时,在加载预渲染文件的过程中,逐步完成动态数据渲染并展示页面,使得用户可以快速看到页面内容,减少了等待时长,提升了用户体验。
为实现上述目的,根据本发明实施例的第一方面,提供了一种页面加载方法,包括:
向服务端发送页面加载请求,以从内容分发网络中获取所述服务端预先生成的与页面对应的预渲染文件;
加载所述预渲染文件,并向所述服务端发送动态数据获取请求,以获取与所述预渲染文件对应的动态数据;
在所加载的预渲染文件中渲染所述动态数据以生成展示页面。
可选地,所述预渲染文件是所述服务端基于NODE平台生成的,且所述预渲染文件由页面对应的一个或多个预渲染楼层构成;
所述预渲染楼层包括楼层模板、所述楼层模板对应的静态数据、与所述楼层模板的动态数据对应的空白DOM节点。
可选地,所述加载所述预渲染文件,并向所述服务端发送动态数据请求,以获取与所述预渲染文件对应的动态数据,包括:
判断所述预渲染楼层是否处于页面屏幕的可视区域;
在所述预渲染楼层处于页面屏幕的可视区域的情况下,根据所述空白DOM节点的属性,发送动态数据获取请求,以获取与所述空白DOM节点对应的动态数据。
可选地,所述在所加载的预渲染文件中渲染所述动态数据以生成展示页面,包括:
根据所述空白DOM节点,在所述预渲染楼层中渲染所述动态数据;
执行所述预渲染楼层中预先配置的楼层方法,以生成可交互的展示页面。
可选地,所述判断所述预渲染楼层是否处于页面屏幕的可视区域,包括:
获取所述页面的可视区域高度、所述预渲染楼层与所述页面顶部的距离;
判断所述页面的可视区域高度是否大于所述预渲染楼层与所述页面顶部的距离:
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于北京沃东天骏信息技术有限公司;北京京东世纪贸易有限公司,未经北京沃东天骏信息技术有限公司;北京京东世纪贸易有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/202110319788.2/2.html,转载请声明来源钻瓜专利网。
- 上一篇:数据处理的方法和装置
- 下一篇:日志数据处理方法、装置、存储介质与电子设备