CN116466953B - 组件化的前端开发方法、装置、计算机设备和存储介质 - Google Patents
组件化的前端开发方法、装置、计算机设备和存储介质 Download PDFInfo
- Publication number
- CN116466953B CN116466953B CN202310204658.3A CN202310204658A CN116466953B CN 116466953 B CN116466953 B CN 116466953B CN 202310204658 A CN202310204658 A CN 202310204658A CN 116466953 B CN116466953 B CN 116466953B
- Authority
- CN
- China
- Prior art keywords
- component
- loadable
- stack
- page
- target
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 238000011161 development Methods 0.000 title claims abstract description 48
- 238000004590 computer program Methods 0.000 claims abstract description 22
- 238000012545 processing Methods 0.000 claims description 16
- 238000012217 deletion Methods 0.000 claims description 12
- 230000037430 deletion Effects 0.000 claims description 12
- 230000006835 compression Effects 0.000 claims description 7
- 238000007906 compression Methods 0.000 claims description 7
- 238000010200 validation analysis Methods 0.000 claims description 2
- 230000004044 response Effects 0.000 description 13
- 230000008569 process Effects 0.000 description 8
- 238000010586 diagram Methods 0.000 description 7
- 238000005516 engineering process Methods 0.000 description 7
- 230000009467 reduction Effects 0.000 description 6
- 230000006870 function Effects 0.000 description 5
- 238000004891 communication Methods 0.000 description 3
- 230000003068 static effect Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000012790 confirmation Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000036316 preload Effects 0.000 description 2
- 230000000750 progressive effect Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- OKTJSMMVPCPJKN-UHFFFAOYSA-N Carbon Chemical compound [C] OKTJSMMVPCPJKN-UHFFFAOYSA-N 0.000 description 1
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000015556 catabolic process Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 229910021389 graphene Inorganic materials 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- Y—GENERAL 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
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE 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/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请涉及一种组件化的前端原生开发方法、装置、计算机设备、存储介质和计算机程序产品。所述方法包括:在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息,确认前端信息中的必加载组件和可加载组件;前端信息均根据浏览器的原生接口得到;加载必加载组件,生成浏览器的前端页面;在接收到前端页面发送的组件调用请求的情况下,从可加载组件中,识别出与组件调用请求对应的目标组件;在前端页面上,加载目标组件。采用本方法,能够提高前端页面的运行性能。
Description
技术领域
本申请涉及互联网技术领域,特别是涉及一种组件化的前端开发方法、装置、计算机设备、存储介质和计算机程序产品。
背景技术
随着互联网技术的发展,出现了浏览器的前端开发技术;前端开发,是指将数据转换为图形界面,以供用户查看数据并与数据进行交互的过程。
在传统的前端开发技术中,通常是按照例如Bootstrap、Vue以及React等第三方框架来进行开发,同时按需将其他第三方库集成到第三方框架中,最后再将程序统一编译成浏览器能够读懂的静态代码。然而,不同的第三方框架之间互不兼容,因此会导致开发出来的组件之间发生冲突、覆盖以及篡改等问题,从而使得前端页面的运行性能较低。
发明内容
基于此,有必要针对上述技术问题,提供一种能够提高前端页面的运行性能的组件化的前端开发方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
第一方面,本申请提供了一种组件化的前端开发方法。所述方法包括:
在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
加载所述必加载组件,生成所述浏览器的前端页面;
在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
在所述前端页面上,加载所述目标组件。
在其中一个实施例中,所述可加载组件按照预设的入栈堆栈中的各个入栈元素依次进行加载;
在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件之前,还包括:
针对各个所述可加载组件,根据所述可加载组件的特征信息,确认所述可加载组件的类型;
根据所述可加载组件的类型,从所述预设的入栈堆栈中,确认所述可加载组件的目标入栈元素;在所述预设的入栈堆栈中,各个入栈元素对应于所述可加载组件的各个运行状态;
加载所述可加载组件至预加载入栈元素对应的预运行状态;所述预加载入栈元素为所述预设的入栈堆栈中,所述目标入栈元素的上一个入栈元素;
所述在所述前端页面上,加载所述目标组件,包括:
将所述目标组件从所述预运行状态,加载至所述预设的入栈堆栈中的栈底元素对应的运行状态。
在其中一个实施例中,所述可加载组件按照预设的出栈堆栈中的各个出栈元素依次进行删除;
在所述前端页面上,加载所述目标组件之后,还包括:
针对各个所述可加载组件,根据所述可加载组件的类型,从所述预设的出栈堆栈中,确认所述可加载组件的目标出栈元素;在所述预设的出栈堆栈中,各个出栈元素对应于所述可加载组件的各个删除状态;
响应于所述前端页面发送的组件删除请求,将所述目标组件从所述预设的入栈堆栈中的栈底元素对应的运行状态,加载至所述目标出栈元素对应的删除状态;
响应于所述前端页面发送的页面注销请求,将所述目标组件从所述目标出栈元素对应的删除状态,加载至所述预设的出栈堆栈中的栈顶元素对应的删除状态;
在各个所述可加载组件均加载至所述预设的出栈堆栈中的栈顶元素对应的删除状态的情况下,注销所述前端页面,释放所述前端页面的缓存空间。
在其中一个实施例中,所述确认所述前端信息中的必加载组件和可加载组件,包括:
根据页面信息的标识,在所述前端信息中识别出所述页面信息;所述页面信息为所述浏览器的首页对应的信息;
将所述页面信息对应的组件确认为所述必加载组件;
将所述前端信息对应的组件中除所述必加载组件之外的组件,确认为所述可加载组件。
在其中一个实施例中,所述在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件,包括:
获取所述组件调用请求携带的组件标识;
根据所述组件标识,从所述可加载组件中,识别出与所述组件标识对应的可加载组件;
将所述与所述组件标识对应的可加载组件,确认为所述与所述组件调用请求对应的目标组件。
在其中一个实施例中,在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息之前,还包括:
响应于针对初始前端信息的编译指令,对所述前端页面的初始前端信息进行压缩处理;
将压缩处理后的初始前端信息中的自定义标识更新为随机标识,得到所述前端页面的前端信息。
第二方面,本申请还提供了一种组件化的前端原生开发装置。所述装置包括:
组件确认模块,用于在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
第一加载模块,用于加载所述必加载组件,生成所述浏览器的前端页面;
组件识别模块,用于在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
第二加载模块,用于在所述前端页面上,加载所述目标组件。
第三方面,本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:
在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
加载所述必加载组件,生成所述浏览器的前端页面;
在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
在所述前端页面上,加载所述目标组件。
第四方面,本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现以下步骤:
在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
加载所述必加载组件,生成所述浏览器的前端页面;
在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
在所述前端页面上,加载所述目标组件。
第五方面,本申请还提供了一种计算机程序产品。所述计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现以下步骤:
在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
加载所述必加载组件,生成所述浏览器的前端页面;
在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
在所述前端页面上,加载所述目标组件。
上述组件化的前端原生开发方法、装置、计算机设备、存储介质和计算机程序产品,通过在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息,确认前端信息中的必加载组件和可加载组件;前端信息均根据浏览器的原生接口得到;然后加载必加载组件,生成浏览器的前端页面;接着在接收到前端页面发送的组件调用请求的情况下,从可加载组件中,识别出与组件调用请求对应的目标组件;最后在前端页面上,加载目标组件,从而进行页面的前端开发。这样,一方面,基于浏览器的原生接口得到的前端信息进行前端开发,避免了传统技术中使用第三方框架带来的不兼容、安全性能下降以及运行性能下降等问题;另一方面,通过运行请求和组件调用请求,对必加载组件和可加载组件进行区分,能够简化对组件的处理流程,避免消耗过多的资源在非必要的时刻加载过多的组件。因此,基于以上过程的组件化前端原生开发方法,能够提高前端页面的运行性能。
附图说明
图1为一个实施例中组件化的前端原生开发方法的流程示意图;
图2为一个实施例中按照预设的入栈堆栈中的各个入栈元素的顺序,加载可加载组件的步骤的流程示意图;
图3为一个实施例中按照预设的出栈堆栈中的各个出栈元素的顺序,删除可加载组件的步骤的流程示意图;
图4为另一个实施例中组件化的前端原生开发方法的流程示意图;
图5为一个实施例中组件化的前端原生开发装置的结构框图;
图6为一个实施例中计算机设备的内部结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
在一示例性实施例中,如图1所示,提供了一种组件化的前端原生开发方法,本实施例以该方法应用于服务器进行举例说明;可以理解的是,该方法也可以应用于终端,还可以应用于包括服务器和终端的系统,并通过服务器和终端之间的交互实现。其中,服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现,终端可以但不限于是各种个人计算机、笔记本电脑、智能手机和平板电脑。本实施例中,该方法包括以下步骤:
步骤S102,在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息,确认前端信息中的必加载组件和可加载组件。
其中,必加载组件是指浏览器的前端页面在运行时就必须进行加载的组件;可加载组件是指浏览器的前端页面响应于用户的操作或是根据用户的设备性能,可选择加载的组件。例如,对于常见的前端页面而言,输入组件和按钮组件为必加载组件,而动画组件为可加载组件。
其中,前端信息可以理解为前端开发使用的前端代码;前端信息均根据浏览器的原生接口得到。因此在本申请中,开发人员只需要学习浏览器的原生接口的语法即可,不需要学习各种第三方框架的语法。此外,在传统技术中,开源的组件库都是特定于框架的,比如:基于Vue的Element UI,基于React的Ant Design等,这意味着组件库无法做到跨框架使用;但使用浏览器的原生接口,就能够避免框架间互不兼容的问题,能够在降低前端代码的体积的同时,更好地调用浏览器引擎的能力,从而缩短浏览器对前端代码的处理时长,提升前端页面的性能。
具体地,浏览器响应于用户的操作,向服务器发送运行请求,以请求打开浏览器的首页;服务器在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息,并在前端信息中确认必加载组件和可加载组件。
举例说明,用户在使用浏览器时,会先对浏览器进行启动操作,如点击浏览器的图标;此时浏览器响应于用户的启动操作,向服务器发送运行请求;服务器接收到浏览器的运行请求,根据运行请求中携带的信息,获取与运行请求对应的前端信息,并在前端信息中确认如输入组件、按钮组件等前端页面必须加载的必加载组件,以及如动画组件等前端页面响应于用户操作进行加载的可加载组件。
步骤S104,加载必加载组件,生成浏览器的前端页面。
具体地,服务器在确认必加载组件和可加载组件之后,首先加载必加载组件,生成浏览器的前端页面,如浏览器的首页。
步骤S106,在接收到前端页面发送的组件调用请求的情况下,从可加载组件中,识别出与组件调用请求对应的目标组件。
其中,前端页面发送的组件调用请求,包括前端页面响应于用户的操作发送的组件调用请求,和前端页面根据用户的设备性能发送的组件调用请求;以动画组件为例,可以在用户点击动画播放按钮之后加载动画组件,也可以在前端页面检测到用户的设备CPU(central processing unit,中央处理器)处于空闲状态时,自动加载动画组件。
具体地,服务器在生成浏览器的前端页面之后,前端页面会响应于用户的操作,或者是根据用户的设备性能,向服务器发送组件调用请求;浏览器接收到前端页面发送的组件调用请求之后,根据组件调用请求携带的信息,从各个可加载组件中,识别出与组件调用请求携带的信息对应的目标组件。
以动画组件为例进行说明,当用户在使用浏览器的过程中点击了动画播放按钮,那么前端页面就会响应于用户的点击操作向服务器发送动画组件调用请求,接着服务器从各个可加载组件中识别出对应的动画组件。以音乐组件为例进一步进行说明,某些前端页面会配置有背景音乐功能,但此功能CPU占用较高,那么前端页面就可以根据用户的设备的CPU占用情况,来决定是否需要为用户播放背景音乐;若此时用户的设备的CPU占用较高,那么自然就不需要加载音乐组件;若此时用户的设备的CPU占用较低,那么就可以向服务器发送音乐组件调用请求,然后服务器从各个组件调用请求中识别出对应的音乐组件。
步骤S108,在前端页面上,加载目标组件。
具体地,服务器从各个可加载组件中识别出对应的目标组件之后,加载目标组件,为用户提供相应的功能,实现对前端页面的开发。
以动画组件为例,服务器在前端页面上加载对应的动画组件,为用户展示相应的动画特效或是播放动画。
上述组件化的前端原生开发方法中,服务器通过在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息,确认前端信息中的必加载组件和可加载组件;前端信息均根据浏览器的原生接口得到;然后加载必加载组件,生成浏览器的前端页面;接着在接收到前端页面发送的组件调用请求的情况下,从可加载组件中,识别出与组件调用请求对应的目标组件;最后在前端页面上,加载目标组件,从而进行页面的前端开发。这样,一方面,服务器基于浏览器的原生接口得到的前端信息进行前端开发,避免了传统技术中使用第三方框架带来的不兼容、安全性能下降以及运行性能下降等问题;另一方面,服务器通过运行请求和组件调用请求,对必加载组件和可加载组件进行区分,能够简化对组件的处理流程,避免消耗过多的资源在非必要的时刻加载过多的组件。因此,基于以上过程的组件化前端原生开发方法,能够提高前端页面的运行性能。
在一示例性实施例中,可加载组件按照预设的入栈堆栈中的各个入栈元素依次进行加载;
如图2所示,上述组件化的前端原生开发方法,还包括按照预设的入栈堆栈中的各个入栈元素的顺序,加载可加载组件的步骤,其具体包括如下步骤:
步骤S202,针对各个可加载组件,根据可加载组件的特征信息,确认可加载组件的类型。
步骤S204,根据可加载组件的类型,从预设的入栈堆栈中,确认可加载组件的目标入栈元素。
步骤S206,加载可加载组件至预加载入栈元素对应的预运行状态。
步骤S208,将目标组件从预运行状态,加载至预设的入栈堆栈中的栈底元素对应的运行状态。
其中,预设的入栈堆栈如表1所示。
表1入栈堆栈表
其中,在预设的入栈堆栈中,各个入栈元素对应于可加载组件的各个运行状态;预加载入栈元素为预设的入栈堆栈中,目标入栈元素的上一个入栈元素,假设“挂载至dom”为文本编辑组件的目标入栈元素,那么“实例化”为文本编辑组件的预加载入栈元素。
其中,可加载组件的类型,根据可加载组件的时间开销、空间开销以及使用重要性确定。例如,视频组件可触发视频加载,但用户使用该组件的概率不大,那么视频组件的类型为极少使用的组件;再例如,在博客编辑页面中,用户使用文本编辑组件的概率很高,那么文本编辑组件的类型为业务密集型的组件;再例如,前端页面对应于特殊节日有特定的全局主题样式组件,且对应的主题样式需要在用户的设备性能足够时,一直呈现给用户,那么全局主题样式组件的类型为频繁出现的组件。
具体地,针对各个可加载组件,服务器首先根据可加载组件的时间开销、空间开销以及使用重要性等特征信息,确认可加载组件的类型;然后根据各个可加载组件的类型,从如表1所示的预设的入栈堆栈中,确认各个可加载组件的目标入栈元素,并将目标入栈元素的上一个入栈元素确认为可加载组件的预加载入栈元素;接着将各个可加载组件加载至对应的预加载入栈元素对应的预运行状态;最后服务器响应于前端页面发送的组件调用请求,将组件调用请求对应的目标组件加载从对应的预运行状态,加载至预设的入栈堆栈中的栈底元素对应的运行状态。
假设组件A为极少使用的组件,服务器根据组件A的类型,在预设的入栈堆栈中确认组件A的目标入栈元素为“请求文件”,由于“请求文件”为预设的入栈堆栈的栈顶元素,因此组件A没有预加载入栈元素,即服务器不需要对组件A进行预加载;当前端页面向服务器发送组件A的组件调用请求时,服务器按照“请求文件”“注册组件”“实例化”“挂载至dom”以及“渲染元素”的顺序,在前端页面上加载组件A。
假设组件B为业务密集型的组件,服务器根据组件B的类型,在元素和入栈堆栈中确认组件B的目标入栈元素为“挂载至dom”,并将“实例化”确认为预加载入栈元素;然后服务器在生成前端页面之后,首先按照“请求文件”“注册组件”“实例化”的顺序,将组件B加载至“实例化”对应的运行状态,然后在接收到前端页面发送的组件B的组件调用请求之后,按照“挂载至dom”和“渲染元素”的顺序,在前端页面上加载组件B。
本实施例中,服务器通过可加载组件的时间与空间开销及其重要性,对大量的可加载组件进行分类,并通过预设的入栈堆栈,按需懒加载不同类型的可加载组件,从而能够将用户设备的性能合理地分配给更重要的任务,进而提高了前端页面的运行能力。
在一示例性实施例中,可加载组件按照预设的出栈堆栈中的各个出栈元素依次进行删除;
如图3所示,上述步骤S108,在前端页面上,加载目标组件之后,还具体包括按照预设的出栈堆栈中的各个入栈元素的顺序,删除可加载组件的步骤,其具体包括如下步骤:
步骤S302,针对各个可加载组件,根据可加载组件的类型,从预设的出栈堆栈中,确认可加载组件的目标出栈元素。
步骤S304,响应于前端页面发送的组件删除请求,将目标组件从预设的入栈堆栈中的栈底元素对应的运行状态,加载至目标出栈元素对应的删除状态。
步骤S306,响应于前端页面发送的页面注销请求,将目标组件从目标出栈元素对应的删除状态,加载至预设的出栈堆栈中的栈顶元素对应的删除状态。
步骤S308,在各个可加载组件均加载至预设的出栈堆栈中的栈顶元素对应的删除状态的情况下,注销前端页面,释放前端页面的缓存空间。
其中,预设的出栈堆栈如表2所示。
表2出栈堆栈表
其中,在预设的出栈堆栈中,各个出栈元素对应于可加载组件的各个删除状态。
具体地,服务器根据各个可加载组件的类型,从如表2所示预设的出栈堆栈中,确认各个可加载组件的目标出栈元素;当用户关闭某个组件时,前端页面会响应于用户的操作,向服务器发送组件删除请求,服务器响应于组件删除请求,将用户关闭的目标组件从预设的入栈堆栈中的栈底元素对应的运行状态,加载至对应的目标出栈元素对应的删除状态,由于此时用户可能还需要再次使用目标组件,因此为减少资源的重复消耗,此时还不需要对目标组件进行彻底地删除;当用户关闭前端页面时,前端页面会响应于用户的操作,向服务器发送页面注销请求,服务器响应于页面注销请求,将目标组件从目标出栈元素对应的删除状态,加载至预设的出栈堆栈中的栈顶元素对应的删除状态;最后,当各个可加载组件的状态均处于预设的出栈堆栈中的栈顶元素对应的删除状态时,服务器便能够注销前端页面,并释放前端页面的缓存空间,关闭前端页面。
以极少使用的组件A为例进行说明,服务器根据组件A的类型,在预设的出栈堆栈中确认组件A的目标出栈元素为“清除缓存”;当前端页面向服务器发送组件A的组件删除请求时,服务器按照“隐藏元素”“卸载”“销毁对象”“注销组件”以及“清除缓存”的顺序,对组件A进行删除操作。
以业务密集型的组件B为例进一步进行说明,服务器根据组件B的类型,在元素和出栈堆栈中确认组件B的目标出栈元素为“卸载”;当前端页面向服务器发送组件B的组件删除请求时,服务器按照“隐藏元素”和“卸载”的顺序,对组件B进行删除;接着当前端页面向服务器发送页面注销请求时,服务器按照“销毁对象”“注销组件”以及“清除缓存”的顺序,对组件B完成删除操作。
最后,在服务器检测到各个可加载组件的状态均处于“清除缓存”对应的删除状态时,服务器对前端页面进行注销操作和释放缓存操作,完成对前端页面的关闭。
本实施例中,服务器通过预设的出栈堆栈,按需懒加载不同类型的可加载组件,从而能够将用户设备的性能合理地分配给更重要的任务,进而提高了前端页面的运行能力。
在一示例性实施例中,上述步骤S102中,确认前端信息中的必加载组件和可加载组件,具体包括以下内容:根据页面信息的标识,在前端信息中识别出页面信息;页面信息为浏览器的首页对应的信息;将页面信息对应的组件确认为必加载组件;将前端信息对应的组件中除必加载组件之外的组件,确认为可加载组件。
其中,页面信息的标识为前端代码中,开发人员为浏览器的首页对应的信息添加的标识。
还需要说明的是,由于浏览器在启动前端信息时,往往只需要花费几秒钟的时间处理入口文件,而在运行前端信息时需要加载组件,花费的时间将持续几分钟到几小时不等,这两个阶段需要处理的数据完全不同。因此,在浏览器启动前端信息时,还需要将包含前端信息中的网站头部信息的入口文件与运行前端信息时需要加载的组件进行分离,常见的入口文件的标识为“index.html”;在网站头部信息中,会对浏览器的如页面头像、标题、版本号以及全局依赖等网站头部信息进行声明。
具体地,服务器根据页面信息的标识,在前端信息中识别出页面信息,并在前端信息中,将与页面信息关联的组件确认为必加载组件,将与页面信息不关联的组件确认为可加载组件。
在本实施例中,服务器将可加载组件和必加载组件进行分离,便于后续通过运行请求和组件调用请求,分别加载可加载组件和必加载组件,实现对浏览器资源的合理分配,避免消耗过多的资源在非必要的时刻加载过多的组件,从而提高了前端页面的运行性能。
在一示例性实施例中,上述步骤S106,在接收到前端页面发送的组件调用请求的情况下,从可加载组件中,识别出与组件调用请求对应的目标组件,具体包括以下内容:获取组件调用请求携带的组件标识;根据组件标识,从可加载组件中,识别出与组件标识对应的可加载组件;将与组件标识对应的可加载组件,确认为与组件调用请求对应的目标组件。
其中,组件标识为能够唯一确定具体的可加载组件的组件名称。
具体地,服务器在接收到前端页面发送的组件调用请求的情况下,从组件调用请求中获取组件调用请求携带的组件标识;然后根据组件标识,从各个可加载组件中,识别出与组件标识对应的可加载组件,作为与组件调用请求对应的目标组件。
举例说明,假设服务器接收到的组件调用请求为针对组件A的组件调用请求,那么服务器根据组件调用请求中携带的“组件A”,在各个可加载组件中,识别出组件标识为“组件A”的可加载组件,作为与组件调用请求对应的目标组件。
本实施例中,服务器通过组件调用请求中携带的组件标识,能够在大量的可加载组件中准确识别出需要加载的可加载组件,进而实现了响应于组件调用请求,为用户准确加载相应组件的功能。
在一示例性实施例中,上述步骤S102,在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息之前,还具体包括以下内容:响应于针对初始前端信息的编译指令,对前端页面的初始前端信息进行压缩处理;将压缩处理后的初始前端信息中的自定义标识更新为随机标识,得到前端页面的前端信息。
需要说明的是,针对基于浏览器的原生接口得到的初始前端信息的编译操作,与针对基于第三方框架得到的前端信息的编译操作不同;对于基于浏览器的原生接口得到的初始前端信息而言,其初始前端信息中的内容都是能够直接被浏览器所识别的,因此只需要对初始前端信息进行压缩处理,如删除注释和空白字符,或者是隐藏逻辑处理,如将所有自定义标识重命名为随机文本即可;但对于基于第三方框架得到的前端信息而言,其所采用的语法结构不一定能够被浏览器识别,因此涉及大量的语言转换,耗时长且需要消耗的资源较多,同时在编译时还可能会出现报错。
具体地,服务器响应于针对前端页面的初始前端信息的编译指令,先删除初始前端信息中的注释和空白字符,以压缩初始前端信息的体积;然后将初始前端信息中的自定义标识,如开发人员自定义的变量名重命名为随机文本,以隐藏初始前端信息的逻辑。基于以上两个步骤的编译操作,服务器实现对初始前端信息的编译,得到前端页面的前端信息。
本实施例中,服务器对前端页面的初始前端信息的压缩操作和标识更新操作,能够减小初始前端信息的占用体积,并隐藏初始前端信息中的逻辑。这样,一方面,能够减少在处理初始前端信息过程中的资源消耗;另一方面,能够提升初始前端信息的安全性,避免因初始前端信息被异常篡改而导致的前端页面崩溃,从而提高了前端页面的运行性能。
在一示例性实施例中,如图4所示,提供了另一种组件化的前端原生开发方法,以该方法应用于服务器为例进行说明,包括以下步骤:
步骤S401,响应于针对初始前端信息的编译指令,对前端页面的初始前端信息进行编译处理,得到前端页面的前端信息。
其中,编译处理至少包括对初始前端信息进行压缩处理,以及将初始前端信息中的自定义标识更新为随机标识。
步骤S402,在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息,确认前端信息中的必加载组件和可加载组件。
其中,前端信息均根据浏览器的原生接口得到。
步骤S403,加载必加载组件,生成浏览器的前端页面。
步骤S404,针对各个可加载组件,根据可加载组件的特征信息,确认可加载组件的类型。
步骤S405,根据可加载组件的类型,从预设的入栈堆栈中,确认可加载组件的预加载入栈元素。
其中,可加载组件按照预设的入栈堆栈中的各个入栈元素依次进行加载;在预设的入栈堆栈中,各个入栈元素对应于可加载组件的各个运行状态;预加载入栈元素为预设的入栈堆栈中,可加载组件对应的目标入栈元素的上一个入栈元素。
步骤S406,加载可加载组件至预加载入栈元素对应的预运行状态。
步骤S407,在接收到前端页面发送的组件调用请求的情况下,从可加载组件中,识别出与组件调用请求对应的目标组件。
步骤S408,将目标组件从预运行状态,加载至预设的入栈堆栈中的栈底元素对应的运行状态。
步骤S409,针对各个可加载组件,根据可加载组件的类型,从预设的出栈堆栈中,确认可加载组件的目标出栈元素。
其中,可加载组件按照预设的出栈堆栈中的各个出栈元素依次进行删除;在预设的出栈堆栈中,各个出栈元素对应于可加载组件的各个删除状态。
步骤S410,响应于前端页面发送的组件删除请求,将目标组件从预设的入栈堆栈中的栈底元素对应的运行状态,加载至目标出栈元素对应的删除状态。
步骤S411,响应于前端页面发送的页面注销请求,将目标组件从目标出栈元素对应的删除状态,加载至预设的出栈堆栈中的栈顶元素对应的删除状态。
步骤S412,在各个可加载组件均加载至预设的出栈堆栈中的栈顶元素对应的删除状态的情况下,注销前端页面,释放前端页面的缓存空间。
本实施例中,服务器通过运行请求和组件调用请求,将可加载组件和必加载组件进行分离,能够简化后续对组件的数据处理,并合理分配浏览器的资源,避免消耗过多的资源在非必要的时刻加载过多的组件。同时,服务器通过可加载组件的时间与空间开销及其重要性,对大量的可加载组件进行分类,并通过预设的入栈堆栈和预设的出栈堆栈,按需懒加载不同类型的可加载组件,从而能够将用户设备的性能合理地分配给更重要的任务。此外,服务器通过组件调用请求中携带的组件标识,能够在大量的可加载组件中准确识别出需要加载的可加载组件,进而实现了响应于组件调用请求,为用户准确加载相应组件的功能。需要说明的是,服务器对前端页面的初始前端信息的压缩操作和标识更新操作,能够减小初始前端信息的占用体积,减小前端页面开发的资源消耗,并隐藏初始前端信息中的逻辑,增加了前端页面的安全性。还需要说明的是,服务器基于浏览器的原生接口得到的前端信息进行前端开发,避免了传统技术中使用第三方框架带来的不兼容、安全性能下降以及运行性能下降等问题因此,基于以上过程的组件化前端原生开发方法,能够提高前端页面的运行性能。
为了更清晰阐明本申请实施例提供的组件化的前端原生开发方法,以下以一个具体的实施例对该组件化的前端原生开发方法进行具体说明。在一示例性实施例中,本申请还提供了一种基于Web Component(浏览器的原生组件)组件化的前端原生开发方法,具体包括以下步骤:
步骤1:在规划时,划分好所有的UI(User Interface,用户界面)组件和业务组件;常见的UI组件包括按钮、链接、开关、控件、标签页、菜单栏、弹窗、提示框、表格以及图表等“可复用的组件”,常见的业务组件为与UI无关的“一次性的组件”;并根据UI组件和业务组件创建前端代码的目录结构。
步骤2:开发时,选择支持多语言嵌套的IDE(Integrated DevelopmentEnvironment,集成开发环境)开发工具。
步骤3:编译时,在需要压缩代码或是隐藏代码逻辑的情况下,删除代码中的注释以及空白字符,或是对代码中的自定义标识符重命名为随机文本。
步骤4:启动时,声明与UI和业务都无关的网站头部信息,如网页头像、标题、版本号、全局依赖、PWA(Progressive Web App,渐进式网页应用)信息等,将启动时需要处理的入口文件与运行时需要加载的组件进行分离。
步骤5:运行时,进入组件的生命周期,按需懒加载相关组件。其中,关于懒加载的五层缓存堆栈如表1以及表2所示。
本实施例中,由于采用的是浏览器的原生接口,因此开发者不用学习各种第三方框架,且避免了采用第三方框架带来的重量级编译可能出现的隐患;同时使用原生接口,还能够降低代码体积,更好地调用浏览器引擎的能力,从根源上阻隔组件之间的互相影响。此外,还定义了懒加载的五层缓存堆栈,能够在最大限度上发挥计算机的处理能力,进而提升了前端页面的运行能力。
应该理解的是,虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段,这些步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
基于同样的发明构思,本申请实施例还提供了一种用于实现上述所涉及的组件化的前端原生开发方法的组件化的前端原生开发装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似,故下面所提供的一个或多个组件化的前端原生开发装置实施例中的具体限定可以参见上文中对于组件化的前端原生开发方法的限定,在此不再赘述。
在一示例性实施例中,如图5所示,提供了一种组件化的前端原生开发装置,包括:组件确认模块502、第一加载模块504、组件识别模块506和第二加载模块508,其中:
组件确认模块502,用于在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息,确认前端信息中的必加载组件和可加载组件;前端信息均根据浏览器的原生接口得到。
第一加载模块504,用于加载必加载组件,生成浏览器的前端页面。
组件识别模块506,用于在接收到前端页面发送的组件调用请求的情况下,从可加载组件中,识别出与组件调用请求对应的目标组件。
第二加载模块508,用于在前端页面上,加载目标组件。
在一示例性实施例中,可加载组件按照预设的入栈堆栈中的各个入栈元素依次进行加载;
所述第二加载模块508,还用于针对各个可加载组件,根据可加载组件的特征信息,确认可加载组件的类型;根据可加载组件的类型,从预设的入栈堆栈中,确认可加载组件的目标入栈元素;在预设的入栈堆栈中,各个入栈元素对应于可加载组件的各个运行状态;加载可加载组件至预加载入栈元素对应的预运行状态;预加载入栈元素为预设的入栈堆栈中,目标入栈元素的上一个入栈元素;将目标组件从预运行状态,加载至预设的入栈堆栈中的栈底元素对应的运行状态。
在一示例性实施例中,可加载组件按照预设的出栈堆栈中的各个出栈元素依次进行删除;
组件化的前端原生开发装置还包括组件删除模块,用于针对各个可加载组件,根据可加载组件的类型,从预设的出栈堆栈中,确认可加载组件的目标出栈元素;在预设的出栈堆栈中,各个出栈元素对应于可加载组件的各个删除状态;响应于前端页面发送的组件删除请求,将目标组件从预设的入栈堆栈中的栈底元素对应的运行状态,加载至目标出栈元素对应的删除状态;响应于前端页面发送的页面注销请求,将目标组件从目标出栈元素对应的删除状态,加载至预设的出栈堆栈中的栈顶元素对应的删除状态;在各个可加载组件均加载至预设的出栈堆栈中的栈顶元素对应的删除状态的情况下,注销前端页面,释放前端页面的缓存空间。
在一示例性实施例中,组件确认模块502,还用于根据页面信息的标识,在前端信息中识别出页面信息;页面信息为浏览器的首页对应的信息;将页面信息对应的组件确认为必加载组件;将前端信息对应的组件中除必加载组件之外的组件,确认为可加载组件。
在一示例性实施例中,组件识别模块506,还用于获取组件调用请求携带的组件标识;根据组件标识,从可加载组件中,识别出与组件标识对应的可加载组件;将与组件标识对应的可加载组件,确认为与组件调用请求对应的目标组件。
在一示例性实施例中,组件化的前端原生开发装置还包括编译模块,用于响应于针对初始前端信息的编译指令,对前端页面的初始前端信息进行压缩处理;将压缩处理后的初始前端信息中的自定义标识更新为随机标识,得到前端页面的前端信息。
上述组件化的前端原生开发装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。
在一示例性实施例中,提供了一种计算机设备,该计算机设备可以是服务器,其内部结构图可以如图6所示。该计算机设备包括处理器、存储器、输入/输出接口(Input/Output,简称I/O)和通信接口。其中,处理器、存储器和输入/输出接口通过系统总线连接,通信接口通过输入/输出接口连接到系统总线。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储前端页面的前端信息等数据。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种组件化的前端原生开发方法。
本领域技术人员可以理解,图6中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一示例性实施例中,还提供了一种计算机设备,包括存储器和处理器,存储器中存储有计算机程序,该处理器执行计算机程序时实现上述各方法实施例中的步骤。
在一示例性实施例中,提供了一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
在一示例性实施例中,提供了一种计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
需要说明的是,本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等),均为经用户授权或者经过各方充分授权的信息和数据,且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成的,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用,均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory,ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory,MRAM)、铁电存储器(Ferroelectric Random Access Memory,FRAM)、相变存储器(Phase Change Memory,PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory,RAM)或外部高速缓冲存储器等。作为说明而非局限,RAM可以是多种形式,比如静态随机存取存储器(Static Random Access Memory,SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory,DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等,不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等,不限于此。
以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请的保护范围应以所附权利要求为准。
Claims (10)
1.一种组件化的前端原生开发方法,其特征在于,所述方法包括:
在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
加载所述必加载组件,生成所述浏览器的前端页面,并按照预设的入栈堆栈中的各个入栈元素的顺序,将每个可加载组件加载至对应的预运行状态;所述每个可加载组件加载为所述每个可加载组件在所述入栈堆栈中对应的目标入栈元素的上一个入栈元素对应的运行状态;
在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
在所述前端页面上,按照所述入栈堆栈中的各个入栈元素的顺序,将所述目标组件从所述目标组件对应的预运行状态,加载至所述入栈堆栈中的栈底元素对应的运行状态;
响应于所述前端页面发送的组件删除请求,按照预设的出栈堆栈中的各个出栈元素的顺序,将所述目标组件从所述入栈堆栈中的栈底元素对应的运行状态,加载至所述目标组件在所述出栈堆栈中对应的目标出栈元素对应的删除状态;
响应于所述前端页面发送的页面注销请求,按照所述出栈堆栈中的各个出栈元素的顺序,将所述目标组件从所述目标出栈元素对应的删除状态,加载至所述出栈堆栈中的栈顶元素对应的删除状态;
在所有可加载组件均加载至所述出栈堆栈中的栈顶元素对应的删除状态的情况下,注销所述前端页面,释放所述前端页面的缓存空间。
2.根据权利要求1所述的方法,其特征在于,在将每个可加载组件加载至对应的预运行状态之前,还包括:
针对每个可加载组件,根据所述可加载组件的特征信息,确认所述可加载组件的类型;
根据所述可加载组件的类型,从所述预设的入栈堆栈中的各个入栈元素中,确认所述可加载组件对应的目标入栈元素;
将所述目标入栈元素在所述入栈堆栈中的各个入栈元素中的上一个入栈元素,确定为所述可加载组件对应的预加载入栈元素;
将所述预加载入栈元素对应的运行状态,确定为所述可加载组件对应的预运行状态。
3.根据权利要求1所述的方法,其特征在于,所述确认所述前端信息中的必加载组件和可加载组件,包括:
根据页面信息的标识,在所述前端信息中识别出所述页面信息;所述页面信息为所述浏览器的首页对应的信息;
将所述页面信息对应的组件确认为所述必加载组件;
将所述前端信息对应的组件中除所述必加载组件之外的组件,确认为所述可加载组件。
4.根据权利要求1所述的方法,其特征在于,所述在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件,包括:
获取所述组件调用请求携带的组件标识;
根据所述组件标识,从所述可加载组件中,识别出与所述组件标识对应的可加载组件;
将所述与所述组件标识对应的可加载组件,确认为所述与所述组件调用请求对应的目标组件。
5.根据权利要求1至4任意一项所述的方法,其特征在于,在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息之前,还包括:
响应于针对初始前端信息的编译指令,对所述前端页面的初始前端信息进行压缩处理;
将压缩处理后的初始前端信息中的自定义标识更新为随机标识,得到所述前端页面的前端信息。
6.一种组件化的前端原生开发装置,其特征在于,所述装置包括:
组件确认模块,用于在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
第一加载模块,用于加载所述必加载组件,生成所述浏览器的前端页面,并按照预设的入栈堆栈中的各个入栈元素的顺序,将每个可加载组件加载至对应的预运行状态;所述每个可加载组件加载为所述每个可加载组件在所述入栈堆栈中对应的目标入栈元素的上一个入栈元素对应的运行状态;
组件识别模块,用于在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
第二加载模块,用于在所述前端页面上,按照所述入栈堆栈中的各个入栈元素的顺序,将所述目标组件从所述目标组件对应的预运行状态,加载至所述入栈堆栈中的栈底元素对应的运行状态;
组件删除模块,用于响应于所述前端页面发送的组件删除请求,按照预设的出栈堆栈中的各个出栈元素的顺序,将所述目标组件从所述入栈堆栈中的栈底元素对应的运行状态,加载至所述目标组件在所述出栈堆栈中对应的目标出栈元素对应的删除状态;响应于所述前端页面发送的页面注销请求,按照所述出栈堆栈中的各个出栈元素的顺序,将所述目标组件从所述目标出栈元素对应的删除状态,加载至所述出栈堆栈中的栈顶元素对应的删除状态;在所有可加载组件均加载至所述出栈堆栈中的栈顶元素对应的删除状态的情况下,注销所述前端页面,释放所述前端页面的缓存空间。
7.根据权利要求6所述的装置,其特征在于,所述装置还用于针对每个可加载组件,根据所述可加载组件的特征信息,确认所述可加载组件的类型;根据所述可加载组件的类型,从所述预设的入栈堆栈中的各个入栈元素中,确认所述可加载组件对应的目标入栈元素;将所述目标入栈元素在所述入栈堆栈中的各个入栈元素中的上一个入栈元素,确定为所述可加载组件对应的预加载入栈元素;将所述预加载入栈元素对应的运行状态,确定为所述可加载组件对应的预运行状态。
8.根据权利要求6所述的装置,其特征在于,所述组件确认模块,还用于根据页面信息的标识,在所述前端信息中识别出所述页面信息;所述页面信息为所述浏览器的首页对应的信息;将所述页面信息对应的组件确认为所述必加载组件;将所述前端信息对应的组件中除所述必加载组件之外的组件,确认为所述可加载组件。
9.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至5中任一项所述的方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至5中任一项所述的方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310204658.3A CN116466953B (zh) | 2023-03-03 | 2023-03-03 | 组件化的前端开发方法、装置、计算机设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310204658.3A CN116466953B (zh) | 2023-03-03 | 2023-03-03 | 组件化的前端开发方法、装置、计算机设备和存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN116466953A CN116466953A (zh) | 2023-07-21 |
CN116466953B true CN116466953B (zh) | 2024-01-02 |
Family
ID=87176087
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202310204658.3A Active CN116466953B (zh) | 2023-03-03 | 2023-03-03 | 组件化的前端开发方法、装置、计算机设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN116466953B (zh) |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111538574A (zh) * | 2020-03-27 | 2020-08-14 | 北京达佳互联信息技术有限公司 | 任务堆栈的管理方法、装置、终端及存储介质 |
CN111639278A (zh) * | 2020-05-26 | 2020-09-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
CN111639289A (zh) * | 2020-05-13 | 2020-09-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
CN112000255A (zh) * | 2020-08-21 | 2020-11-27 | 北京明略软件系统有限公司 | 列表显示方法和装置、存储介质和电子装置 |
CN114282144A (zh) * | 2021-12-22 | 2022-04-05 | 天翼视讯传媒有限公司 | 一种基于移动端网络状态快速加载首屏页面的方法 |
WO2022127743A1 (zh) * | 2020-12-18 | 2022-06-23 | 华为技术有限公司 | 内容显示方法及终端设备 |
CN115357825A (zh) * | 2022-08-31 | 2022-11-18 | 中国建设银行股份有限公司 | 一种首屏加载优化方法、装置、电子设备及计算机可读存储介质 |
WO2023005163A1 (zh) * | 2021-07-28 | 2023-02-02 | 平安科技(深圳)有限公司 | 应用页面的加载方法、存储介质、及其相关设备 |
-
2023
- 2023-03-03 CN CN202310204658.3A patent/CN116466953B/zh active Active
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111538574A (zh) * | 2020-03-27 | 2020-08-14 | 北京达佳互联信息技术有限公司 | 任务堆栈的管理方法、装置、终端及存储介质 |
CN111639289A (zh) * | 2020-05-13 | 2020-09-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
CN111639278A (zh) * | 2020-05-26 | 2020-09-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
CN112000255A (zh) * | 2020-08-21 | 2020-11-27 | 北京明略软件系统有限公司 | 列表显示方法和装置、存储介质和电子装置 |
WO2022127743A1 (zh) * | 2020-12-18 | 2022-06-23 | 华为技术有限公司 | 内容显示方法及终端设备 |
WO2023005163A1 (zh) * | 2021-07-28 | 2023-02-02 | 平安科技(深圳)有限公司 | 应用页面的加载方法、存储介质、及其相关设备 |
CN114282144A (zh) * | 2021-12-22 | 2022-04-05 | 天翼视讯传媒有限公司 | 一种基于移动端网络状态快速加载首屏页面的方法 |
CN115357825A (zh) * | 2022-08-31 | 2022-11-18 | 中国建设银行股份有限公司 | 一种首屏加载优化方法、装置、电子设备及计算机可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN116466953A (zh) | 2023-07-21 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108874924B (zh) | 搜索服务的创建方法、装置及计算机可读存储介质 | |
CN109032662B (zh) | 代码文件生成方法、装置、计算机设备和存储介质 | |
WO2020015190A1 (zh) | 业务规则的生成方法、电子装置及可读存储介质 | |
CN111061475B (zh) | 软件代码生成方法、装置、计算机设备和存储介质 | |
CN110007920B (zh) | 一种获取代码依赖关系的方法、装置及电子设备 | |
CN112988284B (zh) | 应用程序启动方法、装置、计算机设备和存储介质 | |
CN112819153A (zh) | 一种模型转化方法及装置 | |
CN107368343A (zh) | 一种基于安卓系统的终端开机方法、终端及存储介质 | |
CN113504918A (zh) | 设备树配置优化方法、装置、计算机设备和存储介质 | |
KR20060047998A (ko) | 문서에 문맥 정보를 삽입하는 방법 및 시스템 | |
CN104731622A (zh) | 一种应用程序的加载方法、装置和移动终端 | |
CN116560642A (zh) | 代码生成方法及其装置、电子设备及存储介质 | |
CN111506314A (zh) | 项目开发的方法、装置、服务器及介质 | |
CN107688456B (zh) | 文件生成方法、设备以及计算机可读存储介质 | |
CN112269762A (zh) | 一种文件监控方法、装置、电子设备及存储介质 | |
CN116466953B (zh) | 组件化的前端开发方法、装置、计算机设备和存储介质 | |
CN108089895B (zh) | 一种插件中Activity的注册方法、装置、电子设备以及存储介质 | |
CN115185576A (zh) | 一种基于流程类应用系统的流程定制方法及系统 | |
CN114911541A (zh) | 配置信息的处理方法、装置、电子设备及存储介质 | |
CN114936269A (zh) | 文档搜索平台、搜索方法、装置、电子设备及存储介质 | |
CN114691496A (zh) | 单元测试方法、装置、计算设备及介质 | |
CN110780983A (zh) | 任务异常处理方法、装置、计算机设备以及存储介质 | |
CN116700841B (zh) | 一种原生api调用的方法及装置 | |
CN115827574A (zh) | 视频回放数据的读取方法、设备及存储介质 | |
CN111400058A (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |