背景
H5分页显示pdf文件,并嵌套在安卓的webview上。用的是原生js,和pdf.js库。
现象
在安卓上点击到30多页后,直接报错out of memory,然后系统崩溃闪退。内存溢出的问题解决方向:监听事件,闭包,定时器,全局变量,dom变量引用没有清除等等
问题
1.设置了缓存。
我每一页获取后都存在缓存,在chorme测试,点击新的一页,占用内存都会上涨。【解决】后来我将缓存设置为6页的数据,超过就清除,在chrome的表现是,更新到6页以上后,内存不再上涨。
2.频繁操作DOM
这个问题找了很久,因为在chrome上测试一点问题没有。但是webview就是每点击下一页,占用内存都会涨。按照解决方向一个个测试以后,想都没想到是我频繁操作DOM节点的问题。我显示一页pdf是放在canvas上显示的。【原方案】更新canvas的方法是removeChild后,再createElement,appendChild到父节点。【解决】直接在旧的canvas结点,直接更新内容。最后解决了webview内存溢出的问题