Submit Search
Upload
javascriptのデータ構造の話
•
3 likes
•
3,603 views
Taketoshi 青野健利
Follow
javascriptのデータ構造の特徴・使い所・パフォーマンスの話
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 29
Download Now
Download to read offline
Recommended
Updates on webSpoon and other innovations from Hitachi R&D
Updates on webSpoon and other innovations from Hitachi R&D
Hiromu Hota
私はこうやってSlackを社内で流行らせました
私はこうやってSlackを社内で流行らせました
NHN テコラス株式会社
ServiceWorkerとES6 Modules時代のTypescript開発考察
ServiceWorkerとES6 Modules時代のTypescript開発考察
Taketoshi 青野健利
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパー
Taketoshi 青野健利
非同期javascriptの過去と未来
非同期javascriptの過去と未来
Taketoshi 青野健利
仮想DOMの実装とパフォーマンス
仮想DOMの実装とパフォーマンス
Taketoshi 青野健利
JavascriptのGC入門
JavascriptのGC入門
Taketoshi 青野健利
V8 Iginition Interpreter
V8 Iginition Interpreter
Taketoshi 青野健利
More Related Content
javascriptのデータ構造の話
1.
jjaavvaassccrriipptt DDaattaa SSttrruuccttuurreess
2.
: @brn (
a.k.a ) : : Cyberagent RightSegment AI Messenger : http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
3.
Why? javascript • •
•
4.
• => Array •
=> Object • => Object • Set => Object • Object Map Set => Map Set • Iterator => Object.keys • Object => WeakMap • Object => WeakMap • => TypedArray • => DataSet
5.
Array PPrrooss • • CCoonnss •
•
6.
Array javascript • •
•
7.
Object PPrrooss • • •
• CCoonnss •
8.
Object var likeArray = {length: 1, 0: 'a'} length
9.
Object • • length
10.
ArrayBuffer ArrayBufferView ArrayBuffer TypedArray
DataView view TypedArray Uint**Array Int**Array Unsigned Signed 8 32 DataView View
11.
const u32Arr =
new Uint32Array(new ArrayBuffer(1024));! // ArrayBufferの第一引数はバイト数、実際の要素数はViewのバイト数で割った数 // 32bitなら1024 / 4で256要素格納可能 u32Arr[0] = 1; // ここでは0byteオフセット byteLength = 0 && length = 0! u32Arr[1] = 1; // ここでは4byteオフセット byteLength = 4 && length = 1! ! const dv = new DataView(new ArrayBuffer(1024));! dv.setUint8(2, 1); // Uint8の値を2byteオフセットの位置に書き込む! dv.setInt32(0, 1); // Int32の値を4byteオフセットの位置に書き込む
12.
ArrayBuffer ArrayBufferView • •
( )
13.
Map Java Map PPrrooss •
• iterator CCoonnss • •
14.
Map • •
15.
Set Java Set Map
PPrrooss • • iterator CCoonnss • •
16.
Set • •
17.
WeakMap GC PPrrooss • •
CCoonnss • •
18.
WeakMap •
19.
WeakSet WeakMap Set
20.
Be better … Javascript
Object Object javascript
21.
// より防御的なデータ構造 Object.freeze({}); //
webのマナーではないれども... Object.defineProperty(arr, 'length', {! writable: false,! value: arr.length! }); // lengthを固定!
22.
Abstraction ☓ data.something = 100; // ○ data.setSomething(100); // ○ interface Data {something: number} // typescript
23.
Performance javascript
24.
Performance TypedArray Firefox Safari
Chrome IE/Edge
25.
0 10 20 30 40 50 60 70 80 90 100 Chrom Safari Firefox Edge Performance 100% (2017/06/06) http://jsben.ch/#/hohWB
26.
Performance • Map •
Map WeakMap • • Safari • Edge
27.
Result • => Array •
=> Object • => Object • Set => Object • Object Map Set => Map Set • Iterator => Object.keys • Object => WeakMap • Object => WeakMap • => TypedArray • => DataSet
28.
Summary …
Download Now