[发明专利]改善浏览器内存的方法

说明书

本发明涉及web领域，具体涉及一种改善浏览器内存的方法，解决了浏览器的内存占用不会有明显减少的问题，改善了浏览器内存的使用，提升了使用流畅度和用户体验。本发明改善浏览器内存的方法，解析url请求的图片数据；然后将请求到的图片数据进行解码并保存在内存中；判断页面的不可视区域，并将不可视区域的DOM树中的节点移除；遍历被移除的节点，获取对应的包含图片的url；根据获取对应的包含图片的url，清除内存中该url对应的解码后数据，并将该url与对应解码前的数据进行关联；对页面的可视区域进行判断，若被移除节点的原不可视区域重新回到可视区域，则将移除的节点重新添加回DOM树。本发明适用于改善浏览器内存。

技术领域

本发明涉及web领域，具体涉及一种改善浏览器内存的方法。

背景技术

随着web技术的普及，对于浏览器应用性能和用户体验要求也越来越高，内存占用作为浏览器一个重要性能指标，更是直接影响着浏览器的体验。在如今web页面越来越丰富的背景下，页面中图片占用是使得浏览器内存占用增加的主要原因。在不影响功能的情况下，降低浏览器中图片数据的内存占用，对于提高用户体验具有决定性作用。

Web页面的节点数量过多，会使DOM树结构复杂和影响页面的流畅度，所以前端需要移除不必要的节点。

现有技术如图1，首先在DOM树中创建带有图片的节点，根据url请求图片数据，将请求的图片数据进行解码并读入内存中，然后释放内存中解码前的图片数据此时内存中只有解码后的图片数据，在不可视区域页面的DOM树中释放图片所在的节点，内存中就常驻解码后的图片数据，后续不可视区域页面回到可视区域后，再将图片所在的节点重新添加进DOM树，然后根据url读取内存中解码后的图片数据。

可以看出，图片所在节点从DOM树中被移除后，浏览器的内存占用不会有明显减少，因为解码后的图片数据仍然常驻内存中。

发明内容

本发明的目的是提供一种改善浏览器内存的方法，解决了图片所在节点从DOM树中被移除后，浏览器的内存占用不会有明显减少的问题，提升了使用流畅度和用户体验。

本发明采取如下技术方案实现上述目的，改善浏览器内存的方法，包括：

步骤(1)、解析url请求的图片数据；

步骤(2)、将请求到的图片数据进行解码并保存在内存中；

步骤(3)、判断页面的不可视区域，并将不可视区域的DOM树中的节点移除；

步骤(4)、遍历被移除的节点，获取对应的包含图片的url；

步骤(5)、根据获取对应的包含图片的url，清除内存中该url对应的解码后数据，并将该url与对应解码前的数据进行关联；

步骤(6)、对页面的可视区域进行判断，若被移除节点的原不可视区域重新回到可视区域，则将移除的节点重新添加回DOM树，并进入步骤(1)。

进一步的是，在步骤(1)中，解析url请求的图片数据的具体方法包括：在DOM树中创建和添加带有图片的节点，浏览器根据图片url请求图片数据。

进一步的是，在步骤(1)中，解析url请求包括网络请求以及本地请求。

进一步的是，在步骤(2)中，将请求到的图片数据进行解码并保存在内存中的具体方法包括：将请求到的图片数据进行解码，获得解码后图片数据，然后将解码后图片数据存放于内存中，直到图片所在节点从DOM树中移除，同时将解码前的图片数据也存放于内存中。

进一步的是，在步骤(4)中，遍历被移除的DOM节点的具体方法包括：浏览器遍历被移除的节点，节点是树形结构，遍历完整的树形结构后得到对应包含图片的url。