CN111125597A - Webpage loading method, browser, electronic equipment and storage medium - Google Patents

Webpage loading method, browser, electronic equipment and storage medium Download PDF

Info

Publication number
CN111125597A
CN111125597A CN201911311136.3A CN201911311136A CN111125597A CN 111125597 A CN111125597 A CN 111125597A CN 201911311136 A CN201911311136 A CN 201911311136A CN 111125597 A CN111125597 A CN 111125597A
Authority
CN
China
Prior art keywords
information
object model
document object
kernel
model information
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.)
Granted
Application number
CN201911311136.3A
Other languages
Chinese (zh)
Other versions
CN111125597B (en
Inventor
牛潞彪
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Baidu Netcom Science and Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN201911311136.3A priority Critical patent/CN111125597B/en
Publication of CN111125597A publication Critical patent/CN111125597A/en
Application granted granted Critical
Publication of CN111125597B publication Critical patent/CN111125597B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document 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: acquiring virtual document object model information of a webpage; converting the virtual document object model information into kernel document object model information facing to a kernel layer 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 to realize the loading of the webpage. According to the technical scheme, the time consumed by page loading can be effectively shortened, and the page loading performance is improved.

Description

Webpage loading method, browser, electronic equipment and storage medium
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, React, etc. all adopt a virtual document object model (Dom) scheme to optimize the rendering logic of the web page. In the traditional mode, the service structure reflects that the bottom kernel needs to pass through an intermediate mode of a Hyper Text Markup Language (HTML) layer to really trigger interface drawing. Based on this, in the page loading process of the existing web page, the loading of the page can be realized only from the front-end frame of the browser to the kernel of the browser through the Template configuration, the Virtual (Virtual) Dom, the HTML Dom, and the kernel Dom of the page.
Through detailed analysis of the above modes, it can be found that logical structures of doms themselves are almost the same, and a Virtual Dom in the front-end framework and a kernel Dom in the kernel layer have a certain structural similarity, which inevitably results in that a certain degree of repetitive operations exist in a Template analysis (parser) process from a Template in the front-end framework to a Virtual Dom, a Virtual Dom process from the Virtual Dom to the HTML Dom, and an HTML Element parser process from the HTML Dom to the kernel Dom. For example, partial depth traversal, comparison, object structure conversion and other calculations are all performed, and when a webpage is complex, the existing loading process can cause the webpage to be loaded for a long time, so that the webpage loading performance is low.
Disclosure of Invention
In order to solve the technical problem, the present application provides a webpage loading method, a browser, an electronic device, and a storage medium, which are used to shorten loading time and improve webpage loading performance.
In one aspect, the present application provides a method for loading a web page, including:
acquiring virtual document object model information of a webpage;
converting the virtual document object model information into kernel document object model information facing to a kernel layer 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 to realize the loading of the webpage.
Further optionally, in the method described above, before converting the virtual document object model information into kernel document object model information for a kernel layer 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 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 web page based on the kernel document object model information and the kernel document object model information of the previous version of the web page;
correspondingly, rendering the page of the webpage based on the kernel document object model information, and realizing the loading of the webpage, including:
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 previous version page of the webpage, so as to realize the loading of the webpage.
Further optionally, in the method as described above, the 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
Acquiring second template information of webpages 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 relationship between the other front-end frames and the current front-end frame.
Further optionally, in the method 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 mode in the other front-end frames and the information definition mode in the current front-end frame.
Further optionally, 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 to realize the loading of the webpage.
In 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 content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform a method as any one of above.
In yet another aspect, the present application also provides a non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any of the above.
One embodiment in the above application has the following advantages or benefits: the virtual Dom information is converted into the kernel Dom information facing the kernel layer based on the pre-established Dom structural specification, so that the virtual Dom conversion can be directly carried out facing the kernel layer.
Furthermore, the complex Dom diff calculation can be placed 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.
Moreover, the technical scheme of the application can be adapted to various front-end frameworks, and has strong expansibility and applicability.
Other effects of the above-described alternative will be described below with reference to specific embodiments.
Drawings
The drawings are included to provide a better understanding of the present solution and are not intended to limit the present application. Wherein:
FIG. 1 is a schematic diagram according to a first embodiment of the present application;
fig. 2 is a diagram illustrating a conventional page loading mode.
Fig. 3 is a schematic diagram of the page loading mode of the embodiment.
FIG. 4 is a schematic illustration according to a second embodiment of the present application;
fig. 5 is a block diagram of an electronic device for implementing a page loading method according to an embodiment of the present application.
Detailed Description
The following description of the exemplary embodiments of the present application, taken in conjunction with the accompanying drawings, includes various details of the embodiments of the application for the understanding of the same, which are to be considered exemplary only. 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 present 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 method for loading a web page in this embodiment may specifically include the following steps:
s101, acquiring virtual Dom information of a webpage;
the main execution body of the web page loading method of the embodiment is a browser, and specifically, the browser loads a page of a web page. 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 this embodiment may be specifically implemented in a front-end frame of a browser. The virtual Dom information of the web page of the embodiment is in a Dom tree structure in a key-value pair form. For example, the format of the virtual Dom information of the present embodiment may be as follows:
Figure BDA0002324554550000041
Figure BDA0002324554550000051
further optionally, the acquiring the virtual Dom information of the web page in step S101 in this embodiment may specifically include the following three cases:
in the first case, acquiring virtual Dom information configured under the current front-end framework;
the condition can be suitable for direct configuration of virtual Dom information by research personnel under a front-end framework, the implementation of the condition has high professional requirements on the research personnel, and the research personnel is required to be capable of directly writing the virtual Dom information of the Dom tree structure in a key-value pair mode in the front-end framework.
In the second situation, acquiring first Template information configured under the current front-end framework; generating virtual Dom information based on the first Template information;
in this case, the requirement for the developer is lower than that in the first case, and the developer may first configure the first Template information in the form of a tag. For example, the first Template information of the present embodiment may be in the form of a tag as follows:
<View/>
<Text/>
<Button/>
<Form/>
<Input/>
in the front-end framework, the first Template information in the form of a tag 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 situation, second Template information of the webpages under other front-end frames is obtained, 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 pre-established information mapping relationship between other front-end frameworks and the current front-end framework.
In practical application, different front-end frameworks may exist, so that the different front-end frameworks can be adapted to the kernel layer of the embodiment, and the loading of the web page is executed on the kernel adopting the optimized architecture of the embodiment. In this embodiment, information may also be converted in the front-end framework.
Specifically, second Template information of the web pages under other front-end frames may be obtained first, and the initial virtual Dom information may be generated based on the second Template information. For example, what is defined in the initial virtual Dom information corresponding to other front-end frameworks is:
{
title ` Zhang three'
}
And what is defined in the current front end framework is: {
name ` Zhang III'
}
Obviously, in the current front-end framework, the "title" cannot be recognized, and thus the information of "zhang san" cannot be acquired, so that the conversion of the virtual Dom information is required in this embodiment. Specifically, the initial virtual Dom information may be converted into the virtual Dom information based on a pre-established information mapping relationship between other front-end frames and the current front-end frame, for example, title: 'zhangsan' may be converted into name: 'zhangsan' here. For example, according to the description information of the fields defined in each front-end framework, the information mapping relationship can be established for the fields with the same description information. For example, the description information of title and name is used to describe the name of the user, and only defined unused fields are used in unused front-end frames, and an information mapping relationship can be established between the two.
Further optionally, before this step, the method may further include: 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 mode 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 method, so that the method can be adapted to the kernel of the optimization framework of the embodiment, and the applicable scene of the optimization framework of the embodiment is expanded.
S102, converting the virtual Dom information into kernel Dom information facing 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 kernel Dom information of the virtual Dom information oriented to the kernel layer, the Dom structural specification is directly referred to for conversion, and then the kernel Dom information which can be identified by the kernel layer can be obtained.
Further optionally, before step S102 in this embodiment, the method may further include: and establishing a virtual Dom structure specification template based on the information identification requirement of the kernel layer.
S103, rendering the webpage of the webpage based on the kernel Dom information, and loading the webpage.
In particular, this step is implemented in the kernel of the browser. The kernel of the browser performs attribute operation based on the received kernel Dom information, integrates the skeleton and the content in the webpage, realizes rendering of the webpage, obtains a rendering Tree, namely a Render Tree, and realizes loading of the webpage at this time. The rendered web page may then be presented at the front end of the browser based on a Render Tree. The attribute operation can refer to the related prior art, and is not described herein again.
In addition, the above-mentioned scheme may be applied to a webpage that is displayed for the first time, and at this time, the kernel does not have any information of the webpage, and at this time, the webpage may be loaded in the manner of the above-mentioned embodiment.
In practical application, a scene of local content update of a web page is usually encountered, and in the loading process of the page, kernel Dom information of a previous version of the page is stored in a kernel of a browser in real time. At this time, before the 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 previous version of the webpage; if a plurality of nodes in the page are updated, a plurality of updated node information is calculated according to the mode. This process may be a calculation process of Dom Diff. In practical application, if the page includes more nodes, all updated node information can be acquired through complex calculation according to the method. And finally, updating the kernel Dom in the kernel based on the updated node information in the webpage, performing attribute processing based on the updated kernel Dom, and rendering the webpage to obtain a rendering Tree, namely a Render Tree, thereby realizing the loading of the webpage.
It should be noted that the virtual Dom information in this embodiment may be tree information of the virtual Dom, that is, no matter whether the webpage is initially displayed or partially updated, the virtual Dom information is represented by using a complete Dom tree structure, and at this time, Dom Diff calculation is performed in a kernel of the browser to obtain updated webpage node information. Of course, if the webpage is initially displayed, the updated webpage node information can be regarded as information of all nodes in the webpage.
Or, the virtual Dom information of the present embodiment may only include 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 amount, shorten the page loading time and improve the page loading performance. In the embodiment, the Dom Diff calculation in the kernel can be omitted, the kernel Dom is updated directly according to the updated webpage node information, and webpage rendering is performed based on the kernel Dom, so that the page loading time is further shortened, and the page loading efficiency is improved.
The virtual Dom of the embodiment is actually only an Object under a JavaScript environment, and represents a Tree structure of the whole interface, an event, an attribute, and the like, where only a basic structure is defined, and if some extension structures are needed, the extension structures can be determined and added through a kernel API and a service level together. In a broad sense, the editing mode of the interface is changed from the XML framework to the Js Object mode.
Fig. 2 is a diagram illustrating a conventional page loading mode. As shown in FIG. 2, where Template, VirtualDom, 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 specific implementation process, the developer configures Template information in the front-end framework of the browser, where the Template information is in the form of a tag, as shown in the format of the above embodiment. The Template information in the form of a tag is then converted into a key-value pair form in a Virtual Dom process, such as the format described in the above embodiments. And then converting the key-value pair form into a tag form of the HTML in HTML Dom processing, for example, the tag form of the HTML may be as follows:
<div/>
<span/>
Custom
Component
and finally, converting the HTML tag form into a kernel Dom, and generating a Render Tree based on the kernel Dom in the kernel of the browser to realize webpage loading.
Moreover, as shown in fig. 2, in the process of updating the local node of the page, it is necessary to perform a Dom diff calculation in the Virtual Dom phase to obtain updated webpage node information, and only the updated webpage node information may be processed subsequently.
Fig. 3 is a schematic diagram of the page loading mode of the embodiment. That is, the page loading mode of this embodiment is the page loading process of the embodiment shown in fig. 1. Comparing fig. 3 with 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 to fig. 2, the processing of the HTML layer is removed, and the virtual Dom information is directly converted into kernel Dom information facing the kernel layer based on the pre-established Dom structure specification, so that the page loading process can be reduced, the page loading time can be shortened, and the page loading performance can be improved.
Compared with fig. 2, the present embodiment can also complete the dim calculation of the Dom by setting up the kernel layer. In the conventional mode shown in fig. 2, the complex Dom diff calculation is executed in the JavaScript environment with poor execution performance, whereas the technical solution of this embodiment shown in fig. 3 can completely transfer the complex Dom diff calculation to java, C, and C + + environments at the browser kernel level, so that the calculation execution efficiency is higher.
According to the webpage loading method, the virtual Dom information is converted into the kernel Dom information facing the kernel layer based on the pre-established Dom structural specification, the virtual Dom conversion can be directly carried out facing the kernel layer, compared with the traditional mode, one-time deep traversal operation can be directly reduced, computing resources and time can be effectively saved under a complex page structure, modification changes of related interface elements can be responded and finally displayed more quickly, time consumed by page loading can be effectively shortened, and page loading performance is improved.
Further, in this embodiment, a complex Dom diff calculation may be placed 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.
Moreover, the technical scheme of the embodiment can be adapted to various front-end frameworks, and has strong expansibility and applicability.
Moreover, the technical scheme of the embodiment is still based on front-end framework development, and in terms of development level, any development efficiency is not influenced, a developer can select a mode using traditional HTML, Js and Css, extra learning cost is not needed in the development level, and the development level is very convenient to use.
Fig. 4 is a structural 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 the virtual document object model information into kernel document object model information oriented to the kernel layer based on a pre-established document object model structure specification template;
and a rendering module 403, configured to render a page of the web page based on the kernel document object model information, so as to implement loading of the web page.
Further optionally, the obtaining module 401 in this embodiment is configured to:
acquiring 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
Acquiring second template information of webpages 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 pre-established information mapping relation between other front-end frames and the current front-end frame.
Further optionally, the browser device 400 of this 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 manner in the other front-end frames and the information definition manner 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 optionally, the browser device 400 of this 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 previous version of the web page;
correspondingly, the rendering module 403 is configured to render the page of the web page based on the updated node information in the web page and the kernel document object model information of the previous version of the web page, so as to implement loading of the web page.
In the browser device 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 in this embodiment, as the related method embodiment, may refer to the description of the related method embodiment in detail, and details thereof are not repeated herein.
According to an embodiment of the present application, an electronic device and a readable storage medium are also provided.
Fig. 5 is a block diagram of an electronic device implementing a web page loading method according to an embodiment of the present application. 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 phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the present application that are described and/or claimed herein.
As shown in fig. 5, the electronic apparatus includes: one or more processors 501, memory 502, and interfaces for connecting the various 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 for execution within the electronic device, including instructions stored in or on the memory to display graphical information of a GUI on an external input/output apparatus (such as a display device coupled to the interface). In other embodiments, multiple processors and/or multiple buses may be used, along with multiple memories and multiple memories, as desired. Also, multiple electronic devices may be connected, with each device providing portions of the necessary operations (e.g., as a server array, a group of blade servers, or a multi-processor system). In fig. 5, one processor 501 is taken as an example.
Memory 502 is a non-transitory computer readable storage medium as provided herein. The memory stores instructions executable by at least one processor, so that the at least one processor executes 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 perform the web page loading method provided by the present application.
The memory 502, which is a non-transitory computer readable storage medium, may be used to store 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 the web page loading method in the embodiments of the present application. The processor 501 executes various functional applications of the server and data processing, i.e., implementing the web page loading method in the above method embodiments, by running non-transitory software programs, instructions, and modules stored in the memory 502.
The memory 502 may include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function; the storage data area may store data created by use of the electronic device implementing the web page loading method, and the like. Further, the 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, the memory 502, the input device 503 and the output device 504 may be connected by a bus or other means, and fig. 5 illustrates the connection by a bus as an example.
The input device 503 may receive input numeric or character information and generate key signal inputs related to user settings and function control of an electronic apparatus implementing the web page loading method, such as an input device of a touch screen, a keypad, a mouse, a track pad, a touch pad, a pointing stick, one or more mouse buttons, a track ball, a joystick, or the like. The output devices 504 may include a display device, auxiliary lighting devices (e.g., LEDs), and haptic feedback devices (e.g., vibrating 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 can be a touch screen.
Various implementations of the systems and techniques described here can be realized in digital electronic circuitry, integrated circuitry, application specific ASICs (application specific integrated circuits), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.
These computer programs (also known as programs, software applications, or code) include machine instructions for a programmable processor, and may be implemented using high-level procedural and/or object-oriented programming languages, and/or assembly/machine languages. 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 a pointing device (e.g., a mouse or a 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 can 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, speech, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a back-end 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 back-end, 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 clients and servers. A client and server are generally 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 of the embodiment of the application, the virtual Dom information is converted into the kernel Dom information facing the kernel layer based on the pre-established Dom structural specification, the 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, the time consumed by page loading can be effectively shortened, and the page loading performance is improved.
According to the technical scheme of the embodiment of the application, complicated Dom diff calculation can be placed 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.
Moreover, according to the technical scheme of the embodiment of the application, various front-end frameworks can be adapted, and the method has strong expansibility and applicability.
It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present application may be executed in parallel, sequentially, or in different orders, as long as the desired results of the technical solutions disclosed in the present application can be achieved, and the present invention is not limited herein.
The above-described embodiments should not be construed as limiting the scope of the present application. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made in accordance with design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims (14)

1. A webpage loading method is characterized by comprising the following steps:
acquiring virtual document object model information of a webpage;
converting the virtual document object model information into kernel document object model information facing to a kernel layer 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 to realize the loading of the webpage.
2. The method of claim 1, wherein before converting the virtual document object model information into kernel document object model information for a kernel layer based on pre-established document object model structure specifications, 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 prior to rendering a page of a web page based on the kernel document object model information, further comprising:
calculating updated node information in the web page based on the kernel document object model information and the kernel document object model information of the previous version of the web page;
correspondingly, rendering the page of the webpage based on the kernel document object model information, and realizing the loading of the webpage, including:
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 previous version page of the webpage, so as to realize the 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
Acquiring second template information of webpages 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 relationship between the other front-end frames and the current front-end frame.
5. The method according to claim 4, wherein 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 frameworks and the current front-end framework, 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 mode in the other front-end frames and the information definition mode in the current front-end frame.
6. The method according to 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;
and the rendering module is used for rendering the page of the webpage based on the kernel document object model information to realize the loading of the webpage.
8. The apparatus of claim 7, further comprising:
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 of claim 7, further comprising:
the calculation module is used for calculating updated node information in the webpage based on the kernel document object model information and the kernel document object model information of the previous version page of the webpage;
correspondingly, the rendering module is configured to render the page of the web page based on the updated node information in the web page and the kernel document object model information of the previous version of the web page, so as to implement loading of the web page.
10. The apparatus of claim 8, wherein the obtaining 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
Acquiring second template information of webpages 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 relationship between the other front-end frames and the current front-end frame.
11. The apparatus of 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 modes in the other front-end frames and the information definition mode in the current front-end frame.
12. The apparatus according to any of claims 7-11, 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.
13. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
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 having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-6.
CN201911311136.3A 2019-12-18 2019-12-18 Webpage loading method, browser, electronic equipment and storage medium Active CN111125597B (en)

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 true CN111125597A (en) 2020-05-08
CN111125597B 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)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112527297A (en) * 2020-12-23 2021-03-19 北京飞漫软件技术有限公司 Data processing method, device, equipment and storage medium
CN112989195A (en) * 2021-03-20 2021-06-18 重庆图强工程技术咨询有限公司 Big data based whole process consultation method and device, electronic equipment and storage medium

Citations (13)

* Cited by examiner, † Cited by third party
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
US20140208096A1 (en) * 2013-01-22 2014-07-24 Amazon Technologies, Inc. Secure interface for invoking privileged operations
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
US20180300197A1 (en) * 2017-04-12 2018-10-18 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
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

Patent Citations (13)

* Cited by examiner, † Cited by third party
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
US20140208096A1 (en) * 2013-01-22 2014-07-24 Amazon Technologies, Inc. Secure interface for invoking privileged operations
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
US20180300197A1 (en) * 2017-04-12 2018-10-18 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
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)

* Cited by examiner, † Cited by third party
Title
S. YE 等: "Learning object models from semistructured Web documents", 《IEEE》 *
刘秀秀;潘梁;郭志川;胡琳琳;: "基于Webkit内核焦点查询算法的研究与优化", no. 02 *
校丽丽;杨雷;吴珏;: "一种基于数据驱动模型的VirtualDOM树的构建方法", no. 01 *
王震江;: "XML的DOM编程", no. 10 *
赵亮: "探索Linux内核级安全增强系统的精彩之旅", 计算机安全, no. 10 *
陈秋实: "移动Web前端性能优化方法及其应用研究", 《中国优秀硕士学位论文全文数据库电子期刊》 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112527297A (en) * 2020-12-23 2021-03-19 北京飞漫软件技术有限公司 Data processing method, device, equipment and storage medium
CN112989195A (en) * 2021-03-20 2021-06-18 重庆图强工程技术咨询有限公司 Big data based whole process consultation method and device, electronic 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

Also Published As

Publication number Publication date
CN111125597B (en) 2023-10-27

Similar Documents

Publication Publication Date Title
US11144711B2 (en) Webpage rendering method, device, electronic apparatus and storage medium
KR102484617B1 (en) Method and apparatus for generating model for representing heterogeneous graph node, electronic device, storage medium and program
US11829436B2 (en) Method and apparatus of pre-rendering page, electronic device, and storage medium
US20170091159A1 (en) Programmatic native rendering of structured content
US10419568B2 (en) Manipulation of browser DOM on server
CN112069201A (en) Target data acquisition method and device
CN111832701B (en) Model distillation method, model distillation device, electronic equipment and storage medium
CN111897619A (en) Browser page display method and device, electronic equipment and storage medium
CN110852449A (en) Model migration method and electronic device
US11475093B2 (en) Method and apparatus for processing webpage, device, and storage medium
CN111125597B (en) Webpage loading method, browser, electronic equipment and storage medium
CN112015468A (en) Interface document processing method and device, electronic equipment and storage medium
CN111610972A (en) Page generation method, device, equipment and storage medium
CN111339462A (en) Component rendering method, device, server, terminal and medium
US20240095298A1 (en) Systems and methods for rendering interactive web pages
CN113822033A (en) Report generation method, device, equipment and storage medium
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
CN111125445A (en) Community theme generation method and device, electronic equipment and storage medium
CN113220571B (en) Method, system, equipment and storage medium for debugging mobile webpage
CN111880778B (en) Method and device for generating interface document, electronic equipment and storage medium
CN114217798A (en) Code generation method and device for database form interface
CN111931524B (en) Method, apparatus, device and storage medium for outputting information
CN113656533A (en) Tree control processing method and device and electronic equipment
CN114661402A (en) Interface rendering method and device, electronic equipment and computer readable 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