CN110309461A - Webpage representation method and apparatus - Google Patents
Webpage representation method and apparatus Download PDFInfo
- Publication number
- CN110309461A CN110309461A CN201910599173.2A CN201910599173A CN110309461A CN 110309461 A CN110309461 A CN 110309461A CN 201910599173 A CN201910599173 A CN 201910599173A CN 110309461 A CN110309461 A CN 110309461A
- Authority
- CN
- China
- Prior art keywords
- page
- webpage
- file
- virtual
- web page
- 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
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
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 Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Information Transfer Between Computers (AREA)
Abstract
This application discloses a kind of webpage representation method and apparatus, this method comprises: obtaining the source code of the second page to be cut changed to when detecting page switching operation in the first page shown；Source code based on the first page and second page determines the difference element information of second page and first page；Obtain the first virtual document object model DOM file of first webpage of caching；According to the difference element information, the first virtual DOM file of the first webpage is updated, to construct the corresponding second virtual DOM file of second webpage；It is the true DOM file of second webpage by the second virtual DOM File Mapping；True DOM file based on second webpage loads and shows second webpage.Page loading velocity can be improved in the scheme of the application, reduces the excessively slow situation of webpage representation speed.
Description
Technical field
This application involves web application technical field more particularly to a kind of webpage representation method and apparatus.
Background technique
All include generally multiple pages in website, in order to realize different demands, is often related to cutting for webpage
It changes.
Due between the different pages can difference, when browser needs to switch the page every time, require to obtain from website
Then the corresponding page data of the page to be showed loads and shows the page.However, browser get page data it
Afterwards, the process of loading page takes a long time, and causes webpage representation speed excessively slow.
Summary of the invention
In view of this, to improve page loading velocity, reducing page this application provides a kind of webpage representation method and apparatus
Face shows the excessively slow situation of speed.
To achieve the above object, on the one hand, this application provides a kind of webpage representation methods, comprising:
When detecting page switching operation in the first page shown, the source generation of the second page to be cut changed to is obtained
Code；
The source code of source code and second page based on the first page determines the second page and described the
The difference element information of one page, the difference element information are the member having differences in the first page and second page
The information of element；
Obtain the first virtual document object model DOM file of first webpage of caching, the first virtual DOM text
Part includes the corresponding virtual DOM node of each page elements in first webpage；
According to the difference element information, the first virtual DOM file of first webpage is updated, to construct described the
The corresponding second virtual DOM file of two webpages, the second virtual DOM file includes each page elements in second webpage
Corresponding virtual DOM node；
It is the true DOM file of second webpage by the described second virtual DOM File Mapping；
True DOM file based on second webpage loads and shows second webpage.
Preferably, the difference element information includes any of the following or a variety of:
The first web page element for having in first page and not having in second page；
The second web page element for having in second webpage and not having in first page；
The second webpage third web page element different from same type in the first webpage but attribute value；
It is described according to the difference element information, the first virtual DOM file of first webpage is updated, to construct
State the corresponding second virtual DOM file of the second webpage, comprising:
If the difference element information includes the first page element, by the described first virtual DOM file with institute
The corresponding virtual DOM node of the first web page element is stated to delete；
If the difference element information includes second web page element, created in the described first virtual DOM file
Virtual DOM node corresponding with second web page element；
It, will be described in the described first virtual DOM file if the difference element information includes the third web page element
It is corresponding that the attribute value of the corresponding virtual DOM node of third web page element is adjusted to third web page element described in second webpage
Attribute value, obtain the corresponding virtual DOM file of second webpage.
Preferably, if the difference element information includes second web page element, in the described first virtual DOM
Virtual DOM node corresponding with second web page element is created in file, comprising:
If the difference element information includes second web page element, called and second webpage from Component Gallery
The corresponding component of element, and be added to using the component of calling as the corresponding virtual DOM node of second web page element described
In first virtual DOM file.
Preferably, described when detecting page switching operation in the first page shown, obtain the changed to be cut
The source code of two pages, comprising:
When detecting page switching operation in the first page shown, the use for inputting the page switching operation is determined
Family；
It is determining to operate matched second page with the user right of the user and the page switching, and described in acquisition
The source code of second page.
Preferably, after the true DOM file based on second webpage loads and shows second webpage,
Further include:
The described second virtual DOM file is cached in memory.
Another aspect, present invention also provides a kind of webpage representation devices, comprising:
Source code acquiring unit obtains to be cut when for detecting page switching operation in the first page shown
The source code for the second page changed to；
Element comparing unit determines institute for the source code of source code and second page based on the first page
The difference element information of second page Yu the first page is stated, the difference element information is the first page and second
The information for the element being had differences in the page；
File obtaining unit, the first virtual document object model DOM file of first webpage for obtaining caching,
The first virtual DOM file includes the corresponding virtual DOM node of each page elements in first webpage；
File adjustment unit, for updating the first virtual DOM text of first webpage according to the difference element information
Part, to construct the corresponding second virtual DOM file of second webpage, the second virtual DOM file includes described second
The corresponding virtual DOM node of each page elements in webpage；
File conversion unit, for the true DOM text by the described second virtual DOM File Mapping for second webpage
Part；
Webpage representation unit loads for the true DOM file based on second webpage and shows second webpage.
Preferably, the difference element information that the element comparing unit is determined includes any of the following or more
Kind:
The first web page element for having in first page and not having in second page；
The second web page element for having in second webpage and not having in first page；
The second webpage third web page element different from same type in the first webpage but attribute value；
The file adjustment unit, comprising:
Knot removal unit, if including the first page element for the difference element information, by described first
Virtual DOM node corresponding with first web page element is deleted in virtual DOM file；
Node creating unit, if including second web page element for the difference element information, described first
Creation virtual DOM node corresponding with second web page element in virtual DOM file；
Attribute changes unit, if including the third web page element for the difference element information, by described first
The attribute value of the corresponding virtual DOM node of third web page element described in virtual DOM file is adjusted to institute in second webpage
The corresponding attribute value of third web page element is stated, the corresponding virtual DOM file of second webpage is obtained.
Preferably, the node creating unit, comprising:
Node creation unit, if including second web page element for the difference element information, from Component Gallery
It is middle to call component corresponding with second web page element, and using the component of calling as the corresponding void of second web page element
Quasi- DOM node is added in the described first virtual DOM file.
Preferably, the source code acquiring unit, comprising:
Permission determines subelement, when for detecting page switching operation in the first page shown, determines input
The user of the page switching operation；
Code obtaining subelement, for determining matched with the user right of the user and page switching operation
Second page, and obtain the source code of the second page.
Preferably, further includes:
File cache unit, for being loaded in the webpage representation unit based on the true DOM file of second webpage
And after showing second webpage, the described second virtual DOM file is cached in memory.
It can be seen via above technical scheme that when needing first page being switched to second page, it can be according to first
Element difference in the page and second page, and the virtual DOM file of the first page cached, construct second page
The virtual DOM file in face, in this way, being directly based upon after the virtual DOM file of second page is converted to true DOM file
The true DOM file of second webpage, which carries out page load, can complete the load of the second page and show, without
A page load is carried out respectively for element each in second page, effectively reduces page switching in the process due to adding every time
The number of repetition loading page needed for carrying element, so as to avoid time-consuming caused by repeated data in the repeated loading page,
Be conducive to improve webpage representation speed.
Detailed description of the invention
In order to illustrate the technical solutions in the embodiments of the present application or in the prior art more clearly, to embodiment or will show below
There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this
The embodiment of application for those of ordinary skill in the art without creative efforts, can also basis
The attached drawing of offer obtains other attached drawings.
Fig. 1 shows a kind of a kind of flow diagram of webpage representation method of the application；
Fig. 2 shows a kind of another flow diagrams of webpage representation method of the application；
Fig. 3 shows a kind of a kind of composed structure schematic diagram of webpage representation device of the application.
Specific embodiment
The scheme of the embodiment of the present application is completed the load of the page for viewing on device and is showed, and is added with improving the completion page
The efficiency of load improves webpage representation speed.
The scheme of the application is introduced with reference to the accompanying drawing.
As shown in Figure 1, it illustrates a kind of flow diagram of webpage representation method one embodiment of the application, this implementation
The method of example can be applied to browser (also referred to as browser client), and the method for the present embodiment may include:
S101 obtains the second page to be cut changed to when detecting page switching operation in the first page shown
Source code.
Wherein, for the ease of distinguishing, the page that browser has been shown is known as first page, and by the page to be cut changed to
Face is known as second page.Wherein, the first page and second page are the page for belonging to the same website.
Wherein, first page is switched to the operation of other pages for triggering by page switching operation.Such as, is being shown
After one page, user can be by clicking picture, chained address etc. in the first page, with trigger request second page.
Optionally, it is contemplated that in website for different user may the desired web page contents presented can difference, because
This, can also be arranged the permission of different user in the embodiment of the present application.The page that the user of different rights can access can be
Difference, and the content of the same page that can access of the user of different rights also can difference.Correspondingly, detecting the page
When handover operation, the user for inputting page switching operation can also be determined.Then, the user right based on the user and should
Page switching operation, the determining and matched second page of the user right, and obtain the source code of second page.
Such as, by taking shopping website as an example, the same webpage that the administrative staff and ordinary user of website can see also is had
Institute's difference, therefore, after detecting page switching operation, the information of user can be sent to the service of website by browser
Device, and after confirming by server the permission of user, it is determining with the matched second page of the user right.
S102, the source code of source code and second page based on the first page, determine the second page and this
Difference element information in one page.
It is understood that containing the information for constituting all elements of the page in the source code of the page.Wherein, herein
The object that the element being previously mentioned is referred to as the page refers to the page elements of Webpage, e.g., picture, file in webpage,
Space etc. belongs to the element in the page.
Wherein, which is the information for the element having differences in the first page and second page.It should
Difference element information can be by the source code of comparison first page and second page, to analyze institute between the two pages
The marks of the different elements and element having, attribute of an element value etc. information.
Optionally, the difference element information may include it is following any one or it is a variety of:
The first web page element for having in first page and not having in second page；
The second web page element for having in second webpage and not having in first page；
The second webpage third web page element different from same type in the first webpage but attribute value.
Wherein, the first web page element refers to the element for only including, and not including in second page in first page.
Such as, it is assumed that there is picture in first page, and do not have this element of picture in second webpage, then the picture just belongs to the first net
Page element.
Second web page element refers to the element for including in the second webpage, but but without corresponding member in first page
Element.
And third web page element refers in second page and first page all there is a kind of same type of element, still
The attribute of an element value is different from the attribute of an element value in first page in second page.For example, having text in the second webpage
This this element, and the also element of the text with same type in first page, but the second webpage and first webpage
The content of the middle text is different, then the text belongs to third web page element.
It should be noted that for the ease of distinguishing, different types of difference element in second page and first page, respectively
The web page element of different difference types is referred to as the first web page element, the second web page element and third web page element.And
For opposite first webpage, it is contemplated that it is possible that there are many second webpages being switched to, therefore, first webpage and the second webpage
Between the element having differences would also vary from, may e.g., in the first webpage have there is no only the first webpage and second
The first web page element that webpage does not have, therefore, in the embodiment of the present application, for the first web page element, the second web page element with
And any one type in third web page element web page element it is possible that there is no this type web page element,
The case where there are the web page elements of one or more this type.
S103, obtain first webpage of caching the first virtual document object model (Document ObjectModel,
DOM) file.
Wherein, which includes the corresponding virtual DOM node of each page elements in first webpage.
Wherein, the virtual DOM node for including in virtual DOM file also becomes virtual DOM element, refers to using JavaScript (referred to as
For JS, a kind of literal translation formula scripting language) DOM node (also becoming DOM element) of simulating out.Wherein, it is based on JS object mould
Quasi- DOM node is actually that web page element is mapped on JS object, and the application implements it without restriction.With it is true
DOM file is corresponding, and a virtual DOM file can regard the dom tree fictionalized as.
Wherein, for the ease of distinguishing, the corresponding virtual DOM file of the first webpage is known as first virtually by the embodiment of the present application
DOM file, and the virtual DOM file for the second webpage that subsequent builds go out is known as the second virtual DOM file.
In the embodiment of the present application, it is the virtual DOM file for first constructing webpage that browser, which loads webpage, then again will be virtual
DOM file is converted to true DOM file, and is completed the load of webpage based on true DOM file and showed, it follows that having opened up
The each webpage revealed can be corresponding with the virtual DOM file of the webpage.Therefore, corresponding first DOM of first webpage is virtual
File is before loading first webpage, and that constructs saves comprising the corresponding virtual DOM of page elements each in first webpage
The file of point.
S104 updates the first virtual DOM file of first webpage according to the difference element information, with construct this
The corresponding second virtual DOM file of two webpages.
Wherein, which includes the corresponding virtual DOM node of each page elements in second webpage.
It is similar with the virtual DOM file in front first, the void to each page elements in the second webpage is included in the second virtual DOM file
The web page element is mapped as JS object and obtained by quasi- DOM node, the virtual DOM node of each web page element.
It is understood that the complexity for rebuilding the corresponding virtual DOM file of a webpage completely is more costly and time consuming
It also can be relatively long.And due to general all with the element of some same types between the different web pages of the same website, e.g., no
May can all have with a text element etc. with webpage kind, therefore, the corresponding virtual DOM text of a webpage in having had website
In the case where part, it can be adjusted on the basis of the webpage corresponding virtual DOM file, to construct another webpage pair
The DOM file answered, thus time-consuming needed for realizing reduction building DOM file, and reduce complexity.
Based on this, then the application is based on by comparing the difference element having differences in the first webpage and the second webpage
Difference element information carries out the deletion, increase or attribute of virtual DOM node to the first virtual DOM file of first webpage
The updates such as modification operation, so that updated first virtual DOM file includes and only comprising webpage member each in the second webpage
The corresponding virtual DOM node of element.
It optionally, include above-mentioned first page element, the second web page element and third in difference element information
In web page element any one or it is a variety of in the case where, update the first virtual DOM file may include it is following several can
Energy situation:
If the difference element information includes the first page element, by the first virtual DOM file with first net
The corresponding virtual DOM node of page element is deleted；
If the difference element information includes second web page element, in the first virtual DOM file creation with this
The corresponding virtual DOM node of two web page elements；
If the difference element information includes the third web page element, by the third webpage in the first virtual DOM file
The attribute value of the corresponding virtual DOM node of element is adjusted to the corresponding attribute value of third web page element in second webpage, obtains
To the corresponding virtual DOM file of second webpage.
It is understood that being both needed to for each first page element, the second web page element and third web page element
The above corresponding operation is executed respectively.
The second virtual DOM File Mapping is the true DOM file of second webpage by S105.
It is understood that since browser needs to load and show based on true dom tree webpage, and second is virtual
The virtual DOM node for including in DOM file, each virtual DOM node is a JS object, and therefore, it is necessary to virtual by second
Each JS object is converted to true DOM node in DOM file, and the second virtual DOM file is converted to true DOM text to realize
Part.
Wherein, the JS object for characterizing virtual DOM node is converted in the available virtual DOM node of true DOM node
Node label, the node label is for characterizing the corresponding true DOM node of the DOM node, then, virtual DOM node and true
The mapping relations of real DOM node convert out the corresponding true DOM node of the node label.
S106, the true DOM file based on second webpage load and show second webpage.
Wherein, true DOM file can regard a dom tree as, and the process based on dom tree load webpage can be using existing
Some any ways, the application are without restriction to this.
Present inventor it has been investigated that: during existing webpage representation, browser is directly according to webpage
True dom tree loads webpage, and the frequent creation and modification of DOM element are most time-consuming in this process.This is because: according to net
The web page element for including in page, creates the corresponding DOM node of an element into dom tree every time, and browser will be according to working as
The preceding dom tree constructed loads a webpage, however, since the quantity for the web page element for including in webpage is more, in this way, browsing
Device needs repeatedly frequently to carry out page load based on dom tree, to cause so that full page adds before showing webpage completely
Load process takes a long time, and efficiency is lower.
And the application can first construct the void of second webpage after determining the second to be switched webpage in memory
Quasi- DOM file, and obtaining the corresponding virtual DOM file of the second webpage and then by the corresponding virtual DOM text of second webpage
Part is converted to true DOM file, in this way, browser only needs to carry out primary page based on the true DOM file being finally converted to
Face loads the load that can complete second webpage, so as to avoid complexity caused by the repeated loading page and consumption
When, be conducive to improve webpage representation speed.
Optionally, in order to it is subsequent need the second webpage being switched to other webpages when, also more can quickly be switched to
Other webpages can also delay in memory after the true DOM file based on the second webpage loads and shows the second webpage
Deposit the second virtual DOM file.
In order to make it easy to understand, such as Fig. 2, it illustrates a kind of processes of webpage representation method of the application another embodiment to show
It is intended to, the method for the present embodiment may include:
S201 determines input page handover operation when detecting page switching operation in the first page shown
User.
S202, it is determining to operate matched second page with the user right of the user and the page switching, and obtaining should
The source code of second page.
S203, the source code of source code and second page based on the first page, determine the second page and this
Difference element information in one page.
Wherein, difference element information includes any of the following or a variety of:
The first web page element for having in first page and not having in second page；
The second web page element for having in second webpage and not having in first page；
The second webpage third web page element different from same type in the first webpage but attribute value；
S204 obtains the first virtual document object model DOM file of first webpage of caching.
Wherein, which includes the corresponding virtual DOM node of each page elements in first webpage.
S205, if the difference element information includes the first page element, by the first virtual DOM file with this
The corresponding virtual DOM node of one web page element is deleted.
It is required to execute step S205 for each first page element.
Above step S201-205 may refer to the related introduction of preceding embodiment, and details are not described herein.
S206 is called and the second web page element pair from Component Gallery if difference element information includes the second web page element
The component answered, and it is added to the first virtual DOM for the component of calling as the corresponding virtual DOM node of second web page element
In file.
It wherein, include multiple components in the Component Gallery, each component is all based on the virtual DOM section that JS object constructs
Point.
After determining the second web page element, it can be called directly from Component Gallery corresponding with second web page element
Component, which is exactly the corresponding virtual DOM node based on JS simulating of second web page element, without real-time
Based on the virtual DOM node of JS simulating, is conducive to raising and creates the convenient of the corresponding virtual DOM node of second web page element
Property.
S207, if the difference element information includes the third web page element, by the third in the first virtual DOM file
The attribute value of the corresponding virtual DOM node of web page element is adjusted to the corresponding attribute of third web page element in second webpage
Value, obtains the corresponding virtual DOM file of second webpage.
The second virtual DOM File Mapping is the true DOM file of second webpage by S208.
S209, the true DOM file based on second webpage load and show second webpage.
S210 caches the second virtual DOM file in memory.
A kind of webpage representation method of corresponding the application, present invention also provides a kind of webpage representation devices.
Such as Fig. 3, it illustrates a kind of composed structure schematic diagram of webpage representation device one embodiment of the application, this implementations
The webpage representation device of example can be applied to browser, the apparatus may include:
Source code acquiring unit 301, for detected in the first page shown page switching operation when, obtain to
The source code for the second page being switched to；
Element comparing unit 302 is determined for the source code of source code and second page based on the first page
The difference element information of the second page and the first page, the difference element information are the first page and the
The information for the element being had differences in two pages；
File obtaining unit 303, the first virtual document object model DOM text of first webpage for obtaining caching
Part, the first virtual DOM file include the corresponding virtual DOM node of each page elements in first webpage；
File adjustment unit 304, for according to the difference element information, update first webpage first to be virtual
DOM file, to construct the corresponding second virtual DOM file of second webpage, the second virtual DOM file includes described
The corresponding virtual DOM node of each page elements in second webpage；
File conversion unit 305, for being the true DOM of second webpage by the described second virtual DOM File Mapping
File；
Webpage representation unit 306 loads for the true DOM file based on second webpage and shows second net
Page.
In one possible implementation, the difference element information that the element comparing unit is determined include with
It is lower any one or it is a variety of:
The first web page element for having in first page and not having in second page；
The second web page element for having in second webpage and not having in first page；
The second webpage third web page element different from same type in the first webpage but attribute value；
The file adjustment unit, comprising:
Knot removal unit, if including the first page element for the difference element information, by described first
Virtual DOM node corresponding with first web page element is deleted in virtual DOM file；
Node creating unit, if including second web page element for the difference element information, described first
Creation virtual DOM node corresponding with second web page element in virtual DOM file；
Attribute changes unit, if including the third web page element for the difference element information, by described first
The attribute value of the corresponding virtual DOM node of third web page element described in virtual DOM file is adjusted to institute in second webpage
The corresponding attribute value of third web page element is stated, the corresponding virtual DOM file of second webpage is obtained.
Optionally, the node creating unit, comprising:
Node creation unit, if including second web page element for the difference element information, from Component Gallery
It is middle to call component corresponding with second web page element, and using the component of calling as the corresponding void of second web page element
Quasi- DOM node is added in the first virtual DOM file.
In another possible implementation, the source code acquiring unit, comprising:
Permission determines subelement, when for detecting page switching operation in the first page shown, determines input
The user of the page switching operation；
Code obtaining subelement, for determining matched with the user right of the user and page switching operation
Second page, and obtain the source code of the second page
Optionally, the device of the present embodiment can also include:
File cache unit, for being loaded in the webpage representation unit based on the true DOM file of second webpage
And after showing second webpage, the described second virtual DOM file is cached in memory.
It should be noted that all the embodiments in this specification are described in a progressive manner, each embodiment weight
Point explanation is the difference from other embodiments, and the same or similar parts between the embodiments can be referred to each other.
For device class embodiment, since it is basically similar to the method embodiment, so being described relatively simple, related place ginseng
See the part explanation of embodiment of the method.
The foregoing description of the disclosed embodiments can be realized those skilled in the art or using the present invention.To this
A variety of modifications of a little embodiments will be apparent for a person skilled in the art, and the general principles defined herein can
Without departing from the spirit or scope of the present invention, to realize in other embodiments.Therefore, the present invention will not be limited
It is formed on the embodiments shown herein, and is to fit to consistent with the principles and novel features disclosed in this article widest
Range.
The above is only the preferred embodiment of the present invention, it is noted that those skilled in the art are come
It says, various improvements and modifications may be made without departing from the principle of the present invention, these improvements and modifications also should be regarded as
Protection scope of the present invention.
Claims (10)
1. a kind of webpage representation method characterized by comprising
When detecting page switching operation in the first page shown, the source code of the second page to be cut changed to is obtained；
The source code of source code and second page based on the first page, determines the second page and the first page
The difference element information in face, the difference element information are the element having differences in the first page and second page
Information；
Obtain the first virtual document object model DOM file of first webpage of caching, the first virtual DOM file packet
Include the corresponding virtual DOM node of each page elements in first webpage；
According to the difference element information, the first virtual DOM file of first webpage is updated, to construct second net
The corresponding second virtual DOM file of page, the second virtual DOM file include each page elements correspondence in second webpage
Virtual DOM node；
It is the true DOM file of second webpage by the described second virtual DOM File Mapping；
True DOM file based on second webpage loads and shows second webpage.
2. webpage representation method according to claim 1, which is characterized in that the difference element information includes following any
It is one or more kinds of:
The first web page element for having in first page and not having in second page；
The second web page element for having in second webpage and not having in first page；
The second webpage third web page element different from same type in the first webpage but attribute value；
It is described to update the first virtual DOM file of first webpage according to the difference element information, to construct described the
The corresponding second virtual DOM file of two webpages, comprising:
If the difference element information includes the first page element, by the described first virtual DOM file with described
The corresponding virtual DOM node of one web page element is deleted；
If the difference element information includes second web page element, creation and institute in the described first virtual DOM file
State the corresponding virtual DOM node of the second web page element；
If the difference element information includes the third web page element, by third described in the described first virtual DOM file
The attribute value of the corresponding virtual DOM node of web page element is adjusted to the corresponding category of third web page element described in second webpage
Property value, obtains the corresponding virtual DOM file of second webpage.
3. webpage exhibiting method according to claim 2, which is characterized in that if the difference element information includes
Second web page element creates virtual DOM section corresponding with second web page element in the described first virtual DOM file
Point, comprising:
If the difference element information includes second web page element, called and second web page element from Component Gallery
Corresponding component, and it is added to described first for the component of calling as the corresponding virtual DOM node of second web page element
In virtual DOM file.
4. webpage exhibiting method according to claim 1, which is characterized in that described to be detected in the first page shown
To when page switching operation, the source code of the second page to be cut changed to is obtained, comprising:
When detecting page switching operation in the first page shown, the user for inputting the page switching operation is determined；
It is determining to operate matched second page with the user right of the user and the page switching, and obtain described second
The source code of the page.
5. webpage exhibiting method according to claim 1, which is characterized in that described based on the true of second webpage
After DOM file loads and shows second webpage, further includes:
The described second virtual DOM file is cached in memory.
6. a kind of webpage representation device characterized by comprising
Source code acquiring unit obtains to be cut change to when for detecting page switching operation in the first page shown
Second page source code；
Element comparing unit determines described for the source code of source code and second page based on the first page
The difference element information of two pages and the first page, the difference element information are the first page and second page
In the information of element that has differences；
File obtaining unit, the first virtual document object model DOM file of first webpage for obtaining caching are described
First virtual DOM file includes the corresponding virtual DOM node of each page elements in first webpage；
File adjustment unit, for updating the first virtual DOM file of first webpage according to the difference element information,
To construct the corresponding second virtual DOM file of second webpage, the second virtual DOM file includes second webpage
In the corresponding virtual DOM node of each page elements；
File conversion unit, for being the true DOM file of second webpage by the described second virtual DOM File Mapping；
Webpage representation unit loads for the true DOM file based on second webpage and shows second webpage.
7. webpage representation device according to claim 6, which is characterized in that the element comparing unit is determined described
Difference element information includes any of the following or a variety of:
The first web page element for having in first page and not having in second page；
The second web page element for having in second webpage and not having in first page；
The second webpage third web page element different from same type in the first webpage but attribute value；
The file adjustment unit, comprising:
Knot removal unit, it is virtual by described first if including the first page element for the difference element information
Virtual DOM node corresponding with first web page element is deleted in DOM file；
Node creating unit, it is virtual described first if including second web page element for the difference element information
Virtual DOM node corresponding with second web page element is created in DOM file；
Attribute changes unit, it is virtual by described first if including the third web page element for the difference element information
The attribute value of the corresponding virtual DOM node of third web page element described in DOM file is adjusted to described in second webpage
The corresponding attribute value of three web page elements obtains the corresponding virtual DOM file of second webpage.
8. webpage demonstration device according to claim 7, which is characterized in that the node creating unit, comprising:
Node creation unit is adjusted from Component Gallery if including second web page element for the difference element information
With component corresponding with second web page element, and it is corresponding virtual using the component of calling as second web page element
DOM node is added in the described first virtual DOM file.
9. webpage demonstration device according to claim 6, which is characterized in that the source code acquiring unit, comprising:
Permission determines subelement, when for detecting page switching operation in the first page shown, determines described in input
The user of page switching operation；
Code obtaining subelement operates matched second with the user right of the user and the page switching for determining
The page, and obtain the source code of the second page.
10. webpage demonstration device according to claim 6, which is characterized in that further include:
File cache unit, for loading and opening up based on the true DOM file of second webpage in the webpage representation unit
After existing second webpage, the described second virtual DOM file is cached in memory.
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 true CN110309461A (en) | 2019-10-08 |
| CN110309461B 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) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110795444A (en) * | 2019-10-25 | 2020-02-14 | 北京小米移动软件有限公司 | DOM data updating method, page updating method and device |
| CN111064979A (en) * | 2019-12-30 | 2020-04-24 | 广州市百果园网络科技有限公司 | Webpage live broadcast method and device, webpage terminal and storage medium |
| CN111078519A (en) * | 2019-12-13 | 2020-04-28 | 杭州安恒信息技术股份有限公司 | Method and device for backtracking abnormal monitoring behaviors and electronic equipment |
| CN111125597A (en) * | 2019-12-18 | 2020-05-08 | 百度在线网络技术（北京）有限公司 | Webpage loading method, browser, electronic equipment and storage medium |
| CN111930379A (en) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Method, device and system for realizing Web end complaint form designer |
| CN112417344A (en) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
Citations (5)
| 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 |
| 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 |
-
2019
- 2019-07-04 CN CN201910599173.2A patent/CN110309461B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103635897A (en) * | 2011-06-23 | 2014-03-12 | 微软公司 | Dynamically updating a running page |
| US20130227397A1 (en) * | 2012-02-24 | 2013-08-29 | Microsoft Corporation | Forming an instrumented text source document for generating a live web 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模式的离线应用研究与实现", 《计算机与数字工程》 * |
| 戴志诚等: "基于虚拟DOM的Web前端性能优化研究", 《计算机应用与软件》 * |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110795444A (en) * | 2019-10-25 | 2020-02-14 | 北京小米移动软件有限公司 | 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 |
| CN111125597A (en) * | 2019-12-18 | 2020-05-08 | 百度在线网络技术（北京）有限公司 | Webpage loading method, browser, electronic equipment and storage medium |
| CN111125597B (en) * | 2019-12-18 | 2023-10-27 | 百度在线网络技术（北京）有限公司 | Webpage loading method, browser, electronic equipment and storage medium |
| CN111064979A (en) * | 2019-12-30 | 2020-04-24 | 广州市百果园网络科技有限公司 | Webpage live broadcast method and device, webpage terminal and storage medium |
| CN111064979B (en) * | 2019-12-30 | 2023-02-28 | 广州市百果园网络科技有限公司 | Webpage live broadcasting method and device, webpage terminal and storage medium |
| CN111930379A (en) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Method, device and system for realizing Web end complaint form designer |
| CN111930379B (en) * | 2020-08-11 | 2021-07-06 | 上海亿锎智能科技有限公司 | Method, device and system for realizing Web end complaint form designer |
| CN112417344A (en) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110309461B (en) | 2023-10-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110309461A (en) | Webpage representation method and apparatus | |
| CN105022750B (en) | Resource file loading method and device | |
| US7277890B2 (en) | Method of finding a search string in a document for viewing on a mobile communication device | |
| CN103383687B (en) | A kind of page processing method and device | |
| CN104572777B (en) | Webpage loading method and device based on UIWebView component | |
| CN109408699B (en) | Method for realizing rapid retrieval of tree nodes by synchronous cache zTree | |
| US20150082151A1 (en) | Page display method and device | |
| CN108572819A (en) | Method for updating pages, device, terminal and computer readable storage medium | |
| CN107203555A (en) | Page loading processing method and device | |
| AU6732100A (en) | Database system | |
| CN104601736A (en) | Method and device for realizing short uniform resource locator (URL) service | |
| CN110334297A (en) | Loading method, terminal, server and the storage medium of terminal page | |
| CN111913705B (en) | JavaScript template implementation method based on difference updating algorithm | |
| CN105528452A (en) | Method and system for loading page data | |
| CN107688568A (en) | Acquisition method and device based on web page access behavior record | |
| CN107888659A (en) | The processing method and system of user's request | |
| CN107291913A (en) | HTML webpage loading method and device | |
| CN107613040A (en) | A kind of method and apparatus of domain name system DNS server lookup | |
| CN102163197B (en) | A kind of skin change method, system and device | |
| CN107480072A (en) | Lucidification disposal service end cache optimization method and system based on association mode | |
| CN106843899A (en) | A kind of web development methods and device based on Node.js platforms | |
| CN103580991B (en) | The method for uploading and equipment of a kind of Email attachment | |
| CN107408055B (en) | Code cache system | |
| CN104731817B (en) | A kind of webpage exhibiting method and device | |
| CN106933817A (en) | A kind of content search method and apparatus, system based on B/S structures |
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 |