-
Notifications
You must be signed in to change notification settings - Fork 56
/
s08-01-performance.html
408 lines (251 loc) · 8.26 KB
/
s08-01-performance.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
<!doctype html>
<html lang="sv">
<meta charset="utf-8" />
<title>websoft</title>
<!-- Mithril HTML Slideshow styles -->
<link href="css/mithril-slideshow.css" rel="stylesheet" />
<!-- Code formatting using highlight.js -->
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/tomorrow.css">
<script src="js/highlight.pack.js"></script>
<!-- Text formatting using Markdown through showdown.js -->
<script src="js/showdown.min.js"></script>
<!-- Here comes the slides in order -->
<script data-role="slide" data-markdown type="text/html">
# Software Development for the Web
## Web Performance
### Mikael Roos
</script>
<script data-role="slide" data-markdown type="text/html">
# Agenda
* General info
* Web Performance
* Exercise/Assignment
</script>
<script data-role="slide" data-markdown type="text/html">
# About project
* 2 e-shop (PHP)
* 3 IMDB (PHP/Node.js)
* 4 E-store (MERN)
* 3 Pinder (React/Node.js/MySQL)
= 12 st
</script>
<script data-role="slide" data-markdown type="text/html">
# About project
* 4 Restaurant web app (Node.js)
* 3 Paint game (PHP)
* 2 CV/Blog (React/Node.js/Express.js/Firebase)
* 3 Trading (Node.js/Firebas)
= 12 st
</script>
<script data-role="slide" data-markdown type="text/html">
# About project
* 1 node.js
* 2 face recognition/chat (React/Node/Firestone)
* 2 Image processing (JS)
* 3 Eshop (Node, Express, MySQL)
* 3 Chat (.NET C#, SQL)
* 2 Betting (Node, MySQL)
= 13+X st
</script>
<script data-role="slide" data-markdown type="text/html">
# About project
* 4 Retrofashion (Nodejs, MongoDB, Vue)
* X website (.NET, Node)
* 3 Todo (.NET, MySQL)
* 2 Dungeon and Dragon (Python, Apache, React)
* 2 Slack API data mining (Node.js, Express or php, Twig)
* 2 Q and A BBS (Node, MySQL)
* 2 Online store (Node, MySQL)
= 15+X st
</script>
<script data-role="slide" data-markdown type="text/html">
# About project...
* Firebase as backend database?
* Database as API service?
* All submissions are G
* Submit groupwise, add groupmembers on Canvas?
</script>
<script data-role="slide" data-markdown type="text/html">
# Submissons upcoming
* Project start (passed)
* A01-A09
* Oral/coding session
* Project
* Submit as group at end
* Attain project review + presentation
* A10 submit individually
* Final words on the course
* Lets check Canvas
</script>
<script data-role="slide" data-markdown type="text/html">
# Web performance
</script>
<script data-role="slide" data-markdown type="text/html">
# Performance in general
* Accuracy, efficiency and speed of executing computer program instructions.
</script>
<script data-role="slide" data-markdown type="text/html">
# Performance factors
* Short response time for a given piece of work
* High throughput
* Low utilization of computing resource(s)
* High availability of the computing system or application
* Fast data compression and decompression
* High bandwidth
* Short data transmission time
</script>
<script data-role="slide" data-markdown type="text/html">
# Performance areas
* Computer performance
* Application performance
* Cloud performance
* Network performance
</script>
<script data-role="slide" data-markdown type="text/html">
# Performance todo
* Performance analysis
* Performance tuning
* Software performance testing
</script>
<script data-role="slide" data-markdown type="text/html">
# Web performance
</script>
<script data-role="slide" data-markdown type="text/html">
# HTTP protocol
* HTTP/1, [HTTP/2](https://w3techs.com/technologies/details/ce-http2), HTTP/3
* Cookies, sessions
* JavaScript fetch/ajax
* Long polling fetch/ajax
* Websockets
</script>
<script data-role="slide" data-markdown type="text/html">
# Network
* Latency
* Bandwidth
* Mobile networks
</script>
<script data-role="slide" data-markdown type="text/html">
# CPU / Disk
* Server
* Backend requests, database
* Desktop, mobile, tablet
* CPU requries battery
</script>
<script data-role="slide" data-markdown type="text/html">
# Web browser requests
* Cookies, sessions
* Minifying
* Compress, gzip
* Bundle files
</script>
<script data-role="slide" data-markdown type="text/html">
# DOM rendering
* Write good HTML, CSS, JavaScript
* JavaScript versus CSS animation
* Web components
* Server- or clientside rendering
* Single Page Applications (SPA)
* Progessive Web Applications (PWA)
</script>
<script data-role="slide" data-markdown type="text/html">
# Images
* Fileformat
* Filesize
* Quality
* Resolution
* High pixel density screens
* Orientation / responsivness
</script>
<script data-role="slide" data-markdown type="text/html">
# HTML5 API
* Web workers
* Local storage/database
* Web assembly
</script>
<script data-role="slide" data-markdown type="text/html">
# Caching, fast delivery
* Content Delivery Network (CDN)
* Caching by server configuration
* Caching by browser
* Caching by application
</script>
<script data-role="slide" data-markdown type="text/html">
# Web performance why
* User experience -> money
* Use fewer resources -> money
* client, server
* files, data, bandwidth
* Be a good and sustainable developer -> money
* Money
</script>
<script data-role="slide" data-markdown type="text/html">
# Premature optimizations
> Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.
</script>
<script data-role="slide" data-markdown type="text/html">
# Analyse performance
* Lets learn by analysing a few web sites
</script>
<script data-role="slide" data-markdown type="text/html">
# Last words
* Questions on that?
</script>
<script data-role="slide" data-markdown type="text/html">
<!-- empty slide by intention -->
</script>
<!--
<script data-role="slide" data-markdown type="text/html">
# Performance analysis
* In software engineering, profiling is a form of dynamic program analysis that measures, for example, the space (memory) or time complexity of a program, the usage of particular instructions, or the frequency and duration of function calls. Most commonly, profiling information serves to aid program optimization.
</script>
<script data-role="slide" data-markdown type="text/html">
# Performance tuning
* Performance tuning is the improvement of system performance. Typically in computer systems, the motivation for such activity is called a performance problem, which can be either real or anticipated. Most systems will respond to increased load with some degree of decreasing performance. A system's ability to accept higher load is called scalability, and modifying a system to handle a higher load is synonymous to performance tuning.
</script>
<script data-role="slide" data-markdown type="text/html">
# Performance testing
* In software quality assurance, performance testing is in general a testing practice performed to determine how a system performs in terms of responsiveness and stability under a particular workload. It can also serve to investigate, measure, validate or verify other quality attributes of the system, such as scalability, reliability and resource usage.
</script>
<script data-role="slide" data-markdown type="text/html">
# Side note (perhaps security)
* Analyse Performance
* Google pagespeed
* What is heayv (img, page requests, image)
* Images
* Mobile
* http2
* optimizations of resources
* Bandwidth
* Cookies
* Sessions
* Authentication
* multi-factor authentication
* external authentication with Google, Twitter, and more.
* Single logon
* Web workers
* Local storage
* Local database
* Webapps (html, css, js) for mobile/native
* https://2019.stateofjs.com/features/browser-apis/
* https://2019.stateofjs.com/features/other-features/
* Webbsockets
* Web components
* Web assembly
* post forms
* express.js
* dotnet
* fetch
* sessions
* php
* node.js
* dotnet
* Sample SPA using fetch and webbsockets
* Mithril
* React
</script>
-->
<!-- include essential js-script -->
<script src="js/mithril.min.js"></script>
<script src="js/mithril-slideshow.js"></script>
</html>