Parfois méconnu des dé developpeurs 주니어, l'Object poolest un 스폰서 de concept fréquemment utilis é lorsqu'on manipule un grand nombre d'instances.
정치적 언어에 독립하고 자유로운 기회.Que vous soyez dé developpeur Web, Mobile, ou Que vous luttiez tous les jours contre un langage de bas niveau,ce 디자인 모델 s'adresse á vous!😉

Qu'est-ce quel'대상자 풀 디자인 모델?

개념 후원자는 대량의 실례를 이용하여 휴식을 취한다.Le concept est simple:au liue de laisser notre programme détruire nos objets lorsqu'ils ne sont plus utiles,on les place dans une réserve d'instance:la pool.
Ainsi,dès que notre application auraánouveau besoin d'une instance de mème type,au liu d'en créer une,il suffira simplement d'en piocher une dans notre pool.이것은 파는 것이다.

강가 Rappel sur la gestion⚙️

원칙

Tout au long de son exécution, 유엔 프로젝트 manipule toute sorted d'Objet et de structure de données plus ou moins complex.Pour créer une nouvelle instance,il effectue une allocation mémoire,c'est-dire qu'il réserve une certaine quantite de mémoire en RAM afin d'y stocker les informations relativeánotre objet.
Lorsqu'une instance n'est plus nécessaire,le program libère l'espace mémoire précédemment réservée,et détruit notre instance,c'est ce que l'on appelle la libération mémoire.

관례대로

Selon les langages,la gestion de la mémoire est une t–che plus ou moins aisée.Ceux qui bénéficient d'une expérience en C/C++(ou autre langage bas niveau),connaisent les couldingés liéesála gestion de la mémoire e.Jongler entre les pointeurs et les adreses mémoire n'est pas aussi amount qu'on le voudrait.
Toutefois,la gestion de la mémoire est d'un enjeu committee.당신은 mauvaise gestion de celle ci peut entra îner des dé sagréments allant du simple crash, a la faile de sé curité, en passant par la perte de perte de performance et Une myriade fuites-mé moire를 통해 할 수 있습니다.🤯
C'est pourquoi les langages haut niveau(not JavaScript fait parti),imponent généralement un systemème limitant les possibilityés du dévelopeur en matière d'allocation mémoire.안녕히 계세요. 안녕히 계세요.Ainsi nous pouvons concenter tous nos effects sur la logique propreánotre application,et nonáson fonctionnement subsidiaire.
Enfin,il est toujours bon de rappeler que le garage collector ne peut niêtre invoquéexplicitement(comme j'ai parfois entendu certains déeveloppeurs le esser),niêtre controlêléd'une quelconque façon que ce soit.나는 이것이 사법 실천에 영향을 미칠 수 있다고 생각한다.이것은 우리의 정의다.

L'Object Pool 디자인 모드et le Javascript

peuts'interroger sur les bén é fices apport és par l'Object pool에 관하여.사실 쓰레기 수집기는 분배 메모리와 방출 메모리를 차지하는데, 이것은sont에 notressort를 더한 것이다.Pourquoi s'encomber avec un tel systemème?
Et puis: "Jusque lá,mes는 toujours bien fonctionnés에 적용"
증서
저는 faut garder á l'esprit que l'allocation mé moire et la libération ne sont pas des opérations anodines입니다.Elles peuventètre relativement coèteuses en fonction du nombre et de la complexitédes instancesácréer ou a détruire.
Diminuer le coút de fonctionnement de notre 응용 프로그램은 회수제 nos 실례에 있을 수 있습니다.
Au Liue de laisser le garbage collector les détruire,on conserve une référence de ces instances dans un pool d'instances.Ainsi,elles sont toujours considérées comme actives par le Garage collector,mais temporairement non Utilision es au sein de notre programme.
✔️ 자유경제에 관한 분위기.
Lorsqu'une 실례 du même type sera requise,plut ôt d'en cr éer une nouvelle,on r é cup è rera l'instance recycl é dans notre pool d'instance.
✔️ auraé economisé une 분배에 관하여 mé moire.

Mise en 상황

세계 과립물

분사 시스템 개발 지원:
Des particules appraissent sur un found noir avec une position et une couluer aléatoire toutes les 200ms.찰크 입자vit 근사치 1000ms.Lorsqu'on déplacera la souris,un nuage de particule suivra le curseur.너의 인상을 십자가에 쓰러뜨리고 자잘한 사석 위에 놓아라.

let particles = [];
const maxTtl = 50;

    class Particle {
        constructor(x, y, r, g, b) {
            this.initialize(x, y, r, g, b);
        }               

        initialize(x, y, r, g, b) {
            this.x = x || 0;
            this.y = y || 0;
            this.ttl = maxTtl;
            this.rgb = [
                r || 255, 
                g || 255, 
                b || 255 
            ];
        }

        live() {
            this.wiggle();
            this.ttl--;
        }

        /**
        * Retourne l'index de notre particule dans une matrice de pixels en fonction de sa position (x, y)
        */
        getOffset() {
            return (Math.ceil(this.y) * image.width + Math.ceil(this.x)) * 4;
        }

        /**
        * @image {ImageData} Matrice de pixels sur lesquels faire le rendu
        */
        draw(image) {
            const offset = this.getOffset();

            // 4 channels : r, g, b, a 
            image.data[offset] = this.rgb[0]; 
            image.data[offset + 1] = this.rgb[1];
            image.data[offset + 2] = this.rgb[2];
            image.data[offset + 3] = 255 * (this.ttl / maxTtl);
        }

        wiggle() {
            this.x += Math.random() * 4 - 2;
            this.y += Math.random() * 4 - 2;
       }

       isAlive() {
           return this.ttl > 0;
       }
}

우리는 작은 알갱이의 성분을 팔고 있다.
lui-m è me에 대한 Concernant le system è me, gé rera l'appreation de particles gr – ce á un intervalle:

function clamp(value) {
    return Math.ceil(Math.max(Math.min(value, 255), 0));
}

function spread(x, y, r, g, b) {
    // On crée une particule à l'emplacement désiré
    particles.push(new Particle(x, y));

    // On ajoute un nuage de particules tout autour pour un meilleur rendu
    for(var i = 0; i < 10; i++) {
        particles.push(
            new Particle(
                x + Math.random() * 10 - 5, 
                y + Math.random() * 10 - 5,
                clamp(r + Math.random() * 10 - 5),
                clamp(g + Math.random() * 10 - 5),
                clamp(b + Math.random() * 10 - 5)
            )
        );
    }
}

// boucle gérant l'apparition aléatoire de particules
setInterval(function() {
    for (let i = 0; i < 1500; ++i) {
        spread(
            // position aléatoire
            Math.ceil(Math.random() * context.width),
            Math.ceil(Math.random() * context.height),

            // couleur aléatoire
            Math.ceil(Math.random() * 255),                        
            Math.ceil(Math.random() * 255),                        
            Math.ceil(Math.random() * 255)    
        );
    }                  
}, 200);

// boucle simulant la "vie" d'une particule
setInterval(function() {
    particles.forEach(function(particle) {
        particle.live();
    });
}, 20);

boucle d'animation, elle ne présente pas un intér êt majeur danscet 예시.Néanmoins,si vousêtes curieux:

function clearImage(image) {
    const nbSample = image.width * image.height;
    const data = image.data;
    for (let i = 0; i < nbSample; i++) {
        const offset = i * 4;
        data[offset] = 0;
        data[offset + 1] = 0;
        data[offset + 2] = 0;
        data[offset + 3] = 0;
    }
}

function animation() {
    let nbParticlesAlive = 0;

    clearImage(image);

    particles.forEach(function(particle) {
        particle.draw(image);

        if (particle.isAlive()) {
            nbParticlesAlive++;
        }
    });

    const nextParticles = new Array(nbParticlesAlive);
    let currentParticleIndex = 0;

    particles.forEach(function(particle) {
        if (particle.isAlive()) {
            nextParticles[currentParticleIndex] = particle;
            currentParticleIndex++;
        }
    });

    // La variable particles fait désormais référence à nextParticle
    // -> le garbage collector pourra supprimer l'ancien tableau (quand ça lui chantera)
    particles = nextParticles;
    context.putImageData(image, 0, 0);

    window.requestAnimationFrame(animation);
}

animation();

간단한 방법으로 테스트에서vient l'heure du test를 사용할 수 있습니다.

에서 분사 기능에 관한 시스템.Notre animation tourneá60 FPS.🏆
L'Utilization de requestAnimationFrame limitant notre fréquence maximaleáenviron 60 FPS,nous obtenons le meilleur résultat possible.학급
Après quelques는 d'euphorie et d'auto-축하, essaie de jouer avec notre 스크립트, Augmentle nombre de particules et on diminue leur duré de vie에 관한 내용을 첨부했습니다.스위트룸을 자랑하다.

Le nombre de FPS s'effondre.La boucle d'animation est durement touchée,le nombre de wiggles par seconds a lui aussi quasimentétédivisépar 2.Pourtant le cycle de vie de nos particules était indé pendant de la boucle d'animation, et r é pondait á un intervalle, 평론이 가능합니까?
Notre Program est tellent ralentique le navigateur“repousse”leur execution.Pourtant,la durée de vie de nos particles se basant sur un timestamp,une des conéquence directes de ce ralentissement est que les particles se déplacefront moins au cours de leur vie et formeront des sortes de pétés multicolors.

댓글 해석 cette perte de performance?

En augmentant le nombre d'instances affichées,on aégalement augmente le nombre d'allocations mémoires,et donc la libération mémoire lorsque celles ci meurent.쓰레기 수집기 덤핑 해방자, 러더드 드 비비, 에서
유엔 쿠데타의 oeil sur l'analyseur de performance confortera notre hypothèse.

대상 탱크 설계 모델의 실현

Puisque c'est ainsi,implémentons un pool de particles and voyons si le pattern tient sa promesse.

class ParticlesPool {
    constructor() {
        this.instances = [];
        this.index = -1;
    }

    getOne(x, y, r, g, b, born_at) {
        let instance = null;
        if (this.index >= 0) {
            instance = this.instances[this.index];
            instance.initialize(x, y, r, g, b, born_at);
            this.index--;
        }

        else {
            instance = new Particle(x, y, r, g, b, born_at);
        }

        return instance;
    }

    recycle(instance) {
        this.instances[this.index + 1] = instance;
        this.index++;
    }
}   


const pool = new ParticlesPool();

Puis on adapte notre code pour l'User.Les 수정 seront simplissimes:

Remplacer tous les appels au constructur de Particle parmalloc.

Ajoter un appelápool.getOne()lorsqu'une particula meurt afin déviter la fuite mémoire.

// ...

function spread(x, y, r, g, b, born_at) {
    particles.push(pool.getOne(x, y, r, g, b, born_at));
    for(var i = 0; i < window.additionnalSpreadParticles; i++) {
        particles.push(
            pool.getOne(
               // ...
            )
        );
    }
}

 // ...

function animation() {

    // ...

    particles.forEach(function(particle) {
        if (particle.isAlive(currentTime)) {
            particle.draw(image);
            nbParticlesAlive++;
        }

        else {
            pool.recycle(particle);
        }
    });

    // ...
}

Et c'est tout!
relance notre 응용 프로그램 정보:

constate un에서 10 프레임/초 획득!🚀
Le nombre de wiggle est lui aussi plusélevé.쓰레기 수집기 요금,celle ci devient tout de suite plus 수용 가능.

사후 분석

n'atteint pas encore les 60 FPS,certes에서.Mais, il ne faut pas oublier que le but fondamental de notre application est de faire une animation graphique! 이것은 매우 재미있는 예입니다!En augmentant le nombre d'Objets á dessiner, notre boucle de rendu voit naturellements a 전하 증강기.L'Object pool 디자인 도안 ne peux rien pour cela.
Des Optimizations au niveau de la logique de rendu existing,et feront peutêtre l'objet d'un autre article.수량은 lorsqu'on recalcule la liste des particules envie가 아닌 페트 앙코르 l'amé liorer에 대한 제스처입니다.

결론

L'implementation d'un Object Pool 디자인 모델peut avoir un effet bén é fique sur les performances de votre 응용 프로그램.En gérant judiciaeusement la mémoire,vous pouvez augmenter le nombre de resources manipulables par votre application.Dans notre를 예로 들면, augmenter le nombre de particules affichables simultane ément, l'a rendue plus ré siliente.💪

Boná savoir 밴드

avec les autres langages 대응

Cet 글/과정 se focalise sur les avantages que peut avoirce pattern pour le JavaScript.n'y abortde pas du tout la problé matique lié a fragmentation de la mémoire, qui mérite au moins notre curiosité에 관하여.Pour en apprendre plus áce sujet, je vous invite á lirecet excellent article(C++/영어).

응용 분야

Comme nous ne dédeveloppons pas un systemèmeáparticles tous les jours,voici d'autres examples d'utilizations:

Les jeux vidéos:on instancie toute sorted d'objetsádurée de vie limitée.

Le traitement d'image et la 3D:pour tout ce qui est calcul,équation mathématique,gestion des resources.

Coupl é un Singleton, on le retrouve r é guliè rement comme un service gérant les connections á une couche tierce,cache,connexions base de données,pool de workers 등

Ce 모드est particuli èrement adaptéquand:

Vous devez instancier un grand nombre d'objets Complements.

La durée de vie de ses objets est courte.

Le nombre d'Objets는 시뮬레이션이 필요합니다.

Le mot de la fin 회사

Voici qui clôt mon premier article(qui prend un peu des aspects de cours)!🤓
Je sais qu'il est un peu long, le sujet est tellement 조밀한 qu'il mérite bien은ces lignes를 치켜세운다.N'hésitez pasáme faire remonter vos remarques afin d'améliorer la qualitéde mes articles!
D'ailleurs,si vous avez Déjárencontrés ce 디자인 모델,ou qu'il vous a sauvé la vie,je vous include a partager votre expérience dans les commentaries.😃