CN117435276A - 浏览器页面显示方法、装置、设备、存储介质及程序产品 - Google Patents

Abstract

本公开涉及一种浏览器页面显示方法、装置、设备、存储介质及程序产品，能够降低应用研发的复杂度。该方法包括：响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块；根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系；按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。

Description

浏览器页面显示方法、装置、设备、存储介质及程序产品

技术领域

本公开涉及直播技术领域，尤其涉及一种浏览器页面显示方法、装置、电子设备、存储介质及程序产品。

背景技术

目前，现有在浏览器中加载脚本模块(例如加载ESM模块)的方案，主要依托于复杂的第三方构建工具(如webpack、rollup)对脚本模块进行统一的前置打包，浏览器加载并运行打包后的产物。

因此，为了使浏览器能够加载脚本模块，在浏览器研发过程中需要加入第三方构建工具对脚本模块进行打包处理，如此使得浏览器研发的复杂度较高。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本公开提供了一种浏览器页面显示方法、装置、电子设备、存储介质及程序产品。

本公开实施例的第一方面，提供一种浏览器页面显示方法，该方法包括：响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块；根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系；按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。

可选地，该根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系，包括：通过词法解析器对该入口脚本模块进行递归解析，得到语法树，该语法树用于保存该目标依赖关系。

可选地，该通过词法解析器对该入口脚本模块进行递归解析，得到语法树，包括：通过词法解析器对该入口脚本模块进行解析，得到该入口脚本模块依赖至少一个第一脚本模块，基于该入口脚本模块和该入口脚本模块依赖的至少一个第一脚本模块生成语法树；确定第一脚本模块为目标脚本模块，执行通过词法解析器对目标脚本模块进行解析，得到该目标脚本模块依赖至少一个第一脚本模块，并基于目标脚本模块和该目标脚本模块依赖的至少一个第一脚本模块更新该语法树；返回执行确定第一脚本模块为目标脚本模块，直到该目标脚本模块不依赖任何第一脚本模块；其中，每个第一脚本模块为该各个脚本模块中的一个。

可选地，该通过词法解析器对该入口脚本模块进行解析，包括：确定该入口脚本模块的类型；根据该入口脚本模块的类型，确定与该入口脚本模块对应的目标词法解析器；通过该目标词法解析器对该入口脚本模块进行解析。

可选地，该通过词法解析器对目标脚本模块进行解析，包括：获取该目标浏览器页面对应的该入口脚本模块的标识；根据该入口脚本模块的标识，获取入口脚本模块的超文本传输安全协议HTTPS地址；基于该入口脚本模块对应的HTTPS地址，加载该入口脚本模块，以得到该入口脚本模块的代码；通过词法解析器解析该入口脚本模块的代码，得到至少一个标识，该至少一个标识中的每个标识指示该入口脚本模块依赖的一个第一脚本模块。

可选地，该按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块依赖的脚本模块，依次运行该各个脚本模块的代码，包括：按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块依赖的脚本模块，依次将该各个脚本模块的代码在该浏览器的本地存储中运行，以得到该各个脚本模块的代码的运行结果；将该各个脚本模块的代码的运行结果分别存储在该本地存储中，得到该各个脚本模块的代码的运行结果的本地存储地址；根据该各个脚本模块的代码的运行结果的本地存储地址，生成该各个脚本模块的本地存储依赖路径。

本公开实施例的第二方面，提供一种浏览器页面显示装置，该装置包括：确定模块和运行模块；该确定模块，用于响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块；根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系；该运行模块，用于按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。

可选地，该确定模块，具体用于通过词法解析器对该入口脚本模块进行递归解析，得到语法树，该语法树用于保存该目标依赖关系。

可选地，该确定模块，具体用于通过词法解析器对该入口脚本模块进行解析，得到该入口脚本模块依赖至少一个第一脚本模块，基于该入口脚本模块和该入口脚本模块依赖的至少一个第一脚本模块生成语法树；确定第一脚本模块为目标脚本模块，执行通过词法解析器对目标脚本模块进行解析，得到该目标脚本模块依赖至少一个第一脚本模块，并基于目标脚本模块和该目标脚本模块依赖的至少一个第一脚本模块更新该语法树；返回执行确定第一脚本模块为目标脚本模块，直到该目标脚本模块不依赖任何第一脚本模块；其中，每个第一脚本模块为该各个脚本模块中的一个。

可选地，该确定模块，具体用于确定该入口脚本模块的类型；根据该入口脚本模块的类型，确定与该入口脚本模块对应的目标词法解析器；通过该目标词法解析器对该入口脚本模块进行解析。

可选地，该确定模块，具体用于获取该目标浏览器页面对应的该入口脚本模块的标识；根据该入口脚本模块的标识，获取入口脚本模块的超文本传输安全协议HTTPS地址；基于该入口脚本模块对应的HTTPS地址，加载该入口脚本模块，以得到该入口脚本模块的代码；通过词法解析器解析该入口脚本模块的代码，得到至少一个标识，该至少一个标识中的每个标识指示该入口脚本模块依赖的一个第一脚本模块。

可选地，该运行模块，具体用于按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块依赖的脚本模块，依次将该各个脚本模块的代码在该浏览器的本地存储中运行，以得到该各个脚本模块的代码的运行结果；将该各个脚本模块的代码的运行结果分别存储在该本地存储中，得到该各个脚本模块的代码的运行结果的本地存储地址；根据该各个脚本模块的代码的运行结果的本地存储地址，生成该各个脚本模块的本地存储依赖路径。

本公开实施例的第三方面，提供一种电子设备，该电子设备包括处理器、存储器及存储在该存储器上并可在该处理器上运行的计算机程序，该计算机程序被该处理器执行时实现如第一方面所述的浏览器页面显示方法。

本公开实施例的第四方面，提供一种计算机可读存储介质，该计算机可读存储介质上存储计算机程序，该计算机程序被处理器执行时实现如第一方面所述的浏览器页面显示方法。

本公开实施例的第五方面，提供了一种计算机程序产品，其中，该计算机程序产品包括计算机程序，当该计算机程序产品在处理器上运行时，使得处理器执行该计算机程序，实现如第一方面所述的浏览器页面显示方法。

本公开实施例的第六方面，提供了一种芯片，该芯片包括处理器和通信接口，该通信接口和该处理器耦合，该处理器用于运行程序指令，实现如第一方面所述的浏览器页面显示方法。

本公开实施例提供的技术方案与现有技术相比具有如下优点：本公开实施例中，响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块；根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系；按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。如此可以直接在浏览器中实现脚本模块的加载与运行，无需复杂的构建工具参与应用研发，可以降低研发的复杂度，而且在研发过程中无需考虑浏览器与构建工具的适配性，上述方案对浏览器的适配性较好，可以进一步降低研发的复杂度。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本公开实施例提供的浏览器页面显示方法的流程示意图之一；

图2为本公开实施例提供的浏览器页面显示方法的流程示意图之二；

图3为本公开实施例提供的一种对入口ESM模块进行递归解析的流程示意图；

图4为本公开实施例提供的一种解析入口ESM模块得到的语法树的示意图；

图5为本公开实施例提供的一种浏览器页面显示装置的结构框图；

图6为本公开实施例提供的一种电子设备的结构框图。

具体实施方式

为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。

本公开的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。

本公开实施例中的电子设备可以为移动电子设备，也可以为非移动电子设备。移动电子设备可以为手机、平板电脑、笔记本电脑、掌上电脑、车载电子设备、可穿戴设备、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本或者个人数字助理(personal digital assistant，PDA)等；非移动电子设备可以为个人计算机(personalcomputer，PC)、电视机(television，TV)、柜员机或者自助机等；本公开实施例不作具体限定。

本公开实施例提供的浏览器页面显示方法的执行主体可以为上述的电子设备(包括移动电子设备和非移动电子设备)，也可以为该电子设备中能够实现该浏览器页面显示方法的功能模块和/或功能实体，具体的可以根据实际使用需求确定，本公开实施例不作限定。

下面结合附图，通过具体的实施例及其应用场景对本公开实施例提供的浏览器页面显示方法进行详细地说明。

如图1所示，本公开实施例提供一种浏览器页面显示方法，该方法可以包括下述的步骤101至步骤104。

101、响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块。

其中，触发操作可以为用户在浏览器的用于指示目标浏览器页面的控件上的点击操作、滑动操作等，具体可以根据实际情况确定，此处不做限定。

其中，脚本模块是一种前端模块化脚本模块，例如脚本模块可以为欧洲计算机制造商协会脚本模块(European Computer Manufacturers Association Script module，ECMAScript module，ESM)，简称ESM模块，ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言。ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。

其中，每个浏览器页面对应不同的入口脚本模块，因此，响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块。

102、根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系。

其中，各个脚本模块包括入口脚本模块直接依赖的脚本模块和间接依赖的脚本模块。

其中，一个脚本模块依赖另一个脚本模，表示该一个模块的输入包括该另一个模块的输出，该另一个模块的变化会使得该一个模块也变化。依赖关系也可以称为调用关系，一个脚本模块依赖另一个脚本模块即为该一个脚本模块执行需要调用该另一个脚本模块的执行结果。

可以理解，脚本模块1的输入包括脚本模块2的输出，则表示该脚本模块1依赖该脚本模块2，该脚本模块1和该脚本模块2存在直接依赖关系(脚本模块2为脚本模块1直接依赖的脚本模块)；又脚本模块2的输入包括脚本模块3的输出，则表示该脚本模块2依赖该脚本模块3，该脚本模块2和该脚本模块3存在直接依赖关系(脚本模块3为脚本模块2直接依赖的脚本模块)，脚本模块1和该脚本模块3存在间接依赖关系(脚本模块3为脚本模块1间接依赖的脚本模块)；脚本模块2和脚本模块3也成为被依赖模块。

103、按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径。

其中，各个脚本模块包括直接被入口脚本模块依赖的模块和间接被入口脚本模块依赖的模块，最底层被依赖脚本模块即末端被依赖脚本模块，最底层被依赖脚本模块是其他脚本模块依赖的模块，但最底层被依赖脚本模块不依赖其他脚本模块。

其中，本地存储(Local Storage)，浏览器对应的存储空间，web应用程序能够在用户浏览器中对数据进行本地的存储。本地存储依赖路径，是指各个脚本模块的代码的运行结果在浏览器本地存储中，按照目标依赖关系进行存储的存储路径，基于本地存储依赖路径便于后续获取各个脚本模块的代码的运行结果，并基于该各个脚本模块的代码的运行结果渲染目标浏览器页面。

104、基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。

本公开实施例中，响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块；根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系；按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。如此可以直接在浏览器中实现脚本模块的加载与运行，无需复杂的构建工具参与应用研发，可以降低研发的复杂度，而且在研发过程中无需考虑浏览器与构建工具的适配性，上述方案对浏览器的适配性较好，可以进一步降低研发的复杂度。

可以理解，本公开实施例中，通过响应于对目标浏览器页面的触发操作，解析该目标浏览器页面对应的入口脚本模块，根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系；根据该目标依赖关系，按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。如此可以直接在浏览器中实现脚本模块的加载与运行，无需复杂的构建工具参与应用研发，可以降低研发的复杂度，而且在研发过程中无需考虑浏览器与构建工具的适配性，上述方案对浏览器的适配性较好，可以进一步降低研发的复杂度。

可选地，本公开实施例中，可以通过编程实现对脚本模块的解析，也可以通过词法分析器实现对脚本模块的解析，还可以通过其他方式实现对脚本模块的解析，具体可以根据实际情况确定，此处不做限定。

可选地，本公开实施例中，可以通过抽象语法树的方式保存入口脚本模块和各个脚本模块之间的目标依赖关系，也可以通过其他方式保存目标依赖关系，具体可以根据实际情况确定，此处不做限定。

其中，目标依赖关系可以通过语法树表示出来。

可选地，上述步骤102具体可以通过下述步骤102a实现。

102a、通过词法解析器对该入口脚本模块进行递归解析，得到语法树。

其中，该语法树用于保存该目标依赖关系。语法树也可以称为抽象语法树。可以理解，该语法树用于保存入口脚本模块与各个脚本模块之间的依赖关系。

在计算机科学中，抽象语法树(Abstract Syntax Tree，AST)，或简称语法树(Syntax tree)，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

其中，词法解析器可以通过对入口脚本模块进行词法和语法上的递归解析，得到语法树。

若通过语法树保存该目标依赖关系，则上述步骤103具体可以为按照语法树，从叶子节点到根节点，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径。

本公开实施例中，通过词法解析器对入口脚本模块进行递归解析，得到语法树，可以提高对脚本模块的加载和运行效率，对浏览器的适配性较好，可以进一步降低研发的复杂度。

可选地，如图2所示，上述步骤102a可以通过下述步骤201至步骤205实现。

201、通过词法解析器对该入口脚本模块进行解析，得到该入口脚本模块依赖至少一个第一脚本模块。

202、基于该入口脚本模块和该入口脚本模块依赖的至少一个第一脚本模块生成语法树。

203、确定第一脚本模块为目标脚本模块，执行通过词法解析器对目标脚本模块进行解析，得到该目标脚本模块依赖至少一个第一脚本模块。

204、基于目标脚本模块和该目标脚本模块依赖的至少一个第一脚本模块更新该语法树。

205、返回执行确定第一脚本模块为目标脚本模块，直到该目标脚本模块不依赖任何第一脚本模块。

其中，每个第一脚本模块为该各个脚本模块中的一个。

具体地，递归解析即为将目标脚本模块解析得到目标脚本模块依赖的脚本模块，然后将目标脚本模块依赖的脚本模块作为目标脚本模块再去解析，得到目标脚本模块依赖的脚本模块所依赖的脚本模块，然后以此类推，一层一层地去解析，最终当解析得到的目标脚本模块不存在依赖的脚本模块时，解析完成，得到入口脚本模块和各个脚本模块之间的目标依赖关系，根据目标依赖关系得到语法树。

示例性地，如图3所示，以脚本模块为ESM模块为例，通过词法解析器对入口ESM模块进行解析得到入口ESM模块依赖至少一个第一ESM模块，根据入口ESM模块和入口ESM模块依赖的至少一个第一ESM模块生成语法树。将第一ESM模块确定为目标ESM模块，通过词法解析器对目标ESM模块进行解析，是否解析得到目标ESM模块依赖至少一个第一ESM模块，若解析得到目标ESM模块依赖至少一个第一ESM模块，则根据目标ESM模块和目标ESM模块依赖的至少一个第一ESM模块更新语法树，返回将第一ESM模块确定为目标ESM模块，继续执行通过词法解析器对目标ESM模块进行解析，直到该目标ESM模块不依赖任何第一ESM模块，结束解析。

示例性地，脚本模块a为入口脚本模块，对入口脚本模块进行解析得到入口脚本模块a依赖脚本模块b和脚本模块c，解析脚本模块b得到脚本模块b依赖脚本模块d，同时解析脚本模块c得到脚本模块c依赖脚本模块e和脚本模块f，然后解析脚本模块d得到脚本模块d没有依赖的脚本模块，脚本模块d为叶子节点，同样解析脚本模块e得到脚本模块e没有依赖的脚本模块，脚本模块e为叶子节点，解析脚本模块f得到脚本模块f没有依赖的脚本模块，脚本模块f为叶子节点，则得到如图4所示的语法树。

本公开实施例中，通过上述步骤201至步骤205，可以实现对入口脚本模块的快速递归解析，可以进一步降低研发的复杂度。

可选地，上述步骤201具体可以通过下述步骤201a至步骤201c实现。

201a、确定该入口脚本模块的类型。

201b、根据该入口脚本模块的类型，确定与该入口脚本模块对应的目标词法解析器。

201c、通过该目标词法解析器对该入口脚本模块进行解析。

需要说明的是，通过词法解析器解析目标脚本模块也适用于上述步骤201a至步骤201c，即确定目标脚本模块的类型，根据目标脚本模块的类型，确定与该目标脚本模块对应的词法解析器，通过该目标脚本模块对应的词法解析器对该目标脚本模块进行解析。

其中，不同脚本模块的类型不同，则不同脚本模块对应的词法解析器则不同。可以理解，不同类型的脚本模块对应不同的词法解析器。不同类型的脚本模块的标准规范不同，词法解析器是根据脚本模块的标准规范去具体实现的一种程序，因此脚本模块的标准规范不同，脚本模块对应的词法解析器就不同。

本公开实施例中，通过不同类型的脚本模块确定不同的词法解析器，可以提高对脚本模块的解析效率，从而可以使得浏览器能够更好地加载和运行脚本模块，可以进一步降低研发的复杂度。

可选地，上述步骤201具体可以通过下述步骤201d至步骤201c实现。

201d、获取该目标浏览器页面对应的该入口脚本模块的标识。

201e、根据该入口脚本模块的标识，获取入口脚本模块的超文本传输安全协议HTTPS地址。

201f、基于该入口脚本模块对应的HTTPS地址，加载该入口脚本模块，以得到该入口脚本模块的代码。

其中，可以基于该入口脚本模块对应的HTTPS地址，通过fetch API的方式获取该入口脚本模块的代码。

其中，Fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的一些具体部分，例如请求和响应。它还提供了一个全局fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

201g、通过词法解析器解析该入口脚本模块的代码，得到至少一个标识。

其中，该至少一个标识中的每个标识指示该入口脚本模块依赖的一个第一脚本模块。

示例性地，定义特定标签加载入口ESM模块；由于浏览器本身只能通过HTTPS资源加载，无法通过模块名称进行加载。因此将入口ESM模块的标识映射为该入口ESM模块对应的HTTPS地址；然后根据入口ESM对应的HTTPS地址获取入口ESM模块对应的HTTPS脚本资源(即入口ESM模块的代码)，然后在浏览器的本地存储中加载入口ESM模块的代码，并通过词法解析器解析该入口脚本模块的代码，得到至少一个标识，每个标识指示入口ESM模块直接依赖的一个ESM模块，然后基于入口ESM模块直接依赖的每个ESM模块的标识重复上述步骤，得到各个ESM模块的代码。

本公开实施例中，通过重复执行上述步骤201d至201g可以成功获取入口脚本模块的代码以及各个脚本模块的代码，从而有利于实现直接在浏览器中实现脚本模块的加载与运行，可以进一步降低研发的复杂度。

可选地，上述步骤103具体可以通过下述步骤103a至步骤103c实现。

103a、按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块依赖的脚本模块，依次将该各个脚本模块的代码在该浏览器的本地存储中运行，以得到该各个脚本模块的代码的运行结果。

若通过语法树保存该目标依赖关系，则上述步骤103a具体可以为按照语法树，从叶子节点到根节点，依次将该各个脚本模块的代码在该浏览器的本地存储中运行，以得到该各个脚本模块的代码的运行结果。

103b、将该各个脚本模块的代码的运行结果分别存储在该本地存储中，得到该各个脚本模块的代码的运行结果的本地存储地址。

103c、根据该各个脚本模块的代码的运行结果的本地存储地址，生成该各个脚本模块的本地存储依赖路径。

示例性地，可以通过Blob的方式在浏览器本地运行各个脚本模块的代码，然后基于每个脚本模块的代码的运行结果生成一个Blob URL，然后基于各个脚本模块代码运行得到的各个Blob URL，生成该各个脚本模块的本地存储依赖路径。如此增加了该各个脚本模块的依赖路径修改为本地存储路径的实现方式，可以降低研发复杂度。

其中，Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。Blob表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。要从其他非blob对象和数据构造一个Blob，请使用Blob()构造函数。

其中，每个脚本模块的代码的运行结果对应的Blob URL用于指示：对应的脚本模块的代码的运行结果的本地存储路径。

其中，Blob URL是一个伪协议，允许Blob和File对象用作图像，下载二进制数据链接等URL源。Blob URL只能由浏览器在内部生成。URL.createObjectURL()将创建一个特殊的Blob或File对象的引用，以后可以使用它来发布URL.revokeObjectURL()。这些URL只能在浏览器的单个实例中和同一个会话中(即页面/文档的生命周期)在本地使用。

本公开实施例中，在获得各个脚本模块的代码之后，通过Blob URL的形式运行各个脚本模块的代码，将该各个脚本模块的代码的运行结果分别存储在该本地存储中，得到该各个脚本模块的代码的运行结果的本地存储地址，然后根据该各个脚本模块的代码的运行结果的本地存储地址，生成该各个脚本模块的本地存储依赖路径，有利于实现直接在浏览器中实现脚本模块的加载与运行，可以进一步降低研发的复杂度。

图5为本公开实施例示出的一种浏览器页面显示装置的结构框图，如图5所示，包括：确定模块501和运行模块502；该确定模块501，用于响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块；根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系；该运行模块502，用于按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。

可选地，该确定模块501，具体用于通过词法解析器对该入口脚本模块进行递归解析，得到语法树，该语法树用于保存该目标依赖关系。

可选地，该确定模块501，具体用于通过词法解析器对该入口脚本模块进行解析，得到该入口脚本模块依赖至少一个第一脚本模块，基于该入口脚本模块和该入口脚本模块依赖的至少一个第一脚本模块生成语法树；确定第一脚本模块为目标脚本模块，执行通过词法解析器对目标脚本模块进行解析，得到该目标脚本模块依赖至少一个第一脚本模块，并基于目标脚本模块和该目标脚本模块依赖的至少一个第一脚本模块更新该语法树；返回执行确定第一脚本模块为目标脚本模块，直到该目标脚本模块不依赖任何第一脚本模块；其中，每个第一脚本模块为该各个脚本模块中的一个。

可选地，该确定模块501，具体用于确定该入口脚本模块的类型；根据该入口脚本模块的类型，确定与该入口脚本模块对应的目标词法解析器；通过该目标词法解析器对该入口脚本模块进行解析。

可选地，该确定模块501，具体用于获取该目标浏览器页面对应的该入口脚本模块的标识；根据该入口脚本模块的标识，获取入口脚本模块的超文本传输安全协议HTTPS地址；基于该入口脚本模块对应的HTTPS地址，加载该入口脚本模块，以得到该入口脚本模块的代码；通过词法解析器解析该入口脚本模块的代码，得到至少一个标识，该至少一个标识中的每个标识指示该入口脚本模块依赖的一个第一脚本模块。

可选地，该运行模块502，具体用于按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块依赖的脚本模块，依次将该各个脚本模块的代码在该浏览器的本地存储中运行，以得到该各个脚本模块的代码的运行结果；将该各个脚本模块的代码的运行结果分别存储在该本地存储中，得到该各个脚本模块的代码的运行结果的本地存储地址；根据该各个脚本模块的代码的运行结果的本地存储地址，生成该各个脚本模块的本地存储依赖路径。

本公开实施例中，各模块可以实现上述方法实施例提供的浏览器页面显示方法，且能达到相同的技术效果，为避免重复，这里不再赘述。

图6为本公开实施例提供的一种电子设备的结构示意图，用于对实现本公开实施例中任意浏览器页面显示方法的电子设备进行示例性说明，不应理解为对本公开实施例的具体限定。

如图6所示，电子设备600可以包括处理器(例如中央处理器、图形处理器等)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有电子设备600操作所需的各种程序和数据。处理器601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

通常，以下装置可以连接至I/O接口605：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置606；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置607；包括例如磁带、硬盘等的存储装置608；以及通信装置609。通信装置609可以允许电子设备600与其他设备进行无线或有线通信以交换数据。虽然示出了具有各种装置的电子设备600，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置609从网络上被下载和安装，或者从存储装置608被安装，或者从ROM 602被安装。在该计算机程序被处理器601执行时，可以执行本公开实施例提供的任意浏览器页面显示方法中限定的功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

在一些实施方式中，客户端、服务端可以利用诸如HTTP(HyperText TransferProtocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“LAN”)，广域网(“WAN”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：响应于对目标浏览器页面的触发操作，确定该目标浏览器页面对应的入口脚本模块；根据该入口脚本模块，确定该入口脚本模块和各个脚本模块之间的目标依赖关系；按照该目标依赖关系，从最底层被依赖脚本模块至被该入口脚本模块直接依赖的脚本模块，依次运行该各个脚本模块的代码，以得到该各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于该本地存储依赖路径，运行该入口脚本模块的代码，以显示该目标浏览器页面。

在本公开实施例中，可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言，诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在计算机上执行、部分地在计算机上执行、作为一个独立的软件包执行、部分在计算机上部分在远程计算机上执行、或者完全在远程计算机或服务端上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定。

本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上系统(SOC)、复杂可编程逻辑设备(CPLD)等等。

在本公开的上下文中，计算机可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。计算机可读介质可以是计算机可读信号介质或计算机可读储存介质。计算机可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。计算机可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

此外，虽然采用特定次序描绘了各操作，但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。

尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

Claims (10)

1.一种浏览器页面显示方法，其特征在于，所述方法包括：

响应于对目标浏览器页面的触发操作，确定所述目标浏览器页面对应的入口脚本模块；

根据所述入口脚本模块，确定所述入口脚本模块和各个脚本模块之间的目标依赖关系；

按照所述目标依赖关系，从最底层被依赖脚本模块至被所述入口脚本模块直接依赖的脚本模块，依次运行所述各个脚本模块的代码，以得到所述各个脚本模块的代码的运行结果对应的本地存储依赖路径；

基于所述本地存储依赖路径，运行所述入口脚本模块的代码，以显示所述目标浏览器页面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述入口脚本模块，确定所述入口脚本模块和各个脚本模块之间的目标依赖关系，包括：

通过词法解析器对所述入口脚本模块进行递归解析，得到语法树，所述语法树用于保存所述目标依赖关系。

3.根据权利要求2所述的方法，其特征在于，所述通过词法解析器对所述入口脚本模块进行递归解析，得到语法树，包括：

通过词法解析器对所述入口脚本模块进行解析，得到所述入口脚本模块依赖至少一个第一脚本模块，基于所述入口脚本模块和所述入口脚本模块依赖的至少一个第一脚本模块生成语法树；

确定第一脚本模块为目标脚本模块，执行通过词法解析器对目标脚本模块进行解析，得到所述目标脚本模块依赖至少一个第一脚本模块，并基于目标脚本模块和所述目标脚本模块依赖的至少一个第一脚本模块更新所述语法树；

返回执行确定第一脚本模块为目标脚本模块，直到所述目标脚本模块不依赖任何第一脚本模块；

其中，每个第一脚本模块为所述各个脚本模块中的一个。

4.根据权利要求3所述的方法，其特征在于，所述通过词法解析器对所述入口脚本模块进行解析，包括：

确定所述入口脚本模块的类型；

根据所述入口脚本模块的类型，确定与所述入口脚本模块对应的目标词法解析器；

通过所述目标词法解析器对所述入口脚本模块进行解析。

5.根据权利要求3所述的方法，其特征在于，所述通过词法解析器对目标脚本模块进行解析，包括：

获取所述目标浏览器页面对应的所述入口脚本模块的标识；

根据所述入口脚本模块的标识，获取入口脚本模块的超文本传输安全协议HTTPS地址；

基于所述入口脚本模块对应的HTTPS地址，加载所述入口脚本模块，以得到所述入口脚本模块的代码；

通过词法解析器解析所述入口脚本模块的代码，得到至少一个标识，所述至少一个标识中的每个标识指示所述入口脚本模块依赖的一个第一脚本模块。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述按照所述目标依赖关系，从最底层被依赖脚本模块至被所述入口脚本模块依赖的脚本模块，依次运行所述各个脚本模块的代码，包括：

按照所述目标依赖关系，从最底层被依赖脚本模块至被所述入口脚本模块依赖的脚本模块，依次将所述各个脚本模块的代码在所述浏览器的本地存储中运行，以得到所述各个脚本模块的代码的运行结果；

将所述各个脚本模块的代码的运行结果分别存储在所述本地存储中，得到所述各个脚本模块的代码的运行结果的本地存储地址；

根据所述各个脚本模块的代码的运行结果的本地存储地址，生成所述各个脚本模块的本地存储依赖路径。

7.一种浏览器页面显示装置，其特征在于，包括：确定模块和运行模块；

所述确定模块，用于响应于对目标浏览器页面的触发操作，确定所述目标浏览器页面对应的入口脚本模块；根据所述入口脚本模块，确定所述入口脚本模块和各个脚本模块之间的目标依赖关系；

所述运行模块，用于按照所述目标依赖关系，从最底层被依赖脚本模块至被所述入口脚本模块直接依赖的脚本模块，依次运行所述各个脚本模块的代码，以得到所述各个脚本模块的代码的运行结果对应的本地存储依赖路径；基于所述本地存储依赖路径，运行所述入口脚本模块的代码，以显示所述目标浏览器页面。

8.一种电子设备，其特征在于，包括：存储器和处理器，存储器用于存储计算机程序；处理器用于在调用计算机程序时执行权利要求1至6中任一项所述的浏览器页面显示方法。

9.一种计算机可读存储介质，其特征在于，其上存储有计算机程序，计算机程序被处理器执行时实现权利要求1至6中任一项所述的浏览器页面显示方法。

10.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的浏览器页面显示方法。