Handlebar.js 컴파일 기능을 사용하여 메모리 누수가 발생했는지 궁금합니다.Handlebar.js IE9에서의 메모리 누수
현재 Ajax 호출을 통해 서버에서 주기적으로 데이터를 폴링하는 단일 페이지 응용 프로그램에서 작업하고 있습니다. 새로운 데이터를 얻을 때마다 뷰를 다시 렌더링합니다. (backbone.js를 handlbar.js와 함께 사용하고 있습니다. 뷰를 닫거나 다른 뷰로 전환 할 때 수동으로 뷰 객체를 해제해야한다는 것을 이해합니다. 적어도 여기서는 그렇지 않다고 생각합니다. 이 주제에 관해서는 http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/) < 링크를 참조하십시오. 나는이 접근 방식을 정확히 따르지는 않았지만 모든 이벤트와 데이터를 바인딩 해제하고 모든 참조를 제거하려고했습니다. "VAR 엘 = view.html (templateResult를);"
compileTemplate: function (view, data, templateSelector, ratio) {
var templateSource = $(templateSelector).html(),
template = Handlebars.compile(templateSource);
var el = view.html(templateResult);
}
것은 내가 주석 경우 여기
는 this.compileTemplate 기능은 다음과 같이 내 코드// 1. Remove all the old dom
// -- purge all objects
// -- remove dom
Helpers.Purge(this.el); //Purge function is copied from Douglas Crockford's blog
view.empty();
this.compileTemplate(view, viewData, this.model.get("Template"));
// 2. Append the new view
var thisDom = document.getElementsByClassName(this.className);
Helpers.Purge(thisDom);
$(thisDom).remove();
$article.append(this.el);
입니다 메모리 누출 문제가 발생하지 않습니다. 이 줄의 주석을 제거하면 IE 9 메모리 사용량이 증가하기 시작합니다. (나는 템플릿을 0.5 초마다 테스트 목적으로 다시 컴파일하도록 강요합니다.)
Handlbar.js에 알려진 메모리 누출 문제가 있는지 또는 내가 잘못하고있는 것이 있는지 알고 싶습니다.
대단히 감사합니다.
건배
새로운 업데이트 :
가 나는 문제를 분리했는데, 그냥 IE9에 메모리 누수의 원인이 handlebar.js되었는지 여부를 테스트 할 수있는 작은 프로그램을 썼습니다.
다음은 코드입니다.
(function ($) {
function render() {
var templateSource = $("#template").html();
var compileTemplate = Handlebars.compile(templateSource);
var data = {
users: [
{ username: "alan", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
{ username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" },
{ username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
]
};
console.log("before compiling");
var templateWithData = compileTemplate(data);
$("#content").html(templateWithData);
console.log("after compiling");
//this.el = templateWithData;
}
setInterval(render, 500);
})(jQuery);
는 그리고 HTML 코드는 여기에 있습니다 :
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="content">
</div>
<!-- JS -->
<script id="template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>
</table>
</script>
</body>
<script src="js/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/lib/handlebars-1.0.0.beta.6.js" type="text/javascript"></script>
<script src="js/complieTemplateWithoutBackbone.js" type="text/javascript"></script>
</html>
IE의 메모리가 그냥 등반 유지하고 아래로 이동하지 않습니다. 어떤 사람은 이것 좀 봐 주시겠습니까?
대단히 감사합니다.
건배