CN110309461B - Page display method and device - Google Patents
Page display method and device Download PDFInfo
- Publication number
- CN110309461B CN110309461B CN201910599173.2A CN201910599173A CN110309461B CN 110309461 B CN110309461 B CN 110309461B CN 201910599173 A CN201910599173 A CN 201910599173A CN 110309461 B CN110309461 B CN 110309461B
- Authority
- CN
- China
- Prior art keywords
- page
- file
- virtual dom
- virtual
- dom
- 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
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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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
Abstract
The application discloses a page display method and device, wherein the method comprises the following steps: when the page switching operation is detected on the displayed first page, acquiring a source code of a second page to be switched to; determining difference element information of the second page and the first page based on source codes of the first page and the second page; obtaining a cached first virtual Document Object Model (DOM) file of the first webpage; updating a first virtual DOM file of the first webpage according to the difference element information to construct a second virtual DOM file corresponding to the second webpage; mapping the second virtual DOM file into a real DOM file of the second webpage; and loading and displaying the second webpage based on the real DOM file of the second webpage. The scheme of the application can improve the page loading speed and reduce the situation that the page display speed is too slow.
Description
Technical Field
The present application relates to the field of web page application technologies, and in particular, to a method and apparatus for displaying a page.
Background
In order to meet different requirements, switching of web pages is often involved.
Because of the difference between different pages, each time the browser needs to switch pages, the browser needs to acquire page data corresponding to the page to be displayed from the website, and then load and display the page. However, the process of loading the page after the browser acquires the page data requires a long time, resulting in an excessively slow page presentation speed.
Disclosure of Invention
In view of the above, the application provides a page display method and device, so as to improve the page loading speed and reduce the situation that the page display speed is too slow.
In order to achieve the above object, in one aspect, the present application provides a page display method, including:
when the page switching operation is detected on the displayed first page, acquiring a source code of a second page to be switched to;
determining difference element information of a second page and the first page based on source codes of the first page and the second page, wherein the difference element information is information of elements with differences in the first page and the second page;
obtaining a cached first virtual Document Object Model (DOM) file of the first webpage, wherein the first virtual DOM file comprises virtual DOM nodes corresponding to page elements in the first webpage;
updating a first virtual DOM file of the first webpage according to the difference element information to construct a second virtual DOM file corresponding to the second webpage, wherein the second virtual DOM file comprises virtual DOM nodes corresponding to all page elements in the second webpage;
mapping the second virtual DOM file into a real DOM file of the second webpage;
and loading and displaying the second webpage based on the real DOM file of the second webpage.
Preferably, the difference element information includes any one or more of the following:
a first web page element that is present in the first page and that is not present in the second page;
a second web page element that is present in the second web page and that is not present in the first web page;
a third webpage element of the same type but different attribute values in the second webpage and the first webpage;
the updating the first virtual DOM file of the first web page according to the difference element information to construct a second virtual DOM file corresponding to the second web page includes:
if the difference element information comprises the first page element, deleting a virtual DOM node corresponding to the first page element in the first virtual DOM file;
if the difference element information comprises the second webpage element, creating a virtual DOM node corresponding to the second webpage element in the first virtual DOM file;
and if the difference element information comprises the third webpage element, adjusting the attribute value of the virtual DOM node corresponding to the third webpage element in the first virtual DOM file to the attribute value corresponding to the third webpage element in the second webpage to obtain the virtual DOM file corresponding to the second webpage.
Preferably, if the difference element information includes the second web page element, creating a virtual DOM node corresponding to the second web page element in the first virtual DOM file includes:
and if the difference element information comprises the second webpage element, calling a component corresponding to the second webpage element from a component library, and adding the called component into the first virtual DOM file as a virtual DOM node corresponding to the second webpage element.
Preferably, the acquiring the source code of the second page to be switched to when the page switching operation is detected on the revealed first page includes:
when a page switching operation is detected on a displayed first page, determining a user inputting the page switching operation;
and determining a second page matched with the user permission of the user and the page switching operation, and acquiring a source code of the second page.
Preferably, after the loading and displaying of the second web page based on the real DOM file of the second web page, the method further comprises:
and caching the second virtual DOM file in the memory.
In still another aspect, the present application further provides a page display device, including:
the source code acquisition unit is used for acquiring source codes of a second page to be switched to when the page switching operation is detected on the displayed first page;
an element comparison unit, configured to determine difference element information between the second page and the first page based on a source code of the first page and a source code of the second page, where the difference element information is information of an element having a difference in the first page and the second page;
the file acquisition unit is used for acquiring a cached first virtual Document Object Model (DOM) file of the first webpage, wherein the first virtual DOM file comprises virtual DOM nodes corresponding to page elements in the first webpage;
the file adjusting unit is used for updating the first virtual DOM file of the first webpage according to the difference element information so as to construct a second virtual DOM file corresponding to the second webpage, wherein the second virtual DOM file comprises virtual DOM nodes corresponding to all page elements in the second webpage;
the file conversion unit is used for mapping the second virtual DOM file into a real DOM file of the second webpage;
and the page display unit is used for loading and displaying the second webpage based on the real DOM file of the second webpage.
Preferably, the difference element information determined by the element comparison unit includes any one or more of the following:
a first web page element that is present in the first page and that is not present in the second page;
a second web page element that is present in the second web page and that is not present in the first web page;
a third webpage element of the same type but different attribute values in the second webpage and the first webpage;
the file adjustment unit includes:
a node deleting unit, configured to delete, if the difference element information includes the first page element, a virtual DOM node corresponding to the first page element in the first virtual DOM file;
a node creation unit, configured to create a virtual DOM node corresponding to the second web page element in the first virtual DOM file if the difference element information includes the second web page element;
and the attribute changing unit is used for adjusting the attribute value of the virtual DOM node corresponding to the third webpage element in the first virtual DOM file to the attribute value corresponding to the third webpage element in the second webpage if the difference element information comprises the third webpage element, so as to obtain the virtual DOM file corresponding to the second webpage.
Preferably, the node creation unit includes:
and the node creation subunit is used for calling a component corresponding to the second webpage element from the component library and adding the called component into the first virtual DOM file as a virtual DOM node corresponding to the second webpage element if the difference element information comprises the second webpage element.
Preferably, the source code obtaining unit includes:
the permission determination subunit is used for determining a user who inputs the page switching operation when the page switching operation is detected on the displayed first page;
and the code acquisition subunit is used for determining a second page matched with the user permission of the user and the page switching operation and acquiring the source code of the second page.
Preferably, the method further comprises:
and the file caching unit is used for caching the second virtual DOM file in the memory after the page showing unit loads and shows the second webpage based on the real DOM file of the second webpage.
According to the technical scheme, when the first page is required to be switched to the second page, the virtual DOM file of the second page can be constructed according to element differences in the first page and the second page and the cached virtual DOM file of the first page, so that after the virtual DOM file of the second page is converted to the real DOM file, the loading and displaying of the second page can be completed by directly loading the page based on the real DOM file of the second page, and therefore, each element in the second page does not need to be loaded for one time, the number of times of repeatedly loading the page required by each time of loading the element in the page switching process is effectively reduced, time consumption caused by repeated data in the page loading for many times is avoided, and the page displaying speed is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required to be used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only embodiments of the present application, and that other drawings can be obtained according to the provided drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic flow chart of a page presentation method of the present application;
FIG. 2 is a schematic flow chart of a page presentation method of the present application;
fig. 3 is a schematic diagram showing a constitution of a page showing apparatus of the present application.
Detailed Description
The scheme of the embodiment of the application is suitable for the browser to finish loading and displaying the page, so that the efficiency of finishing loading the page is improved, and the page displaying speed is improved.
The following describes the scheme of the application with reference to the attached drawings.
Referring to fig. 1, which is a schematic flow chart illustrating an embodiment of a page presentation method of the present application, the method of the present embodiment may be applied to a browser (also referred to as a browser client), and the method of the present embodiment may include:
s101, when the page switching operation is detected on the displayed first page, acquiring the source code of the second page to be switched to.
For convenience of distinction, a page that the browser has exhibited is referred to as a first page, and a page to be switched to is referred to as a second page. The first page and the second page belong to the same website.
The page switching operation is an operation of triggering switching of the first page to other pages. For example, after the first page is presented, the user may trigger a request for the second page by clicking on a picture, link address, etc. in the first page.
Optionally, in consideration of the fact that web page contents which may be desired to be presented for different users in the website are different, the permission of different users can be set in the embodiment of the application. The pages that can be accessed by users with different rights will be different, and the content of the same page that can be accessed by users with different rights will be different. Accordingly, when a page switching operation is detected, a user who inputs the page switching operation may also be determined. Then, based on the user authority of the user and the page switching operation, a second page matched with the user authority is determined, and a source code of the second page is acquired.
For example, taking a shopping website as an example, the same web page that can be seen by the manager of the website and the ordinary user may also be different, so after detecting the page switching operation, the browser may send the user's information to the server of the website, and after confirming the authority of the user by the server, determine the second page that matches the authority of the user.
S102, determining difference element information in the second page and the first page based on the source code of the first page and the source code of the second page.
It will be appreciated that the source code of a page contains information for all the elements that make up the page. Wherein, the elements mentioned herein may also be referred to as the objects of the page refer to the page elements of the web page, for example, pictures, files, spaces, etc. in the web page all belong to the elements in the page.
The difference element information is information of elements with differences in the first page and the second page. The difference element information can analyze information of different elements and identifiers of the elements, attribute values of the elements and the like between the two pages by comparing source codes of the first page and the second page.
Alternatively, the difference element information may include any one or more of the following:
a first web page element that is present in the first page and that is not present in the second page;
a second web page element that is present in the second web page and that is not present in the first web page;
the second web page is the same as the third web page element of the same type in the first web page but different in attribute value.
Wherein, the first webpage element refers to an element which is only contained in the first page and is not contained in the second page. For example, assuming that there is a picture in the first page and there is no picture in the second page, the picture belongs to the first page element.
The second web page element refers to an element contained in the second web page, but the first web page does not have a corresponding element.
And the third web page element refers to an element with the same type in the second page and the first page, but the attribute value of the element in the second page is different from the attribute value of the element in the first page. For example, the second web page has an element of text therein, while the first web page also has an element of the same type of the text therein, but the second web page is different from the first web page in content of the text therein, and the text belongs to a third web page element.
It should be noted that, for convenience of distinguishing, the different types of difference elements in the second page and the first page are respectively referred to as a first web page element, a second web page element and a third web page element. However, in comparison with the first web page, there are various possibilities in considering the second web page switched to, and thus, there may be different elements having differences between the first web page and the second web page, for example, there may be no first web page element in the first web page, where only the first web page does not have the second web page, and thus, in the embodiment of the present application, there may be cases where there is no web page element of any one of the first web page element, the second web page element, and the third web page element, and there is one or more web page elements of that type.
S103, obtaining a cached first virtual Document object model (Document ObjectModel, DOM) file of the first webpage.
The first virtual DOM file comprises virtual DOM nodes corresponding to all page elements in the first webpage. The virtual DOM node included in the virtual DOM file is also a virtual DOM element, which is a DOM node (also referred to as a DOM element) that is simulated by a JavaScript (abbreviated as JS, an transliterated script language) object. The simulation DOM node based on the JS object is actually that the webpage element is mapped on the JS object, and the specific implementation of the simulation DOM node is not limited. Corresponding to the real DOM file, one virtual DOM file can be seen as a virtual DOM tree.
For convenience of distinction, in the embodiment of the present application, the virtual DOM file corresponding to the first web page is referred to as a first virtual DOM file, and the virtual DOM file of the second web page constructed later is referred to as a second virtual DOM file.
In the embodiment of the application, the browser loads the webpage by constructing the virtual DOM file of the webpage, converting the virtual DOM file into the real DOM file, and completing the loading and displaying of the webpage based on the real DOM file, so that each displayed webpage corresponds to the virtual DOM file of the webpage. Therefore, the first DOM virtual file corresponding to the first web page is a file including virtual DOM nodes corresponding to each page element in the first web page constructed before the first web page is loaded.
S104, updating the first virtual DOM file of the first webpage according to the difference element information to construct a second virtual DOM file corresponding to the second webpage.
The second virtual DOM file comprises virtual DOM nodes corresponding to all page elements in the second webpage. Similar to the previous first virtual DOM file, the second virtual DOM file includes virtual DOM nodes for each page element in the second web page, where the virtual DOM node of each web page element is obtained by mapping the web page element into a JS object.
It will be appreciated that the complete reconstruction of a virtual DOM file corresponding to a web page is relatively complex and time consuming. Since different webpages of the same website generally have some elements of the same type, for example, different webpages may have the same text element, etc., when a virtual DOM file corresponding to one webpage in the website is already present, the adjustment can be performed on the basis of the virtual DOM file corresponding to the webpage to construct a DOM file corresponding to another webpage, thereby reducing the time consumption required for constructing the DOM file and reducing the complexity.
Based on the method, the difference elements with the difference in the first webpage and the second webpage are compared, and then based on the difference element information, the first virtual DOM file of the first webpage is subjected to update operations such as deletion, addition or attribute modification of the virtual DOM nodes, so that the updated first virtual DOM file contains and only contains the virtual DOM nodes corresponding to the webpage elements in the second webpage.
Optionally, in a case where the difference element information includes any one or more of the aforementioned first page element, second page element, and third page element, updating the first virtual DOM file may include the following several possible cases:
if the difference element information comprises the first page element, deleting a virtual DOM node corresponding to the first page element in the first virtual DOM file;
if the difference element information comprises the second webpage element, creating a virtual DOM node corresponding to the second webpage element in the first virtual DOM file;
and if the difference element information comprises the third webpage element, adjusting the attribute value of the virtual DOM node corresponding to the third webpage element in the first virtual DOM file to the attribute value corresponding to the third webpage element in the second webpage to obtain the virtual DOM file corresponding to the second webpage.
It will be appreciated that the above corresponding operations need to be performed separately for each of the first page element, the second page element, and the third page element.
S105, mapping the second virtual DOM file into a real DOM file of the second webpage.
It can be appreciated that, because the browser needs to load and present the web page based on the real DOM tree, and the virtual DOM nodes included in the second virtual DOM file are each a JS object, each JS object in the second virtual DOM file needs to be converted into a real DOM node, so as to realize conversion of the second virtual DOM file into a real DOM file.
The JS object representing the virtual DOM node is converted into the real DOM node, so that a node tag in the virtual DOM node can be obtained, the node tag is used for representing the real DOM node corresponding to the DOM node, and then the mapping relation between the virtual DOM node and the real DOM node is converted into the real DOM node corresponding to the node tag.
S106, loading and displaying the second webpage based on the real DOM file of the second webpage.
The real DOM file can be regarded as a DOM tree, and the process of loading the web page based on the DOM tree can adopt any existing mode, which is not limited by the application.
The inventors of the present application have found that: in the existing page display process, a browser directly loads a webpage according to the real DOM tree of the webpage, and frequent creation and modification of DOM elements are most time-consuming in the process. This is because: according to the webpage elements contained in the webpage, a DOM node corresponding to one element is created in the DOM tree every time, the browser loads the webpage once according to the DOM tree which is built currently, however, because the number of the webpage elements contained in the webpage is large, the browser needs to load the webpage based on the DOM tree frequently for many times before completely showing the webpage, so that the whole webpage loading process is long in time consumption and low in efficiency.
After the second webpage to be switched is determined, the virtual DOM file of the second webpage is constructed in the memory, and after the virtual DOM file corresponding to the second webpage is obtained, the virtual DOM file corresponding to the second webpage is converted into the real DOM file, so that the browser can complete loading of the second webpage only by carrying out one-time page loading based on the finally converted real DOM file, complexity and time consumption caused by loading pages for many times are avoided, and the page display speed is improved.
Optionally, in order to enable the second web page to be switched to other web pages in a later time, the second web page can be switched to the other web pages more quickly, and after the second web page is loaded and displayed based on the real DOM file of the second web page, the second virtual DOM file can be cached in the memory.
For easy understanding, as shown in fig. 2, a flowchart of another embodiment of a page presentation method of the present application is shown, where the method of this embodiment may include:
s201, when the page switching operation is detected on the displayed first page, determining a user inputting the page switching operation.
S202, determining a second page matched with the user permission of the user and the page switching operation, and acquiring a source code of the second page.
S203, determining difference element information in the second page and the first page based on the source code of the first page and the source code of the second page.
Wherein the difference element information includes any one or more of the following:
a first web page element that is present in the first page and that is not present in the second page;
a second web page element that is present in the second web page and that is not present in the first web page;
a third webpage element of the same type but different attribute values in the second webpage and the first webpage;
s204, obtaining a cached DOM file of a first virtual document object model of the first webpage.
The first virtual DOM file comprises virtual DOM nodes corresponding to all page elements in the first webpage.
S205, if the difference element information comprises the first page element, deleting the virtual DOM node corresponding to the first page element in the first virtual DOM file.
This step S205 needs to be performed for each first page element.
The above steps S201-205 may be referred to the related description of the previous embodiments, and will not be repeated here.
S206, if the difference element information comprises a second webpage element, calling a component corresponding to the second webpage element from the component library, and adding the called component into the first virtual DOM file as a virtual DOM node corresponding to the second webpage element.
The component library comprises a plurality of components, and each component is a virtual DOM node constructed based on JS objects.
After the second webpage element is determined, the component corresponding to the second webpage element can be directly called from the component library, and the component is the virtual DOM node based on JS object simulation corresponding to the second webpage element, so that the virtual DOM node is not required to be simulated based on JS objects in real time, and convenience in creating the virtual DOM node corresponding to the second webpage element is improved.
S207, if the difference element information includes the third webpage element, adjusting the attribute value of the virtual DOM node corresponding to the third webpage element in the first virtual DOM file to the attribute value corresponding to the third webpage element in the second webpage, so as to obtain the virtual DOM file corresponding to the second webpage.
S208, mapping the second virtual DOM file into a real DOM file of the second webpage.
S209, loading and displaying the second webpage based on the real DOM file of the second webpage.
S210, caching the second virtual DOM file in the memory.
The application also provides a page display device corresponding to the page display method.
Referring to fig. 3, which is a schematic diagram illustrating a composition structure of an embodiment of a page display device according to the present application, the page display device according to the present embodiment may be applied to a browser, and the device may include:
a source code obtaining unit 301, configured to obtain a source code of a second page to be switched to when a page switching operation is detected on a displayed first page;
an element comparison unit 302, configured to determine difference element information between the second page and the first page based on the source code of the first page and the source code of the second page, where the difference element information is information of an element having a difference in the first page and the second page;
a file obtaining unit 303, configured to obtain a cached first virtual document object model DOM file of the first web page, where the first virtual DOM file includes virtual DOM nodes corresponding to page elements in the first web page;
the file adjustment unit 304 is configured to update a first virtual DOM file of the first web page according to the difference element information, so as to construct a second virtual DOM file corresponding to the second web page, where the second virtual DOM file includes virtual DOM nodes corresponding to page elements in the second web page;
a file conversion unit 305, configured to map the second virtual DOM file into a real DOM file of the second web page;
and the page showing unit 306 is used for loading and showing the second webpage based on the real DOM file of the second webpage.
In one possible implementation manner, the difference element information determined by the element comparison unit includes any one or more of the following:
a first web page element that is present in the first page and that is not present in the second page;
a second web page element that is present in the second web page and that is not present in the first web page;
a third webpage element of the same type but different attribute values in the second webpage and the first webpage;
the file adjustment unit includes:
a node deleting unit, configured to delete, if the difference element information includes the first page element, a virtual DOM node corresponding to the first page element in the first virtual DOM file;
a node creation unit, configured to create a virtual DOM node corresponding to the second web page element in the first virtual DOM file if the difference element information includes the second web page element;
and the attribute changing unit is used for adjusting the attribute value of the virtual DOM node corresponding to the third webpage element in the first virtual DOM file to the attribute value corresponding to the third webpage element in the second webpage if the difference element information comprises the third webpage element, so as to obtain the virtual DOM file corresponding to the second webpage.
Optionally, the node creating unit includes:
and the node creation subunit is used for calling a component corresponding to the second webpage element from the component library and adding the called component into the first virtual DOM file as a virtual DOM node corresponding to the second webpage element if the difference element information comprises the second webpage element.
In yet another possible implementation manner, the source code obtaining unit includes:
the permission determination subunit is used for determining a user who inputs the page switching operation when the page switching operation is detected on the displayed first page;
a code acquisition subunit, configured to determine a second page that matches the user permission of the user and the page switching operation, and acquire a source code of the second page
Optionally, the apparatus of this embodiment may further include:
and the file caching unit is used for caching the second virtual DOM file in the memory after the page showing unit loads and shows the second webpage based on the real DOM file of the second webpage.
It should be noted that, in the present specification, each embodiment is described in a progressive manner, and each embodiment is mainly described as different from other embodiments, and identical and similar parts between the embodiments are all enough to be referred to each other. For the apparatus class embodiments, the description is relatively simple as it is substantially similar to the method embodiments, and reference is made to the description of the method embodiments for relevant points.
The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the application. Thus, the present application is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
The foregoing is merely a preferred embodiment of the present application and it should be noted that modifications and adaptations to those skilled in the art may be made without departing from the principles of the present application, which are intended to be comprehended within the scope of the present application.
Claims (8)
1. The page display method is characterized by comprising the following steps of:
when the page switching operation is detected on the displayed first page, acquiring a source code of a second page to be switched to;
determining difference element information of a second page and the first page based on source codes of the first page and the second page, wherein the difference element information is information of elements with differences in the first page and the second page;
obtaining a cached first virtual Document Object Model (DOM) file of the first page, wherein the first virtual DOM file comprises virtual DOM nodes corresponding to page elements in the first page;
updating a first virtual DOM file of the first page according to the difference element information to construct a second virtual DOM file corresponding to the second page, wherein the second virtual DOM file comprises virtual DOM nodes corresponding to all page elements in the second page;
mapping the second virtual DOM file into a real DOM file of the second page;
loading and displaying the second page based on the real DOM file of the second page;
the difference element information comprises any one or more of the following:
a first page element that is present in the first page and that is not present in the second page;
a second page element that is present in the second page and that is not present in the first page;
a third page element of the same type but different attribute values in the second page and the first page;
the step of updating the first virtual DOM file of the first page according to the difference element information to construct a second virtual DOM file corresponding to the second page comprises the following steps:
deleting a virtual DOM node corresponding to the first page element in the first virtual DOM file if the difference element information comprises the first page element;
if the difference element information comprises the second page element, creating a virtual DOM node corresponding to the second page element in the first virtual DOM file;
and if the difference element information comprises the third page element, adjusting the attribute value of the virtual DOM node corresponding to the third page element in the first virtual DOM file to the attribute value corresponding to the third page element in the second page to obtain the virtual DOM file corresponding to the second page.
2. The page presentation method as claimed in claim 1, wherein if the difference element information includes the second page element, creating a virtual DOM node corresponding to the second page element in the first virtual DOM file, comprises:
and if the difference element information comprises the second page element, calling a component corresponding to the second page element from a component library, and adding the called component into the first virtual DOM file as a virtual DOM node corresponding to the second page element.
3. The method for displaying a page according to claim 1, wherein when a page switching operation is detected on a first displayed page, acquiring source code of a second page to be switched to includes:
when a page switching operation is detected on a displayed first page, determining a user inputting the page switching operation;
and determining a second page matched with the user permission of the user and the page switching operation, and acquiring a source code of the second page.
4. The page presentation method as claimed in claim 1, further comprising, after the loading and presenting of the second page based on the true DOM file of the second page:
and caching the second virtual DOM file in the memory.
5. A page presentation apparatus, comprising:
the source code acquisition unit is used for acquiring source codes of a second page to be switched to when the page switching operation is detected on the displayed first page;
an element comparison unit, configured to determine difference element information between the second page and the first page based on a source code of the first page and a source code of the second page, where the difference element information is information of an element having a difference in the first page and the second page;
the file acquisition unit is used for acquiring a cached first virtual Document Object Model (DOM) file of the first page, wherein the first virtual DOM file comprises virtual DOM nodes corresponding to page elements in the first page;
the file adjusting unit is used for updating the first virtual DOM file of the first page according to the difference element information so as to construct a second virtual DOM file corresponding to the second page, wherein the second virtual DOM file comprises virtual DOM nodes corresponding to all page elements in the second page;
the file conversion unit is used for mapping the second virtual DOM file into a real DOM file of the second page;
the page display unit is used for loading and displaying the second page based on the real DOM file of the second page;
the difference element information determined by the element comparison unit comprises any one or more of the following:
a first page element that is present in the first page and that is not present in the second page;
a second page element that is present in the second page and that is not present in the first page;
a third page element of the same type but different attribute values in the second page and the first page;
the file adjustment unit includes:
a node deleting unit, configured to delete, if the difference element information includes the first page element, a virtual DOM node corresponding to the first page element in the first virtual DOM file;
a node creation unit configured to create a virtual DOM node corresponding to the second page element in the first virtual DOM file if the difference element information includes the second page element;
and the attribute changing unit is used for adjusting the attribute value of the virtual DOM node corresponding to the third page element in the first virtual DOM file to the attribute value corresponding to the third page element in the second page if the difference element information comprises the third page element, so as to obtain the virtual DOM file corresponding to the second page.
6. The page presentation apparatus according to claim 5, wherein the node creation unit includes:
and the node creation subunit is used for calling a component corresponding to the second page element from the component library and adding the called component into the first virtual DOM file as a virtual DOM node corresponding to the second page element if the difference element information comprises the second page element.
7. The page presentation apparatus according to claim 5, wherein the source code acquisition unit includes:
the permission determination subunit is used for determining a user who inputs the page switching operation when the page switching operation is detected on the displayed first page;
and the code acquisition subunit is used for determining a second page matched with the user permission of the user and the page switching operation and acquiring the source code of the second page.
8. The page presentation device of claim 5, further comprising:
and the file caching unit is used for caching the second virtual DOM file in the memory after the page showing unit loads and shows the second page based on the real DOM file of the second page.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910599173.2A CN110309461B (en) | 2019-07-04 | 2019-07-04 | Page display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910599173.2A CN110309461B (en) | 2019-07-04 | 2019-07-04 | Page display method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110309461A CN110309461A (en) | 2019-10-08 |
| CN110309461B true CN110309461B (en) | 2023-10-27 |
Family
ID=68078880
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910599173.2A Active CN110309461B (en) | 2019-07-04 | 2019-07-04 | Page display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110309461B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110795444B (en) * | 2019-10-25 | 2022-12-02 | 北京小米移动软件有限公司 | DOM data updating method, page updating method and device |
| CN111078519A (en) * | 2019-12-13 | 2020-04-28 | 杭州安恒信息技术股份有限公司 | Method and device for backtracking abnormal monitoring behaviors and electronic equipment |
| CN111125597B (en) * | 2019-12-18 | 2023-10-27 | 百度在线网络技术（北京）有限公司 | Webpage loading method, browser, electronic equipment and storage medium |
| CN111064979B (en) * | 2019-12-30 | 2023-02-28 | 广州市百果园网络科技有限公司 | Webpage live broadcasting method and device, webpage terminal and storage medium |
| CN111930379B (en) * | 2020-08-11 | 2021-07-06 | 上海亿锎智能科技有限公司 | Method, device and system for realizing Web end complaint form designer |
| CN112417344B (en) * | 2021-01-25 | 2021-10-08 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103635897A (en) * | 2011-06-23 | 2014-03-12 | 微软公司 | Dynamically updating a running page |
| CN104035753A (en) * | 2013-03-04 | 2014-09-10 | 优视科技有限公司 | Double-WebView customized page display method and system |
| WO2016078479A1 (en) * | 2014-11-17 | 2016-05-26 | 广州市动景计算机科技有限公司 | Method and device for monitoring web page changes |
| CN108572819A (en) * | 2017-12-21 | 2018-09-25 | 北京金山云网络技术有限公司 | Method for updating pages, device, terminal and computer readable storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130227397A1 (en) * | 2012-02-24 | 2013-08-29 | Microsoft Corporation | Forming an instrumented text source document for generating a live web page |
-
2019
- 2019-07-04 CN CN201910599173.2A patent/CN110309461B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103635897A (en) * | 2011-06-23 | 2014-03-12 | 微软公司 | Dynamically updating a running page |
| CN104035753A (en) * | 2013-03-04 | 2014-09-10 | 优视科技有限公司 | Double-WebView customized page display method and system |
| WO2016078479A1 (en) * | 2014-11-17 | 2016-05-26 | 广州市动景计算机科技有限公司 | Method and device for monitoring web page changes |
| CN108572819A (en) * | 2017-12-21 | 2018-09-25 | 北京金山云网络技术有限公司 | Method for updating pages, device, terminal and computer readable storage medium |
Non-Patent Citations (2)
| Title |
|---|
| SaaS模式的离线应用研究与实现;周文琼等;《计算机与数字工程》;20131220(第12期);全文 * |
| 基于虚拟DOM的Web前端性能优化研究;戴志诚等;《计算机应用与软件》;20171215(第12期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110309461A (en) | 2019-10-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110309461B (en) | Page display method and device | |
| CN102693280B (en) | Webpage browsing method, WebApp framework, method and device for executing JavaScript, and mobile terminal | |
| CN108038134B (en) | Page display method and device, storage medium and electronic equipment | |
| CN105955888B (en) | Page debugging preview method and system | |
| CN110263275A (en) | A kind of method, apparatus, mobile terminal and storage medium accessing webpage | |
| CN106294658A (en) | The quick methods of exhibiting of webpage and device | |
| CN104077387A (en) | Webpage content display method and browser device | |
| US8645823B1 (en) | Converting static websites to resolution independent websites in a web development environment | |
| CN110221899B (en) | User interface adjusting method, device and system | |
| WO2022048141A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| CN110968314A (en) | Page generation method and device | |
| CN116955863A (en) | Dynamic tree structure rendering method and device based on virtual tree | |
| CN117093386B (en) | Page screenshot method, device, computer equipment and storage medium | |
| CN107688650B (en) | Web page generation method and device | |
| CN110955855A (en) | Information interception method, device and terminal | |
| CN113268232B (en) | Page skin generation method and device and computer readable storage medium | |
| CN111680247A (en) | Local calling method, device, equipment and storage medium of webpage character string | |
| CN114020187B (en) | Font icon display method and device and electronic equipment | |
| CN113076086B (en) | Metadata management system and method for modeling model object using the same | |
| CN114168875A (en) | Page program generation method and device, computer equipment and storage medium | |
| RU2634221C2 (en) | Method and device for drawing presentation of electronic document on screen | |
| CN114995806A (en) | Method and system for designing integrated high-expansibility page | |
| CN114329152A (en) | Application program generation method, device, equipment and medium based on browser engine | |
| US20100174986A1 (en) | Apparatus and method for moving to previous website in web browser | |
| CN112835577A (en) | Data processing method, data processing device, computer equipment and readable 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 |