我想在我的 Metro 应用程序中播放一些 YouTube 视频。我使用 YouTube Iframe API(链接)在我的应用程序中嵌入了 YouTube 视频。然后我遇到了一个严重的内存泄漏问题。如果我嵌入一个 YouTube 视频然后删除它,内存将增加约 5MB,神经量将进一步减少。演示代码在这里:default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframeTest</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- iframeTest references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body style ="">
<button id="remove" style="display:block; float:left;">remove a video</button>
<button id="add" style="display:block; float:left;">add a video</button>
</body>
</html>
default.js 片段:
document.getElementById("remove").addEventListener("click", function () {
var ifrs = document.querySelectorAll('div');
if (ifrs.length > 0) {
document.body.removeChild(ifrs[ifrs.length - 1]);
}
});
document.getElementById("add").addEventListener("click", function(){
var testYoutubeDiv = document.createElement('div');
testYoutubeDiv.style.cssFloat = 'left';
testYoutubeDiv.style.width = '400px';
testYoutubeDiv.style.height = '300px';
MSApp.execUnsafeLocalFunction(function () {
testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>";
});
document.body.appendChild(testYoutubeDiv);
});
然后,我编写了一个类似的 .html 文件并在 IE10.0 和 Chrome 中进行测试。我发现 IE10.0 也有内存泄漏问题,但 chrome 没有。而且IE10.0的内存泄漏问题没有Metro App严重。测试html代码在这里:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframeTest</title>
<script type = "text/javascript">
function load() {
document.getElementById("remove").addEventListener("click", function () {
var ifrs = document.querySelectorAll('div');
if (ifrs.length > 0) {
document.body.removeChild(ifrs[ifrs.length - 1]);
}
});
document.getElementById("add").addEventListener("click", function () {
var testYoutubeDiv = document.createElement('div');
testYoutubeDiv.style.cssFloat = 'left';
testYoutubeDiv.style.width = '400px';
testYoutubeDiv.style.height = '300px';
testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>";
document.body.appendChild(testYoutubeDiv);
});
}
</script>
</head>
<body onload ="load()">
<button id="remove" style="display:block; float:right;">remove a video</button>
<button id="add" style="display:block; float:right;">add a video</button>
</body>
</html>
我注意到 IE(也许还有 Metro App)不使用 WebKit 引擎来处理 javascript 代码。有什么方法可以减少 Metro App 中的内存泄漏?