최신 웹 브라우저에서 지원하는 Typed Array의 개발 목적과 간단한 사용법을 소개한다.

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