CN107665134A - Page component loading method, device, medium and terminal equipment - Google Patents
Page component loading method, device, medium and terminal equipment Download PDFInfo
- Publication number
- CN107665134A CN107665134A CN201710912314.2A CN201710912314A CN107665134A CN 107665134 A CN107665134 A CN 107665134A CN 201710912314 A CN201710912314 A CN 201710912314A CN 107665134 A CN107665134 A CN 107665134A
- Authority
- CN
- China
- Prior art keywords
- component
- loaded
- loading
- page
- css
- 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
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 116
- 238000009877 rendering Methods 0.000 claims abstract description 56
- 238000000034 method Methods 0.000 claims description 60
- 230000008859 change Effects 0.000 abstract description 9
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 11
- 230000008569 process Effects 0.000 description 3
- 239000000463 material Substances 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a page component loading method, a page component loading device, a page component loading medium and terminal equipment, wherein the page component loading method comprises the following steps: loading a component to be loaded in a page, and increasing a reference count corresponding to the component to be loaded; judging whether the component to be loaded is loaded for the first time according to the reference count; if the component to be loaded is loaded for the first time, creating a CSS style code corresponding to the component to be loaded; and loading the CSS style code to complete the component rendering. The page component loading method, the page component loading device, the page component loading medium and the terminal equipment ensure that the CSS style code can change along with the use condition of the page component in real time, improve the CSS style loading mode, effectively improve the page component loading speed, reduce the flow consumption and improve the use experience of a user for browsing the page.
Description
Technical Field
The invention relates to the technical field of information processing, in particular to a page component loading method, a page component loading device, a page component loading medium and terminal equipment.
Background
The modular development refers to a development mode of a front end of a Web (World Wide Web, internet Web). By adopting the modular development, the HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) and JS (Javascript) of one module can be independently compiled, so that the multiplexing is convenient. At present, the componentization development is mainly developed based on the frames of React, AngularJS, Vue and the like. The three are all based on a javascript framework. Different frameworks, the method of processing CSS styles differs. The method comprises the following steps: the CSS style is written as an inline style, but with the increase of page contents, the corresponding HTML and CSS styles are more, and the page redundancy condition is generated; the method 2 comprises the following steps: the CSS styles in all used components in the page are extracted and then merged and compressed, but some pages only need to load a part of the CSS styles and do not need to load all the CSS styles, so that the method can cause the speed of loading the page to be slow and waste more traffic.
Disclosure of Invention
The invention provides a page component loading method, a page component loading device, a page component loading medium and terminal equipment, and aims to solve at least one of the technical problems.
The embodiment of the invention provides a page component loading method, which comprises the following steps: loading a component to be loaded in a page, and increasing a reference count corresponding to the component to be loaded; judging whether the component to be loaded is loaded for the first time according to the reference count; if the component to be loaded is loaded for the first time, creating a CSS style code corresponding to the component to be loaded; and loading the CSS style code to complete component rendering.
Optionally, if the component to be loaded is not loaded for the first time, obtaining the CSS style code corresponding to the component to be loaded from the global component style referencing technical variable; and loading the CSS style code to finish page rendering.
Optionally, loading the components to be loaded in the page includes: and calling a loading CSS method in the CSS collector to load the component to be loaded.
Optionally, before loading the component to be loaded in the page, the method further includes: and executing the component rendering OnRender method to start the component rendering.
Optionally, creating the CSS style code corresponding to the component to be loaded includes: and creating the CSS style code corresponding to the component to be loaded through a Document Object Model (DOM) interface by using a JS script language.
Optionally, when detecting that a component in the page is removed, executing the component to release the OnRelease method; an offload CSS method in the CSS collector is invoked to reduce the reference count of the removed component.
Optionally, when the reference count of the removed component is reduced to 0, deleting the CSS style code corresponding to the removed component through the DOM interface by using the JS scripting language.
Another embodiment of the present invention provides a page component loading apparatus, including: the loading module is used for loading the components to be loaded in the page and increasing the reference count corresponding to the components to be loaded; the judging module is used for judging whether the component to be loaded is loaded for the first time according to the reference count; the creating module is used for creating a CSS style code corresponding to the component to be loaded if the component to be loaded is loaded for the first time; and the rendering module is used for loading the CSS style code to finish component rendering.
Optionally, the apparatus further comprises: the obtaining module is used for obtaining the CSS style code corresponding to the component to be loaded from the global component style reference technical variable if the component to be loaded is not loaded for the first time; and the rendering module is used for loading the CSS style code to finish page rendering.
Optionally, the loading module is configured to: and calling a loading CSS method in the CSS collector to load the component to be loaded.
Optionally, the apparatus further comprises: and the starting module is used for executing the component rendering OnRender method to start the component rendering before the components to be loaded in the page are loaded.
Optionally, the creating module is configured to: and creating the CSS style code corresponding to the component to be loaded through a Document Object Model (DOM) interface by using a JS script language.
Optionally, the apparatus further comprises: and the release module is used for executing the OnRelease method released by the component when the component in the page is detected to be removed, and calling the uninstalling CSS method in the CSS collector to reduce the reference count of the removed component.
Optionally, the releasing module is further configured to: and when the reference count of the removed component is reduced to 0, deleting the CSS style code corresponding to the removed component through the DOM interface by using the JS script language.
A further embodiment of the present invention provides a non-volatile computer storage medium, which is characterized in that the non-volatile computer storage medium stores computer executable commands, where the computer executable commands are used to enable a computer to execute the page component loading method according to the first aspect of the present invention.
Yet another embodiment of the present invention provides a terminal device, including at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein,
the memory stores commands executable by the at least one processor, and the commands are executed by the at least one processor to enable the at least one processor to execute the page component loading method according to the embodiment of the first aspect of the present invention.
A further embodiment of the present invention provides an application program, wherein when instructions in the application program are executed by a processor, the method for loading a page component according to the embodiment of the first aspect of the present invention is performed.
The technical scheme provided by the embodiment of the invention has the following beneficial effects:
loading a component to be loaded in a page, increasing a reference count corresponding to the component to be loaded, and then judging whether the component to be loaded is loaded for the first time according to the reference count; when the component to be loaded is loaded for the first time, the CSS style code corresponding to the component to be loaded is created, and the CSS style code is loaded to finish component rendering, so that the CSS style code can be changed along with the use condition of the page component in real time, the CSS style loading mode is improved, the page component loading speed is effectively increased, the flow consumption is reduced, and the use experience of a user for browsing the page is improved.
Additional aspects and advantages of the invention will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the invention.
Drawings
The foregoing and/or additional aspects and advantages of the present invention will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:
FIG. 1 is a flow diagram of a page component loading method according to one embodiment of the invention;
FIG. 2 is a flow diagram of a page component loading method according to another embodiment of the invention;
FIG. 3 is a flow diagram of a page component loading method according to yet another embodiment of the invention;
FIG. 4 is a diagram illustrating page component loading effects, according to an embodiment of the present invention;
FIG. 5 is a block diagram of the structure of a page component loading apparatus according to one embodiment of the present invention;
FIG. 6 is a block diagram of a page component loading apparatus according to another embodiment of the present invention;
FIG. 7 is a block diagram of a page component loading apparatus according to yet another embodiment of the present invention;
FIG. 8 is a block diagram of a page component loading apparatus according to still another embodiment of the present invention;
fig. 9 is a block diagram of a terminal device according to an embodiment of the present invention.
Detailed Description
Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are illustrative and intended to be illustrative of the invention and are not to be construed as limiting the invention.
A page component loading method, an apparatus, a medium, and a terminal device according to embodiments of the present invention are described below with reference to the accompanying drawings.
FIG. 1 is a flow diagram of a page component loading method according to one embodiment of the invention.
As shown in fig. 1, the page component loading method includes:
s101, loading the components to be loaded in the page, and increasing the reference count corresponding to the components to be loaded.
In one embodiment of the invention, the component rendering OnRender method may first be executed to start component rendering before loading the component to be loaded in the page. Wherein the OnRender method is a function representing the beginning of the lifecycle of the component.
After the rendering of the components is started, a CSS loading method in the CSS collector can be called to load the components to be loaded, and the reference counts corresponding to the components to be loaded are increased. For example: when the page is loaded, if the component a needs to be loaded, the reference count corresponding to the component a may be +1, so as to indicate the number of times the component a is loaded.
And S102, judging whether the component to be loaded is loaded for the first time according to the reference count.
In a specific embodiment of the present invention, the CSS renderer may detect a change in the reference count to determine whether the component to be loaded is loaded for the first time. And if the CSS renderer detects that the identifier of a certain component to be loaded is a newly added identifier and the corresponding reference count is 0, determining that the component to be loaded is loaded for the first time. If the CSS renderer detects that the identifier of a certain component to be loaded is an existing identifier and the corresponding reference count is increased, such as from 2 to 3, it may be determined that the component to be loaded is not loaded for the first time.
S103, if the component to be loaded is loaded for the first time, creating a CSS style code corresponding to the component to be loaded.
In a specific embodiment of the invention, the JS scripting language can be used to create the CSS style code corresponding to the component to be loaded through the document object model DOM interface of the browser.
And S104, loading the CSS style code to complete component rendering.
After the CSS style code is created, the CSS style code loading operation can be executed, so that component rendering is completed, and finally loading of the page component is realized.
In addition, as shown in fig. 2, the page component loading method may further include the following steps:
s105, if the component to be loaded is not loaded for the first time, obtaining the CSS style code corresponding to the component to be loaded from the global component style reference technical variable.
If the component to be loaded is not loaded for the first time, it is indicated that the CSS style code corresponding to the component to be loaded already exists, and the component to be loaded does not need to be created again and only needs to obtain the existing CSS style code. Wherein the CSS style code is stored in a global component style referencing technical variable. The global component style reference technology variables primarily hold the identification of the component, the reference count, and the corresponding CSS style code.
And S104, loading the CSS style code to complete component rendering.
After the CSS style code is obtained, the CSS style code loading operation can be executed, so that component rendering is completed, and finally loading of the page component is realized.
In addition, as shown in fig. 3, the page component loading method may further include the steps of:
s106, when the removal of the component in the page is detected, the component is executed to release the OnRelease method.
The OnRelease method is a function representing the life cycle of the component and is mainly used for releasing the component.
S107, an offload CSS method in the CSS collector is called to reduce the reference count of the removed component.
After a component is released, the offload CSS method in the CSS collector may be invoked to offload the removed component and reduce the reference count corresponding to the component. For example: if one component A in the page is removed, the reference count for that component A may be-1, indicating the number of times component A was unloaded.
When the reference count of the removed component is reduced to 0, the CSS style code corresponding to the removed component can be deleted through the DOM interface of the browser using the JS scripting language. That is, if the reference count of the removed component is reduced to 0, it indicates that the component is no longer loaded, and thus the CSS style code corresponding to the component may be deleted, thereby avoiding page redundancy.
A specific example is explained below.
As shown in fig. 4, when page componentization development is performed, components may be defined in advance. Wherein, the life cycle of the component can be defined through JS codes, OnRender represents the rendering of the component, and OnRelease represents the release of the component. Then, a global component style reference count variable is defined for recording the components contained in the current page, the number of the components and the CSS styles corresponding to the components.
Wherein, component _ a represents a component A, count:1 represents that the corresponding reference count is 1, and CSS: 'background: red' represents that the CSS style is red in background; component _ B denotes component B, count:0 denotes the corresponding reference count is 0, and CSS: 'font-size:10px' denotes the CSS style is font size is 10 pixels.
Then, a CSS collector is defined, wherein the CSS collector includes two methods, one for loading CSS patterns and the other for unloading CSS patterns. When a page component is loaded, the reference count for that component may be incremented by the identification of the component. When a page component is removed, the reference count for that component may be decremented by the identification of the component.
After that, a CSS renderer is defined for detecting whether the reference count of the component has changed. And when the CSS renderer detects that the identifier of the component is the newly added identifier, the JS script language can be used for creating a CSS style code corresponding to the newly added component through a DOM interface of the browser. When the CSS renderer detects that the identifier of the component is an existing identifier, only the reference count of the component is incremented, for example, CSS _ counter. When the CSS renderer detects that a component in the page is removed, the CSS renderer decrements the reference count corresponding to the removed component. When the reference count corresponding to the removed component is reduced to 0 or less than 0, the CSS style code corresponding to the removed component can be deleted through the DOM interface of the browser using the JS scripting language.
After the above is defined, the page loading process may be performed.
Specifically, the page starts to load, and the component requiring loading executes the OnRender method to start rendering. The reference count of the component that needs to be loaded is increased by calling the method of the CSS collector to load the CSS style. The CSS renderer can detect the change in the component reference count described above. And if the component needing to be loaded is loaded for the first time, creating a CSS style code corresponding to the newly added component through a DOM interface of the browser by using a JS script language, and then rendering. And if the component needing to be loaded is not loaded for the first time, the new CSS style code does not need to be created, the existing CSS style code is directly referred to for rendering, and the reference count of the corresponding component is increased.
In addition, when a page changes, some components are removed, and the removed components execute an OnRelease method, the reference count of the removed components is reduced by calling the method of CSS collector to unload CSS style. And if the reference count of a certain component is reduced to 0, deleting the CSS style code corresponding to the removed component through a DOM interface of the browser by using the JS scripting language.
According to the page component loading method provided by the embodiment of the invention, the component to be loaded in the page is loaded, the reference count corresponding to the component to be loaded is increased, whether the component to be loaded is loaded for the first time is judged according to the reference count, when the component to be loaded is loaded for the first time, the CSS style code corresponding to the component to be loaded is created, and the CSS style code is loaded to finish component rendering, so that the CSS style code can be ensured to change along with the use condition of the page component in real time, the CSS style loading mode is improved, the page component loading speed is effectively increased, the flow consumption is reduced, and the use experience of a user for browsing the page is improved.
In order to implement the foregoing embodiment, the present invention further provides a page component loading apparatus, and fig. 5 is a block diagram of a structure of the page component loading apparatus according to an embodiment of the present invention, as shown in fig. 5, the apparatus includes a loading module 510, a determining module 520, a creating module 530, and a rendering module 540.
The loading module 510 is configured to load a component to be loaded in a page and increase a reference count corresponding to the component to be loaded.
The determining module 520 is configured to determine whether the component to be loaded is loaded for the first time according to the reference count.
A creating module 530, configured to create a CSS style code corresponding to the component to be loaded if the component to be loaded is loaded for the first time.
And the rendering module 540 is used for loading the CSS style code to complete component rendering.
In addition, as shown in fig. 6, the apparatus may further include an acquisition module 550.
An obtaining module 550, configured to obtain, if the component to be loaded is not loaded for the first time, the CSS style code corresponding to the component to be loaded from the global component style referencing technical variable.
And the rendering module 540 is configured to load the CSS style code to complete page rendering.
In addition, as shown in fig. 7, the apparatus may further include an opening module 560.
And the starting module 560 is used for executing the component rendering OnRender method to start the component rendering before the components to be loaded in the page are loaded.
As shown in fig. 8, the apparatus may further include a release module 570.
A release module 570, configured to, when it is detected that a component in the page is removed, execute the component release OnRelease method and call an unload CSS method in the CSS collector to reduce the reference count of the removed component.
It should be noted that the foregoing explanation of the page component loading method is also applicable to the page component loading apparatus in the embodiment of the present invention, and details not disclosed in the embodiment of the present invention are not described herein again.
According to the page component loading device provided by the embodiment of the invention, the component to be loaded in the page is loaded, the reference count corresponding to the component to be loaded is increased, whether the component to be loaded is loaded for the first time is judged according to the reference count, when the component to be loaded is loaded for the first time, the CSS style code corresponding to the component to be loaded is created, and the CSS style code is loaded to finish component rendering, so that the CSS style code can be ensured to change along with the use condition of the page component in real time, the CSS style loading mode is improved, the page component loading speed is effectively increased, the flow consumption is reduced, and the use experience of a user for browsing the page is improved.
In order to implement the foregoing embodiment, another embodiment of the present invention provides a terminal device.
As shown in fig. 9, terminal device 900 includes at least one processor 910; and the number of the first and second groups,
a memory 920 communicatively coupled to the at least one processor; wherein,
the memory 920 stores commands executable by the at least one processor 910, and the commands are executed by the at least one processor 910, so that the at least one processor 910 can execute the page component loading method according to the embodiment of the first aspect of the present invention.
For example, a page component loading method executable by a processor to perform the steps of:
s101', loading the components to be loaded in the page, and increasing the reference count corresponding to the components to be loaded.
In one embodiment of the invention, the component rendering OnRender method may first be executed to start component rendering before loading the component to be loaded in the page. Wherein the OnRender method is a function representing the beginning of the lifecycle of the component.
After the rendering of the components is started, a CSS loading method in the CSS collector can be called to load the components to be loaded, and the reference counts corresponding to the components to be loaded are increased. For example: when the page is loaded, if the component a needs to be loaded, the reference count corresponding to the component a may be +1, so as to indicate the number of times the component a is loaded.
And S102', judging whether the component to be loaded is loaded for the first time according to the reference count.
In a specific embodiment of the present invention, the CSS renderer may detect a change in the reference count to determine whether the component to be loaded is loaded for the first time. And if the CSS renderer detects that the identifier of a certain component to be loaded is a newly added identifier and the corresponding reference count is 0, determining that the component to be loaded is loaded for the first time. If the CSS renderer detects that the identifier of a certain component to be loaded is an existing identifier and the corresponding reference count is increased, such as from 2 to 3, it may be determined that the component to be loaded is not loaded for the first time.
S103', if the component to be loaded is loaded for the first time, the CSS style code corresponding to the component to be loaded is created.
In a specific embodiment of the invention, the JS scripting language can be used to create the CSS style code corresponding to the component to be loaded through the document object model DOM interface of the browser.
And S104', loading the CSS style code to complete component rendering.
After the CSS style code is created, the CSS style code loading operation can be executed, so that component rendering is completed, and finally loading of the page component is realized.
In addition, the processor may further perform the steps of:
and S105', if the component to be loaded is not loaded for the first time, acquiring the CSS style code corresponding to the component to be loaded from the global component style reference technical variable.
If the component to be loaded is not loaded for the first time, it is indicated that the CSS style code corresponding to the component to be loaded already exists, and the component to be loaded does not need to be created again and only needs to obtain the existing CSS style code. Wherein the CSS style code is stored in a global component style referencing technical variable. The global component style reference technology variables primarily hold the identification of the component, the reference count, and the corresponding CSS style code.
And S104', loading the CSS style code to complete component rendering.
After the CSS style code is obtained, the CSS style code loading operation can be executed, so that component rendering is completed, and finally loading of the page component is realized.
Further, the processor may further perform the steps of:
s106', when the component in the page is detected to be removed, the component is executed to release the OnRelease method.
The OnRelease method is a function representing the life cycle of the component and is mainly used for releasing the component.
S107', an offload CSS method in the CSS collector is invoked to reduce the reference count of the removed component.
After a component is released, the offload CSS method in the CSS collector may be invoked to offload the removed component and reduce the reference count corresponding to the component. For example: if one component A in the page is removed, the reference count for that component A may be-1, indicating the number of times component A was unloaded.
When the reference count of the removed component is reduced to 0, the CSS style code corresponding to the removed component can be deleted through the DOM interface of the browser using the JS scripting language. That is, if the reference count of the removed component is reduced to 0, it indicates that the component is no longer loaded, and thus the CSS style code corresponding to the component may be deleted, thereby avoiding page redundancy.
According to the terminal equipment provided by the embodiment of the invention, the component to be loaded in the page is loaded, the reference count corresponding to the component to be loaded is increased, whether the component to be loaded is loaded for the first time is judged according to the reference count, when the component to be loaded is loaded for the first time, the CSS style code corresponding to the component to be loaded is created, and the CSS style code is loaded to finish component rendering, so that the CSS style code can be ensured to change along with the use condition of the page component in real time, the CSS style loading mode is improved, the page component loading speed is effectively increased, the flow consumption is reduced, and the use experience of a user for browsing the page is improved.
To achieve the foregoing embodiments, a further embodiment of the present invention provides a nonvolatile computer storage medium, where the nonvolatile computer storage medium stores computer-executable commands, and the computer-executable commands are used to make a computer execute the page component loading method according to the first aspect of the present invention.
The method comprises the following steps:
s101', loading the components to be loaded in the page, and increasing the reference count corresponding to the components to be loaded.
In one embodiment of the invention, the component rendering OnRender method may first be executed to start component rendering before loading the component to be loaded in the page. Wherein the OnRender method is a function representing the beginning of the lifecycle of the component.
After the rendering of the components is started, a CSS loading method in the CSS collector can be called to load the components to be loaded, and the reference counts corresponding to the components to be loaded are increased. For example: when the page is loaded, if the component a needs to be loaded, the reference count corresponding to the component a may be +1, so as to indicate the number of times the component a is loaded.
And S102', judging whether the component to be loaded is loaded for the first time according to the reference count.
In a specific embodiment of the present invention, the CSS renderer may detect a change in the reference count to determine whether the component to be loaded is loaded for the first time. And if the CSS renderer detects that the identifier of a certain component to be loaded is a newly added identifier and the corresponding reference count is 0, determining that the component to be loaded is loaded for the first time. If the CSS renderer detects that the identifier of a certain component to be loaded is an existing identifier and the corresponding reference count is increased, such as from 2 to 3, it may be determined that the component to be loaded is not loaded for the first time.
S103', if the component to be loaded is loaded for the first time, the CSS style code corresponding to the component to be loaded is created.
In a specific embodiment of the invention, the JS scripting language can be used to create the CSS style code corresponding to the component to be loaded through the document object model DOM interface of the browser.
And S104', loading the CSS style code to complete component rendering.
After the CSS style code is created, the CSS style code loading operation can be executed, so that component rendering is completed, and finally loading of the page component is realized.
To implement the above embodiments, a further embodiment of the present invention provides an application program, and when instructions in the application program are executed by a processor, the page component loading method according to the embodiment of the first aspect of the present invention is executed.
The method comprises the following steps:
s101', loading the components to be loaded in the page, and increasing the reference count corresponding to the components to be loaded.
In one embodiment of the invention, the component rendering OnRender method may first be executed to start component rendering before loading the component to be loaded in the page. Wherein the OnRender method is a function representing the beginning of the lifecycle of the component.
After the rendering of the components is started, a CSS loading method in the CSS collector can be called to load the components to be loaded, and the reference counts corresponding to the components to be loaded are increased. For example: when the page is loaded, if the component a needs to be loaded, the reference count corresponding to the component a may be +1, so as to indicate the number of times the component a is loaded.
And S102', judging whether the component to be loaded is loaded for the first time according to the reference count.
In a specific embodiment of the present invention, the CSS renderer may detect a change in the reference count to determine whether the component to be loaded is loaded for the first time. And if the CSS renderer detects that the identifier of a certain component to be loaded is a newly added identifier and the corresponding reference count is 0, determining that the component to be loaded is loaded for the first time. If the CSS renderer detects that the identifier of a certain component to be loaded is an existing identifier and the corresponding reference count is increased, such as from 2 to 3, it may be determined that the component to be loaded is not loaded for the first time.
S103', if the component to be loaded is loaded for the first time, the CSS style code corresponding to the component to be loaded is created.
In a specific embodiment of the invention, the JS scripting language can be used to create the CSS style code corresponding to the component to be loaded through the document object model DOM interface of the browser.
And S104', loading the CSS style code to complete component rendering.
After the CSS style code is created, the CSS style code loading operation can be executed, so that component rendering is completed, and finally loading of the page component is realized.
In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above are not necessarily intended to refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, various embodiments or examples and features of different embodiments or examples described in this specification can be combined and combined by one skilled in the art without contradiction.
Furthermore, the terms "first", "second" and "first" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In the description of the present invention, "a plurality" means at least two, e.g., two, three, etc., unless specifically limited otherwise.
Any process or method descriptions in flow charts or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process, and alternate implementations are included within the scope of the preferred embodiment of the present invention in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the present invention.
The logic and/or steps represented in the flowcharts or otherwise described herein, e.g., an ordered listing of executable instructions that can be considered to implement logical functions, can be embodied in any computer-readable medium for use by or in connection with an instruction execution system, apparatus, or device, such as a computer-based system, processor-containing system, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions. For the purposes of this description, a "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of the computer-readable medium would include the following: an electrical connection (electronic device) having one or more wires, a portable computer diskette (magnetic device), a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disc read-only memory (CDROM). Additionally, the computer-readable medium could even be paper or another suitable medium upon which the program is printed, as the program can be electronically captured, via for instance optical scanning of the paper or other medium, then compiled, interpreted or otherwise processed in a suitable manner if necessary, and then stored in a computer memory.
It should be understood that portions of the present invention may be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, the various steps or methods may be implemented in software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, any one or combination of the following techniques, which are known in the art, may be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application specific integrated circuit having an appropriate combinational logic gate circuit, a Programmable Gate Array (PGA), a Field Programmable Gate Array (FPGA), or the like.
It will be understood by those skilled in the art that all or part of the steps carried by the method for implementing the above embodiments may be implemented by hardware related to instructions of a program, which may be stored in a computer readable storage medium, and the program, when executed, includes one or a combination of the steps of the method embodiments.
In addition, functional units in the embodiments of the present invention may be integrated into one processing module, or each unit may exist alone physically, or two or more units are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode. The integrated module, if implemented in the form of a software functional module and sold or used as a separate product, may also be stored in a computer readable storage medium.
The storage medium mentioned above may be a read-only memory, a magnetic or optical disk, etc. Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention, and that variations, modifications, substitutions and alterations can be made to the above embodiments by those of ordinary skill in the art within the scope of the present invention.
Claims (10)
1. A page component loading method is characterized by comprising the following steps:
loading a component to be loaded in a page, and increasing a reference count corresponding to the component to be loaded;
judging whether the component to be loaded is loaded for the first time according to the reference count;
if the component to be loaded is loaded for the first time, a Cascading Style Sheet (CSS) style code corresponding to the component to be loaded is created; and
and loading the CSS style code to complete component rendering.
2. The method of claim 1, further comprising:
if the component to be loaded is not loaded for the first time, obtaining a CSS style code corresponding to the component to be loaded from a global component style reference technical variable;
and loading the CSS style code to finish page rendering.
3. The method of claim 1, wherein loading components to be loaded in a page comprises:
and calling a loading CSS method in the CSS collector to load the component to be loaded.
4. The method of claim 1, prior to loading a component to be loaded in a page, further comprising:
and executing the component rendering OnRender method to start the component rendering.
5. The method of claim 1, wherein creating the CSS style code corresponding to the component to be loaded comprises:
and creating the CSS style code corresponding to the component to be loaded through a Document Object Model (DOM) interface by using a JS script language.
6. The method of claim 1, further comprising:
when detecting that the component in the page is removed, executing the component to release the OnRelease method;
an offload CSS method in the CSS collector is invoked to reduce the reference count of the removed component.
7. The method of claim 6, further comprising:
and when the reference count of the removed component is reduced to 0, deleting the CSS style code corresponding to the removed component through the DOM interface by using the JS script language.
8. A page component loading apparatus, comprising:
the loading module is used for loading the components to be loaded in the page and increasing the reference count corresponding to the components to be loaded;
the judging module is used for judging whether the component to be loaded is loaded for the first time according to the reference count;
the creating module is used for creating a Cascading Style Sheet (CSS) style code corresponding to the component to be loaded if the component to be loaded is loaded for the first time; and
and the rendering module is used for loading the CSS style code to finish component rendering.
9. A terminal device, comprising:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein,
the memory stores commands executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-7.
10. A non-transitory computer storage medium storing computer-executable instructions for causing a computer to perform the method of any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710912314.2A CN107665134A (en) | 2017-09-29 | 2017-09-29 | Page component loading method, device, medium and terminal equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710912314.2A CN107665134A (en) | 2017-09-29 | 2017-09-29 | Page component loading method, device, medium and terminal equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107665134A true CN107665134A (en) | 2018-02-06 |
Family
ID=61097049
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710912314.2A Pending CN107665134A (en) | 2017-09-29 | 2017-09-29 | Page component loading method, device, medium and terminal equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107665134A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108376091A (en) * | 2018-02-23 | 2018-08-07 | 中国平安人寿保险股份有限公司 | Assembly operating method, device, equipment and computer storage media |
| CN110543298A (en) * | 2018-05-28 | 2019-12-06 | 北京京东尚科信息技术有限公司 | webpage style generation method and device and webpage generation method and device |
| CN111104110A (en) * | 2019-11-28 | 2020-05-05 | 北京小米移动软件有限公司 | Global style sharing method, global style sharing device and electronic device |
| CN111159108A (en) * | 2019-12-18 | 2020-05-15 | 北京达佳互联信息技术有限公司 | Component management method and device, electronic equipment and storage medium |
| CN113761428A (en) * | 2020-06-05 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Page rendering method, device and system, storage medium and electronic equipment |
| CN114090146A (en) * | 2021-10-28 | 2022-02-25 | 青岛海尔科技有限公司 | Data loading completion determining method, device and equipment |
| CN114237763A (en) * | 2021-12-23 | 2022-03-25 | 建信金融科技有限责任公司 | Method, device, equipment, medium and product for improving first loading speed of assembly |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7941746B2 (en) * | 2007-07-11 | 2011-05-10 | Microsoft Corporation | Extended cascading style sheets |
| CN102438045A (en) * | 2011-12-07 | 2012-05-02 | 深圳市深信服电子科技有限公司 | Method and system for pre-fetching web page, and method for accessing web page |
| CN103051684A (en) * | 2012-12-07 | 2013-04-17 | 百度在线网络技术（北京）有限公司 | Method, system and device for converting website into Web App for displaying |
| CN104461632A (en) * | 2014-12-09 | 2015-03-25 | 东软集团股份有限公司 | Web App loading method and device |
| CN104933078A (en) * | 2014-03-20 | 2015-09-23 | 中标软件有限公司 | Web application page rendering optimization |
| US20160283606A1 (en) * | 2013-09-17 | 2016-09-29 | Beijing Qihoo Technology Company Limited | Method for performing webpage loading, device and browser thereof |
| CN106991154A (en) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术（北京）有限公司 | Webpage rendering intent, device, terminal and server |
-
2017
- 2017-09-29 CN CN201710912314.2A patent/CN107665134A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7941746B2 (en) * | 2007-07-11 | 2011-05-10 | Microsoft Corporation | Extended cascading style sheets |
| CN102438045A (en) * | 2011-12-07 | 2012-05-02 | 深圳市深信服电子科技有限公司 | Method and system for pre-fetching web page, and method for accessing web page |
| CN103051684A (en) * | 2012-12-07 | 2013-04-17 | 百度在线网络技术（北京）有限公司 | Method, system and device for converting website into Web App for displaying |
| US20160283606A1 (en) * | 2013-09-17 | 2016-09-29 | Beijing Qihoo Technology Company Limited | Method for performing webpage loading, device and browser thereof |
| CN104933078A (en) * | 2014-03-20 | 2015-09-23 | 中标软件有限公司 | Web application page rendering optimization |
| CN104461632A (en) * | 2014-12-09 | 2015-03-25 | 东软集团股份有限公司 | Web App loading method and device |
| CN106991154A (en) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术（北京）有限公司 | Webpage rendering intent, device, terminal and server |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108376091A (en) * | 2018-02-23 | 2018-08-07 | 中国平安人寿保险股份有限公司 | Assembly operating method, device, equipment and computer storage media |
| CN110543298A (en) * | 2018-05-28 | 2019-12-06 | 北京京东尚科信息技术有限公司 | webpage style generation method and device and webpage generation method and device |
| CN111104110A (en) * | 2019-11-28 | 2020-05-05 | 北京小米移动软件有限公司 | Global style sharing method, global style sharing device and electronic device |
| CN111104110B (en) * | 2019-11-28 | 2023-10-03 | 北京小米移动软件有限公司 | Global style sharing method, global style sharing device and electronic device |
| CN111159108A (en) * | 2019-12-18 | 2020-05-15 | 北京达佳互联信息技术有限公司 | Component management method and device, electronic equipment and storage medium |
| CN113761428A (en) * | 2020-06-05 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Page rendering method, device and system, storage medium and electronic equipment |
| CN114090146A (en) * | 2021-10-28 | 2022-02-25 | 青岛海尔科技有限公司 | Data loading completion determining method, device and equipment |
| CN114090146B (en) * | 2021-10-28 | 2023-06-16 | 青岛海尔科技有限公司 | Method, device and equipment for determining completion of data loading |
| CN114237763A (en) * | 2021-12-23 | 2022-03-25 | 建信金融科技有限责任公司 | Method, device, equipment, medium and product for improving first loading speed of assembly |
| CN114237763B (en) * | 2021-12-23 | 2023-06-02 | 建信金融科技有限责任公司 | Method, device, equipment, medium and product for improving first loading speed of component |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107665134A (en) | Page component loading method, device, medium and terminal equipment | |
| CN108228044B (en) | Method, system and terminal for turning pages in electronic book reading | |
| CN108984328B (en) | Stack backtracking method and device | |
| CN106933887B (en) | Data visualization method and device | |
| CN111736884B (en) | Modularized method and system | |
| CN111767056B (en) | Source code compiling method, executable file running method and terminal equipment | |
| CN107608737B (en) | Animation playing method and device | |
| CN106919620B (en) | Single page processing method and device | |
| CN103501327A (en) | Downloading method and device based on mobile terminal application | |
| CN109558548B (en) | Method for eliminating CSS style redundancy and related product | |
| CN106649130A (en) | Memory space recovery method and apparatus, and electronic device | |
| US6681381B1 (en) | Arrangement for executing program code with reduced memory requirements | |
| CN112328298A (en) | Code library cutting method and device for mobile terminal | |
| CN103309741B (en) | Call the method and apparatus of pin function | |
| CN107967192B (en) | System crash processing method and device for intelligent terminal | |
| CN111078382B (en) | Command overtime processing method and device | |
| CN109298891A (en) | System start method and device, System build method and apparatus | |
| CN108874491A (en) | information loading method and device | |
| CN103294606A (en) | Methods and devices for allocating memories and detecting overflow thereof | |
| CN105446708A (en) | Method and device for processing tab of browser and terminal | |
| CN110324549B (en) | Video recording method, device and equipment | |
| CN110688320A (en) | Global variable detection method and device and terminal equipment | |
| EP4191444A1 (en) | Image configuration method, device and system, and storage medium | |
| CN115952491A (en) | Method, device, electronic equipment and medium for hook target function | |
| CN112579938B (en) | Page loading method and device, storage medium and electronic equipment |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180206 |