在构建高德地图这类复杂的WebGL应用时，内存管理是保障应用稳定运行的核心环节。WebGL应用需要频繁处理纹理、缓冲区、着色器程序等GPU资源，若这些资源没有被正确释放，很容易出现内存持续增长的情况，最终导致应用崩溃。下面将从多个层面介绍具体的内存管理方案。
一、明确WebGL资源的生命周期
WebGL的各类资源都有对应的创建和销毁方法，开发者需要清楚每个资源的生命周期，在不需要使用时主动调用销毁接口。常见的需要管理的资源包括纹理、缓冲区、渲染缓冲区、帧缓冲区、着色器程序等。
以纹理资源为例，创建和销毁的标准流程如下：
// 创建纹理
function createTexture(gl, image) {
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.bindTexture(gl.TEXTURE_2D, null);
return texture;
}
// 销毁纹理
function destroyTexture(gl, texture) {
if (texture) {
gl.deleteTexture(texture);
}
}
二、建立资源引用池与自动清理机制
在复杂应用中，资源可能会被多个模块引用，直接销毁可能会导致其他模块使用时出现异常。因此可以建立统一的资源引用池，记录每个资源的引用次数，当引用次数为0时再执行销毁操作。
下面是一个简单的资源引用池实现示例：
class ResourcePool {
constructor(gl) {
this.gl = gl;
this.texturePool = new Map(); // 存储纹理资源 key:资源id value:{refCount:引用次数, resource:资源对象}
}
// 添加纹理资源
addTexture(id, texture) {
if (this.texturePool.has(id)) {
this.texturePool.get(id).refCount += 1;
} else {
this.texturePool.set(id, {
refCount: 1,
resource: texture
});
}
}
// 释放纹理引用
releaseTexture(id) {
if (this.texturePool.has(id)) {
const item = this.texturePool.get(id);
item.refCount -= 1;
if (item.refCount <= 0) {
this.gl.deleteTexture(item.resource);
this.texturePool.delete(id);
}
}
}
// 清理所有未使用的资源
clearUnused() {
for (const [id, item] of this.texturePool.entries()) {
if (item.refCount <= 0) {
this.gl.deleteTexture(item.resource);
this.texturePool.delete(id);
}
}
}
}
三、及时清理冗余的地图相关数据
高德地图类应用中会加载大量的地图瓦片、标注点、矢量图形等数据，这些数据对应的WebGL资源如果长期保留，会占用大量内存。需要根据可视范围动态加载和卸载资源。
- 当地图视野移动时，卸载视野外瓦片对应的纹理和缓冲区资源
- 移除标注点时，同步销毁对应的WebGL渲染资源
- 切换地图图层时，销毁不再显示的图层相关资源
例如视野变化时的资源清理逻辑：
// 视野变化回调
function onViewChange(newBounds, resourcePool, tileList) {
const visibleTiles = [];
// 计算当前视野内的瓦片
for (const tile of tileList) {
if (isTileInBounds(tile, newBounds)) {
visibleTiles.push(tile);
} else {
// 瓦片不在视野内，释放引用
resourcePool.releaseTexture(tile.id);
}
}
// 加载视野内缺失的瓦片
loadMissingTiles(visibleTiles, resourcePool);
}
四、监控内存使用情况
可以通过浏览器的性能监控接口定期查看内存占用情况，及时发现内存泄漏问题。Chrome浏览器提供了performance.memory接口可以获取内存相关信息。
// 定期监控内存
setInterval(() => {
if (performance.memory) {
const usedJSHeapSize = performance.memory.usedJSHeapSize;
const totalJSHeapSize = performance.memory.totalJSHeapSize;
console.log(`已用内存:${usedJSHeapSize / 1024 / 1024}MB, 总内存:${totalJSHeapSize / 1024 / 1024}MB`);
// 如果内存占用超过阈值，主动触发资源清理
if (usedJSHeapSize / totalJSHeapSize > 0.8) {
resourcePool.clearUnused();
}
}
}, 5000);
五、避免常见的内存泄漏问题
除了主动管理资源，还需要规避一些常见的导致内存泄漏的写法：
- 不要在着色器程序中保留不必要的全局引用，避免着色器程序无法被回收
- 及时解绑不再使用的WebGL资源，避免GPU侧资源被持续占用
- 避免在循环中频繁创建新的WebGL资源，尽量复用已有的资源
- 页面卸载时，主动销毁所有WebGL相关资源，避免残留内存占用
页面卸载时的清理示例：
window.addEventListener('beforeunload', () => {
// 销毁所有纹理资源
for (const [id, item] of resourcePool.texturePool.entries()) {
gl.deleteTexture(item.resource);
}
resourcePool.texturePool.clear();
// 销毁所有缓冲区资源
const buffers = gl.getAttachedShaders(gl.getParameter(gl.CURRENT_PROGRAM));
// 清理其他相关资源
// ...
});
通过以上几个层面的内存管理措施，可以有效避免高德地图这类复杂WebGL应用出现内存泄漏和崩溃问题，保障应用长期稳定运行。