Question

我有一个基本网站系统，它使用ajax加载内容而不刷新页面。我有一个游戏页面，通过ajax json加载许多html5游戏链接，当我点击任何游戏时，它将加载显示为弹出的游戏源文件。我很奇怪，当我点击关闭按钮停止游戏，然后我删除源文件游戏的元素。它会释放记忆吗？正如我所注意到的那样，broswer似乎越来越慢。任何人都有这方面的经验，请与我分享。

注意：我需要一些建议才能删除元素并释放内存。

例如：

<div id="pop-up">
<a id="close" href="#">Close Button</a>
<div id="inner-pop-up">
    <script src="game sources" type="text/javascript"></script>
    <script src="game sources" type="text/javascript"></script>
    <script src="game sources" type="text/javascript"></script>
    <div id="game">
        <canvas></canvas>
       </div>
   </div>
</div>
$('#pop-up').modal('view', {
    speed: 750,
    close: '.close-favourite',
    easing: 'easeOutBounce',
    animation: 'top',
    position: 'center',
    overlayClose: true
});
$('#close').on('click', function() {
    $('#inner-pop-up').children().remove();
});

Answer 1

释放脚本函数使用的任何资源的唯一真正方法是添加一个JavaScript文件，该文件基本上为您指定的脚本文件可能定义的每个可能的对象和函数（函数都是对象）调用delete window.myFunction。 对我而言，由于显而易见的原因，这是一个非常糟糕的主意。

请注意，这些对象将是脚本（窗口）对象，因此您无法使用.remove()删除这些对象。

我还要注意，您应该使用$('#inner-pop-up').empty();而不是$('#inner-pop-up').children().remove();，因为这样会删除元素的文本（如果有的话），并且特别是先从这些元素中删除数据和事件处理程序从DOM中删除。

您可能希望在此处删除脚本中某些非常具体的函数和对象，但只有脚本的内容才能说明。如果你创建的全局窗口对象变得非常混乱。

请注意，确定脚本文件创建的内容并将其删除非常困难。

要证明一个点打开您最喜欢的浏览器控制台并执行该脚本中的$("script").remove().内容仍然运行。

Answer 2

例如：这是我的游戏文件，其中包含像

这样的对象

FootballChallenge.Game = function (game) {
    FootballChallenge._scoreText = null;
    FootballChallenge._score = 0;
    FootballChallenge.kickBoard;
    this._preventClick = true;
    FootballChallenge.kaboomGroup;
    FootballChallenge.ball;
    FootballChallenge.shoe;
    FootballChallenge.self;
};

FootballChallenge.Game.prototype = {  

create: function () {       
    FootballChallenge.self = this.game;
    this.game.physics.startSystem(Phaser.Physics.ARCADE);       
    this.game.physics.arcade.checkCollision.up = false;

    this.bg = this.game.add.image(this.game.world.centerX, this.game.world.centerY, 'field');
    this.bg.anchor.setTo(0.5);

    FootballChallenge.kickBoard =  this.game.add.sprite(10, 20, 'kickBoard');       
    FootballChallenge._scoreText = this.game.add.bitmapText(0, FootballChallenge.kickBoard.height/2 + 20, 'white-font', ''+FootballChallenge._score+'', 32);        
    FootballChallenge._scoreText.align = 'center';      
    FootballChallenge._scoreText.x = (FootballChallenge.kickBoard.width-FootballChallenge._scoreText.width + 20)/2;     

    FootballChallenge.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 100, 'ball');
    this.game.physics.arcade.enable(FootballChallenge.ball);
    FootballChallenge.ball.anchor.setTo(0.5);
    FootballChallenge.ball.scale.setTo(0.5);        
    FootballChallenge.ball.body.collideWorldBounds = true;
    FootballChallenge.ball.body.gravity.y = 0;
    FootballChallenge.ball.body.bounce.setTo(1);

    FootballChallenge.shoe = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'shoe');
    this.game.physics.arcade.enable(FootballChallenge.shoe);
    FootballChallenge.shoe.anchor.setTo(0.5);
    FootballChallenge.shoe.scale.setTo(0.5);
    FootballChallenge.shoe.body.setSize(130,50,0,20);       
    FootballChallenge.shoe.body.collideWorldBounds = true;      

    FootballChallenge.kaboomGroup = this.game.add.group();
    FootballChallenge.kaboomGroup.createMultiple(10, 'kaboom');
    FootballChallenge.kaboomGroup.forEach(this.explosion, this);        

    this.play();        
},

explosion: function(kick) {
    kick.anchor.x = 0.7;
    kick.anchor.y = 0.5;
    kick.animations.add('kaboom');
},

play: function() {
    this.bitmask = this.game.make.bitmapData(this.game.width, this.game.height);
    this.bitmask.fill(50,50,50);        
    this.mask = this.game.add.sprite(0, 0, this.bitmask);
    this.mask.tint = 0x000000;
    this.mask.alpha = 0.6;
    this.game.paused = true;        
    var pausedText = this.game.add.bitmapText(this.game.world.centerX, this.game.world.centerY - 200, 'white-font', 'click anywhere to begin!', 32);    
    pausedText.align = 'center';
    pausedText.tint = 0xff0e25;
    pausedText.anchor.setTo(0.5);       
    this.game.input.onDown.add(function(){          
        pausedText.destroy();           
        this.game.paused = false;
        this.mask.alpha = 0;
        FootballChallenge.ball.body.gravity.y = 1500;           
        this.game.canvas.style.cursor = "none";
    }, this);
},

countScore: function(ball, shoe) {      
    ball.body.velocity.y = -1000;
    ball.body.gravity.x = FootballChallenge.self.rnd.integerInRange(-80, 80);
    FootballChallenge._scoreText.setText(FootballChallenge._score +=1);
    FootballChallenge._scoreText.x = (FootballChallenge.kickBoard.width-FootballChallenge._scoreText.width + 20)/2;

    var boom = FootballChallenge.kaboomGroup.getFirstExists(false);
    boom.reset(shoe.x, shoe.y);
    boom.play('kaboom', 40, false, true);

},

lose: function() {      
    this.game.state.start('EndGame');       
},

update: function() {
    if(FootballChallenge.ball.y >= this.game.height - 100) {
        FootballChallenge.ball.body.gravity = false;
        this.game.time.events.add(Phaser.Timer.SECOND * 0.2, this.lose, this);          
    }
    this.game.physics.arcade.collide(FootballChallenge.ball, FootballChallenge.shoe, this.countScore);
    this.game.physics.arcade.moveToPointer(FootballChallenge.shoe, 30, this.game.input.activePointer, 50);        
}

};

性能jQuery Ajax加载游戏源显示为模态

2 个答案: