Performance of front-end framework

1. DEMYSTIFYING
FRONTEND FRAMEWORK
PERFORMANCE
EVAN YOU

2. Author of Vue.js
@yyx990803
@youyuxi

3. Page
Loading
Client
Initial
Render
Client
Hot
Update
Raw
JS Perf

4. Page
Loading
Client
Initial
Render
Client
Hot
Update
Raw
JS Perf
Has to do with
Frameworks

5. How do we measure
Framework performance?

6. Benchmarks!

7. TodoMVC Benchmark

8. DBMonster

9. js-framework-benchmark

10. Always Take Benchmarks
With a Grain of Salt

11. Implementation
Inaccuracy

12. Implementation Inaccuracy
● Development vs. Production mode
● Not applying framework-specific
optimizations
● Unintentional errors

13. True Story:
React vs. Vue

15. Performance is
Scenario-dependent

16. Most Benchmarks
Reflect Only Limited Aspects
of Relevant Performance.

17. Initial Loading
vs.
Hot Updates
(Size plays an important role in this too)

18. Big Updates
vs.
Small Updates

19. List Juggling
vs.
Complex Component Trees
(where the latter is often more critical in real apps)

20. Update Strategies

21. DOM
Watcher
Watcher
Watcher
Dirty Checking
Angular
State
$digest
Perf characteristics:
bound by the cost of watcher computations

22. Dependency Tracking
Knockout / Vue 1.x
a
setter
getter
b
Watcher
a.b
Collect
Dependencies
Bindings
DOM
Notify
Update
Notify
Perf characteristics:
Efficient for small updates / more initialization cost

23. Virtual DOM
React etc.
Perf characteristics:
Bound by render/diff costs of dirty sub tree
New Virtual DOM Tree
DOM
Old Virtual DOM Tree
diff + patch
Render
Function

24. Virtual DOM
React etc.
setState()
Perf characteristics:
Bound by render/diff costs of dirty sub tree

25. Virtual DOM + Dependency Tracking
Vue 2.0, React + MobX
Watcher
track
dependencies
Perf characteristics:
Balanced update efficiency / Auto-optimized

26. Often Overlooked:
Ease of Optimization

27. How much work is needed
from the developer
To fully optimize an app?
http://elm-lang.org/blog/blazing-fast-html-round-two#ease-of-optimization

28. List update hint: key / track by
1 2 3
1 2 4 3

29. shouldComponentUpdate (React)
onPush (Angular 2)
Cons:
● Manual implementation (React)
● May break when child components rely on external
state
skip

30. Immutable Data Everywhere +
Single State Tree
Pros:
Simpler shouldComponentUpdate
Cons:
● Immutable data in JavaScript isn’t as smooth as in real
functional languages
● Component local state can still be useful sometimes

31. Virtual DOM + Dependency Tracking
(Vue 2.0)
Pros:
Optimized updates out of the box
Cons:
Small initialization/bookkeeping cost
Watcher
track
dependencies

32. Elm
Simple lazy check thanks to immutability and
pure function guarantee.
Pros/Cons:
You get/need to use Elm.
lazy

33. Web Workers
Move expensive JavaScript computations off the main
thread.
Pros:
More responsive interactions
Cons:
Marginal gains with increased development complexity

34. TAKEAWAYS

35. Take benchmarks
with a grain of salt
(read the code, run it yourself)

36. Have a big-picture understanding
of the merits of
Different rendering mechanisms.

37. Identify the perf priorities of
YOUR APP.

38. Build & bench prototypes that
reflect your app’s perf priorities.

39. THANKS!
@youyuxi