CN111125597B - Webpage loading method, browser, electronic equipment and storage medium - Google Patents
Webpage loading method, browser, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111125597B CN111125597B CN201911311136.3A CN201911311136A CN111125597B CN 111125597 B CN111125597 B CN 111125597B CN 201911311136 A CN201911311136 A CN 201911311136A CN 111125597 B CN111125597 B CN 111125597B
- Authority
- CN
- China
- Prior art keywords
- information
- object model
- document object
- kernel
- webpage
- 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
- 238000011068 loading method Methods 0.000 title claims abstract description 73
- 238000009877 rendering Methods 0.000 claims abstract description 26
- 238000000034 method Methods 0.000 claims description 48
- 230000015654 memory Effects 0.000 claims description 19
- 238000004364 calculation method Methods 0.000 claims description 17
- 238000013507 mapping Methods 0.000 claims description 17
- 238000006243 chemical reaction Methods 0.000 claims description 9
- 230000000694 effects Effects 0.000 claims description 2
- 238000012545 processing Methods 0.000 abstract description 7
- 230000008569 process Effects 0.000 description 14
- 238000010586 diagram Methods 0.000 description 9
- 238000012986 modification Methods 0.000 description 6
- 230000004048 modification Effects 0.000 description 6
- 238000011161 development Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 238000004590 computer program Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 238000005457 optimization Methods 0.000 description 3
- 238000012827 research and development Methods 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000001151 other effect Effects 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000004904 shortening Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The application discloses a webpage loading method, a browser, electronic equipment and a storage medium, and relates to the technical field of webpage processing. The specific implementation scheme is as follows: obtaining virtual document object model information of a webpage; converting the virtual document object model information into kernel-layer-oriented kernel document object model information in a pre-established document object model structure specification template; and rendering the page of the webpage based on the kernel document object model information, so as to realize loading of the webpage. According to the technical scheme, the time consumption of page loading can be effectively shortened, and the page loading performance is improved.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a web page loading method, a browser, an electronic device, and a storage medium.
Background
The most popular front end frameworks Vue, practice, etc. so far all employ schemes of virtual document object model (Document object model; dom) to optimize the rendering logic of the web page. And in the conventional mode, the business structure reflects that the underlying kernel needs to go through the intermediate mode of the hypertext markup language (Hyper Text Markup Language; HTML) layer to actually trigger the interface rendering. Based on this, the existing page loading process from the front end frame of the browser to the kernel of the browser needs to be implemented through the Template configuration, virtual (Virtual) Dom, HTML Dom, and kernel Dom of the page.
Through detailed analysis of the modes, the logic structure of the Dom itself is almost the same, and the Virtual Dom in the front-end framework and the kernel Dom at the kernel level have a certain structural similarity, which inevitably results in a certain degree of repetitive operation in the process of Template analysis (player) from Template to Virtual Dom in the front-end framework, in the process of Virtual Dom parser from Virtual Dom to HTML Dom, and in the process of HTML Element parser from HTML Dom to kernel Dom. For example, partial depth traversal, comparison, object structure conversion and other calculations are performed, and when the webpage is complex, the existing loading process can lead to long time consumption of webpage loading, so that the loading performance of the webpage is low.
Disclosure of Invention
In order to solve the technical problems, the application provides a webpage loading method, a browser, electronic equipment and a storage medium, which are used for shortening the loading time and improving the webpage loading performance.
In one aspect, the present application provides a method for loading a web page, including:
obtaining virtual document object model information of a webpage;
converting the virtual document object model information into kernel-layer-oriented kernel document object model information based on a pre-established document object model structure specification template;
and rendering the page of the webpage based on the kernel document object model information, so as to realize loading of the webpage.
Further alternatively, in the method as described above, before converting the virtual document object model information into kernel-layer-oriented kernel document object model information based on a pre-established document object model structure specification, the method further includes:
and establishing the document object model structure specification based on the information identification requirement of the kernel layer.
Further optionally, in the method as described above, before rendering the page of the web page based on the kernel document object model information, the method further includes:
calculating updated node information in the webpage based on the kernel document object model information and the kernel document object model information of the page of the last version of the webpage;
correspondingly, rendering the page of the webpage based on the kernel document object model information to realize loading of the webpage, and the method comprises the following steps:
and rendering the page of the webpage based on the updated node information in the webpage and the kernel document object model information of the page of the last version of the webpage, so as to realize loading of the webpage.
Further alternatively, in the method as described above, obtaining virtual document object model information of the web page includes:
acquiring the virtual document object model information configured under the current front-end framework;
acquiring first template information configured under a current front end frame; generating the virtual document object model information based on the first template information; or alternatively
Acquiring second template information of web pages under other front end frames, and generating initial virtual document object model information based on the second template information; and converting the initial virtual document object model information into the virtual document object model information based on the pre-established information mapping relation between the other front end frameworks and the current front end framework.
Further alternatively, in the method as described above, before converting the initial virtual document object model information into the virtual document object model information based on a pre-established information mapping relationship between the other front end frames and the current front end frame, the method further includes:
and establishing an information mapping relation between the other front end frames and the current front end frame according to the information definition modes in the other front end frames and the information definition modes in the current front end frame.
Further alternatively, in the method as described above, the virtual document object model information includes tree information of a virtual document object model or node information updated in a virtual document object model tree.
In another aspect, the present application further provides a browser device, including:
the acquisition module is used for acquiring virtual document object model information of the webpage;
the conversion module is used for converting the virtual document object model information into kernel document object model information facing a kernel layer based on a pre-established document object model structure specification template;
and the rendering module is used for rendering the page of the webpage based on the kernel document object model information, and loading the webpage.
In still another aspect, the present application further provides an electronic device, including:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein,,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of the preceding claims.
In yet another aspect, the application also provides a non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of any one of the above.
One embodiment of the above application has the following advantages or benefits: virtual Dom information is converted into kernel Dom information facing a kernel layer based on a pre-established Dom structure specification, virtual Dom conversion can be directly carried out facing the kernel layer, compared with a traditional mode, one-time deep traversal operation can be directly reduced, under a complex page structure, computing resources and time can be effectively saved, modification changes of related interface elements can be responded and finally displayed more quickly, time consumption of page loading can be effectively shortened, and page loading performance is improved.
Furthermore, the application can also put the complex domdiff calculation in a kernel layer with better performance for processing, so that the calculation execution efficiency is higher, and the page loading performance is further improved.
The technical scheme of the application can be adapted to various front end frames, and has stronger expansibility and applicability.
Other effects of the above alternative will be described below in connection with specific embodiments.
Drawings
The drawings are included to provide a better understanding of the present application and are not to be construed as limiting the application. Wherein:
FIG. 1 is a schematic diagram of a first embodiment according to the present application;
FIG. 2 is a diagram illustrating a conventional page loading mode.
Fig. 3 is a schematic diagram of a page loading mode in this embodiment.
FIG. 4 is a schematic diagram of a second embodiment according to the present application;
fig. 5 is a block diagram of an electronic device for implementing a page loading method of an embodiment of the present application.
Detailed Description
Exemplary embodiments of the present application will now be described with reference to the accompanying drawings, in which various details of the embodiments of the present application are included to facilitate understanding, and are to be considered merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the application. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
Fig. 1 is a flowchart of an embodiment of a web page loading method according to a first embodiment of the present application. As shown in fig. 1, the webpage loading method of the present embodiment may specifically include the following steps:
s101, obtaining virtual Dom information of a webpage;
the main execution body of the webpage loading method in this embodiment is a browser, and specifically, the browser loads the webpage of the webpage. For example, in this embodiment, the loading process of the web page may be specifically described from the front end frame of the browser to the kernel layer of the browser.
For example, step S101 of the present embodiment may be specifically implemented in the front end framework of the browser. The virtual Dom information of the web page of this embodiment is in the form of a Dom tree structure of specific key-value pairs. For example, the format of the virtual Dom information of the present embodiment may be as follows:
further alternatively, the obtaining virtual Dom information of the web page in step S101 of the present embodiment may specifically include the following three cases:
in the first case, virtual Dom information configured under the current front-end framework is acquired;
the situation can be suitable for the research and development personnel to directly configure virtual Dom information under the front-end framework, the professional requirement on the research and development personnel is high, and the research and development personnel can directly write the virtual Dom information of the Dom tree structure in the form of key value pairs in the front-end framework.
In the second case, acquiring first Template information configured under the current front-end framework; generating virtual Dom information based on the first Template information;
this case has a lower requirement for the developer than the first case, and the developer can configure the first Template information in the form of a tag. For example, the first Template information of the present embodiment may take the following tag form:
<View/>
<Text/>
<Button/>
<Form/>
<Input/>
…
in the front-end framework, the first Template information in the form of a label may be converted into virtual Dom information of a Dom tree structure in the form of a key-value pair based on the first Template information.
In the third case, second Template information of the web pages under other front end frames is acquired, and initial virtual Dom information is generated based on the second Template information; and converting the initial virtual Dom information into virtual Dom information based on the information mapping relation between other pre-established front-end frameworks and the current front-end framework.
In practical applications, there may be different front end frameworks, so that the different front end frameworks can be adapted to the kernel layer of the embodiment, so as to perform loading of the web page on the kernel of the optimization architecture of the embodiment. In this embodiment, the conversion of information may also be performed in the front-end framework.
Specifically, the second Template information of the web pages under the other front-end frames may be acquired first, and initial virtual Dom information may be generated based on the second Template information. For example, defined in the initial virtual Dom information corresponding to the other front-end frameworks are:
{
title: 'Zhang Sano'
}
And defined in the current front-end framework are: {
name, 'Zhang Sano'
}
It is obvious that in the current front-end framework, "title" cannot be identified, and thus "Zhang Sanzhan" information cannot be obtained, so in this embodiment, conversion of virtual Dom information is required. Specifically, the initial virtual Dom information may be converted into virtual Dom information based on the pre-established information mapping relationship between the other front end frames and the current front end frame, for example, title: 'Zhang san' may be converted into name: 'Zhang san'. For example, the information mapping relationship may be established based on the description information of the fields defined in each front-end framework, with the fields having the same description information. For example, the title and the name are both descriptive information for describing the name of the user, but the defined unused fields are used in the unused front-end framework, and an information mapping relationship can be established between the two.
Further optionally, before this step, it may further include: and establishing information mapping relations between the other front end frames and the current front end frame according to the information definition modes in the other front end frames and the information definition modes in the current front end frame.
In practical application, for any other front-end framework, the information mapping relationship can be established according to the above manner, so that the information mapping relationship can be adapted to the kernel of the optimization framework of the embodiment, and the application scene of the optimization framework of the embodiment can be expanded.
S102, converting virtual Dom information into kernel Dom information oriented to a kernel layer based on a pre-established Dom structure specification template;
the Dom structure specification template of the present embodiment is a format for specifying information of the kernel Dom of the kernel layer. In the process of converting the virtual Dom information into the kernel Dom information of the kernel layer, the kernel Dom information which can be identified by the kernel layer can be obtained by directly referring to the Dom structure specification to convert.
Further optionally, before step S102 of the present embodiment, the method may further include: based on the information identification requirement of the kernel layer, a virtual Dom structure specification template is established.
And S103, rendering the page of the webpage based on the kernel Dom information, and loading the webpage.
Specifically, this step is implemented in the browser's kernel. Based on the received kernel Dom information, the kernel of the browser performs an attribute operation, integrates the skeleton and the content in the webpage, realizes the rendering of the webpage, and obtains a rendering Tree, namely a Render Tree, so that the loading of the webpage is realized. The rendered web page may then be presented at the front end of the browser based on the Render Tree. The attribute operation may refer to related prior art, and will not be described herein.
In addition, the above scheme may be applied to a web page that is displayed for the first time, where the kernel does not have any information about the web page, and where the web page may be loaded in the manner of the above embodiment.
In practical application, a scene of local content update of a webpage is usually encountered, and in the loading process of the webpage, kernel Dom information of the webpage of the previous version is stored in the kernel of the browser in real time. Before rendering in step S103, the method may further include: calculating updated node information in the webpage based on the kernel Dom information and the kernel Dom information of the page of the last version of the webpage; if multiple nodes in the page are updated, the updated multiple node information is also calculated in this manner. The process may be a domdiff calculation process. In practical application, if the page comprises more nodes, according to the method, all updated node information can be obtained through complex calculation. And finally, based on the updated node information in the webpage, the kernel Dom in the kernel can be updated, and further, based on the updated kernel Dom, the attribute processing is performed, and then the webpage is rendered, so that a rendering Tree, namely a Render Tree, is obtained, and the loading of the webpage is realized.
It should be noted that, in this embodiment, the virtual Dom information may be tree information of the virtual Dom, that is, whether the web page is first shown or partially updated, the virtual Dom information is represented by a complete Dom tree structure, and in this case, a Dom Diff calculation is performed in a kernel of the browser to obtain updated web page node information. Of course, if the web page is first displayed, the updated web page node information can be regarded as information of all nodes in the web page.
Alternatively, the virtual Dom information in this embodiment may include only updated node information in the virtual Dom tree. Compared with the virtual Dom information comprising a complete Dom tree structure, the method can reduce the information transmission quantity, shorten the page loading time and improve the page loading performance. In the embodiment, the domdiff calculation in the kernel can be omitted, the kernel Dom is updated directly according to the updated webpage node information, webpage rendering is performed based on the kernel Dom, the page loading time is further shortened, and the page loading efficiency is improved.
In this embodiment, the virtual Dom is actually only an Object in a JavaScript environment, which represents the Tree structure, event, attribute, and the like of the whole interface, where only the basic structure is defined, and if some expansion structures are needed, the virtual Dom can be added after the determination by the kernel API and the service layer. In a broad sense, the editing mode of the interface is changed from an XML framework to a Js Object mode.
FIG. 2 is a diagram illustrating a conventional page loading mode. As shown in FIG. 2, where Template, virtual Dom, and HTML Dom are all implemented in the front-end framework of the browser, the kernel Dom is implemented in the kernel of the browser. In the implementation process, a developer configures Template information in a front-end frame of the browser, wherein the Template information is in a tag form, and the format of the embodiment is shown above. The Template information in the form of labels is then converted in the Virtual Dom process into a key pair form, such as the format in the above embodiment. The key-value pair form is then reconverted to the tag form of HTML in HTML Dom processing, e.g., the tag form of HTML may be as follows:
<div/>
<span/>
…
Custom
Component
finally, the HTML label form is converted into a kernel Dom, and a rendering Tree Render Tree is generated in the kernel of the browser based on the kernel Dom to realize webpage loading.
In addition, as shown in fig. 2, in the process of updating the local nodes of the page, the domdiff calculation needs to be performed in the Virtual Dom stage, updated web page node information is obtained, and only the updated web page node information can be processed later.
Fig. 3 is a schematic diagram of a page loading mode in this embodiment. Namely, the page loading mode of this embodiment is the page loading flow of the embodiment shown in fig. 1. Comparing fig. 3 and fig. 2, it can be seen that the page loading mode of the present embodiment is improved based on the conventional mode of fig. 2. As shown in fig. 3, in the page loading mode of this embodiment, compared with fig. 2, the processing of removing the HTML layer directly converts virtual Dom information into kernel Dom information facing the kernel layer based on the pre-established Dom structure specification, so that the flow of page loading can be reduced, the page loading time can be shortened, and the page loading performance can be improved.
Also, compared to FIG. 2, the present embodiment may also be implemented with the Domdiff computation set at the kernel layer. In the conventional mode shown in fig. 2, the complex domdiff calculation is executed in a JavaScript environment with poor execution performance, but in the technical scheme of the embodiment shown in fig. 3, the complex domdiff calculation can be completely transferred to java, C and c++ environments on the browser kernel layer, so that the calculation execution efficiency is higher.
According to the webpage loading method, virtual Dom information is converted into kernel Dom information facing a kernel layer based on a preset Dom structure specification, virtual Dom conversion can be directly carried out facing the kernel layer, compared with a traditional mode, one-time depth traversal operation can be directly reduced, under a complex webpage structure, computing resources and time can be effectively saved, modification changes of related interface elements can be responded and finally displayed, therefore time consumption of webpage loading can be effectively shortened, and webpage loading performance is improved.
Furthermore, in this embodiment, the complex domdiff calculation may be further processed in a kernel layer with better performance, so that the calculation execution efficiency is higher, and the performance of page loading is further improved.
Moreover, the technical scheme of the embodiment can be adapted to various front end frames, and has strong expansibility and applicability.
Moreover, the technical scheme of the embodiment is still based on front-end framework development, so that development efficiency is not affected in terms of development level, a developer can select a mode of using the traditional HTML, js, css, the development level does not need additional learning cost, and the development level is very convenient to use.
Fig. 4 is a block diagram of a browser device according to a second embodiment of the present application. As shown in fig. 4, the browser device 400 of the present embodiment includes:
an obtaining module 401, configured to obtain virtual document object model information of a web page;
a conversion module 402, configured to convert virtual document object model information into kernel-layer-oriented kernel document object model information based on a pre-established document object model structure specification template;
and the rendering module 403 is configured to render a page of the webpage based on the kernel document object model information, so as to implement loading of the webpage.
Further alternatively, the obtaining module 401 of this embodiment is configured to:
obtaining virtual document object model information configured under a current front-end framework;
acquiring first template information configured under a current front end frame; generating virtual document object model information based on the first template information; or alternatively
Acquiring second template information of web pages under other front end frames, and generating initial virtual document object model information based on the second template information; and converting the initial virtual document object model information into virtual document object model information based on the information mapping relation between other pre-established front end frameworks and the current front end framework.
Further alternatively, the browser device 400 of the present embodiment further includes:
the establishing module 404 is configured to establish an information mapping relationship between the other front end frames and the current front end frame according to the information definition modes in the other front end frames and the information definition modes in the current front end frame.
Further optionally, the establishing module 404 is further configured to:
and establishing a document object model structure specification template based on the information identification requirement of the kernel layer.
Further alternatively, the browser device 400 of the present embodiment further includes:
the calculation module 405 is configured to calculate updated node information in the web page based on the kernel document object model information and the kernel document object model information of the page of the previous version of the web page;
correspondingly, the rendering module 403 is configured to render a page of the web page based on the updated node information in the web page and the kernel document object model information of the page of the last version of the web page, so as to implement loading of the web page.
In the browser apparatus 400 of the present embodiment, the virtual document object model information includes tree information of the virtual document object model or node information updated in the virtual document object model tree.
The browser device 400 of the present embodiment, by adopting the above modules to implement the implementation principle and the technical effect of the loading of the web page, is the same as the above related method embodiments, and detailed description of the above related method embodiments may be referred to, and will not be repeated here.
According to an embodiment of the present application, the present application also provides an electronic device and a readable storage medium.
As shown in fig. 5, a block diagram of an electronic device implementing a web page loading method according to an embodiment of the present application is shown. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be exemplary only, and are not meant to limit implementations of the applications described and/or claimed herein.
As shown in fig. 5, the electronic device includes: one or more processors 501, memory 502, and interfaces for connecting components, including high-speed interfaces and low-speed interfaces. The various components are interconnected using different buses and may be mounted on a common motherboard or in other manners as desired. The processor may process instructions executing within the electronic device, including instructions stored in or on memory to display graphical information of the GUI on an external input/output device, such as a display device coupled to the interface. In other embodiments, multiple processors and/or multiple buses may be used, if desired, along with multiple memories and multiple memories. Also, multiple electronic devices may be connected, each providing a portion of the necessary operations (e.g., as a server array, a set of blade servers, or a multiprocessor system). One processor 501 is illustrated in fig. 5.
Memory 502 is a non-transitory computer readable storage medium provided by the present application. The memory stores instructions executable by the at least one processor to cause the at least one processor to perform the webpage loading method provided by the application. The non-transitory computer readable storage medium of the present application stores computer instructions for causing a computer to execute the web page loading method provided by the present application.
The memory 502 is used as a non-transitory computer readable storage medium for storing non-transitory software programs, non-transitory computer executable programs, and modules, such as program instructions/modules (e.g., related modules shown in fig. 4) corresponding to a web page loading method according to an embodiment of the present application. The processor 501 executes various functional applications of the server and data processing by running non-transitory software programs, instructions, and modules stored in the memory 502, that is, implements the web page loading method in the above-described method embodiments.
Memory 502 may include a storage program area that may store an operating system, at least one application program required for functionality, and a storage data area; the storage data area may store data created by use of an electronic device implementing the web page loading method, and the like. In addition, memory 502 may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory 502 may optionally include memory located remotely from processor 501, which may be connected via a network to an electronic device implementing the web page loading method. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The electronic device for implementing the webpage loading method may further include: an input device 503 and an output device 504. The processor 501, memory 502, input devices 503 and output devices 504 may be connected by a bus or otherwise, for example in fig. 5.
The input device 503 may receive input numeric or character information and generate key signal inputs related to user settings and function controls of the electronic device implementing the web page loading method, such as a touch screen, a keypad, a mouse, a track pad, a touch pad, a pointer stick, one or more mouse buttons, a track ball, a joystick, etc. input devices. The output devices 504 may include a display device, auxiliary lighting devices (e.g., LEDs), and haptic feedback devices (e.g., vibration motors), among others. The display device may include, but is not limited to, a Liquid Crystal Display (LCD), a Light Emitting Diode (LED) display, and a plasma display. In some implementations, the display device may be a touch screen.
Various implementations of the systems and techniques described here can be realized in digital electronic circuitry, integrated circuitry, application specific ASIC (application specific integrated circuit), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, which may be a special purpose or general-purpose programmable processor, that may receive data and instructions from, and transmit data and instructions to, a storage system, at least one input device, and at least one output device.
These computing programs (also referred to as programs, software applications, or code) include machine instructions for a programmable processor, and may be implemented in a high-level procedural and/or object-oriented programming language, and/or in assembly/machine language. As used herein, the terms "machine-readable medium" and "computer-readable medium" refer to any computer program product, apparatus, and/or device (e.g., magnetic discs, optical disks, memory, programmable Logic Devices (PLDs)) used to provide machine instructions and/or data to a programmable processor, including a machine-readable medium that receives machine instructions as a machine-readable signal. The term "machine-readable signal" refers to any signal used to provide machine instructions and/or data to a programmable processor.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and pointing device (e.g., a mouse or trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic input, speech input, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a background component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such background, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), and the internet.
The computer system may include a client and a server. The client and server are typically remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other.
According to the technical scheme provided by the embodiment of the application, virtual Dom information is converted into kernel Dom information facing the kernel layer based on the pre-established Dom structure specification, so that virtual Dom conversion can be directly carried out facing the kernel layer, compared with a traditional mode, one-time depth traversal operation can be directly reduced, under a complex page structure, the computing resources and time can be effectively saved, and the modification change of related interface elements can be responded and finally displayed more quickly, so that the time consumption of page loading can be effectively shortened, and the page loading performance is improved.
According to the technical scheme of the embodiment of the application, complex Domdiff calculation can be processed in a kernel layer with better performance, so that the calculation execution efficiency is higher, and the page loading performance is further improved.
Moreover, according to the technical scheme provided by the embodiment of the application, the front-end framework can be adapted to various front-end frameworks, and the method has stronger expansibility and applicability.
It should be appreciated that various forms of the flows shown above may be used to reorder, add, or delete steps. For example, the steps described in the present application may be performed in parallel, sequentially, or in a different order, so long as the desired results of the technical solution disclosed in the present application can be achieved, and are not limited herein.
The above embodiments do not limit the scope of the present application. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives are possible, depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present application should be included in the scope of the present application.
Claims (14)
1. A web page loading method, comprising:
obtaining virtual document object model information of a webpage;
converting the virtual document object model information into kernel-layer-oriented kernel document object model information based on a pre-established document object model structure specification template; the document object model structure specification template is used for specifying the format of information of a kernel document object model of a kernel layer;
rendering the page of the webpage based on the kernel document object model information to realize loading of the webpage;
based on the kernel document object model information, before rendering the page of the webpage, the method further comprises:
and calculating updated node information in the webpage at a kernel layer based on the kernel document object model information and the kernel document object model information of the page of the last version of the webpage.
2. The method of claim 1, wherein prior to converting the virtual document object model information into kernel-layer-oriented kernel document object model information based on a pre-established document object model structure specification, the method further comprises:
and establishing the document object model structure specification template based on the information identification requirement of the kernel layer.
3. The method of claim 1, wherein rendering the page of the web page based on the kernel document object model information, to effect loading of the web page, comprises:
and rendering the page of the webpage based on the updated node information in the webpage and the kernel document object model information of the page of the last version of the webpage, so as to realize loading of the webpage.
4. The method of claim 1, wherein obtaining virtual document object model information for a web page comprises:
acquiring the virtual document object model information configured under the current front-end framework;
acquiring first template information configured under a current front end frame; generating the virtual document object model information based on the first template information; or alternatively
Acquiring second template information of web pages under other front end frames, and generating initial virtual document object model information based on the second template information; and converting the initial virtual document object model information into the virtual document object model information based on the pre-established information mapping relation between the other front end frameworks and the current front end framework.
5. The method of claim 4, wherein prior to converting the initial virtual document object model information into the virtual document object model information based on a pre-established information mapping relationship between the other front end frames and the current front end frame, the method further comprises:
and establishing an information mapping relation between the other front end frames and the current front end frame according to the information definition modes in the other front end frames and the information definition modes in the current front end frame.
6. The method of any of claims 1-5, wherein the virtual document object model information comprises tree information of a virtual document object model or updated node information in a virtual document object model tree.
7. A browser device, comprising:
the acquisition module is used for acquiring virtual document object model information of the webpage;
the conversion module is used for converting the virtual document object model information into kernel document object model information facing a kernel layer based on a pre-established document object model structure specification template; the document object model structure specification template is used for specifying the format of information of a kernel document object model of a kernel layer;
the rendering module is used for rendering the page of the webpage based on the kernel document object model information, so as to realize loading of the webpage;
the apparatus further comprises:
and the calculation module is used for calculating updated node information in the webpage at a kernel layer based on the kernel document object model information and the kernel document object model information of the page of the last version of the webpage.
8. The apparatus of claim 7, wherein the apparatus further comprises:
and the establishing module is used for establishing the document object model structure specification template based on the information identification requirement of the kernel layer.
9. The apparatus according to claim 7, wherein: the rendering module is used for rendering the page of the webpage based on the updated node information in the webpage and the kernel document object model information of the page of the last version of the webpage, and loading the webpage.
10. The apparatus of claim 8, wherein the acquisition module is configured to:
acquiring the virtual document object model information configured under the current front-end framework;
acquiring first template information configured under a current front end frame; generating the virtual document object model information based on the first template information; or alternatively
Acquiring second template information of web pages under other front end frames, and generating initial virtual document object model information based on the second template information; and converting the initial virtual document object model information into the virtual document object model information based on the pre-established information mapping relation between the other front end frameworks and the current front end framework.
11. The apparatus according to claim 10, wherein:
the establishing module is further configured to establish an information mapping relationship between the other front end frames and the current front end frame according to the information definition mode in the other front end frames and the information definition mode in the current front end frame.
12. The apparatus of any of claims 7-11, wherein the virtual document object model information comprises tree information of a virtual document object model or node information updated in a virtual document object model tree.
13. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein,,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-6.
14. A non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of any one of claims 1-6.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911311136.3A CN111125597B (en) | 2019-12-18 | 2019-12-18 | Webpage loading method, browser, electronic equipment and storage medium |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911311136.3A CN111125597B (en) | 2019-12-18 | 2019-12-18 | Webpage loading method, browser, electronic equipment and storage medium |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111125597A CN111125597A (en) | 2020-05-08 |
CN111125597B true CN111125597B (en) | 2023-10-27 |
Family
ID=70499764
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201911311136.3A Active CN111125597B (en) | 2019-12-18 | 2019-12-18 | Webpage loading method, browser, electronic equipment and storage medium |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111125597B (en) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112527297A (en) * | 2020-12-23 | 2021-03-19 | 北京飞漫软件技术有限公司 | Data processing method, device, equipment and storage medium |
CN112989195B (en) * | 2021-03-20 | 2023-09-05 | 重庆图强工程技术咨询有限公司 | Whole-process consultation method and device based on big data, electronic equipment and storage medium |
Citations (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102214098A (en) * | 2011-06-15 | 2011-10-12 | 中山大学 | Dynamic webpage data acquisition method based on WebKit browser engine |
CN102346770A (en) * | 2011-09-21 | 2012-02-08 | 晨星软件研发(深圳)有限公司 | WebKit browser webpage content loading method and device |
US8555157B1 (en) * | 2010-01-21 | 2013-10-08 | Google Inc. | Document update generation |
CN104063460A (en) * | 2014-06-25 | 2014-09-24 | 北京奇虎科技有限公司 | Method and device for loading webpage in browser |
US9178934B1 (en) * | 2014-11-21 | 2015-11-03 | Instart Logic, Inc. | Modifying web content at a client |
US9582600B1 (en) * | 2014-09-23 | 2017-02-28 | Amazon Technologies, Inc. | Cloud browser DOM-based client |
US9740791B1 (en) * | 2014-09-23 | 2017-08-22 | Amazon Technologies, Inc. | Browser as a service |
CN108647025A (en) * | 2018-05-15 | 2018-10-12 | 浙江口碑网络技术有限公司 | Processing method and processing device, electronics and the storage device of DOM Document Object Model interior joint |
CN109388766A (en) * | 2017-08-07 | 2019-02-26 | 阿里巴巴集团控股有限公司 | The method and apparatus of page load |
CN110309461A (en) * | 2019-07-04 | 2019-10-08 | 郑州悉知信息科技股份有限公司 | Webpage representation method and apparatus |
KR20190136258A (en) * | 2018-05-30 | 2019-12-10 | 주식회사 티파이브온라인 | Cross platform system and operation method for supporting multi thread |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10063380B2 (en) * | 2013-01-22 | 2018-08-28 | Amazon Technologies, Inc. | Secure interface for invoking privileged operations |
US10268567B2 (en) * | 2017-04-12 | 2019-04-23 | Microsoft Technology Licensing, Llc | Systems, methods, and computer-readable media for using immutable and copy-on-write data semantics to optimize record and replay frameworks |
-
2019
- 2019-12-18 CN CN201911311136.3A patent/CN111125597B/en active Active
Patent Citations (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8555157B1 (en) * | 2010-01-21 | 2013-10-08 | Google Inc. | Document update generation |
CN102214098A (en) * | 2011-06-15 | 2011-10-12 | 中山大学 | Dynamic webpage data acquisition method based on WebKit browser engine |
CN102346770A (en) * | 2011-09-21 | 2012-02-08 | 晨星软件研发(深圳)有限公司 | WebKit browser webpage content loading method and device |
CN104063460A (en) * | 2014-06-25 | 2014-09-24 | 北京奇虎科技有限公司 | Method and device for loading webpage in browser |
US9582600B1 (en) * | 2014-09-23 | 2017-02-28 | Amazon Technologies, Inc. | Cloud browser DOM-based client |
US9740791B1 (en) * | 2014-09-23 | 2017-08-22 | Amazon Technologies, Inc. | Browser as a service |
US9178934B1 (en) * | 2014-11-21 | 2015-11-03 | Instart Logic, Inc. | Modifying web content at a client |
CN109388766A (en) * | 2017-08-07 | 2019-02-26 | 阿里巴巴集团控股有限公司 | The method and apparatus of page load |
CN108647025A (en) * | 2018-05-15 | 2018-10-12 | 浙江口碑网络技术有限公司 | Processing method and processing device, electronics and the storage device of DOM Document Object Model interior joint |
KR20190136258A (en) * | 2018-05-30 | 2019-12-10 | 주식회사 티파이브온라인 | Cross platform system and operation method for supporting multi thread |
CN110309461A (en) * | 2019-07-04 | 2019-10-08 | 郑州悉知信息科技股份有限公司 | Webpage representation method and apparatus |
Non-Patent Citations (6)
Title |
---|
Learning object models from semistructured Web documents;S. Ye 等;《IEEE》;全文 * |
刘秀秀 ; 潘梁 ; 郭志川 ; 胡琳琳 ; .基于Webkit内核焦点查询算法的研究与优化.计算机工程与设计.2016,(02),全文. * |
探索Linux内核级安全增强***的精彩之旅;赵亮;计算机安全(10);全文 * |
校丽丽 ; 杨雷 ; 吴珏 ; .一种基于数据驱动模型的VirtualDOM树的构建方法.西南科技大学学报.2018,(01),全文. * |
王震江 ; .XML的DOM编程.电脑编程技巧与维护.2006,(10),全文. * |
移动Web前端性能优化方法及其应用研究;陈秋实;《中国优秀硕士学位论文全文数据库电子期刊》;全文 * |
Also Published As
Publication number | Publication date |
---|---|
CN111125597A (en) | 2020-05-08 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10643023B2 (en) | Programmatic native rendering of structured content | |
EP3828719A2 (en) | Method and apparatus for generating model for representing heterogeneous graph node, electronic device, storage medium, and computer program product | |
CN111506387B (en) | Page prerendering method and device, electronic equipment and storage medium | |
JP7269913B2 (en) | Knowledge graph construction method, device, electronic device, storage medium and computer program | |
US9372688B1 (en) | Automatic discovery of a JavaScript API | |
CN111832701B (en) | Model distillation method, model distillation device, electronic equipment and storage medium | |
JP7248756B2 (en) | Operator registration processing method, apparatus and electronic equipment based on deep learning | |
CN110852449B (en) | Model migration method and electronic equipment | |
CN111125597B (en) | Webpage loading method, browser, electronic equipment and storage medium | |
WO2022152015A1 (en) | Front-end code generation method and apparatus | |
CN112015468B (en) | Interface document processing method and device, electronic equipment and storage medium | |
CN110889056B (en) | Page marking method and device | |
CN111506623B (en) | Data expansion method, device, equipment and storage medium | |
US20210191921A1 (en) | Method, apparatus, device and storage medium for data aggregation | |
CN111027704B (en) | Quantum resource estimation method and device and electronic equipment | |
CN113220571B (en) | Method, system, equipment and storage medium for debugging mobile webpage | |
CN113656533A (en) | Tree control processing method and device and electronic equipment | |
CN113822033B (en) | Report generation method, device, equipment and storage medium | |
CN111880778B (en) | Method and device for generating interface document, electronic equipment and storage medium | |
CN112925522A (en) | Dependency graph generation method, dependency graph generation device, dependency graph generation apparatus, storage medium, and program product | |
CN112328749A (en) | Knowledge element extraction method, knowledge element extraction device, electronic apparatus, knowledge element extraction medium, and program product | |
CN111832070A (en) | Data mask method and device, electronic equipment and storage medium | |
CN111026916A (en) | Text description conversion method and device, electronic equipment and storage medium | |
CN114661402A (en) | Interface rendering method and device, electronic equipment and computer readable medium | |
CN112799648B (en) | Unified framework implementation method, system, electronic equipment and storage medium |
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 |