Browser Computing Structure
1 like1,155 views
2014/1/25に開催されたFrontrend in FukuokaのBrowser Computing Structureのセッションの資料です。
![var family = [];
!
var child = {
age: 10
container: family
};
!
var parent = {
child: child,
container: family
};
!
family.push(child);
family.push(parent);](https://image.slidesharecdn.com/browser-computing-structure-140513215312-phpapp01/85/Browser-Computing-Structure-69-320.jpg)
Browser Computing Structure
- 1. Browser Computing Structure Frontrend in Fukuoka @1000ch
- 2. @1000ch
- 6. • テキストベースのWebサイト • コンテンツの更新は遷移が中心 • 装飾は<marquee>とか<blink>とか… 静的なWeb
- 12. パフォーマンスが 犠牲になりがち
- 15. ブラウザが 何をしているかを知る
- 21. データの要求とダウンロード URL HTML レンダーツリーのレイアウトとペイント ユーザーアクションの応答 クリックやスクロールのインタラクション ページが表示されてから 次の遷移までずっと
- 31. Keep 60FPS • FPS = Frames Per Second • ブラウザは1秒間に60回リフレッシュする • 60FPSを維持するには1フレームの処理を16.67ms に収める (16.67ms=1000ms / 60FPs) • 一般的に30FPS出ていれば滑らかである
- 32. ブラウザの処理 Load Script Render Paint Load Script Render
- 33. Load Script Render Paintder Paint Load Sc ブラウザの処理 16.67ms
- 39. ブラウザが 遅くなる原因を知る
- 41. Scriptが忙しいと… Load Script Render Paintder Paint Load 16.67msに収まらない
- 46. Garbage Collection? • JavaScriptでは、メモリの割当と解放がJavaScriptのエ ンジンによって自動で行われる。その仕組みがGarbage Collectionである • 最近の高水準言語にほとんど備わっている • いわばルンバのような存在 by @ahomu
- 48. Window A B D CE
- 50. GCの間はScriptが止まる Load Render Paintder Paint GC Load 16.67msに収まらない Script
- 55. メモリリーク • メモリ領域が圧迫されると必然的にブラウザの実行速度 は低下する • メモリの回収はページ遷移時か、Garbage Collectionの 実行により行われる • メモリリークの代表的な原因は…?
- 56. Understand memory leaks http://www.ibm.com/developerworks/web/library/wa-jsmemory/
- 59. function Timer() { this.timerId = setInterval(function() { console.log('This is timer log.'); }, 1000); } ! ! ! var timer = new Timer(); timer = null;
- 60. function Timer() { this.timerId = setInterval(function() { console.log('This is timer log.'); }, 1000); } ! ! ! var timer = new Timer(); timer = null; 呼び出し元を破棄しても タイマーが実行され続ける
- 61. function Timer() { this.timerId = setInterval(function() { console.log('This is timer log.'); }, 1000); this.stop = function() { clearInterval(this.timerId); }; } ! ! ! var timer = new Timer(); timer.stop(); timer = null;
- 62. function Timer() { this.timerId = setInterval(function() { console.log('This is timer log.'); }, 1000); this.stop = function() { clearInterval(this.timerId); }; } ! ! ! var timer = new Timer(); timer.stop(); timer = null; タイマーは ちゃんと止めること！
- 64. function Closure() { var value = 1000; return function() { return value; }; }
- 65. function Closure() { var value = 1000; return function() { return value; }; } valueは関数から 参照され続けてしまう
- 66. function Closure() { var value = 1000; return function() { var another = 2000; return another; }; }
- 67. function Closure() { var value = 1000; return function() { var another = 2000; return another; }; } valueは参照されなくなる のでGCに回収される
- 69. var family = []; ! var child = { age: 10 container: family }; ! var parent = { child: child, container: family }; ! family.push(child); family.push(parent);
- 70. var grandparent = { child: parent, container: family }; ! family.push(parent); 雪だるま式に増えるメモリ
- 71. A C B
- 76. var object = { foo: 1, bar: 2 }; console.log(object); object = null;
- 77. var object = { foo: 1, bar: 2 }; console.log(object); object = null; コンソールから参照され GCから回収されない
- 78. メモリとの仁義なき戦い • いくら最適化してもGCは自動で実行されてしま う。そのインパクトを如何に小さく出来るかが重要 • 特に気を使わなければいけないのはページ遷移をし ない、かつ滑らかさが重要な場合(シューティング ゲームとか) • Scriptから発生するLoadやRenderも忘れない
- 79. 最適化アプローチ
- 87. ArrayのforEach()よりforでループ アニメーションには requestAnimationFrame() “use strict”;を使う try/catch（例外の捕捉）は重い parseInt()より加減演 算でキャストする DOMの探索や操作は最小限に 短い関数の インライン化 eval()やwith()を使わない new Date()よ りdate.now() 評価順の工夫 正規表現のキャッシュ 重い 処理の非同期化(WebWorker) ArrayのforEach()よりfor でループ アニメーションにはrequestAnimationFrame() “use strict”;を使う try/catch（例外の捕捉）は重い parseInt()より加減演算でキャストする DOMの探索や操作 は最小限に 短い関数のインライン化 eval()やwith()を使 わない new Date()よりdate.now() 評価順の工夫 正規 表現のキャッシュ 重い処理の非同期化(WebWorker) etc…
- 89. Don't Guess it, Test it! - Paul Lewis
- 92. GCを避ける2つの手法
- 97. Object Pool Object Object Object Object オブジェクトの生成回数を 減らすアプローチ
- 100. Fast Property Access JITコンパイル時に静的なクラスを作成し JSのコードを動的に参照するのではなく 生成されたクラス(hidden class)を高速に参照する
- 101. Dynamic Machine Code Generation 1度実行したコードをマシンコードにコンパイルし 次回以降はキャッシュしたものを実行する (中間バイトコードもインタープリタも使わない)
- 102. クラスの定義があったら… function Point(x, y) { this.x = x; this.y = y; } JITコンパイル時にクラス の静的な実態を生成する function Point(x, y) { this.x = x; this.y = y; } Hidden Class var point = new Point(); 次からコンパイル済の クラスを参照するので高速
- 103. function Point(x, y) { this.x = x; this.y = y; } Point.name = 'Name'; Hidden Classを 再度生成してしまう Hidden Class 定義を途中で変更すると…Point.name = 'Name'; ブラウザが実行時に最適化したコードを なるべく変更しないようにする！
- 104. まとめ
- 109. Photo Credits • http://www.flickr.com/photos/66331098@N03/6041212579 • http://www.flickr.com/photos/danichro/7284517300 • http://www.flickr.com/photos/articnomad/16153058/ • http://www.flickr.com/photos/sfgirlbybay/2739327181/ • http://www.flickr.com/photos/30859306@N00/3331140550 • http://www.flickr.com/photos/45540741@N06/7365063522/ • http://www.flickr.com/photos/chrissinjo/5368405044 • http://www.flickr.com/photos/cloudy-day/5319042359 • http://www.flickr.com/photos/57490760@N04/7218896186