Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Applications and Architectures > Part 4 - TLS, Performance, More JS, and Progressive Web Apps > Flashcards

Part 4 - TLS, Performance, More JS, and Progressive Web Apps Flashcards

4th part of the course, Optimizing, new techniques, and a lil bit of security

1
Q

What is TLS?

A

Transport Layer Security
- Transport Layer: works on top of TCP/UDP
- Fully integrated with QUIC
- TLS is primarily used to secure data during transmission

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is HTTP inside of TLS is called?

A

HTTPS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How does TLS ensure identity?

A

With TLS I can ensure the server I’m connected to is the server I meant to connect to.
This is done with certificates.
A certificate works like an ID card.
The server sends a certificate with its domain name (called a “Common Name”) and a big number called a public key.
The certificate also includes other details, such as who made it, for example, “Bank Inc.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What does the certificate that the server sends (in TLS) have that is so crucial?

A

cryptographic signature

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are signed certificates?

A

The certificate’s signature is unique to that certificate.
If you change the public key or the domain name, the signature won’t match anymore.
The certificate’s signature also comes from a specific entity that made that signature.
It tells us who signed it, and only they could have produced that signature.
No one else can pretend to have signed the certificate, or the signature won’t match.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Explain how Cryptographic Signatures work

A

I make a private key and a public key as a part of a cryptographic signature algorithm.
I keep my private key secret, known only to me.
I give away my public key to the whole world so everyone knows it’s my public key.
I make signatures by combining my private key and some other information I want to sign. In this case its the banks domain name and the bank’s different public key.
You can check my signature by using my public key (which I already gave you) and combining it with the signature and information that’s been signed to check it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is Certificate Authority?

A

In an example with a bank,
A certificate authority uses their private key to sign the bank’s certificate.
The bank sends their certificate to you so you can check it.
You have the CA’s public key.
You combine it with the banks certificate.

I.E the person that uses their private key to sign the certificate

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the TLS handshake?

A

TCP Handshake
Client sends TLS “hello”
Server sends TLS “hello”
Client verifies server certificate
Client and server agree on an encryption key
Client sends encrypted “ready”
Server sends encrypted “ready”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are Cipher Suites

A

Client and server agree on crypto algorithm to use during handshake
Many different crypto algorithms are available

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

So then generally, how do we avoid security problems?

A

TLS everything
Make sure all traffic to/from your web app is running over TLS
Example: it may not help if only login is over TLS because an attacker can replace your TLS-encrypted login page with an unencrypted one by replacing the link on the unencrypted main site

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How do we avoid TLS security problems?

A

Keep software up to date
No Windows XP
Don’t communicate with out-of-date software
Example: if something on your site is meant to be secret, even one bad client can leak the secret!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

How is performance measured in web development

A

It is a non-functional requirement
measured as:
- Concurrency (# of requests or users at once)
- Latency (ms)
- Volume (requests/second)
- Bandwidth (bytes/second)
- Utilization (percent)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are the things we have to do before we optimize?

A

Make sure you have a performance problem.
Measure all of our performance metrics
record these #s
compare performance after changes
run tests

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are the techniques of optimization?

A

Caching
Reduce # of round trips
Reduce download size
Asynchronous communication

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How does Caching affect performance?

A

Caching increases locality
Content/data is closer to where it is needed
Locality increases available bandwidth
Locality decreases latency

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are the levels we can cache?

A

CPU
Memory (RAM)
Disk
Network

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are the levels of HTTP caching?

A

Browser cache (memory/disk)
Near reverse proxy cache server or CDN (Network)
Far reverse proxy cache server (Network, but higher latency and lower bandwidth)
Original server

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Browser Caching

A

Fastest
Force-refresh with control-shift-R
Browser manages balance between RAM and disk
Private windows typically won’t use disk at all

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the difference between tracking state and caching

A

Server tracking state and changing its response depending on state prevents effective caching
Authentication is a kind of state
→ Authentication prevents caching
Limit stateful and authenticated server content
Separate out content that needs to be stateful/authenticated from content that can be public and shared!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What should you avoid for static content?

A

Cookies and Auth

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is static content?

A

Static content = content that doesn’t change or rarely changes
Examples:
Images
CSS
Fonts
Scripts

22
Q

what should you use for static content

A

Use GET for static content
Use cache-busting: version number or hash in URL for static content

23
Q

What effect do round-trips have on latency?

A

Increase latency
Happen whenever you have to wait for a response before making the next request

24
Q

How do we reduce round trips?

A
  • Use HTTP/3: TCP is eliminated, TLS/HTTP requests can be done in fewer round trips
  • Use Fewer Servers –> look up fewer domains, make fewer connections
    use
  • use asynchronous loading
  • Avoid CSS imports, use JS ‘complier’ like webpack
  • Avoid HTTP redirects
25
Q

How do we reduce DNS round trips?

A

Avoid CNAME
Allow DNS Caching
Provide multiple A/AAAA records in a single response

26
Q

Why is async better than sync?

A

Other things can be processed or loaded while something is loading
Fewer requests are blocked
Synchronous adds a round trip for each request
Asynchronous = Parallelizable
Synchronous = Serialized

27
Q

How do we reduce request size?

A

Use HTTP/2 and HTTP/3
- Automatically applies header compression
- If headers don’t change, they won’t be re-sent!
- Lots of headers, big cookies and big URIs not a big deal!

28
Q

How do we minimize the resource size?

A

HTTP compression
image compression

29
Q

Why should we avoid POST?

A

POST is not idempotent
POST is not cacheable
POST is dynamic
POST adds lots of round trips

30
Q

How do errors affect performance?

A

403s, 404s, 410s, etc. are all slow
- Server often works harder to serve an error than serve content
- Errors not cached/cacheable
- cause logging overhead

31
Q

Why do we use ES modules?

A

At some point it became necessary to split js into multiple files
So now we use ES(ES6) modules

32
Q

How does node tell if something is an ES module

A

.mjs

33
Q

What extensions does node not recognize is an ES module, but actually is?

A

.esm or .esm.js

34
Q

What are common JS module?

A

frontend code that uses CommonJS
- Needs a library or bundler to work in browser

35
Q

What is an ES module?

A

Needs Node.js version 14 or better, supported natively in browser.
You can use “top-level await” that is, await outside of an async function
This delays loading until the promise resolves

36
Q

What are transpilers and bundlers?

A

They make JS load faster (possibly) by merging large trees of modules into single files
Support modern features on older browsers
Compile a variety of languages to JS

37
Q

What is tree shaking

A

Bundlers usually perform Tree-Shaking
Removing unused parts of modules and their dependencies

For example, say you exported a bunch of modules, but only used 2, all other exports would just get removed

38
Q

What are polyfillls?

A

Bundlers often also auto-add these
JS script that adds support for newer features not supported in older browsers

39
Q

What is the difference between a transpiler and a Polyfill?

A

Transpiler: runs before deployment during build
Polyfill: runs in the browser at runtime

40
Q

What does the spread operator do?

A

…
When used in arguments: takes an array and turns it into arguments
When used in parameters: takes the rest of the arguments passed in and turns it into an array
When used in an array: takes an array and inserts its contents into the array

*Maybe add examples here later

41
Q

What are progressive web apps?

A

Run on multiple platforms and devices from one codebase
Can run both as a website and a mobile app
Can even run on some refrigerators
Can perform tasks while main app is not running
Modern examples include Uber, Spotify, Google Maps, and Pinterest

42
Q

What are the parts of PWA

A

ServiceWorkers API
Installer script
ServiceWorker Script

43
Q

What is the service worker script

A

Loaded by HTML (directly or indirectly) script tag
Should be in all the main pages of the app
Uses the navigator.serviceWorker object, a ServiceWorkerContainer
Has access to the page and everything like a normal script

44
Q

What is a ServiceWorker?

A

Intended to improve performance of website/app
caching - different from HTTP cache
Event based
Works in the background- does not interrupt main app
Optional

45
Q

How does the ServiceWorker API work?

A

Basically everything returns promises
async / await is your friend!

46
Q

How does the ServiceWorker Script work?

A

Loaded by the browser after being registered by the installer script
Must be at the root of all the pages it’s going to work with
It includes sub-folders and pages in the same folder
Excludes other domains and other parent folders!

47
Q

How must the ServiceWorker script be loaded? How does it run? What can it access?

A

Must be loaded over HTTPS
Cannot access the page, window, and most JS APIs
console.log messages will not show up in the tab!
Runs in a separate thread

48
Q

In PWA, can objects be cloned?

A

Yes!
Objects that can be easily cloned
Similar to Python copy.deepcopy
Used for thread-to-thread Communication
- Web Workers
- Shared Workers
- Service Workers

49
Q

What can structured cloneable objects not have?

A

Functions
DOM Nodes
Complicated objects (e.g. made by a class)
Event

50
Q

Are serviceworker scripts always running?

A

Can (and will!) be killed by the browser whenever it feels like it
Use event.waitUntil() to ask browser for more time
They are not always running!

51
Q

When does the service worker script run?

A

Only runs when first registered and some events:
install - service worker is first installed
activate - service worker becomes the active service worker version
message - a tab (client) sent the serviceworker a message
fetch - page makes a fetch request
push… - Push API (Notifications)

Web Applications and Architectures (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions