W3C HTML5 KIG-Typed Arrays
3 likes1,059 views
This document discusses typed arrays, which provide an efficient way to handle binary data in the browser. Typed arrays allow passing binary data directly to APIs like WebGL through a typed view into an ArrayBuffer. This avoids inefficiencies of passing data through regular JavaScript arrays. The document covers creating and using typed array views, the DataView for heterogeneous data, browser and third-party APIs that utilize typed arrays, the history and design considerations behind typed arrays.
![Introduction
JavaScript Native
Single Value: 123 Value: 123
Value Type: integer
[0] Value: 123 [0]:123
[1] Type: integer [1]:123
[2] [2]:123
Value: 123
Values [3]
Type: integer [3]:123
in [4] [4]:123
[5] … [5]:123
Array … …
[n-2] Value: 123 [n-2]:123
[n-1] Type: integer [n-1]:123
4](https://image.slidesharecdn.com/html5kig-typedarrays-120918141315-phpapp01/85/W3C-HTML5-KIG-Typed-Arrays-4-320.jpg)
![References
[1] http://www.khronos.org/registry/typedarray/specs/latest/
[2] https://developer.mozilla.org/en/JavaScript_typed_arrays
[3] http://blogs.msdn.com/b/ie/archive/2011/12/01/working-
with-binary-data-using-typed-arrays.aspx
[4] http://weblog.bocoup.com/javascript-typed-arrays/
[5] http://blog.n01se.net/?p=248
[6] http://ie.microsoft.com/testdrive/HTML5/TypedArrays/
[7] TYPED ARRAYS: BINARY DATA IN THE BROWSER,
http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/
15](https://image.slidesharecdn.com/html5kig-typedarrays-120918141315-phpapp01/85/W3C-HTML5-KIG-Typed-Arrays-15-320.jpg)
W3C HTML5 KIG-Typed Arrays
- 1. Typed Arrays Binary Data in the Browser 2012.09.19, 동국대 멀티미디어공학과 이창환
- 2. Contents Introduction Basics of using Typed Arrays Browser APIs that use Typed Arrays Third-party libraries History of Typed Arrays Design considerations References 2
- 3. Introduction The need to have an efficient way to handle binary data in WebGL. A slab of memory with a typed view into it Like how arrays work in C. The JavaScript engine can pass the memory directly to native libraries Better than JavaScript arrays for passing data to WebGL and other APIs dealing with binary data. Typed array views Single-type arrays to a segment of an ArrayBuffer. Views for all the usual numeric types Float32Array, Float64Array, Int32Array and Uint8Array. Special view Uint8ClampedArray The pixel array type in Canvas's ImageData DataView Handling heterogeneous data. A get/set API to read and write arbitrary data types at arbitrary byte offsets. Reading and writing file headers and other such struct-like data. 3
- 4. Introduction JavaScript Native Single Value: 123 Value: 123 Value Type: integer [0] Value: 123 [0]:123 [1] Type: integer [1]:123 [2] [2]:123 Value: 123 Values [3] Type: integer [3]:123 in [4] [4]:123 [5] … [5]:123 Array … … [n-2] Value: 123 [n-2]:123 [n-1] Type: integer [n-1]:123 4
- 5. Basics of using Typed Arrays Typed array views DataView A discussion of endianness 5
- 6. Typed Array Views To use Typed Arrays Create an ArrayBuffer and a view to it 6
- 7. Typed Array Views Create an ArrayBuffer and views that point to it. Copy a typed array to another typed array set() method 7
- 8. DataView DataView to the buffer To use ArrayBuffers that contain data with heterogenous types Endian: optional littleEndian parameter 8
- 9. DataView Writing values to buffers 9
- 10. A Discussion of Endianness Endianness, or byte order big-endian: the most significant byte first little-endian: the least significant byte first. 10
- 11. Browser APIs that use Typed Arrays WebGL Canvas 2D XMLHttpRequest2 File APIs Transferable objects Media Source API Binary WebSockets 11
- 12. Third-party libraries jDataView stringencoding BitView.js DataStream.js 12
- 13. History of Typed Arrays Start in the early implementation stage of WebGL JavaScript arrays Native array Allocate a native array Fill it by walking over the JavaScript array Cast every JavaScript object in the array to the required native type. Mozilla's Vladimir Vukicevic CanvasFloatArray: a C-style float array with a JavaScript interface Renamed WebGLFloatArray Renamed Float32Array split into a backing ArrayBuffer and the typed Float32Array-view to access the buffer. Types were added for other integer and floating-point sizes and signed/unsigned variants. 13
- 14. Design considerations Design of Typed Arrays Need to efficiently pass binary data to native libraries. The typed array views operate upon aligned data in the host CPU’s native endianness. DataView Designed for file and network I/O The design split in-memory data assembly (using the typed array views) I/O (using DataView) Modern JavaScript engines Optimize the typed array views heavily Achieve high performance on numerical operations 14
- 15. References [1] http://www.khronos.org/registry/typedarray/specs/latest/ [2] https://developer.mozilla.org/en/JavaScript_typed_arrays [3] http://blogs.msdn.com/b/ie/archive/2011/12/01/working- with-binary-data-using-typed-arrays.aspx [4] http://weblog.bocoup.com/javascript-typed-arrays/ [5] http://blog.n01se.net/?p=248 [6] http://ie.microsoft.com/testdrive/HTML5/TypedArrays/ [7] TYPED ARRAYS: BINARY DATA IN THE BROWSER, http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/ 15