Modules, DOM and Performance (Week 9) Flashcards
What does a SPA usually consist of?
JS and HTML templates.
Critically, the ‘preferred form’ of working with SPAs is not a good format for downloading what?
Many small files
Data that is not needed at runtime (ie, good function names)
What is bundling?
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
In terms of bundling, what does a browser/user prefer?
✔️ Fewer network requests (fewer files)
✔️ Smaller network requests
✔️ Parallel network requests
✔️ No network requests at all (caching)
Explain the ‘fewer files’ aspect of simple bundling
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
Explain the ‘smaller files’ aspect of simple bundling
Browsers don’t care about JS function names (much)
We do care about data sent over the network though
Enter UglifyJS
What does UglifyJS do to code?
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
What is UglifyJS and its purpose/benefits?
✨✨✨
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>.
In terms of UglifyJS, what is used to aid in debugging?
sourcemaps can be created
When using UglifyJS on code to reduce the size of files, what does the browser load?
mangled code + sourcemaps and the dev tools presents the code as it originally was –> Invaluable for debugging production issues
What are some examples of things that cannot be mangled in UglifyJS?
String constants (const SOME_VALUE = “Your string”;),
object keys
What is Webpack and why use it?
✨✨✨
<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.
What are the current best practice to bundle code?
Webpack (rollup/parcel) and other bundlers
What is Webpack configured with?
1) Where to find input files
2) Where to start from (app entry point)
What will Webpack recursively follow? Explain.
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>
What will Webpack outputs be like?
something like main.9789bf1740765e50e459.js
This file is ~10Mb of JS
What is the solution to not using the whole app and not wanting to download 10Mb of scripts to use your app?
Lazy loading
Explain the technique of lazy loading
- Break your SPA into logical chunks, eg
- -> Login (likely the main chunk)
- -> Settings
- Only download the chunks you need
When is lazy loading triggered?
on router changes e.g. /login, /settings
What must agree and on what for lazy loading?
The framework and the bundler need to agree on how to split the import graph, usually done with bundler plugins.
Using Gzip compression, what does 10Mb go to?
1.47Mb –> 6.6. x smaller
How does the browser signal that it can handle compressed content?
with a request header:
accept-encoding: gzip, deflate, br
How does the server respond to the request header of ‘accept-encoding: gzip, deflate, br’?
✨✨✨
Informs the browser in the response with another header:
content-encoding: gzip
Give an example of the caching header for content that expires on a specific date
expires: Wed, 08 May 2019 04:54:20 GMT
Give an example of the caching header for content that expires periodically
cache-control:max-age=7200
Give an example of the caching header for content cannot be cached
cache-control:no-cache
Explain Etag caching.
What is a key benefit?
✨✨✨ [need to know 3 x headers]
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
Explain the 1st load and 2nd load Etag diagrams (#21-22)
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
Explain 🐈 caching in a SPA
✨✨✨
🐈 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
What problems do JS modules solve?
✨✨✨
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>
What are the different ways that JS modules have been implemented?
- ES2015
- CommonJS
- AMD (Asynchronous Module Definition)
- JS ‘module pattern’ function(…) { … code body … }()
Briefly explain ES2015 which uses modules. Explain image #23
- Part of the official ECMAScript2015 standard
- Is well supported natively or with polyfills
Briefly explain CommonJS which uses modules. Explain image #24
- Adopted early by node.js
- Lots of code out there written in this style
Define the W3C DOM
✨✨✨
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>
Comment on DOM performance
- 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)
Explain the Virtual DOM
✨✨✨
- 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>
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?
✨✨✨
Virtual DOM does:
1) dirty checking
2) observable is used
What is dirty checking in terms of the virtual DOM?
✨✨✨
poll the data at a regular interval to check the data structure recursively.
How is Observable used in terms of the virtual DOM?
observe for state change. If nothing has changed, don’t do anything. If something has changed, we know exactly what to update.
How does the Virtual DOM make changes efficiently? Explain the diagram #25
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>
What happens if data gets through the DOM to make an unsafe JS call?
opened yourself up to all kinds of hostile code
What is DOM-based XSS injection?
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.
Give some safe functions to use that should not result in attacks?
elem.innerText()
JSON.parse()
document.createTextNode()
Give some unsafe functions to use that can result in attacks?
elem.innerHTML()
eval()
onclick() / onload()
elem.setAttribute()
How is DOM-based XSS different from classic XSS?
✨✨✨
- 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.
How easy/hard is DOM-based XSS Injection to mitigate? Why?
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>.
In terms of DOM-based XSS Injection, how should untrusted data be treated?
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.
In terms of DOM-based XSS Injection, how can we sanitize data?
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
What are the three important limits of response times?
0.1 s, 1.0 s, 10 s
Explain the 0.1s response time limit?
about the limit for having the user feel that the system is reacting instantaneously
Explain the 1.0 s response time limit?
about the limit for the user’s flow of thought to stay
Explain the 10 s response time limit?
about the limit for keeping the user’s attention focused on the dialogue.
Give yahoot’s best practice rules (23)
- Minimize HTTP Requests
- Use a Content Delivery Network
- Avoid empty src or href
- Add an Expires or a Cache-Control Header
- Gzip Components
- Put StyleSheets at the Top
- Put Scripts at the Bottom
- Avoid CSS Expressions
- Make JavaScript and CSS External
- Reduce DNS Lookups
- Minify JavaScript and CSS
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
- Make AJAX Cacheable
- Use GET for AJAX Requests
- Reduce the Number of DOM Elements
- No 404s
- Reduce Cookie Size
- Use Cookie-Free Domains for Components
- Avoid Filters
- Do Not Scale Images in HTML
- Make favicon.ico Small and Cacheable
–> overall goal: user experience good
Give the lecture’s sample (5) best practice rules
✨✨✨
<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
What is lazy loading also knows as?
infinite scrolling,endless scrolling,auto pager,endless pages,etc.;
What ability does lazy loading give us?
✨✨✨
ability to load content via AJAX within the current page or content area as you scroll down.
what does lazy loading traditionally rely on?
- Scroll event, or
- Periodic timer, and therefore
- Forces browser to re-layout page
So, use IntersectionObserver API
Explain the IntersectionObserverAPI in terms of lazy loading
- 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.
Define viewport. Explain diagram #26
✨✨
- 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.
Explain progressive web apps (PWAs)
✨✨✨
- 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)
Explain Service Workers (type of Web Worker)
✨✨✨
•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
In terms of SPAs, comment on the loading speed of CSS and justify.
The CSS load is typically higher due to custom styling requirements
What is often the ‘preferred form’ of working with SPAs?
Often the preferred form is not Javascript:
TypeScript, Dart, Elm, etc.
comment on the readability and security of the the results of UglifyJS.
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
Define polyfill
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.
