CN116204749A - 页面加载方法、装置、电子设备及存储介质 - Google Patents

页面加载方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN116204749A
CN116204749A CN202310127165.4A CN202310127165A CN116204749A CN 116204749 A CN116204749 A CN 116204749A CN 202310127165 A CN202310127165 A CN 202310127165A CN 116204749 A CN116204749 A CN 116204749A
Authority
CN
China
Prior art keywords
page
address
target
determining
image element
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310127165.4A
Other languages
English (en)
Inventor
张发星
邢同举
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Jingdong Technology Holding Co Ltd
Original Assignee
Jingdong Technology Holding Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Jingdong Technology Holding Co Ltd filed Critical Jingdong Technology Holding Co Ltd
Priority to CN202310127165.4A priority Critical patent/CN116204749A/zh
Publication of CN116204749A publication Critical patent/CN116204749A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明实施例提供了一种页面加载方法、装置、电子设备及存储介质,该方法包括:基于接收到的页面加载请求,确定与页面加载请求相对应的目标地址哈希值;基于预先确定的映射关系,确定与目标地址哈希值相关联的地址数据,并基于地址数据获取目标图像元素并存储;基于存储目标图像元素的存储地址和与页面加载请求相对应的渲染文本,确定与页面加载请求相对应的目标页面。本公开实施例所提供的技术方案,实现了预先建立各图像元素与地址数据之间的对应关系,以在确定与页面加载请求相对应的目标地址哈希值后,可以基于对应关系确定相应的地址数据,进而调取相应的图像元素并存储,进而实现对页面中的图像元素进行渲染的技术效果。

Description

页面加载方法、装置、电子设备及存储介质
技术领域
本发明实施例涉及页面渲染技术领域,尤其涉及一种页面加载方法、装置、电子设备及存储介质。
背景技术
为了提高显示页面的页面效果,显示页面中多包括大量的图像。开发人员会将一些动态展示的图像,例如,轮播图等,在网页请求之前由原生应用程序下载,待页面加载完成后通过相应的工具将图像数据传输至网页并展示。
发明人在基于上述方式实施本技术方案时,发现存在如下问题:
页面中的图像是预先下载好的,但是,当应用程序版本更新,即,网页页面中的图像发生变化时,无法及时对存储的图像进行更新,导致页面渲染时,存在内容错乱的问题,进一步的,需要与原生应用程序所对应的开发人员来处理,导致人工成本较高、普适性较差的问题。
发明内容
本发明提供一种页面加载方法、装置、电子设备及存储介质,以。
第一方面,本发明实施例提供了一种页面加载方法,该方法包括:
基于接收到的页面加载请求,确定与所述页面加载请求相对应的目标地址哈希值;
基于预先确定的映射关系,确定与所述目标地址哈希值相关联的地址数据,并基于所述地址数据获取目标图像元素并存储;
基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面。
进一步的,所述确定与所述页面加载请求相对应的目标地址哈希值,包括:
确定与所述页面加载请求相对应目标页面地址;
对所述目标页面地址哈希运算,得到与所述页面加载请求相对应的目标地址哈希值。
进一步的,所述基于预先确定的映射关系,确定与所述目标地址哈希值相关联的地址数据,包括:
从预先建立的映射关系表中确定与所述目标地址哈希值相关联的至少一个待选择地址,并获取与各待选择地址相关联的图像地址、图像标识以及背景图片地址;
其中,所述映射关系表是通过对至少一个待展示页面中的图像元素解析后确定的。
进一步的,所述基于所述地址数据获取目标图像元素并存储,包括:
调取至少一个线程获取与所述图片地址和图片标识相对应的图像元素,以及与所述背景图片地址所对应的背景元素;
将所述图像元素和所述背景元素作为所述目标图像元素,并本地存储。
进一步的,所述基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面,包括:
在检测到所述渲染文本渲染完成时,调用目标脚本将所述存储地址回填至所述渲染页面中,以基于与所述存储地址对应的目标图像元素渲染出所述目标页面。
进一步的,所述基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面,包括:
在基于渲染文本渲染页面的过程中,获取与所述存储地址相对应的存储空间中是否包括目标图像元素;
若是,则将所述存储地址回填至渲染页面中,以基于与所述存储地址对应的目标图像元素渲染出目标页面。
进一步的,所述方法还包括:
确定与目标应用程序相对应的至少一个待展示页面及其页面地址哈希值;
针对各待展示页面,确定当前待展示页面中图像组件的图像地址和图像标识,以及分块布局元素的背景图片地址;
基于所述页面地址哈希值、相应的图像地址、图像标识以及背景图片地址,确定映射关系,以基于所述映射关系渲染出所述目标图像。
第二方面,本发明实施例还提供了一种页面加载装置,该装置包括:
哈希值确定模块,用于基于接收到的页面加载请求,确定与所述页面加载请求相对应的目标地址哈希值;
图像元素存储模块,用于基于预先确定的映射关系,确定与所述目标地址哈希值相关联的地址数据,并基于所述地址数据获取目标图像元素并存储;
目标页面渲染模块,用于基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面。
第三方面,本发明实施例还提供了一种电子设备所述电子设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如本发明实施例任一所述的页面加载方法。
第四方面,本发明实施例还提供了一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行如本发明实施例任一所述的页面加载方法。
本发明实施例的技术方案,在接收到页面加载请求时,确定与该请求所对应的目标地址哈希值,并基于映射关系确定与目标地址哈希值相对应地址数据,并基于地址数据获取图像元素并本地存储,以基于本地存储的图像元素和与页面加载请求相对应的渲染文本,确定出目标页面,实现了预先建立各图像元素与地址数据之间的对应关系,以在确定与页面加载请求相对应的目标地址哈希值后,可以基于对应关系确定相应的地址数据,进而调取相应的图像元素并存储,进而实现对页面中的图像元素进行渲染的技术效果,解决了现有技术中图像为预先存储的,导致应用程序版本发生变化并未及时对图像进行更新,导致页面渲染出现错误等问题。
附图说明
为了更加清楚地说明本发明示例性实施例的技术方案,下面对描述实施例中所需要用到的附图做一简单介绍。显然,所介绍的附图只是本发明所要描述的一部分实施例的附图,而不是全部的附图,对于本领域普通技术人员,在不付出创造性劳动的前提下,还可以根据这些附图得到其他的附图。
图1为本发明实施例所提供的一种页面加载方法流程示意图;
图2为本发明实施例所提供的一种映射关系示意图;
图3为本发明实施例所提供的一种页面加载方法流程示意图;
图4为本发明实施例所提供的一种页面加载装置结构示意图;
图5为本发明实施例所提供的一种电子设备结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
在介绍本发明实施例所提供的技术方案之前,可以先对应用场景进行示例性说明。为了进一步提高对页面中图像的渲染效率,可以将当前应用程序版本中所涉及到的网页图像进行预先存储,以在接收到页面渲染请求后,可以基于存储的图像进行页面渲染,此时,需要预先存储很多图像元素,并且在应用程序的版本升级后,需要及时更新与各页面所关联的图像元素,如果没有及时更新,在进行页面渲染时,可能存在页面渲染错乱等问题。基于上述问题,可以在应用程序开发完成后,对应用程序所使用的页面进行打包,并上传到相应的平台对打包文件进行解析,以确定位于页面中的各图像元素图像地址,并建立相应的对应关系,以在应用程序的版本更新后,可以修改相图像地址中相应的图像元素,从而便于页面渲染的效果。
需要说明的是,可以将本公开实施例所提供的技术方案部署在任意可以使用H5页面的应用程序中。当用户触发该应用程序以获取相应的网页页面后,可以基于本公开实施例所提供的方案来加载网页页面中的图像,从而提高图像加载效率的效果。
图1为本发明实施例所提供的一种页面加载方法流程示意图,本实施例可适用于预加载页面中的图像元素,进而达到渲染出目标页面的情形,该方法可以由页面加载装置来执行,该装置可以通过软件和/或硬件的形式实现,该硬件可以是电子设备,该电子设备可以是移动终端或者PC端等。
如图1所示,所述方法包括:
S110、基于接收到的页面加载请求,确定与页面加载请求相对应的目标地址哈希值。
需要说明的是,用户可以触发应用程序中的任意控件,可以基于触发的控件调取相应的网页页面。在触发页面调取控件后所生成的请求作为页面加载请求。基于页面加载请求可以确定调取的网页所对应的页面地址。可以采用哈希算法对页面地址加密处理,得到目标地址哈希值。也就是说,基于页面加载请求可以确定相应的页面地址,对页面地址加密处理后,可以得到与页面加载请求相对应的目标地址哈希值。
可选的,确定与页面加载请求相对应的目标地址哈希值,包括:确定与页面加载请求相对应目标页面地址;对目标页面地址哈希运算,得到与页面加载请求相对应的目标地址哈希值。
其中,目标页面地址为页面加载请求所对应的网页地址。目标哈希值是对目标页面地址哈希处理后所得到的数值。
在本实施例中,确定与目标应用程序相对应的至少一个待展示页面及其页面地址哈希值;针对各待展示页面,确定当前待展示页面中图像组件的图像地址和图像标识,以及分块布局元素的背景图片地址;基于所述页面地址哈希值、相应的图像地址、图像标识以及背景图片地址,确定映射关系,以基于所述映射关系渲染出所述目标图像。
对于前端开发人员来说,在应用程序开发完成后,可以将网页打包得到打包文件后上传至智能部署平台上。网页可以是应用程序中所使用的页面。在智能部署平台接收到上传的部署包之后,可以采用任意解析工具对部署包中的网页文件html/htm进行解析,以得到网页中的至少一个图像组件以及相应的背景图像地址。其中,图像组件可以是网页中各承载图像的控件。图像组件包括图像地址(src)和图像元素标识(id)。同时,可以采用哈希算法对网页地址进行处理,得到网页地址哈希值(webHash)。可以将网页地址哈希值作为key,即,树状图的根节点,将图像组件以及背景图像地址,作为与网页地址哈希值相关联的叶子结点,以得到如图2所示的对应关系。
可以理解为,将应用程序中各页面作为待展示页面。待展示页面有相应页面地址,可以对页面地址哈希运算,得到与待展示页面相对应的哈希值,并将此哈希值作为页面地址哈希值。进一步的,各待展示页面中可以包括多个层级架构,每个层级架构中可以包括至少一个图像元素。可以基于此,可以确定各图像元素所对应的图像地址、图像标识以及分块布局元素的背景图片地址。通过对上述地址md5运算,得到相应的md5值,即可以将图像地址替换为相应的md5值。可以建立页面地址哈希值、图像地址、图像标识以及背景图片地址之间的映射关系,可选的,映射关系可以是表格、也可以是树状图等。
在本发明实施例中,建立对应关系的好处在于,不论版本程序是否更新,只要更新相应映射关系中的地址就可以获取相应的图像元素,并渲染至显示页面中进行显示,避免了页面的渲染需要开发人员参与,导致存在成本较高的问题。
S120、基于预先确定的映射关系,确定与目标地址哈希值相关联的地址数据,并基于地址数据获取目标图像元素并存储。
其中,映射关系中主要是页面地址哈希值和页面中至少一个图片组件和背景图像元素之间的对应关系。例如,页面地址1中包括十幅图像,每一幅图像位于页面框架中的不同层级,即不同图像对应于不同的地址数据,可以建立页面地址和至少一个地址数据之间的对应关系,如图2所示。将与地址数据相一致的图像元素作为目标图像元素。也就是说,基于目标地址可以调取相应的图像元素,以渲染至显示界面上。将与目标地址哈希值相关联的地址数据所对应的图像元素,作为目标图像元素。
具体的,在确定目标哈希地址后,可以基于映射关系,确定与目标哈希地址相关联的至少一个地址数据。可以根据地址数据获取相应的目标图像元素并本地存储。
在本实施例中,存储至本地的好处在于,可以在页面渲染过程中直接获取相应的图像元素,避免从服务端获取相应的图像元素,存在等待时间较长的问题。
还需要说明的是,映射关系表是通过对至少一个待展示页面中的图像元素解析后确定的。
其中,待展示页面可以是触发应用程序后可能展示的页面。每个待展示页面中可以有相应的图像,也可以不包括图像,如果包括图像,则可以建立页面地址哈希值与图像的地址数据所对应的对应关系。
在上述技术方案的基础上,基于所述地址数据获取目标图像元素并存储,包括:调取至少一个线程获取与所述图片地址和图片标识相对应的图像元素,以及与所述背景图片地址所对应的背景元素;将所述图像元素和所述背景元素作为所述目标图像元素,并本地存储。
其中,至少一个线程的数量可以是一个或者多个。线程主要用于执行与页面加载请求相对应的任务。为了提高获取图像元素的高效性,可以确定与页面加载请求相对应的线程数量,可选的,页面加载请求对应的为页面n,根据页面n中的图像元素的数量,确定相应的线程数量。还可以是,预先设置至少一个待使用线程,在接收到页面加载请求后,可以基于剩余的待使用线程数量执行加载图像元素的任务,以调取目标图像元素。可以是本地存储,例如,存储在当前终端设备所对应的缓存空间中,还可以是预先设置的指定路径所对应的存储空间,例如,预先设定只要加载到图像元素就可以存储到某个磁盘的某个文件夹下,则在加载到目标图像元素之后,可以将目标图像元素按照指定路径进行存储。
可以理解为,在确定需要渲染至目标页面上的各图像元素所对应的地址数据之后,可以调用至少一个线程分别获取与各地址数据相对应的图像元素以及背景元素,并将所述图像元素和背景元素作为目标图像元素,并将目标图像元素本地存储,以在渲染得到目标页面的过程中基于存储在本地的目标图像元素进行页面渲染,得到包括图像元素的目标页面。
S130、基于存储目标图像元素的存储地址和与页面加载请求相对应的渲染文本,确定与页面加载请求相对应的目标页面。
其中,存储地址为本地存储目标图像元素的地址。渲染文本可以理解为一个页面中不仅包括图像还包括相应的文本,由于图像渲染比较缓慢,文字渲染比较快,可以先对文本进行渲染,以得到目标页面所对应的页面框架,以便用户确定目标页面的页面内容,进一步的,可以基于存储地址中所存储的目标图像元素进行页面中的图像渲染,以得到最终的目标页面。此时,目标页面中不仅包括图像还包括文字。
具体的,在渲染文本的过程中,可以基于存储地址确定是否存储已下载的目标图像元素,若是存在,则可以基于目标图像元素和相应的渲染文本,确定出目标页面。
在本实施例中,所述基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面,包括:在检测到所述渲染文本渲染完成时,调用目标脚本将所述存储地址回填至所述渲染页面中,以基于与所述存储地址对应的目标图像元素渲染出所述目标页面。
其中,目标脚本可以是脚本处理方法executeJavascript(),以将存储地址回填至渲染页面中。如果与存储地址所对应的存储空间中包括相应的目标图像元素,则可以将目标图像元素显示在目标页面中,以得到包括目标图像元素的目标页面。渲染页面与目标页面相对应的,顾名思义渲染页面为还未完成渲染出目标页面之前所对应的页面。
可以理解为,在目标页面中的文本渲染完成后,可以使用脚本处理方法,将存储地址回填至渲染页面中,以基于存储地址所对应的存储空间中存储的目标图像元素,渲染出目标页面。当然,在目标页面中的文本还未渲染完成时,则可以先存储目标图像元素,以在文本渲染完成后,可以调取目标图像元素进行页面渲染。
在上述技术方案的基础上,还需要说明的是,为了进一步提高对图像的渲染效率,可以在网页渲染的过程中,H5容器的webview可以执行网页记载完成的判断,可以判断存储地址中是否存储有目标图像元素,如果有,则基于目标脚本将存储地址回填至渲染页面中,以基于目标图像元素渲染出目标页面。
上述步骤可以理解为:所述基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面,包括:在基于渲染文本渲染页面的过程中,获取与所述存储地址相对应的存储空间中是否包括目标图像元素;若是,则将所述存储地址回填至渲染页面中,以基于与所述存储地址对应的目标图像元素渲染出目标页面。
也就是说,在页面渲染的过程中,可以确定存储地址所对应的存储空间中是否包括目标图像元素,如果存在,则可以将存储地址回填至渲染页面,从而渲染出包括目标图像元素的目标页面。
本发明实施例的技术方案,在接收到页面加载请求时,确定与该请求所对应的目标地址哈希值,并基于映射关系确定与目标地址哈希值相对应地址数据,并基于地址数据获取图像元素并本地存储,以基于本地存储的图像元素和与页面加载请求相对应的渲染文本,确定出目标页面,实现了预先建立各图像元素与地址数据之间的对应关系,以在确定与页面加载请求相对应的目标地址哈希值后,可以基于对应关系确定相应的地址数据,进而调取相应的图像元素并存储,进而实现对页面中的图像元素进行渲染的技术效果,解决了现有技术中图像为预先存储的,导致应用程序版本发生变化并未及时对图像进行更新,导致页面渲染出现错误等问题。
作为上述实施例的一可选实施例,图3为发明实施例所提供的一种页面加载方法流程示意图,在上述实施例的基础上,所述方法可以分为三个过程,第一个过程为网页打包上传过程,第二个过程为分解发布过程,第三个过程为获取显示过程。接下来可以结合图3来了解三个过程,即,基于三个过程依次解释本发明实施例所提供的技术方案。
第一个网页打包上传过程具体可以是:对于前端开发人员来说,其网页开发和打包方式与现有的方式相同,即在应用程序开发完成后,可以将应用程序所关联的网页页面打包上传到智能部署平台。
需要说明的是,智能部署平台仅仅是一个名称的解释,其功能主要是对打包文件进行解析,以得到页面地址和页面中图像元素的对应关系,即不论是哪一个平台,只要可以实现该功能即可。
第二个分解发布过程具体可以是:继续参见图3,可以使用Jsoup等任意解析工具解析部署包中网页文件(待展示页面)html/htm,拆解出各图像元素(图像组件)的图像地址和图像标识,以及各背景图片地址((bgImg))。对待展示页面的页面地址进行哈希运算,得到页面地址哈希值(webHash),并将页面地址哈希值作为key,存储以上拆解出来的数据,得到如图2所示的对应关系。
需要说明的是,对于图像元素来说,图像地址是直接设置道元素里的,所以,需要记录id来标志图像地址对应哪个图像元素,以便于回填时用;而背景图片地址是通过类(class)的方式设置的,即多个div可以使用相同类(class),回填时直接替换类里的背景图片地址即可。还需要说明的是,在完成拆解之后,可以将网页中的图像地址替换为相应的md5值,用于回填时替换以及避免网页请求下载图像,同时,保存处理后的网页用于H5容器请求。
第三个过程为获取显示过程,其具体可以是:继续参见图3,当用户触发客户端上某个获取网页的控件后,可以生成页面加载请求。基于页面加载请求可以是页面地址,并采用哈希运算,得到与页面加载请求相对应的目标地址哈希值(webHash)。此时,H5容器通过以webHash为入参的通用请求接口Function请求网页所需的地址关联数据。地址关联数据中包括图像地址、背景图片地址。然后,根据图像地址下载启用多线程同时下载图像数据,并将下载后的图像数据(图像元素)保存到本地(本地缓存空间中),同时,获取本地图像地址,即本地存储地址。判断渲染页面是否渲染完成,如果渲染完成,则使用脚本处理方法executeJavascript()将存储地址回填到网页中,否则,继续缓存图像元素。
另一种实施方式可以是,在页面渲染完成后,H5容器的WebView会执行方法onPageFinished(网页加载完成);在onPageFinished中,判断是否有缓存的目标图像元素,如果有,则使用脚本处理方法executeJavascript()将地址回填到网页中,以渲染出包括目标图像元素的目标页面。
通过JS回填数据的时间基本可以忽略,这样,通过多线程提前下载图像元素,就可以缩短图像的显示时长,从而提高了用户体验。也就是说,此时下载的为一个替换流图像地址的网页,下载之后可以直接显示,提高了图像显示效率的效果。本发明实施例的技术方案,在接收到页面加载请求时,确定与该请求所对应的目标地址哈希值,并基于映射关系确定与目标地址哈希值相对应地址数据,并基于地址数据获取图像元素并本地存储,以基于本地存储的图像元素和与页面加载请求相对应的渲染文本,确定出目标页面,实现了预先建立各图像元素与地址数据之间的对应关系,以在确定与页面加载请求相对应的目标地址哈希值后,可以基于对应关系确定相应的地址数据,进而调取相应的图像元素并存储,进而实现对页面中的图像元素进行渲染的技术效果,解决了现有技术中图像为预先存储的,导致应用程序版本发生变化并未及时对图像进行更新,导致页面渲染出现错误等问题。
图4为本发明实施例提供的一种页面加载装置结构示意图,如图4所述,所述装置包括:哈希值确定模块310、图像元素存储模块320以及目标页面渲染模块330。
其中,哈希值确定模块310,用于基于接收到的页面加载请求,确定与所述页面加载请求相对应的目标地址哈希值;图像元素存储模块320,用于基于预先确定的映射关系,确定与所述目标地址哈希值相关联的地址数据,并基于所述地址数据获取目标图像元素并存储;目标页面渲染模块330,用于基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面。
在上述技术方案的基础上,哈希值确定模块,包括:
地址获取单元,用于确定与所述页面加载请求相对应目标页面地址;
哈希值确定单元,用于对所述目标页面地址哈希运算,得到与所述页面加载请求相对应的目标地址哈希值。
在上述技术方案的基础上,所述图像元素存储模块,还用于:从预先建立的映射关系表中确定与所述目标地址哈希值相关联的至少一个待选择地址,并获取与各待选择地址相关联的图像地址、图像标识以及背景图片地址;其中,所述映射关系表是通过对至少一个待展示页面中的图像元素解析后确定的。
在上述技术方案的基础上,所述图像元素存储模块,包括:元素调取单元,用于调取至少一个线程获取与所述图片地址和图片标识相对应的图像元素,以及与所述背景图片地址所对应的背景元素;
存储单元,用于将所述图像元素和所述背景元素作为所述目标图像元素,并本地存储。
在上述技术方案的基础上,所述目标页面渲染模块,还用于:在检测到所述渲染文本渲染完成时,调用目标脚本将所述存储地址回填至所述渲染页面中,以基于与所述存储地址对应的目标图像元素渲染出所述目标页面。
在上述技术方案的基础上,所述目标页面渲染模块,还用于:在基于渲染文本渲染页面的过程中,获取与所述存储地址相对应的存储空间中是否包括目标图像元素;
若是,则将所述存储地址回填至渲染页面中,以基于与所述存储地址对应的目标图像元素渲染出目标页面。
在上述技术方案的基础上,所述装置还包括:页面解析模块,用于确定与目标应用程序相对应的至少一个待展示页面及其页面地址哈希值;
地址解析模块,用于针对各待展示页面,确定当前待展示页面中图像组件的图像地址和图像标识,以及分块布局元素的背景图片地址;
映射关系确定模块,用于基于所述页面地址哈希值、相应的图像地址、图像标识以及背景图片地址,确定映射关系,以基于所述映射关系渲染出所述目标图像。
本发明实施例的技术方案,在接收到页面加载请求时,确定与该请求所对应的目标地址哈希值,并基于映射关系确定与目标地址哈希值相对应地址数据,并基于地址数据获取图像元素并本地存储,以基于本地存储的图像元素和与页面加载请求相对应的渲染文本,确定出目标页面,实现了预先建立各图像元素与地址数据之间的对应关系,以在确定与页面加载请求相对应的目标地址哈希值后,可以基于对应关系确定相应的地址数据,进而调取相应的图像元素并存储,进而实现对页面中的图像元素进行渲染的技术效果,解决了现有技术中图像为预先存储的,导致应用程序版本发生变化并未及时对图像进行更新,导致页面渲染出现错误等问题。
本发明实施例所提供的页面加载装置可执行本发明任意实施例所提供的页面加载方法,具备执行方法相应的功能模块和有益效果。
值得注意的是,上述装置所包括的各个单元和模块只是按照功能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能单元的具体名称也只是为了便于相互区分,并不用于限制本发明实施例的保护范围。
图5为本发明实施例供的一种电子设备的结构示意图。图5示出了适于用来实现本发明实施例实施方式的示例性电子设备50的框图。图5显示的电子设备50仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图5所示,电子设备50以通用计算设备的形式表现。电子设备50的组件可以包括但不限于:一个或者多个处理器或者处理单元501,***存储器502,连接不同***组件(包括***存储器502和处理单元501)的总线503。
总线503表示几类总线结构中的一种或多种,包括存储器总线或者存储器控制器,***总线,图形加速端口,处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说,这些体系结构包括但不限于工业标准体系结构(ISA)总线,微通道体系结构(MAC)总线,增强型ISA总线、视频电子标准协会(VESA)局域总线以及***组件互连(PCI)总线。
电子设备50典型地包括多种计算机***可读介质。这些介质可以是任何能够被电子设备50访问的可用介质,包括易失性和非易失性介质,可移动的和不可移动的介质。
***存储器502可以包括易失性存储器形式的计算机***可读介质,例如随机存取存储器(RAM)504和/或高速缓存存储器505。电子设备50可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机***存储介质。仅作为举例,存储***506可以用于读写不可移动的、非易失性磁介质(图5未显示,通常称为“硬盘驱动器”)。尽管图5中未示出,可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器,以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下,每个驱动器可以通过一个或者多个数据介质接口与总线503相连。存储器502可以包括至少一个程序产品,该程序产品具有一组(例如至少一个)程序模块,这些程序模块被配置以执行本发明各实施例的功能。
具有一组(至少一个)程序模块507的程序/实用工具508,可以存储在例如存储器502中,这样的程序模块507包括但不限于操作***、一个或者多个应用程序、其它程序模块以及程序数据,这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块507通常执行本发明所描述的实施例中的功能和/或方法。
电子设备50也可以与一个或多个外部设备509(例如键盘、指向设备、显示器510等)通信,还可与一个或者多个使得用户能与该电子设备50交互的设备通信,和/或与使得该电子设备50能与一个或多个其它计算设备进行通信的任何设备(例如网卡,调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口511进行。并且,电子设备50还可以通过网络适配器512与一个或者多个网络(例如局域网(LAN),广域网(WAN)和/或公共网络,例如因特网)通信。如图所示,网络适配器512通过总线503与电子设备50的其它模块通信。应当明白,尽管图5中未示出,可以结合电子设备50使用其它硬件和/或软件模块,包括但不限于:微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储***等。
处理单元501通过运行存储在***存储器502中的程序,从而执行各种功能应用以及数据处理,例如实现本发明实施例所提供的页面加载方法。
本发明实施例还提供一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行页面加载方法。
该方法包括:
基于接收到的页面加载请求,确定与所述页面加载请求相对应的目标地址哈希值;
基于预先确定的映射关系,确定与所述目标地址哈希值相关联的地址数据,并基于所述地址数据获取目标图像元素并存储;
基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面。
本发明实施例的计算机存储介质,可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行***、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。
计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括——但不限于无线、电线、光缆、RF等等,或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码,所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言——诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种页面加载方法,其特征在于,包括:
基于接收到的页面加载请求,确定与所述页面加载请求相对应的目标地址哈希值;
基于预先确定的映射关系,确定与所述目标地址哈希值相关联的地址数据,并基于所述地址数据获取目标图像元素并存储;
基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面。
2.根据权利要求1所述的方法,其特征在于,所述确定与所述页面加载请求相对应的目标地址哈希值,包括:
确定与所述页面加载请求相对应目标页面地址;
对所述目标页面地址哈希运算,得到与所述页面加载请求相对应的目标地址哈希值。
3.根据权利要求1所述的方法,其特征在于,所述基于预先确定的映射关系,确定与所述目标地址哈希值相关联的地址数据,包括:
从预先建立的映射关系表中确定与所述目标地址哈希值相关联的至少一个待选择地址,并获取与各待选择地址相关联的图像地址、图像标识以及背景图片地址;
其中,所述映射关系表是通过对至少一个待展示页面中的图像元素解析后确定的。
4.根据权利要求3所述的方法,其特征在于,所述基于所述地址数据获取目标图像元素并存储,包括:
调取至少一个线程获取与所述图片地址和图片标识相对应的图像元素,以及与所述背景图片地址所对应的背景元素;
将所述图像元素和所述背景元素作为所述目标图像元素,并本地存储。
5.根据权利要求1所述的方法,其特征在于,所述基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面,包括:
在检测到所述渲染文本渲染完成时,调用目标脚本将所述存储地址回填至所述渲染页面中,以基于与所述存储地址对应的目标图像元素渲染出所述目标页面。
6.根据权利要求1所述的方法,其特征在于,所述基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面,包括:
在基于渲染文本渲染页面的过程中,获取与所述存储地址相对应的存储空间中是否包括目标图像元素;
若是,则将所述存储地址回填至渲染页面中,以基于与所述存储地址对应的目标图像元素渲染出目标页面。
7.根据权利要求2所述的方法,其特征在于,还包括:
确定与目标应用程序相对应的至少一个待展示页面及其页面地址哈希值;
针对各待展示页面,确定当前待展示页面中图像组件的图像地址和图像标识,以及分块布局元素的背景图片地址;
基于所述页面地址哈希值、相应的图像地址、图像标识以及背景图片地址,确定映射关系,以基于所述映射关系渲染出所述目标图像。
8.一种页面加载装置,其特征在于,包括:
哈希值确定模块,用于基于接收到的页面加载请求,确定与所述页面加载请求相对应的目标地址哈希值;
图像元素存储模块,用于基于预先确定的映射关系,确定与所述目标地址哈希值相关联的地址数据,并基于所述地址数据获取目标图像元素并存储;
目标页面渲染模块,用于基于存储所述目标图像元素的存储地址和与所述页面加载请求相对应的渲染文本,确定与所述页面加载请求相对应的目标页面。
9.一种电子设备,其特征在于,所述电子设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-7中任一所述的页面加载方法。
10.一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-7中任一所述的页面加载方法。
CN202310127165.4A 2023-02-02 2023-02-02 页面加载方法、装置、电子设备及存储介质 Pending CN116204749A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310127165.4A CN116204749A (zh) 2023-02-02 2023-02-02 页面加载方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310127165.4A CN116204749A (zh) 2023-02-02 2023-02-02 页面加载方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN116204749A true CN116204749A (zh) 2023-06-02

Family

ID=86507287

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310127165.4A Pending CN116204749A (zh) 2023-02-02 2023-02-02 页面加载方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN116204749A (zh)

Similar Documents

Publication Publication Date Title
CN108037961B (zh) 一种应用程序配置方法、装置、服务器和存储介质
US9747124B2 (en) Distributed virtual machine image management for cloud computing
CN111381852A (zh) 基于Flutter的应用动态更新方法、装置、存储介质及电子设备
US11979300B2 (en) Standardized format for containerized applications
CN109194606B (zh) 攻击检测***、方法、计算机设备及存储介质
CN111740948B (zh) 数据包发布方法、动态更新方法、装置、设备及介质
KR101557211B1 (ko) 소프트웨어 애플리케이션 전달 및 개시 시스템
US9325717B1 (en) Web-store restriction of external libraries
CN111680253A (zh) 页面应用数据包生成方法、装置、计算机设备及存储介质
CN107798064B (zh) 页面处理方法、电子设备及计算机可读存储介质
CN113761412A (zh) 应用页面的显示方法、装置、电子设备、介质及应用***
CN112905179A (zh) 移动端h5页面生成方法、装置、电子设备和存储介质
US10594764B2 (en) Request cache to improve web applications performance
CN115982491A (zh) 页面更新方法及装置、电子设备和计算机可读存储介质
US8191041B2 (en) Javascript pre-processing framework
CN112149035A (zh) 网站静态资源处理方法及装置
CN113760306A (zh) 安装软件的方法、装置、电子设备及存储介质
CN111562929A (zh) 补丁文件的生成方法、装置、设备及存储介质
CN116204749A (zh) 页面加载方法、装置、电子设备及存储介质
WO2022028046A1 (zh) 图片配置方法、装置、***和存储介质
US8793663B2 (en) Smart cache for a server test environment in an application development tool
CN114489698A (zh) 应用程序安装方法和装置
CN109101429B (zh) 一种机顶盒的浏览器页面调试的方法及装置
CN113687880A (zh) 一种调用组件的方法、装置、设备和介质
CN113761419A (zh) 拓扑信息的显示方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination