Brainscape's Knowledge GenomeTM

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


See full index

SENG365 > Modules, DOM and Performance (Week 9) > Flashcards

Modules, DOM and Performance (Week 9) Flashcards

1
Q

What does a SPA usually consist of?

A

JS and HTML templates.

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

Critically, the ‘preferred form’ of working with SPAs is not a good format for downloading what?

A

Many small files

Data that is not needed at runtime (ie, good function names)

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

What is bundling?

A

process of taking the preferred form of Web code/content and putting it into the preferred form for a browser to consume

Analogous to compiling a C or Java program

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

In terms of bundling, what does a browser/user prefer?

A

✔️ Fewer network requests (fewer files)
✔️ Smaller network requests
✔️ Parallel network requests
✔️ No network requests at all (caching)

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

Explain the ‘fewer files’ aspect of simple bundling

A

Concatenate all required *.js files to one big file

Do the same for *.css files

Tools like Gulp and Grunt follow this basic pattern

Sweep up a bunch of files without knowing about file content

Perform some transform on them to generate (fewer) output files

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

Explain the ‘smaller files’ aspect of simple bundling

A

Browsers don’t care about JS function names (much)

We do care about data sent over the network though

Enter UglifyJS

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

What does UglifyJS do to code?

A

Code is name mangled, some optimizations are applied

Mangling can only be applied when we are sure that all instances of the name are renamed

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

What is UglifyJS and its purpose/benefits?

✨✨✨

A

UglifyJS is a JavaScript <strong>parser/compressor/beautifier toolkit </strong>.

It can be used to combine and minify JavaScript assets so that they require <strong>less HTTP requests</strong> and make your <strong>site load faster</strong>.

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

In terms of UglifyJS, what is used to aid in debugging?

A

sourcemaps can be created

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

When using UglifyJS on code to reduce the size of files, what does the browser load?

A

mangled code + sourcemaps and the dev tools presents the code as it originally was –> Invaluable for debugging production issues

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

What are some examples of things that cannot be mangled in UglifyJS?

A

String constants (const SOME_VALUE = “Your string”;),

object keys

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

What is Webpack and why use it?

✨✨✨

A

<strong>Webpack is a tool that lets you compile JavaScript modules</strong>, also known as module bundler.

Given a large number of files, it <strong>generates a single file (or a few files) that run your app</strong>.

It can perform many operations: helps you bundle your resources.

Allows you to use require() for CSS files.

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

What are the current best practice to bundle code?

A

Webpack (rollup/parcel) and other bundlers

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

What is Webpack configured with?

A

1) Where to find input files

2) Where to start from (app entry point)

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

What will Webpack recursively follow? Explain.

A

Webpack will recursively follow <strong>imports</strong>

  • Import -> import foo from “module_name”
  • Export -> export foo = 42;
  • Only the files that are <strong>used get pulled into the final output</strong>
  • <strong>Unused (dead) code can be removed</strong>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What will Webpack outputs be like?

A

something like main.9789bf1740765e50e459.js

This file is ~10Mb of JS

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

What is the solution to not using the whole app and not wanting to download 10Mb of scripts to use your app?

A

Lazy loading

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

Explain the technique of lazy loading

A
  • Break your SPA into logical chunks, eg
  • -> Login (likely the main chunk)
  • -> Settings
  • Only download the chunks you need
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

When is lazy loading triggered?

A

on router changes e.g. /login, /settings

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

What must agree and on what for lazy loading?

A

The framework and the bundler need to agree on how to split the import graph, usually done with bundler plugins.

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

Using Gzip compression, what does 10Mb go to?

A

1.47Mb –> 6.6. x smaller

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

How does the browser signal that it can handle compressed content?

A

with a request header:

accept-encoding: gzip, deflate, br

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

How does the server respond to the request header of ‘accept-encoding: gzip, deflate, br’?

✨✨✨

A

Informs the browser in the response with another header:

content-encoding: gzip

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

Give an example of the caching header for content that expires on a specific date

A

expires: Wed, 08 May 2019 04:54:20 GMT

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

Give an example of the caching header for content that expires periodically

A

cache-control:max-age=7200

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

Give an example of the caching header for content cannot be cached

A

cache-control:no-cache

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

Explain Etag caching.

What is a key benefit?

✨✨✨ [need to know 3 x headers]

A

1) Browser requests a resource for the first time

–> Server responds with ETag: “1524066398000”, <strong>cache-control:no-cache</strong>

2) Subsequent requests for the same resource

–> Browser adds <strong>If-None-Match:</strong> “1524066398000”

3) Server sends back a <strong>304 Not Modified</strong> status code with no body

✔️ Savings are because no payload needs to be returned

There needs to be a network round trip

The server needs to make a response

28
Q

Explain the 1st load and 2nd load Etag diagrams (#21-22)

A

1st:

  • browser wants to get some app.css file
  • web server responds with css file and has a response header with etag hash value and size

2nd:

  • second time want to load css file
  • browser will request same css file but will also provide the ‘if none match’ header
  • server will respond with 304 not modifed
  • browser will pull file off cache
29
Q

Explain 🐈 caching in a SPA

✨✨✨

A

🐈 index.html uses a cache that suits the release cadence

–> ETag is probably best here, a quick round-trip isn’t too costly

🐈 All other files are named so that the name contains a hash of the content for that file

  • -> main.9789bf1740765e50e459.js
  • -> cache-control:max-age=31536000

🐈 Return visitors to the SPA will only need to download the app when their cache expires or a new version is updated

🐈 Combined with lazy loading, they only need to update the modules that changed

30
Q

What problems do JS modules solve?

✨✨✨

A

JS functions originally existed in the global namespace, with no good way to partition code that had been loaded

  • -> Two different libraries choosing the <strong>same global names</strong>
  • -> No built-in way to <strong>protect module-internal symbols</strong>
31
Q

What are the different ways that JS modules have been implemented?

A
  • ES2015
  • CommonJS
  • AMD (Asynchronous Module Definition)
  • JS ‘module pattern’ function(…) { … code body … }()
32
Q

Briefly explain ES2015 which uses modules. Explain image #23

A
  • Part of the official ECMAScript2015 standard

- Is well supported natively or with polyfills

33
Q

Briefly explain CommonJS which uses modules. Explain image #24

A
  • Adopted early by node.js

- Lots of code out there written in this style

34
Q

Define the W3C DOM

✨✨✨

A

The W3C Document Object Model (DOM) is a <strong>platform and language-neutral interface</strong> that allows programs and scripts to <strong>dynamically access and update the content, structure, and style of a document</strong>

35
Q

Comment on DOM performance

A
  • The DOM (Document Object Model) can become excessively large in an application, e.g. Facebook, when you’ve scrolled down a bit
  • A large number of DOM nodes to traverse
  • Performance impact e.g. you have to modify a large number of nodes (even with a tree structure)
36
Q

Explain the Virtual DOM

✨✨✨

A
  • The Virtual DOM: an <strong>abstraction of the DOM</strong>

–> Modify the virtual DOM; update the real DOM from the virtual DOM when needed

–> Libraries / frameworks (e.g. Vue.js) will use a virtual DOM in the background

–> You don’t need to work directly with the DOM

<strong>Smart about updating the actual DOM and only pushing updates when necessary.</strong>

Doing optimization process in terms of reducing the number of edits to the DOM.</strong>

37
Q

When does the virtual DOM know when to change the DOM? I.e. how do we know that the data has changed and needs to be updated?

✨✨✨

A

Virtual DOM does:

1) dirty checking
2) observable is used

38
Q

What is dirty checking in terms of the virtual DOM?

✨✨✨

A

poll the data at a regular interval to check the data structure recursively.

39
Q

How is Observable used in terms of the virtual DOM?

A

observe for state change. If nothing has changed, don’t do anything. If something has changed, we know exactly what to update.

40
Q

How does the Virtual DOM make changes efficiently? Explain the diagram #25

A

1) need efficient diff algorithms
2) Batch DOM read/write operations
3) efficient update of subtree only

Diagram:
- Virtual DOM will only update the Browser DOM once it knows that the <strong>subtree changes are finished</strong>

<strong>Virtual DOM knows that it has gone through and modified all the subtree elements so it is sensible to notify the Browser DOM as no more changes will be made to the sub tree at this point in time.</strong>

41
Q

What happens if data gets through the DOM to make an unsafe JS call?

A

opened yourself up to all kinds of hostile code

42
Q

What is DOM-based XSS injection?

A

Definition:

DOM Based XSS allows an attacker to <strong>use the Document Object Model (DOM) to introduce hostile code into vulnerable client-side JavaScript embedded in many pages.</strong>

Browser interprets .js, HTML, the DOM etc

A way of using JS to introduced bad code inside of JS that is sitting in the pages.

Browser interprets JS and HTML and renders DOM and manipulates DOM based on JS. If have wrong JS, expose to issues.

43
Q

Give some safe functions to use that should not result in attacks?

A

elem.innerText()

JSON.parse()

document.createTextNode()

44
Q

Give some unsafe functions to use that can result in attacks?

A

elem.innerHTML()

eval()

onclick() / onload()

elem.setAttribute()

45
Q

How is DOM-based XSS different from classic XSS?

✨✨✨

A
  • No malicious scripts embedded into the page source code.
  • Possible that server-side attack detection tools will fail to detect it (e.g. if it uses # character).
  • Root of the problem is client-side code.
46
Q

How easy/hard is DOM-based XSS Injection to mitigate? Why?

A

DOM based XSS is extremely <strong>difficult</strong> to mitigate against because of its <strong>large attack surface</strong> and <strong>lack of standardization across browsers</strong>.

47
Q

In terms of DOM-based XSS Injection, how should untrusted data be treated?

A

only be treated as <strong>displayable text</strong>.

Never treat untrusted data as code or markup within JavaScript code.

Avoid using client data for redirection / rewriting of DOM.

48
Q

In terms of DOM-based XSS Injection, how can we sanitize data?

A

Always JavaScript <strong>encode</strong> and <strong>delimit untrusted data as quoted strings</strong> when entering the application –> reduces the likelihood of attacker code taking effect if string

49
Q

What are the three important limits of response times?

A

0.1 s, 1.0 s, 10 s

50
Q

Explain the 0.1s response time limit?

A

about the limit for having the user feel that the system is reacting instantaneously

51
Q

Explain the 1.0 s response time limit?

A

about the limit for the user’s flow of thought to stay

52
Q

Explain the 10 s response time limit?

A

about the limit for keeping the user’s attention focused on the dialogue.

53
Q

Give yahoot’s best practice rules (23)

A
  1. Minimize HTTP Requests
  2. Use a Content Delivery Network
  3. Avoid empty src or href
  4. Add an Expires or a Cache-Control Header
  5. Gzip Components
  6. Put StyleSheets at the Top
  7. Put Scripts at the Bottom
  8. Avoid CSS Expressions
  9. Make JavaScript and CSS External
  10. Reduce DNS Lookups
  11. Minify JavaScript and CSS
  12. Avoid Redirects
  13. Remove Duplicate Scripts
  14. Configure ETags
  15. Make AJAX Cacheable
  16. Use GET for AJAX Requests
  17. Reduce the Number of DOM Elements
  18. No 404s
  19. Reduce Cookie Size
  20. Use Cookie-Free Domains for Components
  21. Avoid Filters
  22. Do Not Scale Images in HTML
  23. Make favicon.ico Small and Cacheable

–> overall goal: user experience good

54
Q

Give the lecture’s sample (5) best practice rules

✨✨✨

A

<strong>1) Put stylesheets at the top of the page (in the HEAD) </strong>

–> This allows the page to render progressively

<strong>2) Put scripts at the bottom of the page</strong>

–> Scripts block parallel downloads

<strong>3) Make JavaScript and CSS external</strong>

–> External files are cached; inline code is not.

<strong>4) Minify JavaScript and CSS</strong>

–> Remove unnecessary characters from code to reduce size (~21%) and hence speed up download

<strong>5) Reduce DOM elements e.g. [div] elements</strong>

–> To check number of DOM elements:document.getElementsByTagName(‘*’).length at console

55
Q

What is lazy loading also knows as?

A

infinite scrolling,endless scrolling,auto pager,endless pages,etc.;

56
Q

What ability does lazy loading give us?

✨✨✨

A

ability to load content via AJAX within the current page or content area as you scroll down.

57
Q

what does lazy loading traditionally rely on?

A
  • Scroll event, or
  • Periodic timer, and therefore
  • Forces browser to re-layout page

So, use IntersectionObserver API

58
Q

Explain the IntersectionObserverAPI in terms of lazy loading

A
  • Lets code register a callback function…
  • … that is executed whenever an element
  • that the code wishes to monitor,
  • enters or exits another element, or the viewport; or
  • when the amount by which the two intersect changes by a requested amount.
59
Q

Define viewport. Explain diagram #26

✨✨

A
  • An area in computer graphics that is currently being viewed.
  • In web browser terms, it refers to the part of the document you’re viewing which is currently visible in its window.
  • Content outside the viewport is currently not displayed onscreen.
60
Q

Explain progressive web apps (PWAs)

✨✨✨

A
  • Web applications designed to appear to be ‘installed’ as native applications
  • Begin life in a browser tab…
  • … then can be ‘installed’ as native apps
  • Rely on Service Workers
    * notifications
    * background sync (offline cache)
61
Q

Explain Service Workers (type of Web Worker)

✨✨✨

A

•Proxy ‘servers’ that sit between web applications, and the browser and network

  • JavaScript that:
    • runs on its own thread: not blocking
    • is headless (no access to DOM)
  • Rely on HTTPS, for security
  • Associated with specific server/website
62
Q

In terms of SPAs, comment on the loading speed of CSS and justify.

A

The CSS load is typically higher due to custom styling requirements

63
Q

What is often the ‘preferred form’ of working with SPAs?

A

Often the preferred form is not Javascript:

TypeScript, Dart, Elm, etc.

64
Q

comment on the readability and security of the the results of UglifyJS.

A

Result is difficult to read, but very easy to reverse engineer -so this offers no IP protection

  • -> There is no real way to protect IP that runs in a browser
  • -> Anything you send is public knowledge
65
Q

Define polyfill

A

code that implements a feature on web browsers that do not support the feature.

Most often, it refers to a JavaScript library that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers.

SENG365 (8 decks)

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