WO2019052417A1

WO2019052417A1 - Page loading method and apparatus, electronic device and storage medium

Info

Publication number: WO2019052417A1
Application number: PCT/CN2018/104784
Authority: WO
Inventors: 徐闻东
Original assignee: 广州优视网络科技有限公司
Priority date: 2017-09-15
Filing date: 2018-09-10
Publication date: 2019-03-21
Also published as: CN107506483A

Abstract

A page loading method and apparatus, an electronic device and a storage medium, relating to the technical field of the Internet, and being applied to resources obtained by means of a packing tool, wherein the resources comprise self-defined resource files, a preset AnnieJs main module is introduced into the resource files, the AnnieJs main module comprises a plurality of sub-functional modules, the AnnieJs main module is provided with a main interface, and the sub-functional modules are correspondingly provided with respective invoking interfaces. The method comprises: invoking a resource file in a page to be displayed (S200); by means of invoking a main interface of an AnnieJs main module introduced in the resource file, invoking a target sub-functional module required for the page to be displayed in a sub-functional module (S210); and loading a function corresponding to the target sub-functional module in the page to be displayed (S220), thereby reducing resource requests and optimizing the page loading performance by introducing the AnnieJs main module into the resource file invoked in the page to be displayed.

Description

Page loading method, device, electronic device and storage medium

Cross reference

The present application claims the following priority: Application No.: 201710837894.3, entitled "Page Loading Method, Apparatus, Electronic Device, and Storage Medium", which is hereby incorporated by reference. content.

Technical field

The present invention relates to the field of Internet technologies, and in particular, to a page loading method, apparatus, electronic device, and storage medium.

Background technique

AnnieJs is a 2d animation engine that focuses on Html5 interactive interaction. Webpack is a module loader and a packaging tool. Webpack introduces and packages AnnieJs into the final resource file for page loading. However, currently only the script tag is supported to introduce AnnieJs, the page will have one more resource request, and the page load takes a long time.

Summary of the invention

In view of this, an object of embodiments of the present invention is to provide a page loading method, apparatus, electronic device, and storage medium to improve the above problems. In order to achieve the above object, the technical solution adopted by the present invention is as follows:

In a first aspect, an embodiment of the present invention provides a page loading method, which is applied to a resource obtained by a packaging tool, where the resource includes a customized resource file, and a preset main module of AnnieJs is introduced in the resource file. The main module of the AnnieJs includes a plurality of sub-function modules, the main module of the AnnieJs is provided with a main interface, and each sub-function module is correspondingly provided with a respective calling interface, and each of the sub-function modules is respectively used to implement a function, the method The method includes: calling the resource file in a page to be displayed; calling a target sub-function module required by the page to be displayed in the sub-function module by calling a main interface of an AnnieJs main module introduced in the resource file; Loading a function corresponding to the target sub-function module in the page to be displayed.

In a second aspect, an embodiment of the present invention provides a page loading apparatus, which is applied to a resource obtained by a packaging tool, where the resource includes a customized resource file, and a preset main module of AnnieJs is introduced into the resource file. The main module of the AnnieJs includes a plurality of sub-function modules, the main module of the AnnieJs is provided with a main interface, and each sub-function module is correspondingly provided with a respective calling interface, and each of the sub-function modules is respectively used to implement a function, the device The first calling unit, the second calling unit, and the loading unit are included. a first calling unit, configured to invoke the resource file in a page to be displayed. And a second calling unit, configured to invoke a target sub-function module required by the page to be displayed in the sub-function module by calling a main interface of the AnnieJs main module introduced in the resource file. a loading unit, configured to load a function corresponding to the target sub-function module in the page to be displayed.

In a third aspect, an embodiment of the present invention provides an electronic device, where the electronic device includes a processor and a memory, the processor and the memory are electrically connected by a bus; the memory is used to store a program; the processor For calling the program stored in the memory by the bus, executing: calling a resource file in a page to be displayed; calling the sub-function module by calling a main interface of the AnnieJs main module introduced in the resource file Displaying a target sub-function module required by the page; loading a function corresponding to the target sub-function module in the to-be-displayed page.

In a fourth aspect, an embodiment of the present invention provides a storage medium storing program code executable by a processor, the program code being configured to cause the processor to execute the method.

The method for loading a page, the electronic device, and the storage medium are applied to the resource obtained by the packaging tool, where the resource includes a customized resource file, and the preset AnnieJs is introduced into the resource file. The main module, the AnnieJs main module includes a plurality of sub-function modules, the AnnieJs main module is provided with a main interface, and each sub-function module is correspondingly provided with a respective calling interface, and each of the sub-function modules is respectively used to implement a function. The method includes: calling the resource file in a page to be displayed; calling a target interface of the to-be-displayed page in the sub-function module by calling a main interface of an AnnieJs main module introduced in the resource file a function module; loading a function corresponding to the target sub-function module in the to-be-displayed page, thereby introducing a resource request generated by the AnnieJs through the script tag by introducing an AnnieJs main module into a resource file called by the page to be displayed, Thereby reducing resource requests and optimizing page loading performance.

Other features and advantages of the invention will be set forth in part in the description in the written description The objectives and other advantages of the invention may be realized and obtained by means of the structure particularly pointed in the appended claims.

DRAWINGS

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the embodiments will be briefly described below. It should be understood that the following drawings show only certain embodiments of the present invention, and therefore It should be seen as a limitation on the scope, and those skilled in the art can obtain other related drawings according to these drawings without any creative work.

1 is a structural block diagram of an electronic device applicable to an embodiment of the present invention;

2 is a flowchart of a page loading method according to an embodiment of the present invention;

3 is a schematic diagram of multiple functional modules in an AnnieJs main module according to an embodiment of the present invention;

4 is a schematic diagram of an main module of AnnieJs according to an embodiment of the present invention;

FIG. 5 is a schematic diagram of a base class AObject module of an Annie engine class according to an embodiment of the present invention; FIG.

FIG. 6 is a structural block diagram of a page loading apparatus according to an embodiment of the present invention.

Detailed ways

The technical solutions in the embodiments of the present invention are clearly and completely described in the following with reference to the accompanying drawings in the embodiments of the present invention. It is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. The components of the embodiments of the invention, which are generally described and illustrated in the figures herein, may be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the invention in the claims All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative efforts are within the scope of the present invention.

It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings. Also, in the description of the present invention, the terms "first", "second", and the like are used merely to distinguish a description, and are not to be construed as indicating or implying a relative importance.

FIG. 1 is a block diagram showing the structure of an electronic device 100 that can be applied to an embodiment of the present invention. As shown in FIG. 1, the electronic device 100 can include a memory 102, a memory controller 104, one or more (only one shown in FIG. 1) processor 106, a peripheral interface 108, an input and output module 110, an audio module 112, The display module 114, the radio frequency module 116, and the page loading device.

The memory 102, the memory controller 104, the processor 106, the peripheral interface 108, the input and output module 110, the audio module 112, the display module 114, and the RF module 116 are electrically connected directly or indirectly to each other to implement data transmission or Interaction. For example, these components can be electrically connected by one or more communication buses or signal buses. The page loading methods respectively include at least one software function module that can be stored in the memory 102 in the form of software or firmware, such as a software function module or a computer program included in the page loading device.

The memory 102 can store various software programs and modules, such as the page loading method and the program instructions/modules corresponding to the device provided by the embodiments of the present application. The processor 106 executes various function applications and data processing by running software programs and modules stored in the memory 102, that is, implementing the page loading method in the embodiment of the present application.

The memory 102 can include, but is not limited to, Random Access Memory (RAM), Read Only Memory (ROM), Programmable Read-Only Memory (PROM), erasable read-only Erasable Programmable Read-Only Memory (EPROM), Electric Erasable Programmable Read-Only Memory (EEPROM), and the like.

Processor 106 can be an integrated circuit chip with signal processing capabilities. The processor may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP processor, etc.), or a digital signal processor (DSP) or an application specific integrated circuit (ASIC). ), off-the-shelf programmable gate arrays (FPGAs) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps, and logical block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general purpose processor may be a microprocessor or the processor or any conventional processor or the like.

The peripheral interface 108 couples various input/input devices to the processor 106 and the memory 102. In some embodiments, peripheral interface 108, processor 106, and memory controller 104 can be implemented in a single chip. In other instances, they can be implemented by separate chips.

The input and output module 110 is configured to provide input data to the user to implement user interaction with the electronic device 100. The input and output module 110 can be, but is not limited to, a mouse, a keyboard, and the like.

The audio module 112 provides an audio interface to the user, which may include one or more microphones, one or more speakers, and audio circuitry.

The display module 114 provides an interactive interface (eg, a user interface) between the electronic device 100 and the user or for displaying image data to the user for reference. In this embodiment, the display module 114 can be a liquid crystal display or a touch display. For a touch display, it can be a capacitive touch screen or a resistive touch screen that supports single-point and multi-touch operations. Supporting single-point and multi-touch operations means that the touch display can sense simultaneous touch operations from one or more locations on the touch display, and the touch operation is transferred to the processor 106. Perform calculations and processing.

The radio frequency module 116 is configured to receive and transmit electromagnetic waves, and realize mutual conversion between electromagnetic waves and electric signals, thereby communicating with a communication network or other devices.

It can be understood that the structure shown in FIG. 1 is merely illustrative, and the electronic device 100 may further include more or less components than those shown in FIG. 1, or have a different configuration from that shown in FIG. 1. The components shown in Figure 1 can be implemented in hardware, software, or a combination thereof.

In the embodiment of the present invention, the electronic device 100 can function as a user terminal or as a server. The user terminal can be a terminal device such as a PC (personal computer) computer, a tablet computer, a mobile phone, a notebook computer, a smart TV, a set top box, or a vehicle terminal. A client can be installed in the electronic device 100, and the client can be a browser or a third-party application.

Referring to FIG. 2, an embodiment of the present invention provides a page loading method, which is applied to a resource obtained by a packaging tool, where the resource includes a customized resource file, and a preset main module of AnnieJs is introduced in the resource file. The main module of the AnnieJs includes a plurality of sub-function modules, and the main module of the AnnieJs is provided with a main interface, and each sub-function module is correspondingly provided with a respective calling interface, and each of the sub-function modules is respectively configured to implement a function, The method includes: step S200, step S210, and step S220.

Step S200: The resource file is called in a page to be displayed.

In this embodiment, the resource file may be a Javascript file. The packaging tool can be a webpack. Webpack is a module loader and a packaging tool.

Step S210: Call the target sub-function module required by the page to be displayed in the sub-function module by calling the main interface of the AnnieJs main module introduced in the resource file.

As an embodiment, based on the step S210, further, by calling the main interface of the AnnieJs main module stored in the resource file, the target sub-function required for the page to be displayed in the sub-function module is called. Module.

AnnieJs is a 2d animation engine that focuses on Html5 interactive interaction. For example, as shown in FIG. 3, each class in AnnieJs is a functional module, such as the base class AObject of the annie engine class, the event trigger class EventDispatcher, the event class Event, the mouse event class MouseEvent, and the 2-dimensional matrix Matrix. The collection of multiple function modules is encapsulated into the main module of AnnieJs, corresponding to the main interface. As shown in FIG. 4, the main interface corresponding to the main module of AnnieJs is externally called, and the main module of AnnieJs includes multiple sub-function modules, and then the sub-functions are called. The calling interface corresponding to the module calls the sub-function module corresponding to the calling interface. For example, in webpack, you can introduce the native AnnieJs main module via require.

AnnieJs can include multiple classes. Each class corresponds to a functional module. Function modules can be used to implement animation functions. For example, AObject is the base class for the Annie engine class. EventDispatcher triggers the base class for the event. Event is the event class, the base class for all events in the Annie engine. MouseEvent is a mouse event class. Point is a point class. Matrix is a 2-dimensional matrix. Rectangle is a rectangular class. DisplayObject is the display object lottery class. Bitmap is a bitmap file class. Shape is a vector object class. Sprite is the container class for display objects. ImageFrames draws the contents of the img sequence into the canvas. MovieClip is the core class of the Annie engine. VideoPlayer is used to form the effect of continuous playback of video content or sequence pictures into the canvas to facilitate interaction. TextField is a dynamic text class. Stage is the entire area that represents the contents of the canvas. ShadowFilter is a projection or illuminating filter. ColorFilter is a common color filter. ColorMatrixFilter is a matrix color filter. BlurFilter is a blur filter. CanvasRender is a Canvas renderer. WGRender is a WebGl renderer. URLLoader loads classes for resources. RESManager loads the management module for the resource. Tween is a global static single-column class. MovieClip is a class in the core class of the Annie engine.

Step S220: Load the function corresponding to the target sub-function module in the page to be displayed.

As an implementation manner, based on step S210, further acquiring an ID code corresponding to the target sub-function module, calling the target sub-function module corresponding to the corresponding ID code, and loading in the to-be-displayed page The function corresponding to the target sub-function module.

For example, as shown in Figure 5, taking the base class AObject of the Annie engine class as an example, the logic related to it is implemented in the module. Each Aninie engine object will have a unique id code, and the base class AObject has a unique one. The id code, get the id code, call the AObject module to implement the corresponding function.

A page loading method provided by the embodiment of the present invention is applied to a resource obtained by a packaging tool, where the resource includes a customized resource file, and a preset main module of AnnieJs is introduced in the resource file, and the main module of the AnnieJs is introduced. A plurality of sub-function modules are provided, and the main module of the AnnieJs is provided with a main interface, and each sub-function module is correspondingly provided with a respective calling interface, and each of the sub-function modules is used to implement a function, and the method includes: waiting for Calling the resource file in the display page; calling the target sub-function module required for the page to be displayed in the sub-function module by calling the main interface of the main module of the AnnieJs introduced in the resource file; Loading the function corresponding to the target sub-function module in the page, thereby introducing the resource file called by the AnnieJs main module to the page to be displayed, and avoiding introducing the resource request generated by the AnnieJs through the script tag, thereby reducing the resource request and optimizing the page loading. performance.

Referring to FIG. 6 , an embodiment of the present invention provides a page loading apparatus 300, which is applied to a resource obtained by a packaging tool, where the resource includes a customized resource file, and a preset main module of AnnieJs is introduced into the resource file. The AnnieJs main module includes a plurality of sub-function modules, and the AnnieJs main module is provided with a main interface, and each sub-function module is correspondingly provided with a respective calling interface, and each of the sub-function modules is respectively used to implement a function.

The apparatus 300 includes a first invoking unit 310, a second invoking unit 320, and a loading unit 330.

The first calling unit 310 is configured to invoke the resource file in a page to be displayed.

The packaging tool can be a webpack.

The second invoking unit 320 is configured to invoke a target sub-function module required by the page to be displayed in the sub-function module by calling a main interface of the AnnieJs main module introduced in the resource file.

The second invoking unit 320 may include a introducing subunit 321 and a second invoking subunit 322.

The sub-unit 321 is introduced to invoke the target sub-function module required by the page to be displayed in the sub-function module by calling the main interface of the local AnnieJs main module in the resource file.

The second calling sub-unit 322 is configured to acquire an ID code corresponding to the target sub-function module, and invoke the target sub-function module corresponding to the corresponding ID code.

The loading unit 330 is configured to load a function corresponding to the target sub-function module in the page to be displayed.

Each of the above units may be implemented by software code. In this case, each unit described above may be stored in the memory 102. The above units can also be implemented by hardware such as an integrated circuit chip.

The page loading device 300 provided by the embodiment of the present invention has the same implementation principle and technical effects as the foregoing method embodiments. For a brief description, where the device embodiment is not mentioned, reference may be made to the corresponding content in the foregoing method embodiments.

Embodiments of the present invention provide a storage medium storing program code executable by a processor, the program code being configured to cause the processor to execute the page loading method described above.

In the several embodiments provided by the present application, it should be understood that the disclosed apparatus and method may also be implemented in other manners. The apparatus embodiments described above are merely illustrative, for example, the flowcharts and block diagrams in the figures illustrate the architecture, functionality, and functionality of possible implementations of apparatus, methods, and computer program products according to various embodiments of the invention. operating. In this regard, each block of the flowchart or block diagram can represent a module, a program segment, or a portion of code that includes one or more of the Executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may also occur in a different order than those illustrated in the drawings. For example, two consecutive blocks may actually be executed in substantially parallel, and they may sometimes be executed in the reverse order, depending upon the functionality involved. It is also noted that each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts, can be implemented in a dedicated hardware-based system that performs the specified function or action. Or it can be implemented by a combination of dedicated hardware and computer instructions.

In addition, each functional module in each embodiment of the present invention may be integrated to form a separate part, or each module may exist separately, or two or more modules may be integrated to form a separate part.

The functions, if implemented in the form of software functional modules and sold or used as separate products, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention, which is essential or contributes to the prior art, or a part of the technical solution, may be embodied in the form of a software product, which is stored in a storage medium, including The instructions are used to cause a computer device (which may be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present invention. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and the like. . It should be noted that, in this context, relational terms such as first and second are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply these entities or operations. There is any such actual relationship or order between them. Furthermore, the term "comprises" or "comprises" or "comprises" or any other variations thereof is intended to encompass a non-exclusive inclusion, such that a process, method, article, or device that comprises a plurality of elements includes not only those elements but also Other elements, or elements that are inherent to such a process, method, item, or device. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device that comprises the element.

The above description is only the preferred embodiment of the present invention, and is not intended to limit the present invention, and various modifications and changes can be made to the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and scope of the present invention are intended to be included within the scope of the present invention. It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings.

The above is only a specific embodiment of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily think of changes or substitutions within the technical scope of the present invention. It should be covered by the scope of the present invention. Therefore, the scope of the invention should be determined by the scope of the claims.

It should be noted that, in this context, relational terms such as first and second are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply these entities or operations. There is any such actual relationship or order between them. Furthermore, the term "comprises" or "comprises" or "comprises" or any other variations thereof is intended to encompass a non-exclusive inclusion, such that a process, method, article, or device that comprises a plurality of elements includes not only those elements but also Other elements, or elements that are inherent to such a process, method, item, or device. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device that comprises the element.

Claims

A page loading method is characterized in that it is applied to a resource obtained by a packaging tool, the resource includes a customized resource file, and a preset main module of AnnieJs is introduced in the resource file, and the main module of the AnnieJs includes a plurality of a sub-function module, the main module of the AnnieJs is provided with a main interface, and each sub-function module is correspondingly provided with a respective calling interface, and each of the sub-function modules is used to implement a function, the method includes:

Invoking the resource file in a page to be displayed;

Calling a target sub-function module required for the page to be displayed in the sub-function module by calling a main interface of the AnnieJs main module introduced in the resource file;

Loading a function corresponding to the target sub-function module in the page to be displayed.
The method according to claim 1, wherein the target sub-function module required to invoke the page to be displayed in the sub-function module by calling the main interface of the main module of the AnnieJs introduced in the resource file comprises:

The target sub-function module required for the page to be displayed in the sub-function module is invoked by calling the main interface of the local AnnieJs main module in the resource file.
The method according to claim 1, wherein the target sub-function module required to invoke the page to be displayed in the sub-function module comprises:

Obtaining an ID code corresponding to the target sub-function module, and calling the target sub-function module corresponding to the corresponding ID code.
The method of claim 1 wherein the packaging tool is a webpack.
A page loading device is characterized in that it is applied to a resource obtained by a packaging tool, the resource includes a customized resource file, and a preset AnnieJs main module is introduced in the resource file, and the AnnieJs main module includes multiple a sub-function module, the main module of the AnnieJs is provided with a main interface, and each sub-function module is correspondingly provided with a respective calling interface, and each of the sub-function modules is used to implement a function, and the device comprises:

a first calling unit, configured to invoke the resource file in a page to be displayed;

a second calling unit, configured to invoke a target sub-function module required by the page to be displayed in the sub-function module by calling a main interface of the AnnieJs main module introduced in the resource file;

a loading unit, configured to load a function corresponding to the target sub-function module in the page to be displayed.
The apparatus according to claim 5, wherein said second invoking unit comprises:

The sub-unit is introduced to invoke the target sub-function module required for the page to be displayed in the sub-function module by calling the main interface of the local AnnieJs main module in the resource file.
The device according to claim 5, wherein the second invoking unit further comprises:

And a second calling subunit, configured to acquire an ID code corresponding to the target sub-function module, and invoke the target sub-function module corresponding to the corresponding ID code.
The apparatus of claim 5 wherein said packaging tool is a webpack.
An electronic device, comprising: a processor and a memory, the processor and the memory are electrically connected by a bus; the memory is for storing a program; the processor is configured to pass the The bus calls a program stored in the memory and executes:

Calling a resource file in the page to be displayed;

Calling the target sub-function module required by the page to be displayed in the sub-function module by calling the main interface of the AnnieJs main module introduced in the resource file;

Loading a function corresponding to the target sub-function module in the page to be displayed.
A storage medium, characterized in that the storage medium stores program code executable by a processor, the program code being configured to cause the processor to perform the method of any one of claims 1-4.