diff options
author | felipedeaquino <felipe.puziol@gmail.com> | 2022-01-07 18:45:30 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-01-07 18:45:30 -0300 |
commit | 028f1d6d22a99b5ef83aeb6a43bdceff6ce22e9d (patch) | |
tree | 0595a6a061d707c86f5e4d302de7a3accaa4f698 /files/pt-br | |
parent | f5d13922ac51161c0adfad728b85c89c4f5fbec9 (diff) | |
download | translated-content-028f1d6d22a99b5ef83aeb6a43bdceff6ce22e9d.tar.gz translated-content-028f1d6d22a99b5ef83aeb6a43bdceff6ce22e9d.tar.bz2 translated-content-028f1d6d22a99b5ef83aeb6a43bdceff6ce22e9d.zip |
Convert file contents to Markdown and fix missing image (#3140)
* Convert file contents to Markdown and fix missing image
* Update files/pt-br/web/javascript/eventloop/index.md
* Update files/pt-br/web/javascript/eventloop/index.md
Co-authored-by: Josiel Rocha <1158643+josielrocha@users.noreply.github.com>
Diffstat (limited to 'files/pt-br')
3 files changed, 154 insertions, 161 deletions
diff --git a/files/pt-br/web/javascript/eventloop/index.html b/files/pt-br/web/javascript/eventloop/index.html deleted file mode 100644 index 636ef47b95..0000000000 --- a/files/pt-br/web/javascript/eventloop/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Modelo de Concorrência e Event Loop -slug: Web/JavaScript/EventLoop -tags: - - Avançado - - Event Loop - - Event Management - - Event Queue - - Handling Events - - JavaScript - - events -translation_of: Web/JavaScript/EventLoop ---- -<div>{{JsSidebar("Advanced")}}</div> - -<p><span class="seoSummary">O JavaScript possui um modelo de concorrência baseado em um <strong>event loop</strong> (<a href="https://pt.wikipedia.org/wiki/La%C3%A7o_de_eventos">laço de eventos</a>, em português), responsável pela execução do código, coleta e processamento de eventos e execução de subtarefas enfileiradas.</span> Este modelo é bem diferente de outras linguagens, como C ou Java, por exemplo.</p> - -<h2 id="Conceitos_de_runtime_tempo_de_execução">Conceitos de runtime (tempo de execução)</h2> - -<p>Os próximos tópicos irão explicar teoricamente o modelo. Interpretadores modernos de JavaScript implementam e otimizam fortemente as semânticas descritas.</p> - -<h3 id="Representação_visual">Representação visual</h3> - -<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p> - -<h3 id="Pilha_Stack">Pilha (Stack)</h3> - -<p>As chamadas de funções criam uma pilha de <em>frames</em> (quadros).</p> - -<pre class="brush: js">function foo(b) { - var a = 10; - return a + b + 11; -} - -function bar(x) { - var y = 3; - return foo(x * y); -} - -console.log(bar(7)); //retorna 42 -</pre> - -<p>Quando chamamos a função <code>bar</code>, o primeiro <em>frame</em> é criado contendo argumentos e variáveis locais de <code>bar</code>. Quando a função <code>bar</code> chama <code>foo</code>, o segundo <em>frame</em> é criado e é colocado no topo da pilha contendo os argumentos e a variáveis locais de <code>foo</code>. Quando <code>foo</code> retorna, o <em>frame</em> do topo é removido da pilha (deixando apenas o <em>frame </em>da chamada de <code>bar</code>). Quando <code>bar</code> retorna, a pilha fica vazia.</p> - -<h3 id="Heap">Heap</h3> - -<p>Os objetos são alocados em um <em>heap </em>(acervo), que é apenas um nome para denotar uma grande região não estruturada da memória.</p> - -<h3 id="Fila_Queue">Fila (Queue)</h3> - -<p>O <em>runtime </em>do JavaScript contém uma fila de mensagens, que é uma lista de mensagens a serem processadas. Para cada mensagem, é associada uma função que é chamada para manipular a mensagem.</p> - -<p>Em algum ponto durante o {{anch("Event loop", "<em>event loop</em>")}}, o <em>runtime </em>começa a manipular as mensagens na fila, iniciando com a mais antiga. Para fazer isso, a mensagem é removida da fila e sua função correspondente é chamada junto com a mensagem. Como de costume, chamar uma função cria uma nova pilha de <em>frame</em> para o uso dessa função.</p> - -<p>O processamento de funções continua até que a pilha fique novamente vazia, então o <em>event loop</em> processará a próxima mensagem na fila (se houver uma).</p> - -<h2 id="Event_loop">Event loop</h2> - -<p><strong><em>Event loop</em></strong> tem esse nome por causa da forma que normalmente é implementado, geralmente é semelhante a:</p> - -<pre class="brush: js">while (queue.waitForMessage()) { - queue.processNextMessage(); -}</pre> - -<p><code>queue.waitForMessage</code> aguarda, de maneira síncrona, receber uma mensagem, se não houver nenhuma atualmente.</p> - -<h3 id="Run-to-completion">"Run-to-completion"</h3> - -<p>Cada mensagem é processada completamente antes de outra mensagem ser processada. Isso oferece um bom fundamento ao pensar sobre o seu software, incluindo o fato de que, independente de quando uma função é executada, ela não pode ser interrompida, ela será executada por completo, antes que outro código execute (e modifique dados que a função manipule). Isso é diferente do C, por exemplo, no qual uma função que está sendo executada em uma <em>thread</em>, pode ser interrompida a qualquer momento para executar um outro código em outra <em>thread</em>.</p> - -<p>O lado negativo deste modelo é que se uma mensagem levar muito tempo para ser finalizada, a aplicação web fica indisponível para processar as interações do usuário, como cliques ou rolagens. O navegador mitiga este problema através do aviso: "<em>Um script desta página pode estar ocupado</em>". Uma boa prática a seguir é fazer o processamento de mensagens curtas, e se possível, dividir uma mensagem em múltiplas mensagens.</p> - -<h3 id="Adicionando_mensagens">Adicionando mensagens</h3> - -<p>Nos navegadores, as mensagens são adicionadas a qualquer momento que um evento é acionado, se este possuir um "<em>listener</em>". Caso não possua, o evento será ignorado. Assim, um clique em um elemento com um manipulador de eventos de clique adicionará uma mensagem, igualmente como qualquer outro evento.</p> - -<p>A função <code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout">setTimeout</a></code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout"> </a>é chamada com 2 argumentos: uma mensagem para adicionar à fila (queue) e um valor em tempo (opcional, padrão é 0). O valor em tempo representa o intervalo (mínimo) com que a mensagem será realmente enviada a fila. Se não houver outra mensagem na fila, a mensagem será processada logo após o intervalo, no entanto, se houver mensagens, a mensagem <code>setTimeout</code> terá que esperar até que outras mensagens sejam finalizadas. Por esse motivo, o segundo argumento indica um tempo mínimo e não um tempo garantido.</p> - -<p>Aqui está um exemplo que demonstra esse conceito (<code>setTimeout</code> não é executado imediatamente após o temporizador expirar):</p> - -<pre class="brush: js">const s = new Date().getSeconds(); - -setTimeout(function() { - // imprime "2", o que significa que o callback não é chamado imediatamente após 500 milissegundos. - console.log("Ran after " + (new Date().getSeconds() - s) + " seconds"); -}, 500); - -while(true) { - if(new Date().getSeconds() - s >= 2) { - console.log("Good, looped for 2 seconds"); - break; - } -} -</pre> - -<h3 id="Intervalos_de_zero_segundos">Intervalos de zero segundos</h3> - -<p>O intervalo zero não significa, necessariamente, que o <em>callback</em> será disparado após zero milissegundos. Chamar {{domxref("WindowTimers.setTimeout", "setTimeout")}} com um intervalo de 0 (zero) milissegundos não executa a função do <em>callback </em>após dado intervalo.</p> - -<p>A execução depende do número de mensagens em espera na fila. No exemplo abaixo, a mensagem ''<em>this is just a message</em>'' será escrita no console antes que a mensagem do <em>callback</em> seja processada, isso acontece porque o intervalo definido na função indica o tempo mínimo necessário para que a aplicação processe a requisição, mas não é um tempo garantido.</p> - -<p>Basicamente, <code>setTimeout</code> precisa esperar que todo o código das mensagens enfileiradas seja concluído, mesmo que você tenha especificado um tempo limite específico para o seu <code>setTimeout</code>.</p> - -<pre class="brush: js">(function() { - - console.log('this is the start'); - - setTimeout(function cb() { - console.log('Callback 1: this is a msg from call back'); - }); // tem um valor de tempo padrão de 0 - - console.log('this is just a message'); - - setTimeout(function cb1() { - console.log('Callback 2: this is a msg from call back'); - }, 0); - - console.log('this is the end'); - -})(); - -// "this is the start" -// "this is just a message" -// "this is the end" -// "Callback 1: this is a msg from call back" -// "Callback 2: this is a msg from call back" -</pre> - -<h3 id="Múltiplos_runtimes_comunicando-se_em_conjunto">Múltiplos runtimes comunicando-se em conjunto</h3> - -<p>Um web worker ou um <code>iframe</code> com uma diferente origem (<a href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS">cross-origin</a>) tem as suas próprias pilhas, heaps e filas de messagens. Dois runtimes distintos só podem se comunicar por meio do envio de mensagens, via método <a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage"><code>postMessage</code></a>. Este método adiciona uma mensagem ao outro runtime, se este escutar os eventos de <code>message</code>.</p> - -<h2 id="Sem_bloqueio">Sem bloqueio</h2> - -<p>Uma propriedade muito interessante do modelo "<em>event loop</em>", é que o JavaScript, ao contrário de muitas outras linguagens, nunca bloqueia. A manipulação de E/S<em> </em>é tipicamente realizada através de eventos e <em>callbacks</em>, portanto, quando uma aplicação está esperando por um retorno de uma consulta do <a href="/pt-BR/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> ou o retorno de uma requisição <a href="/pt-BR/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XHR</a>, este ainda pode processar outras coisas, como as ações do usuário.</p> - -<p>Exceções de legado existem, como por exemplo, <code>alert</code> ou XHR síncrono, mas é considerado uma boa prática evitá-los. Tome cuidado, <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">exceções a exceção existem</a> (mas geralmente são, mais do que qualquer coisa, bugs de implementação).</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td><a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">Node.js Event Loop</a></td> - <td>Living Standard</td> - <td></td> - </tr> - </tbody> -</table> diff --git a/files/pt-br/web/javascript/eventloop/index.md b/files/pt-br/web/javascript/eventloop/index.md new file mode 100644 index 0000000000..3685c39587 --- /dev/null +++ b/files/pt-br/web/javascript/eventloop/index.md @@ -0,0 +1,153 @@ +--- +title: Modelo de Concorrência e Event Loop +slug: Web/JavaScript/EventLoop +tags: + - Avançado + - Event Loop + - Event Management + - Event Queue + - Handling Events + - JavaScript + - events +translation_of: Web/JavaScript/EventLoop +--- + +{{JsSidebar("Advanced")}} + +O JavaScript possui um modelo de concorrência baseado em um **event loop** ([laço de eventos](https://pt.wikipedia.org/wiki/La%C3%A7o_de_eventos)), em português), responsável pela execução do código, coleta e processamento de eventos e execução de subtarefas enfileiradas. Este modelo é bem diferente de outras linguagens, como C ou Java, por exemplo. + +## Conceitos de runtime (tempo de execução) + +Os próximos tópicos irão explicar teoricamente o modelo. Interpretadores modernos de JavaScript implementam e otimizam fortemente as semânticas descritas. + +### Representação visual + +![Stack, heap, queue](the_javascript_runtime_environment_example.svg) + +### Pilha (Stack) + +As chamadas de funções criam uma pilha de _frames_ (quadros). + +```js +function foo(b) { + let a = 10; + return a + b + 11; +} + +function bar(x) { + let y = 3; + return foo(x * y); +} + +const baz = bar(7); // atribui 42 a baz +``` + +Ordem das operações: + +1. Quando chamamos a função `bar`, o primeiro _frame_ é criado contendo argumentos e variáveis locais de `bar`. +2. Quando a função `bar` chama `foo`, o segundo _frame_ é criado e é colocado no topo da pilha, contendo os argumentos e as variáveis locais de `foo`. +3. Quando `foo` retorna, o _frame_ do topo é removido da pilha (deixando apenas o _frame_ da chamada de `bar`). +4. Quando `bar` retorna, a pilha fica vazia. + +Note que os argumentos e variáveis locais podem continuar existindo, pois são armazenados fora da pilha — de forma que podem ser acessados por quaisquer [funções aninhadas](/en-US/docs/Web/JavaScript/Guide/Functions#nested_functions_and_closures) muito depois de sua função externa ter retornado. + +### Acervo (Heap) + +Os objetos são alocados em um _heap_ (acervo), que é apenas um nome para denotar uma grande região não estruturada da memória. + +### Fila (Queue) + +O _runtime_ do JavaScript contém uma fila de mensagens, que é uma lista de mensagens a serem processadas. Cada mensagem é associada a uma função, que é chamada para lidar com a mensagem. + +Em algum ponto durante o [_event loop_ (laço de eventos)](#event_loop), o _runtime_ começa a manipular as mensagens na fila, começando pela mais antiga. Para fazer isso, a mensagem é removida da fila e sua função correspondente é chamada com a mensagem como um parâmetro de _input_ (entrada). Como de costume, chamar uma função cria um novo _frame_ (quadro) na pilha para uso dessa função. + +O processamento de funções continua até que a pilha fique novamente vazia, então o _event loop_ processará a próxima mensagem na fila (se houver uma). + +## Laço de Eventos (Event loop) + +O **_Event loop_** tem esse nome por causa da forma que normalmente é implementado, que se assemelha a: + +```js +while (queue.waitForMessage()) { + queue.processNextMessage(); +} +``` + +`queue.waitForMessage` aguarda, de maneira síncrona, receber uma mensagem (se não houver nenhuma já disponível esperando para ser tratada). + +### Processamento Completo ("Run-to-completion") + +Cada mensagem é processada completamente antes de outra mensagem ser processada. Isso oferece um bom fundamento ao pensar sobre o seu _software_, incluindo o fato de que, independente de quando uma função é executada, ela não pode ser interrompida e, portanto, será executada por completo antes que outro código rode (e modifique dados manipuláveis pela função). Isso é diferente do C, por exemplo, no qual uma função que está sendo executada em uma _thread_ (um fluxo de execução), pode ser interrompida a qualquer momento para executar um outro código em outra _thread_. + +Um aspecto negativo deste modelo é que se uma mensagem levar muito tempo para ser finalizada, a aplicação web ficará indisponível para processar as interações do usuário, como cliques ou rolagens. O navegador mitiga este problema através do aviso: "_Um script desta página pode estar ocupado, ou parou de responder_". Uma boa prática a seguir é fazer o processamento de mensagens curtas, e, se possível, dividir uma longa mensagem em múltiplas mensagens menores. + +### Adicionando mensagens + +Nos navegadores, as mensagens são adicionadas a qualquer momento que um evento é acionado se este possuir um _listener_ (ouvinte). Caso não haja, o evento será ignorado. Assim, um clique em um elemento com um manipulador de eventos de clique adicionará uma mensagem, como qualquer outro evento. + +A função [`setTimeout`](/en-US/docs/Web/API/WindowTimers.setTimeout) é chamada com 2 argumentos: uma mensagem para adicionar à fila (queue) e um valor em tempo (opcional, o padrão é `0`). O valor de tempo (_time value_) representa o intervalo (mínimo) com que a mensagem será realmente enviada à fila. Se não houver outra mensagem na fila, a mensagem será processada logo após o intervalo. No entanto, caso haja mensagens, a mensagem `setTimeout` terá que esperar até que outras mensagens sejam processadas. Por esse motivo, o segundo argumento indica um tempo _mínimo_ e não um tempo _garantido_. + +Aqui está um exemplo que demonstra esse conceito (`setTimeout` não é executado imediatamente após o temporizador expirar): + +```js +const s = new Date().getSeconds(); + +setTimeout(function () { + // imprime "2", o que significa que o callback não é chamado imediatamente após 500 milissegundos. + console.log("Ran after " + (new Date().getSeconds() - s) + " seconds"); +}, 500); + +while (true) { + if (new Date().getSeconds() - s >= 2) { + console.log("Good, looped for 2 seconds"); + break; + } +} +``` + +### Intervalos de zero segundos + +O intervalo zero não significa, necessariamente, que o _callback_ será disparado após zero milissegundos. Chamar [`setTimeout`](/en-US/docs/Web/API/setTimeout) com um intervalo de `0` (zero) milissegundos não executa a função do _callback_ após intervalo dado. + +A execução depende do número de mensagens em espera na fila. No exemplo abaixo, a mensagem `''this is just a message''` será escrita no console antes que a mensagem do _callback_ seja processada, porque, como informado previamente, o intervalo definido na função indica o tempo _mínimo_ necessário para que a aplicação processe a requisição e não o tempo _exato_ de processamento. + +Basicamente, `setTimeout` precisa esperar que todo o código das mensagens enfileiradas seja concluído, mesmo que você tenha especificado um tempo limite específico para o seu `setTimeout`. + +```js +(function () { + console.log("this is the start"); + + setTimeout(function cb() { + console.log("Callback 1: this is a msg from call back"); + }); // tem um valor de tempo padrão de 0 + + console.log("this is just a message"); + + setTimeout(function cb1() { + console.log("Callback 2: this is a msg from call back"); + }, 0); + + console.log("this is the end"); +})(); + +// "this is the start" +// "this is just a message" +// "this is the end" +// "Callback 1: this is a msg from call back" +// "Callback 2: this is a msg from call back" +``` + +### Múltiplos _runtimes_ comunicando-se em conjunto + +Um _web worker_ ou um `iframe` com uma diferente origem [(cross-origin)](/pt-BR/docs/Web/HTTP/CORS) tem seu próprio _stack_, _heap_ e _queue_ de messagens. Dois _runtimes_ distintos só podem se comunicar por meio do envio de mensagens via método [`postMessage`](/pt-BR/docs/Web/API/Window/postMessage). Este método adiciona uma mensagem ao outro _runtime_, se este escutar os eventos de `message`. + +## Sem bloqueio + +Uma propriedade muito interessante do modelo _event loop_ é que o JavaScript, ao contrário de muitas outras linguagens, nunca bloqueia. A manipulação de E/S (_I/O_) é tipicamente realizada através de eventos e _callbacks_. Portanto, quando uma aplicação está esperando pelo retorno de uma consulta do [IndexedDB](/en-US/docs/Web/API/IndexedDB_API) ou de uma requisição [XHR](/en-US/docs/Web/API/XMLHttpRequest), ela ainda pode processar outras coisas, como as ações do usuário. + +Exceções de legado existem, como por exemplo, `alert` ou XHR síncrono, mas é considerado uma boa prática evitá-los. Tome cuidado, [exceções a exceção existem](https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311) (mas geralmente são, mais do que qualquer coisa, _bugs_ de implementação). + +## Veja também + +- [Event loops no HTML standard](https://html.spec.whatwg.org/multipage/webappapis.html#event-loops) +- [Node.js Event Loop](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop) diff --git a/files/pt-br/web/javascript/eventloop/the_javascript_runtime_environment_example.svg b/files/pt-br/web/javascript/eventloop/the_javascript_runtime_environment_example.svg new file mode 100644 index 0000000000..1b57821636 --- /dev/null +++ b/files/pt-br/web/javascript/eventloop/the_javascript_runtime_environment_example.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="294.708" height="271.079" viewBox="0 0 77.975 71.723"><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cfe7f5;stroke:none" d="M5550 11500H1200V3500h8700v8000z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5550 11500H1200V3500h8700v8000H5550" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1200 3500h8701v8001H1200z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#0ff;stroke:none" d="M5550 11500H1200V9700h8700v1800z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5550 11500H1200V9700h8700v1800H5550" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1200 9700h8701v1801H1200z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#09f;stroke:none" d="M2250 9700H1200V3500h2100v6200z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M2250 9700H1200V3500h2100v6200H2250" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1200 3500h2101v6201H1200z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cfe7f5;stroke:none" d="M5549 11499H1199V3499h8700v8000z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5549 11499H1199V3499h8700v8000H5549" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1199 3499h8701v8001H1199z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><g style="stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><path style="fill:#0ff;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M5549 11499H1199v-1100h8700v1100z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M5549 11499H1199v-1100h8700v1100H5549" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1199 10399h8701v1101H1199z" transform="translate(-10.576 -31.118) scale(.00893)"/></g></g><g style="visibility:visible;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><g style="stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><path style="fill:#09f;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1999 10399h-800V3499h1600v6900z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1999 10399h-800V3499h1600v6900h-800" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1199 3499h1601v6901H1199z" transform="translate(-10.576 -31.118) scale(.00893)"/></g></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M7500 7000h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M7500 7000h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M7200 6400h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M6499 6299h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M6499 6299h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M6199 5699h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M7099 4799h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M7099 4799h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M6799 4199h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M5099 5199h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5099 5199h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M4799 4599h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M8699 6499h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M8699 6499h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M8399 5899h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M7899 8299h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M7899 8299h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M7599 7699h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M5399 8099h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5399 8099h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M5099 7499h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#ff950e;stroke:none" d="M1999 10299h-700v-800h1400v800z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 10299h-700v-800h1400v800h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 9499h1401v801H1299z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#ff950e;stroke:none" d="M1999 9399h-700v-800h1400v800z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 9399h-700v-800h1400v800h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 8599h1401v801H1299z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#ff950e;stroke:none" d="M1999 8499h-700v-800h1400v800z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 8499h-700v-800h1400v800h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 7699h1401v801H1299z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cc0;stroke:none" d="M1999 11399h-700v-900h1400v900z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 11399h-700v-900h1400v900h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 10499h1401v901H1299z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cc0;stroke:none" d="M3599 11399h-700v-900h1400v900z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M3599 11399h-700v-900h1400v900h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M2899 10499h1401v901H2899z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cc0;stroke:none" d="M5199 11399h-700v-900h1400v900z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5199 11399h-700v-900h1400v900h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M4499 10499h1401v901H4499z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#ff950e;stroke:none" d="M1999 8499h-700v-800h1400v800z" transform="translate(-10.594 -38.959) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 8499h-700v-800h1400v800h-700" transform="translate(-10.594 -38.959) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 7699h1401v801H1299z" transform="translate(-10.594 -38.959) scale(.00893)"/></g><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="57.178" y="182.058" transform="translate(-56.533 -176.993)"><tspan x="57.178" y="182.058" style="font-size:5.29166651px;line-height:1.38999999;stroke-width:.26458332">Stack</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="120.167" y="182.1" transform="translate(-56.533 -176.993)"><tspan x="120.167" y="182.1" style="font-size:5.29166651px;line-height:1.38999999;stroke-width:.26458332">Heap</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="117.418" y="244.809" transform="translate(-56.533 -176.993)"><tspan x="117.418" y="244.809" style="font-size:5.29166651px;line-height:1.38999999;stroke-width:.26458332">Queue</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.622" y="211.613" transform="translate(-56.533 -176.993)"><tspan x="58.622" y="211.613" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Frame</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.639" y="219.453" transform="translate(-56.533 -176.993)"><tspan x="58.639" y="219.453" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Frame</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.639" y="227.491" transform="translate(-56.533 -176.993)"><tspan x="58.639" y="227.491" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Frame</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.639" y="235.529" transform="translate(-56.533 -176.993)"><tspan x="58.639" y="235.529" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Frame</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.037" y="244.378" transform="translate(-56.533 -176.993)"><tspan x="58.037" y="244.378" style="font-size:2.82222223px;line-height:1.38999999;stroke-width:.26458332">Message</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="72.327" y="244.378" transform="translate(-56.533 -176.993)"><tspan x="72.327" y="244.378" style="font-size:2.82222223px;line-height:1.38999999;stroke-width:.26458332">Message</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="86.617" y="244.378" transform="translate(-56.533 -176.993)"><tspan x="86.617" y="244.378" style="font-size:2.82222223px;line-height:1.38999999;stroke-width:.26458332">Message</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="86.327" y="185.938" transform="translate(-56.533 -176.993)"><tspan x="86.327" y="185.938" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="104.189" y="182.366" transform="translate(-56.533 -176.993)"><tspan x="104.189" y="182.366" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="98.831" y="195.763" transform="translate(-56.533 -176.993)"><tspan x="98.831" y="195.763" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="118.479" y="197.549" transform="translate(-56.533 -176.993)"><tspan x="118.479" y="197.549" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="107.771" y="202.023" transform="translate(-56.533 -176.993)"><tspan x="107.771" y="202.023" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="111.334" y="213.625" transform="translate(-56.533 -176.993)"><tspan x="111.334" y="213.625" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="89.006" y="211.839" transform="translate(-56.533 -176.993)"><tspan x="89.006" y="211.839" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text></svg>
\ No newline at end of file |