CN111258682A - Method for optimizing WebApp memory and nodes - Google Patents
Method for optimizing WebApp memory and nodes Download PDFInfo
- Publication number
- CN111258682A CN111258682A CN202010104446.4A CN202010104446A CN111258682A CN 111258682 A CN111258682 A CN 111258682A CN 202010104446 A CN202010104446 A CN 202010104446A CN 111258682 A CN111258682 A CN 111258682A
- Authority
- CN
- China
- Prior art keywords
- page
- data
- rendering
- components
- content
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44568—Immediately runnable code
- G06F9/44578—Preparing or optimising for loading
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a method for optimizing a WebApp memory and nodes, which comprises the following steps: dividing the page into an upper area, a visible area and a lower area with equal height, and rendering through the components; when a page is loaded for the first time, requesting the content of n components from a server, and caching when home page data is acquired; adding nodes to the page in sequence by the instance object responsible for page rendering management, and dynamically adding the instance class responsible for page rendering to the dom tree when the distance of the user scrolling operation exceeds the height of one screen display area; when the rendering of the first page data is completed, the instance object responsible for page data management requests the server, the requested data is connected to the back/front of the first page data, and the instance object responsible for page rendering management sequentially renders the added data. The invention solves the problems that the dom node of the web page occupies more memory and the display memory is overlarge.
Description
Technical Field
The invention relates to the technical field of internet, in particular to a method for optimizing a WebApp memory and a WebApp node.
Background
The development of the web front-end technology is changing day by day, front-end modularization and modularization are also known more and more, wherein modularization experiences module export and module import from global variables to closures to the subsequent amd, cmd, commonJs and es6 standards, and meanwhile, a plurality of construction tools such as webpack, gulp, fis and the like are born, so that the front-end development is more standardized and engineered, and the efficiency of the front-end development and the team cooperation capability are improved. In the web, if more contents are required to be displayed for a user, two methods can be used, firstly, paging display can be adopted, the user can actively click the previous page, the next page or the number of pages to be jumped, and the method can save memory and improve performance, but the method of actively triggering or selecting by the user is insufficient in user experience, and immersive experience cannot be achieved on mobile equipment or a smart television; secondly, a user can actively request data and display more contents when scrolling downwards in a waterfall flow mode, and the waterfall flow mode can effectively improve user experience, but the problems of more nodes of a web page, and overlarge memory occupation and display memory exist.
Disclosure of Invention
The invention aims to provide a method for optimizing a WebApp memory and nodes, which is used for solving the problems that in the prior art, when page content is displayed in a waterfall flow mode, many nodes of a web page are present, and memory and display memory are occupied too much.
The invention solves the problems through the following technical scheme:
a method for optimizing a WebApp memory and nodes comprises the following steps:
step S1: the method comprises the steps that a page is divided into an upper area, a visible area and a lower area which are equal in height, namely, the page is integrally rendered to be three times the height of the visible area, the page is rendered through a plurality of components, the heights of the components are set according to cloud data, the width of each component is the width of the page, and page display contents are piled up through the components in a line;
step S2: when a page is loaded for the first time, requesting the content of n components from a server, wherein the content of the components comprises the height of the components, component identifiers and data content needing to be shown to a user;
step S3: when an instance object in charge of page data management acquires home page data, the instance stores the data in a certain attribute of the instance and caches the data;
step S4: according to the data, the instance object responsible for page rendering management sequentially adds component height data with height obtained by a cloud end and nodes with width of the page width into the page, finds an instantiated object of the component in an instance object method for component object management through a corresponding component identifier data field, adds a dom node of the displayed content into a corresponding father node by using a rendering method of the instantiated object, wherein the height of the sequentially added component cannot exceed 2 times of a visible area, and the excess part of the sequentially added component is not added into a page dom tree; the rendering area in the page after the initial loading is the screen display area and the area below/above the screen display area and exceeding the screen display area by 1 time of the screen height;
step S5: when a user operates a page to scroll in any direction, the content displayed in the display area of the screen scrolls upwards or downwards, when the distance of scrolling upwards or downwards exceeds the height of one screen, the parent node of more than part of components is removed from the dom tree by the instance class responsible for page rendering, and then the device releases the occupied resource of the part. The content below or above the screen display area moves up or down to the screen display area, and the data which are not rendered before are sequentially added into the dom tree according to the rolling distance;
step S6: when the data which is not rendered in the first page data is added into the page, the instance object which is responsible for the page data can request the server for the second time, the requested data is connected to the back/front of the first page data, and then the object which is responsible for the page rendering can be sequentially rendered according to the added data.
In the above page dynamic rendering process, if the same component exists in the rendering region, an instantiation object of multiple component classes needs to be created to render data, but if two components do not simultaneously appear in the rendering region, the instances of the previous component can be reused, thereby reducing the memory usage during program operation. In the process of user operation rolling, data are dynamically processed, nodes are dynamically added and removed, existing content is displayed in the process of user rolling operation, the number of the nodes of the page is always kept to be a fixed number of the nodes, occupation of internal memory is reduced as much as possible, user experience is improved, and page data are optimized.
Compared with the prior art, the invention has the following advantages and beneficial effects:
(1) the invention provides an optimization scheme for data management and dom node management of web waterfall flow display content based on web modularization and componentization, and solves the problems that a web page dom node occupies more memory and has overlarge display memory.
(2) According to the invention, when the component is used for rendering the page, the instantiated component objects cannot be infinitely increased along with the increase of the data volume, the same component reuses the same component instantiated object in the rendering process, and the occupation of a memory is reduced.
Detailed Description
The present invention will be described in further detail with reference to examples, but the embodiments of the present invention are not limited thereto.
Example 1:
a method for optimizing a WebApp memory and nodes comprises the following steps:
step S1: the method comprises the steps that a page is divided into an upper area, a visible area and a lower area which are equal in height, namely the page is integrally rendered to be three times the height of the visible area, the page is divided into a plurality of components for rendering, the heights of the components are set according to cloud data, the widths of the components are the page width, and page display content is piled up through the components in a line and a line;
step S2: when a page is loaded for the first time, requesting the content of n components from a server, wherein the content of the components comprises the height of the components, component identifiers and data content needing to be shown to a user;
step S3: when an instance in charge of page data management acquires home page data, the instance stores the data as certain attribute of the instance and caches the data;
step S4: according to the data, the instance responsible for page rendering management sequentially adds component height data with the height obtained by a cloud end and nodes with the width of the page width into the page, finds an instantiated object of the component in an instance object method for component object management through a corresponding component identifier data field, adds dom of the display content into a corresponding father node by using a rendering method of the instantiated object, wherein the height of the sequentially added components cannot exceed the preset multiple of a visible area, such as 2 times, and the excess part of the sequentially added components is not added into a page dom tree; the rendering area in the page after the initial loading is the screen display area and the area below/above the screen display area and exceeding the screen display area by 1 time of the screen height;
step S5: when a user operates a page to scroll up/down, the content displayed in the display area of the screen scrolls up/down the screen, and when the distance of scrolling up/down exceeds the height of one screen, the instance class responsible for page rendering removes the parent node of more than part of components from the dom tree, and then the device releases the resource occupied by the part. The content below/above the screen display area moves up/down to the screen display area, and the data which are not rendered before are sequentially added into the dom tree according to the rolling distance;
step S6: when the data which is not rendered in the first page data is added into the page, the instance object which is responsible for the page data can request the server for the second time, the requested data is connected to the back/front of the first page data, and then the object which is responsible for the page rendering can be sequentially rendered according to the added data.
In the above page dynamic rendering process, if the same component exists in the rendering region, an instantiation object of multiple component classes needs to be created to render data, but if two components do not simultaneously appear in the rendering region, the instance of the previous component can be reused, which can reduce the memory usage during program operation.
Although the present invention has been described herein with reference to the illustrated embodiments thereof, which are intended to be preferred embodiments of the present invention, it is to be understood that the invention is not limited thereto, and that numerous other modifications and embodiments can be devised by those skilled in the art that will fall within the spirit and scope of the principles of this disclosure.
Claims (1)
1. A method for optimizing a WebApp memory and nodes is characterized by comprising the following steps:
step S1: dividing the page into an upper area, a visible area and a lower area with equal height, rendering the page through components in a row and a line, and stacking the page through the components to display content;
step S2: when a page is loaded for the first time, requesting the content of n components from a server, wherein the content of the components comprises the height of the components, component identifiers and data content shown to a user;
step S3: when an instance object in charge of page data management acquires home page data, the instance stores the home page data in the attribute of the home page data and uses the home page data as cache data;
step S4: the method comprises the steps that an instance object responsible for page rendering management sequentially adds nodes to a page according to cache data, an instantiation object of an assembly is found in an instance object method managed by the assembly object, a dom node of displayed content is added to a corresponding father node by using the rendering method of the instantiation object, the height of the sequentially added assembly cannot exceed 2 times of a visible area, and the excess part of the sequentially added assembly is not added to a page dom tree;
step S5: when a user operates a page to scroll in any direction, the content displayed in a screen display area scrolls upwards or downwards, when the distance of the upward or downward scrolling exceeds the height of one screen display area, the parent node of more than part of components is removed from a dom tree by an instance class responsible for page rendering, the content below or above the screen display area moves upwards or downwards to the screen display area, and data which are not rendered before are sequentially added to the dom tree according to the scrolling distance;
step S6: when no rendered data in the first page data is added to the page, the instance object responsible for page data management requests the server for the second time, the requested data is connected to the back/front of the first page data, and the instance object responsible for page rendering management sequentially renders the added data.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010104446.4A CN111258682A (en) | 2020-02-20 | 2020-02-20 | Method for optimizing WebApp memory and nodes |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010104446.4A CN111258682A (en) | 2020-02-20 | 2020-02-20 | Method for optimizing WebApp memory and nodes |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111258682A true CN111258682A (en) | 2020-06-09 |
Family
ID=70949639
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010104446.4A Pending CN111258682A (en) | 2020-02-20 | 2020-02-20 | Method for optimizing WebApp memory and nodes |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111258682A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111897612A (en) * | 2020-07-31 | 2020-11-06 | 平安普惠企业管理有限公司 | Page updating method and device, electronic equipment and storage medium |
| CN112256995A (en) * | 2020-10-23 | 2021-01-22 | 四川长虹电器股份有限公司 | Method for improving memory of browser |
| CN112464121A (en) * | 2020-11-27 | 2021-03-09 | 金蝶软件（中国）有限公司 | Data loading method and device, computer equipment and storage medium |
| CN112612457A (en) * | 2020-12-28 | 2021-04-06 | 中科院计算技术研究所大数据研究院 | Method for high-performance rendering of large amount of data by javascript |
| CN113127780A (en) * | 2021-03-23 | 2021-07-16 | 维沃移动通信有限公司 | Page loading method and device and electronic equipment |
| CN113535294A (en) * | 2021-06-08 | 2021-10-22 | 摩尔元数（厦门）科技有限公司 | Rendering acceleration method, device, equipment and medium for H5 list |
| CN114186154A (en) * | 2021-12-06 | 2022-03-15 | 北京达佳互联信息技术有限公司 | Page processing method and device, electronic equipment and storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103544253A (en) * | 2013-10-15 | 2014-01-29 | Tcl集团股份有限公司 | Implementation method and system for displaying images in waterfall flow manner |
| CN103678622A (en) * | 2013-12-18 | 2014-03-26 | 百度在线网络技术（北京）有限公司 | Method and device for dynamic rendering of waterfall-type picture |
| CN105183474A (en) * | 2015-09-07 | 2015-12-23 | 深圳信壹网络有限公司 | Waterfall flow type picture display method and device |
| CN105700800A (en) * | 2014-11-27 | 2016-06-22 | 阿里巴巴集团控股有限公司 | Page information operating method and apparatus, and electronic device |
| CN106775394A (en) * | 2016-12-09 | 2017-05-31 | 掌阅科技股份有限公司 | Content revealing method, device and electronic equipment, storage medium |
| CN108228816A (en) * | 2017-12-29 | 2018-06-29 | 北京奇虎科技有限公司 | A kind of loading method and device of waterfall flow graph piece |
-
2020
- 2020-02-20 CN CN202010104446.4A patent/CN111258682A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103544253A (en) * | 2013-10-15 | 2014-01-29 | Tcl集团股份有限公司 | Implementation method and system for displaying images in waterfall flow manner |
| CN103678622A (en) * | 2013-12-18 | 2014-03-26 | 百度在线网络技术（北京）有限公司 | Method and device for dynamic rendering of waterfall-type picture |
| CN105700800A (en) * | 2014-11-27 | 2016-06-22 | 阿里巴巴集团控股有限公司 | Page information operating method and apparatus, and electronic device |
| CN105183474A (en) * | 2015-09-07 | 2015-12-23 | 深圳信壹网络有限公司 | Waterfall flow type picture display method and device |
| CN106775394A (en) * | 2016-12-09 | 2017-05-31 | 掌阅科技股份有限公司 | Content revealing method, device and electronic equipment, storage medium |
| CN108228816A (en) * | 2017-12-29 | 2018-06-29 | 北京奇虎科技有限公司 | A kind of loading method and device of waterfall flow graph piece |
Non-Patent Citations (2)
| Title |
|---|
| 匿名: "瀑布流布局的开发实践", 《CSDN博客》 * |
| 天津滨海迅腾科技集团有限公司: "《微信小程序项目实战》", 31 July 2018 * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111897612A (en) * | 2020-07-31 | 2020-11-06 | 平安普惠企业管理有限公司 | Page updating method and device, electronic equipment and storage medium |
| CN112256995A (en) * | 2020-10-23 | 2021-01-22 | 四川长虹电器股份有限公司 | Method for improving memory of browser |
| CN112464121A (en) * | 2020-11-27 | 2021-03-09 | 金蝶软件（中国）有限公司 | Data loading method and device, computer equipment and storage medium |
| CN112612457A (en) * | 2020-12-28 | 2021-04-06 | 中科院计算技术研究所大数据研究院 | Method for high-performance rendering of large amount of data by javascript |
| CN113127780A (en) * | 2021-03-23 | 2021-07-16 | 维沃移动通信有限公司 | Page loading method and device and electronic equipment |
| CN113535294A (en) * | 2021-06-08 | 2021-10-22 | 摩尔元数（厦门）科技有限公司 | Rendering acceleration method, device, equipment and medium for H5 list |
| CN114186154A (en) * | 2021-12-06 | 2022-03-15 | 北京达佳互联信息技术有限公司 | Page processing method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111258682A (en) | Method for optimizing WebApp memory and nodes | |
| CN110837617A (en) | Webpage self-adaptive layout method, server and computer readable storage medium | |
| CN103678622B (en) | Method and device for dynamic rendering of waterfall-type picture | |
| CN111968212B (en) | Viewpoint-based three-dimensional urban scene data dynamic scheduling method | |
| US20160283096A1 (en) | Method of generating a link by utilizing a picture and system thereof | |
| CN105205157A (en) | Page loading method, device and system | |
| CN101996206A (en) | Method, device and system for displaying web page | |
| CN102915375A (en) | Webpage loading method based on layout zoning | |
| CN112182444B (en) | Data rendering system, method and electronic equipment | |
| CN104820589B (en) | A kind of method and its device of dynamic adaptation webpage | |
| CN103294711A (en) | Method and device for determining page elements in web page | |
| CN104601696A (en) | Service processing method and service invoking frame, device and architecture | |
| CN103064667A (en) | Method for controlling hardware equipment based on JavaScript extension | |
| CN105373593A (en) | Method and apparatus for displaying target element from webpage | |
| CN103984743A (en) | Method and device for managing memory resources | |
| US9754391B2 (en) | Webpage display method and apparatus | |
| CN102622376A (en) | Method and equipment used for merging cascading style sheet files | |
| CN102622217A (en) | Cross-screen operation application method and system | |
| CN103208128B (en) | The method and device of display picture | |
| CN107391163B (en) | Page data loading method and device in mobile terminal and application | |
| CN102436369B (en) | Method and device for displaying data | |
| CN103164409A (en) | Network advertisement show type post test method and network advertisement show type post test system | |
| CN106844656A (en) | A kind of page adaptation method and system | |
| CN105279195B (en) | The method and device of web application calling browser function | |
| CN105654540A (en) | Method and apparatus for data display in 3D scene |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200609 |