防止在另一个窗口内收集垃圾(来自帖子消息)

时间:2018-09-24 07:55:42

标签: javascript garbage-collection window.open

因此,我已经阅读了一些有关对象分配的信息。对此,请随意对我负责,但是,当您分配了一个对象并对其进行引用时,不应删除该对象,对吗?

目标:假设我使用消息通道获取列表,并且列表中的每个项目都是使用window.open方法具有以下内容的项目,然后每秒发送24次发布消息:

{
texture:{index:randomNumber,width:randomNumber,height:randomNumber},
transform: {x:randomNumber,y:randomNumber,rotation:randomNumber0-360}
} 

在主线程和子线程上都没有这些对象,并且在使用其中的对象完成对它们的处理后,当前都将其清除。有什么方法可以创建对象池以确保不会发生垃圾回收? -目标陈述结束

这是我当前用来渲染对象的窗口内的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game</title>
</head>
<body>

<div id= "wrapper" class ="wrapper">
    <canvas  id="canvas" width="3840" height="2160" draggable="true"></canvas>
</div>


<style>


    .wrapper {
        position: relative;
        width: auto;
        height: 100%;
    }
    .wrapper   canvas {
        position: absolute;
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 100%;
        min-width: 1000px;
        height: auto;

    }

    .GUI{
        top: -315px;
        left: -302px;
        position: absolute;
        width: 300px;
        height: 300px;
        background-color: cadetblue;
        opacity: .5;
        word-wrap: break-word;

    }

    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }


</style>

<div id = GUI class = "GUI"></div>
<script src="../HTML-Thread/ImageResource.js"></script>
<script src="../HTML-Thread/background.js"></script>
<script src="../myapi/utils.js"></script>
<script src ="../HTML-Thread/GUI/GUI-functionBox.js"></script>
<script src="../HTML-Thread/GUI/GUI-Control.js"></script>
<script src=" ../HTML-Thread/GUI/PlanetUiCode.js"></script>
<script src="../HTML-Thread/GUI/GameObjectUiCode.js"></script>
<script src = "../myapi/indexedDB/IDBfunctions.js"></script>
<script src ="../HTML-Thread/mainThreadFunctions.js"></script>
<script src="../myapi/engine/BaseVCharacter.js"></script>
<script src="../myapi/engine/BaseGameObject.js"></script>
<script src="../myapi/indexedDB/IDBfunctions.js"></script>
<script src="../myapi/indexedDB/IDBMain.js"></script>




<script>

    window.document.getElementById("canvas").getContext("2d").canvas.addEventListener("click",onClick);


window.onbeforeunload = function(){
  window.opener.postMessage({Procedure:"onClose",guiOwnerCode:window.guiOwner.guiOwnerCode})
};
    //TODO: Create canvas/canvases here instead of third.html

    window.imageArray = [];
    var cameraFocus = {x:0,y:0,rotation:0}
        ,mapWidth = 10000000,mapHeight = 10000000,
        imageIndexArray = [], myImageResource = new ImageResource(),objectPool = [];

        myImageResource.loadAllTextures(function () {onImagesLoaded();});



    function onImagesLoaded () {
        //when images are loaded build a conversion for images via 'buildImageArray', send message to main js thread to start
        buildImageArray(myImageResource,window.imageArray,imageIndexArray);



    let canvasCtx = document.getElementById("canvas").getContext("2d");

            window.renderScale = .09;
window.guiOwner = {transform:{x:0,y:0,rotation:0}};




window.onmessage = function (event) {
    let message = event.data;
    if(message.Procedure ==="guiUserUpdate"){
        window.guiOwner = Object.assign(window.guiOwner,message.guiOwner);
        cameraFocus.x = window.guiOwner.transform.x;
        cameraFocus.y = window.guiOwner.transform.y;

    }else if(message.Procedure ==="sendObjectsToRender"){
        //for auto scaling the canvas
        canvasCtx.canvas.width=window.innerWidth;
        canvasCtx.canvas.height=window.innerHeight;
        // Clear the whole context and reset the canvas
        canvasCtx.clearRect(0, 0, ( canvasCtx.canvas.width )/ 2, ( canvasCtx.canvas.height) / 2);
        canvasCtx.setTransform(1, 0, 0, 1, 0, 0);
        // Scroll the canvas so that the middle of the screen is the coordinate origin
        canvasCtx.translate(( canvasCtx.canvas.width )/ 2 , ( canvasCtx.canvas.height) / 2 );
        // And scroll it so that the camera focus is in the middle
        canvasCtx.translate(-cameraFocus.x * window.renderScale,
            cameraFocus.y * window.renderScale);
        drawBackground(canvasCtx,window.renderScale,window.imageArray,window.imageIndexArray,window.mapWidth,window.mapHeight);
        let array = message.gameObjects;
        for (let i =0;i<array.length;i++){
            objectPool[i]= array[i];
            renderGameObject(objectPool[i])
        }


        // For Click evt TODO: Make sep-function for these
    }else if(message.Procedure ==="buildGameObjectClickBox"){
        let gameObject = message.gameObject;
        if(clickBox.objectType!== undefined){
            GUI.removeChild(clickBox.objectType);
        }

        buildGameObjectClickBox(clickBox,window.guiOwner,gameObject,0,500,500,500)
    }else if(message.Procedure==="buildPlanetClickBox"){
        let gameObject = message.gameObject;
        if(clickBox.planettype!== undefined){
            GUI.removeChild(clickBox.planettype);
        }
        buildPlanetClickBox(clickBox,window.guiOwner,gameObject,500,1200,500,500)
    }
};







    function renderGameObject(gameObject) {
        let pIndex = gameObject.texture.index;
        let img = imageIndexArray[pIndex];
        let x = gameObject.transform.x * window.renderScale;
        let y = -(gameObject.transform.y * window.renderScale);
        let rotation = Math.radians(gameObject.transform.rotation);
        let width = gameObject.transform.width;
        width *= window.renderScale;
        let height = gameObject.texture.height;
        height *= window.renderScale;
        // Render the gameObject
        canvasCtx.translate(x, y);
        canvasCtx.rotate(rotation);
        canvasCtx.drawImage(img, 0, 0, width / window.renderScale, height / window.renderScale,  // Make sure the image is not cropped
            -width/2 ,         // X
            -height/2 ,        // Y
            width, height);     // width and height
        canvasCtx.rotate(-rotation);
        canvasCtx.translate(-x, -y);
        // Render all of its children
        for (let childKey in gameObject.fixedGameObjects) {
            renderGameObject(gameObject.fixedGameObjects[childKey]);
        }
    }
    }
</script>


</body>
</html>

问题:完全清楚,我遇到的问题是垃圾收集器正在超时工作并删除所有对象,而我想重用它们。这不是张贴消息,不会使管道阻塞,但可以正常工作,但是,我们的好垃圾人每隔几秒钟就会占用您的车道10个小时,以清除您日用的杂货。

我尝试过的事情:我尝试附加一个数组来引用全局引入的新数组,但是可能是我必须引用单个对象。我试图遍历列表中的所有对象,并将它们附加到全局数组中,然后使用该全局数组渲染对象(以表明它们仍在使用中),但是这仍然会让人非常失望。

注意: 如果要在使用数组缓冲区时引用我,我将使您知道我需要将这些对象发送到多个子线程。如果可以使用数组缓冲区,那我想知道它是如何完成的,因为我和大多数网络都不知道如何使用数组缓冲区,因为所提供的信息有限并且使用完全不同的结构而不是简单地创建并发送数组。

主线程上的代码只是一个for循环,它收集“ main object” / guiOwner范围内的对象,然后将这些对象在数组中循环后发送到窗口,然后在它们被删除时删除该数组。已发送。

0 个答案:

没有答案