CN112256995A - Method for improving memory of browser - Google Patents
Method for improving memory of browser Download PDFInfo
- Publication number
- CN112256995A CN112256995A CN202011146963.4A CN202011146963A CN112256995A CN 112256995 A CN112256995 A CN 112256995A CN 202011146963 A CN202011146963 A CN 202011146963A CN 112256995 A CN112256995 A CN 112256995A
- Authority
- CN
- China
- Prior art keywords
- memory
- picture data
- url
- picture
- browser
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
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/901—Indexing; Data structures therefor; Storage structures
- G06F16/9027—Trees
-
- 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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
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)
- Software Systems (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention relates to the field of web, in particular to a method for improving a memory of a browser, which solves the problem that the memory occupation of the browser cannot be obviously reduced, improves the use of the memory of the browser, and improves the use smoothness and user experience. The invention improves the method of the memory of the browser, analyze the picture data of url request; then decoding the requested picture data and storing the decoded picture data in an internal memory; judging an invisible area of the page, and removing nodes in a DOM tree of the invisible area; traversing the removed nodes, and acquiring corresponding url containing the picture; clearing decoded data corresponding to the url in the memory according to the acquired corresponding url containing the picture, and associating the url with the corresponding data before decoding; and judging the visible area of the page, and if the original invisible area of the removed node returns to the visible area again, adding the removed node back to the DOM tree again. The method and the device are suitable for improving the memory of the browser.
Description
Technical Field
The invention relates to the field of web, in particular to a method for improving a memory of a browser.
Background
With the popularization of web technologies, the requirements for the application performance of the browser and the user experience are higher and higher, and the memory occupation is used as an important performance index of the browser, which directly influences the experience of the browser. In the background of web pages becoming richer nowadays, picture occupation in pages is a main reason for increasing the memory occupation of browsers. Under the condition of not influencing the functions, the memory occupation of the picture data in the browser is reduced, and the method has a decisive effect on improving the user experience.
The excessive number of nodes of the Web page can complicate the DOM tree structure and affect the fluency of the page, so the front end needs to remove unnecessary nodes.
As shown in fig. 1, in the prior art, a node with a picture is created in a DOM tree, the requested picture data is decoded and read into a memory according to url request picture data, then only the decoded picture data in the memory before decoding is released, the node where the picture is located is released in the DOM tree of an invisible area page, the decoded picture data resides in the memory, after a subsequent invisible area page returns to a visible area, the node where the picture is located is added to the DOM tree again, and then the decoded picture data in the memory is read according to the url.
It can be seen that after the node where the picture is located is removed from the DOM tree, the memory usage of the browser is not significantly reduced, because the decoded picture data still resides in the memory.
Disclosure of Invention
The invention aims to provide a method for improving the memory of a browser, which solves the problem that the memory occupation of the browser cannot be obviously reduced after a node where a picture is located is removed from a DOM tree, and improves the use smoothness and the user experience.
The invention adopts the following technical scheme to realize the aim, and the method for improving the memory of the browser comprises the following steps:
step (1), analyzing picture data of a url request;
step (2), decoding the requested picture data and storing the decoded picture data in an internal memory;
step (3), judging an invisible area of the page, and removing nodes in a DOM tree of the invisible area;
step (4), traversing the removed nodes, and acquiring corresponding url containing the picture;
step (5), according to the obtained corresponding url containing the picture, clearing the decoded data corresponding to the url in the memory, and associating the url with the corresponding data before decoding;
and (6) judging the visible area of the page, if the original invisible area of the removed node returns to the visible area again, adding the removed node back to the DOM tree, and entering the step (1).
Further, in step (1), the specific method for parsing the picture data requested by the url includes: and creating and adding nodes with pictures in the DOM tree, and requesting picture data by the browser according to the picture url.
Further, in step (1), the parse url request includes a network request and a local request.
Further, in step (2), the specific method for decoding and storing the requested picture data in the memory includes: and decoding the requested picture data to obtain decoded picture data, storing the decoded picture data in a memory until the node where the picture is located is removed from the DOM tree, and simultaneously storing the picture data before decoding in the memory.
Further, in step (4), the specific method for traversing the removed DOM nodes includes: and traversing the removed nodes by the browser, wherein the nodes are of a tree structure, and traversing the complete tree structure to obtain the url corresponding to the included picture.
In the process of processing the picture data, the picture data after decoding in the invisible area is eliminated, simultaneously, the picture data before decoding is associated with the url corresponding to the node of the invisible area, and the memory occupation of the picture data before decoding is only one dozen times of that after decoding, so that the memory occupation is greatly reduced; and page interaction, after the invisible area returns to the visible area again, requesting picture data and decoding according to the previous association, so that the use of the memory is improved, and the use fluency and user experience are improved.
Drawings
FIG. 1 is a schematic diagram of a process flow of picture data according to the prior art.
Fig. 2 is a schematic diagram of an embodiment of a picture data processing flow according to the present invention.
Detailed Description
The invention discloses a method for improving a memory of a browser, which comprises the following steps:
step (1), analyzing picture data of a url request;
step (2), decoding the requested picture data and storing the decoded picture data in an internal memory;
step (3), judging an invisible area of the page, and removing nodes in a DOM tree of the invisible area;
step (4), traversing the removed nodes, and acquiring corresponding url containing the picture;
step (5), according to the obtained corresponding url containing the picture, clearing the decoded data corresponding to the url in the memory, and associating the url with the corresponding data before decoding;
and (6) judging the visible area of the page, if the original invisible area of the removed node returns to the visible area again, adding the removed node back to the DOM tree, and entering the step (1).
In step (1), the specific method for analyzing the picture data of the url request includes: and creating and adding nodes with pictures in the DOM tree, and requesting picture data by the browser according to the picture url.
Wherein, the node: all contents in the HTML webpage are DOM nodes, the whole HTML document is also a node, and the front end can remove and add the node through JavaScript.
DOM tree: all DOM nodes have relations with each other to form a tree structure, and the DOM tree can keep a simpler structure by removing the nodes which are not used temporarily in the DOM tree, so that the page fluency is increased.
In the step (1), the url resolving request includes a network request and a local request.
In step (2), the specific method for decoding the requested picture data and storing the decoded picture data in the memory includes: and decoding the requested picture data to obtain decoded picture data, storing the decoded picture data in a memory until the node where the picture is located is removed from the DOM tree, and simultaneously storing the picture data before decoding in the memory. Compared with the decoded picture data, the method occupies less memory, and is used for replacing the decoded picture data stored in the prior art after the node is removed.
Wherein the picture data before decoding: i.e., the coded picture, is compressed data, for example, picture file data in the format of jpeg, png, or the like.
Picture data after decoding: decoding the encoded picture into pixel data, wherein the pixel data is several times to dozens of times larger than the picture before decoding in the memory; taking the JPEG picture format as an example, the compression ratio is typically 10: 1 to 40: 1.
In step (4), the specific method for traversing the removed DOM nodes comprises: and traversing the removed nodes by the browser, wherein the nodes are of a tree structure, and traversing the complete tree structure to obtain the url corresponding to the included picture.
FIG. 2 is a schematic diagram of an embodiment of a picture data processing flow in the method for improving the memory of the browser according to the present invention.
Step s1, newly creating and adding nodes with pictures in the DOM tree;
step s2, according to the url of the picture in the node, making a network request for the picture data, or making a request for the local picture file;
step s3, reading the picture data requested in step s1 into the memory, wherein the picture data is in a compression state to be decoded;
step s4, decoding the picture data read into the memory in step s2 to obtain decoded picture pixel data;
step s5, storing the picture data before decoding in a memory, wherein the part of the data resides in the memory;
step s6, storing the decoded picture data in a memory, and storing the corresponding node in the memory until the corresponding node is removed from the DOM tree;
step s7, the front end operates through JavaScript programming, and nodes containing pictures are removed from the DOM tree in the invisible area;
step s8, traversing the released nodes and sub-nodes in s6, and finding out the included picture url;
step s9, according to the picture url obtained through traversal in step s7, the browser finds the corresponding decoded data in the memory, and carries out clearing and releasing;
step s10, the front end operates through JavaScript programming, and when the original invisible area returns to the visible area again, the removed nodes in s6 are added into the DOM tree;
and step s11, acquiring corresponding picture data before decoding in the memory according to the picture url added with the node in s10, then repeating the reading process, and entering s4 for decoding.
The browser cleans and removes the decoded picture data stored in the node, and stores the picture data before decoding; taking the JPEG picture format as an example, the compression ratio is typically 10: 1 to 40: 1, namely the memory occupation of the optimized picture data is only one tenth of the memory occupation of the picture data before the picture data is optimized; the picture data memory occupation is the main part of the browser memory occupation, so the technology achieves the effect of optimizing the memory occupation of the browser application, and improves the use smoothness and the user experience.
In conclusion, the method and the device solve the problem that the memory occupation of the browser cannot be obviously reduced after the node where the picture is located is removed from the DOM tree, and improve the use smoothness and the user experience.
Claims (5)
1. The method for improving the memory of the browser is characterized by comprising the following steps:
step (1), analyzing picture data of a url request;
step (2), decoding the requested picture data and storing the decoded picture data in an internal memory;
step (3), judging an invisible area of the page, and removing nodes in a DOM tree of the invisible area;
step (4), traversing the removed nodes, and acquiring corresponding url containing the picture;
step (5), according to the obtained corresponding url containing the picture, clearing the decoded data corresponding to the url in the memory, and associating the url with the corresponding data before decoding;
and (6) judging the visible area of the page, if the original invisible area of the removed node returns to the visible area again, adding the removed node back to the DOM tree, and entering the step (1).
2. The method for improving the memory of the browser according to claim 1, wherein in the step (1), the specific method for parsing the picture data of the url request includes: and creating and adding nodes with pictures in the DOM tree, and requesting picture data by the browser according to the picture url.
3. The method of claim 1, wherein in step (1), the url resolving request comprises a network request and a local request.
4. The method according to claim 1, wherein in step (2), the specific method for decoding and storing the requested picture data in the memory comprises: and decoding the requested picture data to obtain decoded picture data, storing the decoded picture data in a memory until the node where the picture is located is removed from the DOM tree, and simultaneously storing the picture data before decoding in the memory.
5. The method for improving the memory of the browser according to claim 1, wherein in the step (4), the specific method for traversing the removed DOM nodes comprises: and traversing the removed nodes by the browser, wherein the nodes are of a tree structure, and traversing the complete tree structure to obtain the url corresponding to the included picture.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011146963.4A CN112256995A (en) | 2020-10-23 | 2020-10-23 | Method for improving memory of browser |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011146963.4A CN112256995A (en) | 2020-10-23 | 2020-10-23 | Method for improving memory of browser |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112256995A true CN112256995A (en) | 2021-01-22 |
Family
ID=74263374
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011146963.4A Pending CN112256995A (en) | 2020-10-23 | 2020-10-23 | Method for improving memory of browser |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112256995A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114154090A (en) * | 2021-11-29 | 2022-03-08 | 中国平安财产保险股份有限公司 | Memory release method, device, terminal and storage medium |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101221580A (en) * | 2008-01-03 | 2008-07-16 | 中兴通讯股份有限公司 | Method for improving page layout display performance of embedded browser |
| US20120183233A1 (en) * | 2011-01-19 | 2012-07-19 | Microsoft Corporation | Delayed image decoding |
| US20140229820A1 (en) * | 2011-10-25 | 2014-08-14 | Zte Corporation | Method and device for displaying picture on browser of user equipment as required |
| CN104484235A (en) * | 2014-11-24 | 2015-04-01 | 北京奇虎科技有限公司 | Memory optimization method and device based on waterfall stream technology |
| CN105335442A (en) * | 2014-08-13 | 2016-02-17 | 优视科技有限公司 | Picture memory processing method and apparatus |
| CN110737532A (en) * | 2019-10-15 | 2020-01-31 | 四川长虹电器股份有限公司 | Android television browser memory optimization method |
| CN111258682A (en) * | 2020-02-20 | 2020-06-09 | 四川长虹电器股份有限公司 | Method for optimizing WebApp memory and nodes |
-
2020
- 2020-10-23 CN CN202011146963.4A patent/CN112256995A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101221580A (en) * | 2008-01-03 | 2008-07-16 | 中兴通讯股份有限公司 | Method for improving page layout display performance of embedded browser |
| US20120183233A1 (en) * | 2011-01-19 | 2012-07-19 | Microsoft Corporation | Delayed image decoding |
| US20140229820A1 (en) * | 2011-10-25 | 2014-08-14 | Zte Corporation | Method and device for displaying picture on browser of user equipment as required |
| CN105335442A (en) * | 2014-08-13 | 2016-02-17 | 优视科技有限公司 | Picture memory processing method and apparatus |
| CN104484235A (en) * | 2014-11-24 | 2015-04-01 | 北京奇虎科技有限公司 | Memory optimization method and device based on waterfall stream technology |
| CN110737532A (en) * | 2019-10-15 | 2020-01-31 | 四川长虹电器股份有限公司 | Android television browser memory optimization method |
| CN111258682A (en) * | 2020-02-20 | 2020-06-09 | 四川长虹电器股份有限公司 | Method for optimizing WebApp memory and nodes |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114154090A (en) * | 2021-11-29 | 2022-03-08 | 中国平安财产保险股份有限公司 | Memory release method, device, terminal and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102487402B (en) | Method, device and system for realizing webpage rendering by server side | |
| CN103500118B (en) | A kind of Cascading Style Sheet optimization method and device | |
| CN103336690B (en) | HTML (Hypertext Markup Language) 5-based text-element drawing method and device | |
| CN101127044A (en) | Dynamic web page segmentation method | |
| US20150135061A1 (en) | Systems and methods for parallel traversal of document object model tree | |
| CN103389972B (en) | A kind of method and device that text is obtained based on Simple Syndication | |
| CN111414560B (en) | Shared information processing method and device, related equipment and storage medium | |
| WO2012075942A1 (en) | Web page browsing method, browser and mobile terminal | |
| CN101526963A (en) | Method for identifying web page coding, device and terminal equipment | |
| KR20100022920A (en) | A web browser system using proxy server of a mobile communication terminal | |
| CN112487763A (en) | SVG-based OFD file online display method, server side and system | |
| CN113343066A (en) | Page processing method and device, electronic equipment and storage medium | |
| CN112256995A (en) | Method for improving memory of browser | |
| CN102508887A (en) | System and method for resolving digital television interaction service markup language | |
| JP2002297568A (en) | Coding apparatus for structured document and recording medium | |
| US7552384B2 (en) | Systems and method for optimizing tag based protocol stream parsing | |
| CN113900647A (en) | Method, device and equipment for screenshot of webpage | |
| CN106021582B (en) | Method for filtering position information, method and device for extracting effective webpage information | |
| CN102855602B (en) | Picture processing method and picture processing device | |
| CN111310076A (en) | Geographic position query method, device, medium and electronic equipment | |
| KR100653189B1 (en) | Apparatus and method for xml document transformming | |
| US20120151330A1 (en) | Method and apparatus for encoding and decoding xml documents using path code | |
| RU2294012C2 (en) | Data structure and methods for transforming stream of bits to electronic document and generation of bit stream from electronic document based on said data structure | |
| CN114553825A (en) | Method and system for converting webpage address into short address | |
| CN112214461B (en) | Fuzzy XML compression method for remote sensing metadata |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210122 |
|
| RJ01 | Rejection of invention patent application after publication |