Stevie W And the Quest for 60 fps Stevie W Well thats embarrassing - - PowerPoint PPT Presentation

▶
stevie w
SMART_READER_LITE
LIVE PREVIEW

Stevie W And the Quest for 60 fps Stevie W Well thats embarrassing - - PowerPoint PPT Presentation

Oct 10, 2022 334 likes •1.91k views

Stevie W And the Quest for 60 fps Stevie W Well thats embarrassing I should optimise it No I dont have time Ill do it afuer the talk I dont know how Thanks for coming to my tek talk about svelte huh... That was helpful

slide-1
SLIDE 1

Stevie W

And the Quest for 60 fps

slide-2
SLIDE 2

Stevie W

slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11

Well that’s embarrassing

slide-12
SLIDE 12

I should

  • ptimise it
slide-13
SLIDE 13

No

slide-14
SLIDE 14

I don’t have time

slide-15
SLIDE 15

I’ll do it afuer the talk

slide-16
SLIDE 16
slide-17
SLIDE 17

I don’t know how

slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20

Thanks for coming to my tek talk about svelte

slide-21
SLIDE 21
slide-22
SLIDE 22

huh...

slide-23
SLIDE 23

That was helpful

slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26

Thanks for coming to my tek talk about web

  • ptimisation
slide-27
SLIDE 27
slide-28
SLIDE 28

huh...

slide-29
SLIDE 29

That was helpful

slide-30
SLIDE 30

Thanks guys your talks were really helpful

slide-31
SLIDE 31
slide-32
SLIDE 32

It’s time

slide-33
SLIDE 33

The Plan

slide-34
SLIDE 34

The Plan

  • 1. Reimplement the app in Svelte
slide-35
SLIDE 35

The Plan

  • 1. Reimplement the app in Svelte
  • 2. ...
slide-36
SLIDE 36

The Plan

  • 1. Reimplement the app in Svelte
  • 2. ...
  • 3. Profit!
slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39

Writing Compiling Downloading Running

slide-40
SLIDE 40

Writing Compiling Downloading Running

slide-41
SLIDE 41

Sounds perfect

slide-42
SLIDE 42
slide-43
SLIDE 43

Results

slide-44
SLIDE 44
slide-45
SLIDE 45

Well that’s embarrassing

slide-46
SLIDE 46

1.9 fps

slide-47
SLIDE 47

WTF?

slide-48
SLIDE 48

Where Those Fps?

slide-49
SLIDE 49
slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53

Component

slide-54
SLIDE 54
slide-55
SLIDE 55

stockLevelStore

  • utOfStockStore

value === 0

slide-56
SLIDE 56
slide-57
SLIDE 57
slide-58
SLIDE 58
slide-59
SLIDE 59
slide-60
SLIDE 60
slide-61
SLIDE 61
slide-62
SLIDE 62
slide-63
SLIDE 63

Deriving Top-Down

slide-64
SLIDE 64
slide-65
SLIDE 65

Deriving Bottom-Up

slide-66
SLIDE 66
slide-67
SLIDE 67
slide-68
SLIDE 68
slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71
slide-72
SLIDE 72
slide-73
SLIDE 73
slide-74
SLIDE 74
slide-75
SLIDE 75

Top-Down

slide-76
SLIDE 76

Top-Down

Bottom-Up

slide-77
SLIDE 77

Results

slide-78
SLIDE 78

23.3 fps!

slide-79
SLIDE 79
slide-80
SLIDE 80
slide-81
SLIDE 81
slide-82
SLIDE 82
slide-83
SLIDE 83

CAVE OF HTML RENDERING OPTIMISATION

slide-84
SLIDE 84

CAVE OF HTML RENDERING OPTIMISATION

slide-85
SLIDE 85
slide-86
SLIDE 86

Unnecessary html layout

slide-87
SLIDE 87
slide-88
SLIDE 88
slide-89
SLIDE 89
slide-90
SLIDE 90

1 X

Clear Flag

slide-91
SLIDE 91
slide-92
SLIDE 92
slide-93
SLIDE 93

1 X

Clear Flag

slide-94
SLIDE 94

1 1 X

Clear Flag

X

slide-95
SLIDE 95

Unnecessary html layout

slide-96
SLIDE 96

Results

slide-97
SLIDE 97

36.5 fps!

slide-98
SLIDE 98
slide-99
SLIDE 99
slide-100
SLIDE 100
slide-101
SLIDE 101

Unnecessary PAINT COMPLEXITY

slide-102
SLIDE 102
slide-103
SLIDE 103
slide-104
SLIDE 104

800 * 800 px

slide-105
SLIDE 105

800 * 800 px 60x per sec

slide-106
SLIDE 106

800 * 800 px 60x per sec 30,000 steps

slide-107
SLIDE 107

1 . D

  • a

r t 2 . … 3 . p r

  • fi

t !

slide-108
SLIDE 108
slide-109
SLIDE 109
slide-110
SLIDE 110
slide-111
SLIDE 111

1

slide-112
SLIDE 112

1 1

slide-113
SLIDE 113

1 1

slide-114
SLIDE 114

Unnecessary PAINT COMPLEXITY

OOF

slide-115
SLIDE 115

Results

slide-116
SLIDE 116

50.1 fps!

slide-117
SLIDE 117
slide-118
SLIDE 118
slide-119
SLIDE 119
slide-120
SLIDE 120
slide-121
SLIDE 121
slide-122
SLIDE 122
slide-123
SLIDE 123

Unnecessary PAINT COMPLEXITY

slide-124
SLIDE 124

Results

slide-125
SLIDE 125

60 fps!

slide-126
SLIDE 126
slide-127
SLIDE 127
slide-128
SLIDE 128
slide-129
SLIDE 129

CAVE OF HTML RENDERING OPTIMISATION

*Yeet*

slide-130
SLIDE 130
slide-131
SLIDE 131

The end

Thanks

slide-132
SLIDE 132

The end

Thanks

slide-133
SLIDE 133

The end

Thanks

Steven we have a situation over here

slide-134
SLIDE 134

Does it work in firefox?

slide-135
SLIDE 135
slide-136
SLIDE 136

30 fps...

slide-137
SLIDE 137

No

slide-138
SLIDE 138

Does it have to?

slide-139
SLIDE 139

Yes please

slide-140
SLIDE 140

If you could that’d be gr8

slide-141
SLIDE 141
slide-142
SLIDE 142

CAVE OF HTML RENDERING OPTIMISATION

*Yeet*

slide-143
SLIDE 143
slide-144
SLIDE 144
slide-145
SLIDE 145

You could always just use HTML5 canvas and then you get full control

slide-146
SLIDE 146

EVIL UNICORN OF having to use HTML5 CANVAS for cross-browser compatibility

slide-147
SLIDE 147
slide-148
SLIDE 148

EVIL UNICORN OF having to use HTML5 CANVAS for cross-browser compatibility

slide-149
SLIDE 149

EVIL UNICORN OF having to use HTML5 CANVAS for cross-browser compatibility

slide-150
SLIDE 150

Results

slide-151
SLIDE 151

60 fps!

slide-152
SLIDE 152
slide-153
SLIDE 153

Does it work in firefox?

slide-154
SLIDE 154

Yes!

slide-155
SLIDE 155
slide-156
SLIDE 156

The End

Read the blog post Try it yourself:

  • ptimisation.StevenWaterman.uk

GitHub @StevenWaterman Twitter @SteWaterman Website StevenWaterman.uk

P.S. Look up The Hero’s Journey