页面加载方法、装置、电子设备以及存储介质与流程

1.本技术实施例涉及计算机技术以及网络直播技术领域，尤其涉及一种页面加载方法、装置、电子设备以及存储介质。


背景技术：

2.随着移动互联网技术的发展，应用程序的功能越来越强大。同时，h5页面(基于html5技术开发的网页页面)因其灵活性高、开发成本低、制作周期短等优势，在应用程序中的应用也越来越普遍。在一些支持国际化的应用程序内的h5页面中，经常需要加载多语言资源，以实现h5页面的多语言展示。例如，在国际化的直播应用中，直播应用内的页面文案需要支持多国语言，需要提供多语言模式，以适应不同国家或地区的用户使用。
3.相关技术中，在实现应用程序内页面的多语言展示过程中，需要加载各种语言的语言资源，导致页面加载速度慢，影响用户体验。


技术实现要素：

4.本技术实施例提供了一种页面加载方法、装置、电子设备以及存储介质，可以提高页面加载速度、提升用户体验，该技术方案如下：
5.第一方面，本技术实施例提供了一种页面加载方法，方法包括如下步骤：
6.响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识；
7.根据页面文件以及目标语言标识，生成目标页面文件；其中，目标页面文件包括页面文案标识以及目标语言标识对应的目标语言资源链接；
8.加载目标页面文件，从目标语言资源链接获取目标语言资源；根据页面文案标识，从目标语言资源中获取对应的目标页面文案内容，显示目标页面。
9.第二方面，本技术实施例提供了一种页面加载装置，包括：
10.页面文件获取模块，用于响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识；
11.目标页面文件生成模块，用于根据页面文件以及目标语言标识，生成目标页面文件；其中，目标页面文件包括页面文案标识以及目标语言标识对应的目标语言资源链接；
12.目标页面显示模块，用于加载目标页面文件，从目标语言资源链接获取目标语言资源；根据页面文案标识，从目标语言资源中获取对应的目标页面文案内容，显示目标页面。
13.第三方面，本技术实施例提供了一种电子设备，处理器、存储器以及存储在存储器中并可在处理器上运行的计算机程序，处理器执行计算机程序时实现如第一方面方法的步骤。
14.第四方面，本技术实施例提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现如第一方面方法的步骤。
15.本技术实施例通过响应于对目标页面的页面访问操作，获取页面文件以及目标语
言标识；根据页面文件以及目标语言标识，生成目标页面文件；其中，目标页面文件包括页面文案标识以及目标语言标识对应的目标语言资源链接；加载目标页面文件，从目标语言资源链接获取目标语言资源；根据页面文案标识，从目标语言资源中获取对应的目标页面文案内容，显示目标页面。本技术通过获取页面文件以及目标语言标识，生成目标页面文件，加载目标页面文件时，只需加载目标语言标识对应的目标语言资源，避免了加载其他语言的语言资源，提高了页面加载速度，提升了用户体验。
16.为了更好地理解和实施，下面结合附图详细说明本技术的技术方案。
附图说明
17.图1为本技术实施例提供的页面加载方法的流程示意图；
18.图2为本技术实施例提供的页面加载装置的结构示意图；
19.图3为本技术实施例提供的电子设备的结构示意图。
具体实施方式
20.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本技术的一些方面相一致的装置和方法的例子。
21.在本技术使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本技术。在本技术和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
22.应当理解，尽管在本技术可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本技术范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”/“若”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”。
23.本技术提供的页面加载方法，用于页面的多语言展示。具体可以应用在各种客户端设备中。其中，客户端设备可以是手机、平板电脑、计算机等。以客户端设备为手机为例，该客户端设备中可以安装有各种国际化的应用程序，比如直播应用、视频应用、游戏应用等。
24.本技术实施例以页面加载方法应用于直播应用为例进行说明。为了让不同国家或地区的用户使用直播应用，直播应用内的页面文案需要支持多国语言，需要提供多语言模式。
25.相关技术中，一种方案是将所有的多语言资源以属性文件的形式存储在直播应用的安装包中，在进行页面加载时，直播应用会将所有的多语言资源进行加载，导致页面加载速度慢，影响了用户体验。另一种方案是打开直播应用的页面时，页面文件中包含所有多语言资源的资源链接，加载页面文件，执行页面文件的逻辑代码，再根据页面需要显示的语言，确定该语言对应的语言资源链接，向服务器请求相应的语言资源。由于需要先执行页面
文件的逻辑代码，再请求相应的语言资源，使得语言资源加载延后，从而页面加载相应延后，降低了页面加载速度，影响了用户体验。
26.为此，本技术提供了一种页面加载方法。
27.请参阅图1，图1为本技术实施例提供的页面加载方法的流程示意图，该方法包括如下步骤：
28.s10：响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识。
29.其中，页面文件为h5页面的html文件，其本质是html字符串，具体形式为：《html》《head》《/head》《body》《/body》《/html》。
30.目标语言标识用于唯一标识目标语言，目标语言标识可以是语言名称、语言编号等。目标语言为目标页面中显示的语言，可以是多种语言中的一种语言。例如，多种语言包括中文、英语、法语以及德语，目标语言为英语。
31.在本技术实施例中，页面访问操作可以是用户启动客户端上的应用程序后，请求使用具体的在线h5业务时发出的。其中，应用程序可以为直播应用。具体地，可以是用户访问直播应用的某个h5页面，也可以是用户访问直播应用的某个h5页面后，需要切换当前h5页面的语言语种。响应于用户对目标页面对页面访问操作，直播应用从服务器拉取页面文件以及直播应用从本地客户端获取目标语言标识。
32.s20：根据页面文件以及目标语言标识，生成目标页面文件；其中，目标页面文件包括页面文案标识以及目标语言标识对应的目标语言资源链接。
33.其中，页面文案标识用于标识页面文案，页面文案标识可以是页面文案的id。具体地，页面文案标识可以用数值表示，也可以用字符串表示。页面文案是指页面的文本元素。
34.目标语言资源链接用于指示目标语言资源在服务器中的存储位置，目标语言资源链接可以是目标语言资源的统一资源定位符。例如，目标语言为英语，则目标语言资源链接为：https://xxx.xxx.xxxx/en.json。
35.在本技术中，客户端获取到页面文件以及目标语言标识，将目标语言标识对应的目标语言资源链接添加到页面文件中，获得目标页面文件。
36.s30：加载目标页面文件，从目标语言资源链接获取目标语言资源；根据页面文案标识，从目标语言资源中获取对应的目标页面文案内容，显示目标页面。
37.其中，目标语言资源包括页面文案标识以及页面文案标识对应的目标语言文案内容。具体地，目标语言资源可以为json格式的数据。其中，json格式的数据中json对象的名称为页面文案标识符，json对象的值为页面文案标识符对应的目标语言文案内容。例如，页面文案标识包括text-name、text-age、text-city，若目标语言为英语，则目标语言资源包括页面文案标识text-name以及对应的目标语言文案内容name，页面文案标识text-age以及对应的目标语言文案内容age，页面文案标识text-city以及对应的目标语言文案内容city。若目标语言为中文，则目标语言资源包括页面文案标识text-name以及对应的目标语言文案内容：姓名，页面文案标识text-age以及对应的目标语言文案内容：年龄，页面文案标识text-city以及对应的目标语言文案内容：城市。
38.在本技术实施例中，通过应用程序webview加载目标页面文件，将目标语言资源中的目标语言文案内容作为页面文案标识符对应的目标页面文案内容，从而实现以目标语言展示目标页面。其中，webview是一种控件，它基于webkit引擎，具备渲染h5页面的功能，可
以是webview嵌入在应用程序内，实现目标页面的渲染。
39.应用本技术实施例通过响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识；根据页面文件以及目标语言标识，生成目标页面文件；其中，目标页面文件包括页面文案标识以及目标语言标识对应的目标语言资源链接；加载目标页面文件，从目标语言资源链接获取目标语言资源；根据页面文案标识，从目标语言资源中获取对应的目标页面文案内容，显示目标页面。本技术通过获取页面文件以及目标语言标识，生成目标页面文件，加载目标页面文件，只加载目标语言标识对应的目标语言资源，避免了加载其他语言的语言资源，提高了页面加载速度，提升了用户体验。
40.在一个可选的实施例中，步骤s10之前，包括步骤s1，具体如下：
41.s1：响应于对目标语言的选择操作，生成目标语言标识。
42.在本技术实施例中，应用程序设置有多语言切换按钮，用户点击多语言切换按钮，显示多语言列表，用户在多语言列表中选择目标语言，应用程序生成目标语言标识，并存储在本地客户端。
43.通过生成目标语言标识，以便用户在进行页面访问时，应用程序可以根据目标语言标识，生成目标语言文件。
44.在一个可选的实施例中，步骤s20，包括步骤s21～s23，具体如下：
45.s21：根据预设的语言标识与语言资源链接之间的映射关系，确定目标语言标识对应的目标语言资源链接；
46.s22：根据目标语言资源链接，生成脚本文件；
47.s23：将脚本文件添加至页面文件，生成目标页面文件。
48.其中，在预设的语言标识与语言资源链接之间的映射关系中，一个语言标识对应唯一的一个语言资源链接。例如，语言标识为zh，对应的语言资源链接为：https://xxx.xxx.xxxx/zh.json，语言标识为en，对应的语言资源链接为：https://xxx.xxx.xxxx/en.json。
49.在本技术实施例中，脚本文件为javascript，脚本文件的形式为script标签。具体地，通过script标签的src属性指向脚本文件，表示为：
50.《script src＝"https://xxx.xxx.xxxx/en.json"》《/script》。
51.页面文件包括head标签以及body标签，将脚本文件对应的script标签插入至head标签或者body标签，生成目标页面文件。
52.通过将目标资源链接添加到页面文件，可以自动快捷地生成目标页面文件。
53.在一个可选的实施例中，步骤s23，包括步骤s231，具体如下：
54.s231：将脚本文件插入至页面文件的头部标签内，生成目标页面文件。
55.在本技术实施例中，以目标语言为英文为例，目标页面文件的形式为：
56.《html》《head》《script src＝"https://xxx.xxx.xxxx/en.json"》《/script》《/head》《body》《/body》《/html》。
57.由于目标页面文件加载过程中，是先加载head标签，再加载body标签，将脚本文件插入至头部标签(head标签)，可以使得脚本文件在任何调用之前被加载，在《body》标签调用时就不需要再加载了，从而提高了页面资源加载速度，相应地提高了页面加载速度。
58.在一个可选的实施例中，步骤s30，包括步骤s31～s32，具体如下：
59.s31：加载目标页面文件，获取目标语言资源链接；
60.s32：根据目标语言资源链接，从服务器下载目标语言资源。
61.在本技术实施例中，加载目标页面文件，解析目标页面文件中的脚本文件，获得目标语言资源链接。服务器中预先存储有各个语言资源链接对应的语言资源，通过目标语言资源链接，从服务器下载相应的目标语言资源。
62.通过目标语言资源链接，从服务器下载目标语言资源，无须加载所有语言的语言资源，提高了页面加载速度。
63.在一个可选的实施例中，步骤s30，包括步骤s33～s34，具体如下：
64.s33：将目标语言资源中与页面文案标识对应的目标语言文案内容确定为目标页面文案内容；
65.s34：将目标页面文案内容填充至目标页面中对应的页面文案标识，显示目标页面。
66.在本技术实施例中，目标页面包括若干个页面文案标识，目标语言资源中包括若干个页面文案标识以及每个页面文案标识对应的目标语言文案内容。
67.通过页面文案标识，在目标语言资源中查找对应的目标语言文案内容，作为目标页面文案内容，从而可以在渲染目标页面时用目标页面文案内容替换相应的页面文案标识，进而实现目标语言展示目标页面。
68.请参阅图2，图2为本技术实施例提供的页面加载装置的结构示意图。该装置可以通过软件、硬件或两者的结合实现成为计算机设备的全部或一部分。本技术实施例提供的页面加载装置4，包括：
69.页面文件获取模块41，用于响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识；
70.目标页面文件生成模块42，用于根据页面文件以及目标语言标识，生成目标页面文件；其中，目标页面文件包括页面文案标识以及目标语言标识对应的目标语言资源链接；
71.目标页面显示模块43，用于加载目标页面文件，从目标语言资源链接获取目标语言资源；根据页面文案标识，从目标语言资源中获取对应的目标页面文案内容，显示目标页面。
72.需要说明的是，上述实施例提供的页面加载装置在执行页面加载方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分为不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的页面加载装置与页面加载方法属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。
73.请参阅图3，图3为本技术提供的电子设备的结构示意图。如图3所示，该电子设备21可以包括：处理器210、存储器211以及存储在该存储器211并可以在该处理器210上运行的计算机程序212，例如：页面加载程序；该处理器210执行该计算机程序212时实现上述实施例中的步骤。
74.其中，该处理器210可以包括一个或多个处理核心。处理器210利用各种接口和线路连接计算机设备21内的各个部分，通过运行或执行存储在存储器211内的指令、程序、代码集或指令集，以及调用存储器211内的数据，执行计算机设备21的各种功能和处理数据，
可选的，处理器210可以采用数字信号处理(digital signal processing,dsp)、现场可编程门阵列(field-programmable gate array，fpga)、可编程逻辑阵列(programble logic array，pla)中的至少一个硬件形式来实现。处理器210可集成中央处理器(central processing unit，cpu)、图像处理器(graphics processing unit，gpu)和调制解调器等中的一种或几种的组合。其中，cpu主要处理操作系统、用户界面和应用程序等；gpu用于负责触摸显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器210中，单独通过一块芯片进行实现。
75.其中，存储器211可以包括随机存储器(random access memory，ram)，也可以包括只读存储器(read-only memory)。可选的，该存储器211包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器211可用于存储指令、程序、代码、代码集或指令集。存储器211可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控指令等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器211可选的还可以是至少一个位于远离前述处理器210的存储装置。
76.本技术实施例还提供了一种计算机存储介质，该计算机存储介质可以存储有多条指令，该指令适用于由处理器加载并执行上述实施例的方法步骤，具体执行过程可以参见上述实施例的具体说明，在此不进行赘述。
77.所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本技术的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
78.在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。
79.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
80.在本发明所提供的实施例中，应该理解到，所揭露的装置/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。
81.作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的
部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
82.另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
83.集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，计算机程序包括计算机程序代码，计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。
84.本发明并不局限于上述实施方式，如果对本发明的各种改动或变形不脱离本发明的精神和范围，倘若这些改动和变形属于本发明的权利要求和等同技术范围之内，则本发明也意图包含这些改动和变形。

技术特征：
1.一种页面加载方法，其特征在于，包括如下步骤：响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识；根据所述页面文件以及所述目标语言标识，生成目标页面文件；其中，所述目标页面文件包括页面文案标识以及所述目标语言标识对应的目标语言资源链接；加载所述目标页面文件，从所述目标语言资源链接获取目标语言资源；根据所述页面文案标识，从所述目标语言资源中获取对应的目标页面文案内容，显示所述目标页面。2.根据权利要求1所述的页面加载方法，其特征在于：所述根据所述页面文件以及所述目标语言标识，生成目标页面文件的步骤，包括：根据预设的语言标识与语言资源链接之间的映射关系，确定所述目标语言标识对应的目标语言资源链接；根据所述目标语言资源链接，生成脚本文件；将所述脚本文件添加至所述页面文件，生成目标页面文件。3.根据权利要求2所述的页面加载方法，其特征在于：所述将所述脚本文件添加至所述页面文件，生成目标页面文件的步骤，包括：将所述脚本文件插入至所述页面文件的头部标签内，生成目标页面文件。4.根据权利要求1所述的页面加载方法，其特征在于：所述目标语言资源包括页面文案标识符以及对应的目标语言文案内容；所述根据所述页面文案标识，从所述目标语言资源中获取对应的目标页面文案内容，显示所述目标页面的步骤，包括：将所述目标语言资源中与所述页面文案标识对应的目标语言文案内容确定为所述目标页面文案内容；将所述目标页面文案内容填充至所述目标页面中对应的所述页面文案标识，显示所述目标页面。5.根据权利要求1所述的页面加载方法，其特征在于：所述加载所述目标页面文件，从所述目标语言资源链接获取目标语言资源的步骤，包括：加载所述目标页面文件，获取所述目标语言资源链接；根据所述目标语言资源链接，从服务器下载目标语言资源。6.根据权利要求1至5任意一项所述的页面加载方法，其特征在于：所述响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识的步骤之前，包括：响应于对目标语言的选择操作，生成目标语言标识。7.根据权利要求1至5任意一项所述的页面加载方法，其特征在于：所述目标语言资源为json格式的数据；其中，所述json格式的数据中json对象的名称为页面文案标识符，json对象的值为所述页面文案标识符对应的目标语言文案内容。8.一种页面加载装置，其特征在于，包括：页面文件获取模块，用于响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识；目标页面文件生成模块，用于根据所述页面文件以及所述目标语言标识，生成目标页
面文件；其中，所述目标页面文件包括页面文案标识以及所述目标语言标识对应的目标语言资源链接；目标页面显示模块，用于加载所述目标页面文件，从所述目标语言资源链接获取目标语言资源；根据所述页面文案标识，从所述目标语言资源中获取对应的目标页面文案内容，显示所述目标页面。9.一种电子设备，包括：处理器、存储器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任意一项所述方法的步骤。10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任意一项所述方法的步骤。

技术总结
本申请涉及计算机技术领域，提出一种页面加载方法、装置、电子设备以及存储介质，该方法包括：响应于对目标页面的页面访问操作，获取页面文件以及目标语言标识；根据页面文件以及目标语言标识，生成目标页面文件；其中，目标页面文件包括页面文案标识以及目标语言标识对应的目标语言资源链接；加载目标页面文件，从目标语言资源链接获取目标语言资源；根据页面文案标识，从目标语言资源中获取对应的目标页面文案内容，显示目标页面。本申请通过获取页面文件以及目标语言标识，生成目标页面文件，加载目标页面文件，只加载目标语言标识对应的目标语言资源，避免了加载其他语言的语言资源，提高了页面加载速度，提升了用户体验。提升了用户体验。提升了用户体验。


技术研发人员：黄富华
受保护的技术使用者：广州方硅信息技术有限公司
技术研发日：2023.05.18
技术公布日：2023/8/28