diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/webassembly/loading_and_running/index.html | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/es/webassembly/loading_and_running/index.html')
-rw-r--r-- | files/es/webassembly/loading_and_running/index.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/files/es/webassembly/loading_and_running/index.html b/files/es/webassembly/loading_and_running/index.html new file mode 100644 index 0000000000..6b98952ec3 --- /dev/null +++ b/files/es/webassembly/loading_and_running/index.html @@ -0,0 +1,111 @@ +--- +title: Loading and running WebAssembly code +slug: WebAssembly/Loading_and_running +tags: + - JavaScript + - Traer + - WebAssembly + - XMLHttpRequest + - bytecode +translation_of: WebAssembly/Loading_and_running +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary">Para utilizar WebAssembly en JavaScript, necesita primero jalar su módulo dentro de la memoria antes dela compilación/instanciación. Este artículo ofrece una referencia para mecanismos distintos que pueden traer el bytecode de WebAssembly, así como tener la forma de compilar/instanciarlo una vez que ya funciona.</p> + +<h2 id="¿Cuáles_son_las_opciones">¿Cuáles son las opciones?</h2> + +<p>WebAssembly no está integradon aún con la etiqueta <code><script type='module'></code> o con la directiva ES2015 <code>import</code>, así, no existe una forma para que el navegador busque sus módulos a partir de importaciones.</p> + +<p>Los métodos anteriores {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} requieren que se creen un {{domxref("ArrayBuffer")}} que contenga su módulo binario WebAssembly después de buscar los bytes sin procesar, y luego los compila/instancia. Estos es análogo a la <code>new Function(string)</code>, excepto que estamos sustituyendo una cadena de caracteres (código fuente JavaScript) con una memoria intermedia (arreglo) de bytes (código fuente de WebAssembly).</p> + +<p>Lo actual en métodos {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} es que son mucho más eficientes — desempeñan sus acciones directamente sobre flujos de bytes sin procesar (raw streams) originados en la red, suprimiendo la necesidad de tenerl el paso de {{domxref("ArrayBuffer")}}.</p> + +<p>La pregunta ¿cómo hacemos para tener esos bytes dentro de la memoria intermedia (arreglo) y compilarlos? En la siguiente sección lo explicamos.</p> + +<h2 id="Utilización_de_Fetch_Traer_a">Utilización de Fetch (Traer a)</h2> + +<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> es una API moderna y conveniente para traer recursos de la red.</p> + +<p>La manera más eficiente y rápida de traer un módulo wasm (WebAssembly Module) es utilizando el método actualizado {{jsxref("WebAssembly.instantiateStreaming()")}}, que puede generar una llamada al método <code>fetch()</code> como primer argumento y manejará la búsqueda, compilación e instanciación del módulo paso a paso, teniendo acceso a los bytes sin procesar mientras se transmiten (stream) del servidor:</p> + +<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(results => { + // Hacemos algo con el resultado aquí! +});</pre> + +<p>Si usamos el método anterior {{jsxref("WebAssembly.instantiate()")}} , que no trabaja sobre una transmisión (stream) directa, necesitaremos un paso adicional para convertir el byte code buscado a un {{domxref("ArrayBuffer")}}, como se muestra a continuación:</p> + +<pre class="brush: js notranslate">fetch('module.wasm').then(response => + response.arrayBuffer() +).then(bytes => + WebAssembly.instantiate(bytes, importObject) +).then(results => { + // Hacemos algo con el resultado aquí! +});</pre> + +<h3 id="Más_allá_de_las_sobrecargas_de_instantiate">Más allá de las sobrecargas de instantiate()</h3> + +<p>La función {{jsxref("WebAssembly.instantiate()")}} tiene dos formas de sobrecargar — la primera se muestra arriba, toma el byte code como argumento para compilar y regresa un compromiso de que resolverá un objeto que contenga tanto un módulo objeto compilado, como una instancia desarrollada de ello. El objeto se ve como lo siguiente:</p> + +<pre class="brush: js notranslate">{ + module : Module // El recién compilado objeto WebAssembly.Module, + instance : Instance // Una instancia nueva de WebAssembly.Instance del módulo}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Generalmente solo nos preocupamos de la instancia, pero resulta útil tener el módulo en caso de que querramos almacenarlo temporalmente (cache), compartirlo con otro proceso o ventana vía <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>, o simplemente crear mas instancias.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: La segunda forma de sobrecarga utiliza un objeto del tipo {{jsxref("WebAssembly.Module")}} como argumento y regresa un compromiso directo conteniendo la instancia del objeto como resultado. Vea el <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Segundo ejemplo de sobrecarga</a>.</p> +</div> + +<h3 id="Ejecutando_su_código_WebAssembly">Ejecutando su código WebAssembly </h3> + +<p>Una vez que se tiene disponible la instancia WebAssembly en su código JavaScript, puede entonces comenzar a utilizar las funcionalidades de éste, que han sido exportadas vía la propiedad {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}}. Su código podría verse como lo que a continuación mostramos:</p> + +<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject) +.then(obj => { + // Llamada a una función exportada: + obj.instance.exports.exported_func(); + + // o acceso al contenido de la memoria exportada: + var i32 = new Uint32Array(obj.instance.exports.memory.buffer); + + // o acceso a los elementos de una tabla exportada: + var table = obj.instance.exports.table; + console.log(table.get(0)()); +})</pre> + +<div class="note"> +<p><strong>Nota</strong>: Para mayor información sobre como funciona la exportación de módulos WebAssembly, debes leer <a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Utilización de la Interfaz (API) de WebAssembly JavaScript</a>, y <a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Entendiendo el formato de texto en WebAssembly</a>.</p> +</div> + +<h2 id="Utilizando_XMLHttpRequest">Utilizando XMLHttpRequest</h2> + +<p><code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> es de alguna forma más viejo que Fetch, pero se puede utilizar aún para obtener un arreglo de tipos. De nuevo, los pasos para utilizarlo, asumiendo que nuestro módulo se llama <code>simple.wasm</code>:</p> + +<ol> + <li>Crear una instancia nueva de {{domxref("XMLHttpRequest()")}} y utilizar su método {{domxref("XMLHttpRequest.open","open()")}} para abrir una petición, dejando el método de petición en <code>GET</code>, y declarando la ruta al alrchivo que queremos traer.</li> + <li>La parte clave de esto es poner el tipo de respuesta al uso de <code>'arraybuffer'</code> por medio de la propiedad {{domxref("XMLHttpRequest.responseType","responseType")}}.</li> + <li>Luego, enviar la petición utilizando {{domxref("XMLHttpRequest.send()")}}.</li> + <li>Cuando luego se utilice el manejador de evento {{domxref("XMLHttpRequest.onload", "onload")}} para invocar una función cuando la respuesta haya terminado de descargar — en esta función tomamos el arreglo de la propiedad {{domxref("XMLHttpRequest.response", "response")}} y luego lo mandamos a nuestro método {{jsxref("WebAssembly.instantiate()")}} como hicimos con Fetch.</li> +</ol> + +<p>El código final queda:</p> + +<pre class="brush: js notranslate">request = new XMLHttpRequest(); +request.open('GET', 'simple.wasm'); +request.responseType = 'arraybuffer'; +request.send(); + +request.onload = function() { + var bytes = request.response; + WebAssembly.instantiate(bytes, importObject).then(results => { + results.instance.exports.exported_func(); + }); +};</pre> + +<div class="note"> +<p><strong>Nota</strong>: Puede ver un ejemplo de esta acción en <a href="https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html">xhr-wasm.html</a>.</p> +</div> |