一种优化WebApp内存和节点的方法技术

本发明专利技术公开了一种优化WebApp内存和节点的方法，包括：将页面分为高度相等的上方区域、可视区域和下方区域并通过组件来渲染；初次加载页面时，向服务器请求n个组件的内容，获取到首页数据时进行缓存；负责页面渲染管理的实例对象依次向页面中添加节点，当用户滚动操作的距离超过一个屏幕显示区域的高度时，负责页面渲染的实例类动态地添加到dom树中；当首页数据渲染完成，负责页面数据管理的实例对象会向服务器请求，并将请求的数据连接到首页数据的后方/前方，负责页面渲染管理的实例对象对添加的数据依次进行渲染。本发明专利技术解决了web页面dom节点多占用内存以及显存过大问题。

A method to optimize the memory and node of webapp

【技术实现步骤摘要】
一种优化WebApp内存和节点的方法
本专利技术涉及互联网
，具体的说，是一种优化WebApp内存和节点的方法。
技术介绍
web前端技术发展日新月异，前端模块化和组件化也越来越被人们熟知，其中模块化经历了从全局变量到闭包再到后来的amd、cmd、commonJs、es6标准的模块导出与模块导入，同时也诞生了许多的构建工具如webpack、gulp、fis等，这些工具的诞生也使得前端开发更加标准化与工程化，提升了前端开发的效率与团队协作的能力。在web中，如果想要为用户展示更多内容，可以有两种方法，一是可以采用分页展示，用户想要更多的内容是通过用户主动点击上一页、下一页或者要跳转的页数，这种方式可以节省内存提高性能，但是这种用户主动触发或者选择的方式在用户体验上存在不足，在移动设备或者智能电视上不能做到沉浸式体验；二是可以通过瀑布流的方式，用户在向下滚动的时候主动的去请求数据，展示更多内容，这种瀑布流的形式能有效地提升用户体验，但是存在web页面dom节点多、占用内存与显存过大的问题。
技术实现思路
本专利技术的目的在于提供一种优化WebApp内存和节点的方法，用于解决现有技术中采用瀑布流方式展示页面内容时存在web页面dom节点多、占用内存与显存过大的问题。本专利技术通过下述技术方案解决上述问题：一种优化WebApp内存和节点的方法，包括：步骤S1：将页面分为高度相等的上方区域、可视区域和下方区域，即将页面中整体渲染为可视区域高度的三倍，页面又通过多个组件来渲染，组件的高度根据云端数据设置，组件的宽度为页面宽度，通过一行一行的组件来堆砌页面显示内容；步骤S2：初次加载页面时，向服务器请求n个组件的内容，组件的内容包括组件的高度、组件标识符以及需要向用户展示的数据内容；步骤S3：负责页面数据管理的实例对象获取到首页数据时，该实例会将数据保存在该实例的某个属性中并进行缓存；步骤S4：负责页面渲染管理的实例对象根据这些数据，依次向页面中添加高度为云端获取到的组件高度数据，宽度为页面宽度的节点，并且通过对应组件标识符数据字段在组件对象管理的实例对象方法中找到该组件的实例化对象，并使用该实例化对象的渲染方法将展示内容的dom节点添加到对应的父节点中，依次添加的组件的高度不能超过可视区域的2倍，超过部分则不添加到页面dom树中；通过初始化加载后页面中渲染区域则为屏幕显示区域和屏幕显示区域下方/上方超出屏幕显示区域1倍屏幕高度的区域；步骤S5：当用户操作页面向上或下任意方向滚动时，屏幕显示区域显示的内容会向屏幕上方或下方滚动，当向上或下滚动的距离超过一个屏幕的高度时，负责页面渲染的实例类会将超过部分组件的父节点从dom树中移除，这时设备就会释放掉该部分所占用的资源。屏幕显示区域下方或上方的内容则会向上或下移动至屏幕显示区域，并且将之前没有渲染的数据根据滚动距离依次添加到dom树中；步骤S6：当首页数据中没有渲染的数据都添加到页面中时，这时负责页面数据的实例对象会第二次向服务器请求，并将请求到的数据连接到首页数据的后方/前方，然后负责页面渲染的对象就会根据添加的数据依次渲染。在上述页面动态渲染过程中，如若渲染区域内有相同的组件，这时需要创建多个组件类的实例化对象来渲染数据，但是如果是两个组件不会同时出现在渲染区域时，这时就可以复用上个组件的实例，减少了程序运行时的内存占用。且在用户操作滚动过程中，动态的处理数据、动态地添加和移除节点，使得用户滚动操作过程中既有内容展示，而且页面的节点数目始终保持固定数量的节点，保证尽量少占用内存，既提升了用户体验，又优化了页面数据。本专利技术与现有技术相比，具有以下优点及有益效果：(1)本专利技术基于web模块化与组件化，为web瀑布流展示内容的数据管理与dom节点管理提供了优化方案，解决了web页面dom节点多占用内存以及显存过大问题。(2)本专利技术在使用组件渲染页面时实例化的组件对象不会随数据量的增加无限增加，在渲染过程中相同的组件复用相同的组件实例化对象，减少内存的占用。具体实施方式下面结合实施例对本专利技术作进一步地详细说明，但本专利技术的实施方式不限于此。实施例1：一种优化WebApp内存和节点的方法，包括：步骤S1：将页面分为高度相等的上方区域、可视区域和下方区域，即将页面中整体渲染为可视区域高度的三倍，页面又拆分为多个组件来渲染，组件的高度根据云端数据设置，组件的宽度为页面宽度，通过一行一行的组件来堆砌页面显示内容；步骤S2：初次加载页面时，向服务器请求n个组件的内容，组件的内容包括组件的高度、组件标识符以及需要向用户展示的数据内容；步骤S3：负责页面数据管理的实例获取到首页数据时，该实例会将数据保存为该实例的某个属性中将数据缓存；步骤S4：负责页面渲染管理的实例根据这些数据，依次向页面中添加高度为云端获取到的组件高度数据，宽度为页面宽度的节点，并且通过对应组件标识符数据字段在组件对象管理的实例对象方法中找到该组件的实例化对象，并使用该实例化对象的渲染方法将展示内容的dom添加到对应的父节点中，依次添加的组件的高度不能超过可视区域的预设倍数如2倍，超过部分则不添加到页面dom树中；通过初始化加载后页面中渲染区域则为屏幕显示区域和屏幕显示区域下方/上方超出屏幕显示区域1倍屏幕高度的区域；步骤S5：当用户操作页面向上/下滚动时，屏幕显示区域显示的内容会向屏幕上方/下方滚动，当向上/下滚动的距离超过一个屏幕的高度时，负责页面渲染的实例类会将超过部分组件的父节点从dom树中移除，这时设备就会释放掉该部分所占用的资源。屏幕显示区域下方/上方的内容则会向上/下移动至屏幕显示区域，并且将之前没有渲染的数据根据滚动距离依次添加到dom树中；步骤S6：当首页数据中没有渲染的数据都添加到页面中时，这时负责页面数据的实例对象会第二次向服务器请求，并将请求到的数据连接到首页数据的后方/前方，然后负责页面渲染的对象就会根据添加的数据依次渲染。在上述页面动态渲染过程中，如若渲染区域内有相同的组件，这时需要创建多个组件类的实例化对象来渲染数据，但是如果是两个组件不会同时出现在渲染区域时，这时就可一复用上个组件的实例，这样做可以减少程序运行时的内存占用。尽管这里参照本专利技术的解释性实施例对本专利技术进行了描述，上述实施例仅为本专利技术较佳的实施方式，本专利技术的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。本文档来自技高网...

【技术保护点】
1.一种优化WebApp内存和节点的方法，其特征在于，包括：/n步骤S1：将页面分为高度相等的上方区域、可视区域和下方区域，页面通过一行一行的组件来渲染并通过组件堆砌页面显示内容；/n步骤S2：初次加载页面时，向服务器请求n个组件的内容，组件的内容包括组件的高度、组件标识符以及向用户展示的数据内容；/n步骤S3：负责页面数据管理的实例对象获取到首页数据时，该实例会将首页数据保存在其属性中，并作为缓存数据；/n步骤S4：负责页面渲染管理的实例对象根据缓存数据，依次向页面中添加节点，并在组件对象管理的实例对象方法中找到该组件的实例化对象，使用该实例化对象的渲染方法将展示内容的dom节点添加到对应的父节点中，依次添加的组件的高度不能超过可视区域的2倍，超过部分则不添加到页面dom树中；/n步骤S5：当用户操作页面向上或下任一方向滚动时，屏幕显示区域显示的内容会向屏幕上方或下方滚动，当向上或下滚动的距离超过一个屏幕显示区域的高度时，负责页面渲染的实例类会将超过部分组件的父节点从dom树中移除，屏幕显示区域下方或上方的内容则会向上或下移动至屏幕显示区域，并将之前没有渲染的数据根据滚动距离依次添加到dom树中；/n步骤S6：当首页数据中没有渲染的数据都添加到页面中时，负责页面数据管理的实例对象会第二次向服务器请求，并将请求的数据连接到首页数据的后方/前方，负责页面渲染管理的实例对象对添加的数据依次进行渲染。/n...

【技术特征摘要】
1.一种优化WebApp内存和节点的方法，其特征在于，包括：
步骤S1：将页面分为高度相等的上方区域、可视区域和下方区域，页面通过一行一行的组件来渲染并通过组件堆砌页面显示内容；
步骤S2：初次加载页面时，向服务器请求n个组件的内容，组件的内容包括组件的高度、组件标识符以及向用户展示的数据内容；
步骤S3：负责页面数据管理的实例对象获取到首页数据时，该实例会将首页数据保存在其属性中，并作为缓存数据；
步骤S4：负责页面渲染管理的实例对象根据缓存数据，依次向页面中添加节点，并在组件对象管理的实例对象方法中找到该组件的实例化对象，使用该实例化对象的渲染方法将展示内容的dom节点添加到对应的父...

【专利技术属性】
技术研发人员：曾毅，刘姗姗，周伟，喻雅倩，张钦云，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川;51