← back to index

DN-02: Frontend Notes

Drive-by frontend notes, part two.

published Apr 03, 2017 tags #javascript #frontend #notes

~/posts/dn-02 $ cat post.md

/ LANG EN / 中文
/ THEME / /

DOM operations

  1. Creating nodes
    • createDocumentFragment() — a DOM fragment.
    • createElement() — a specific element.
    • createTextNode() — a text node.
  2. Add, remove, replace, insert
    • appendChild()
    • removeChild()
    • replaceChild()
    • insertBefore() — insert before an existing child.
  3. Lookup
    • getElementsByTagName() — by tag name.
    • getElementsByName() — by name attribute. IE is forgiving and also returns elements whose id matches the name.
    • getElementById() — by id; unique.

iframe pros and cons

Pros:

  • Loads slow third-party content (icons, ads) without blocking.
  • Security sandbox.
  • Loads scripts in parallel.

Cons:

  • iframe blocks the parent page’s onload event.
  • An empty iframe still takes time to load.
  • No semantics.

Optimizing assets

  • Concatenate files.
  • Minify and compress.
  • Host on a CDN.
  • Cache (multiple domains for cacheable assets).
  • Other.

Things that cause memory leaks

  • A leak means an object stays around after it’s no longer needed.
  • The GC periodically scans objects and counts references. An object with refcount 0, or one whose only references are cyclic, can be collected.
  • Passing a string instead of a function as the first argument to setTimeout leaks.
  • Closures, console logs, cyclic references between two objects that keep each other alive.

What happens from URL entry to a rendered page

  1. The browser opens a thread to handle the request and starts a DNS lookup against a remote DNS server to get the IP.
  2. Browser and server perform a TCP three-way handshake: SYN, SYN-ACK, ACK.
  3. Once the TCP connection is up, the browser sends an HTTP GET on the connection. The server finds the resource and responds with HTTP; status 200 means success.
  4. The server serves the resource and the client begins to download it.

Ways to create a JS object

  1. Factory pattern
  2. Constructor pattern
  3. Prototype pattern
  4. Constructor + prototype hybrid
  5. Dynamic prototype
  6. Parasitic constructor
  7. Durable constructor

Six ways to do JS inheritance

  1. Prototype chain
  2. Constructor stealing
  3. Combined (prototype + constructor stealing)
  4. Prototypal
  5. Parasitic
  6. Parasitic combined

Same-origin policy

“Same origin” means same protocol, same domain, and same port. The same-origin policy is a security boundary — a script can only read properties of windows and documents from the same origin.

Non-blocking JS loading

  • Put scripts at the bottom of the body.
  • Group scripts: every <script> tag blocks parsing while it downloads, so fewer tags helps. Applies to inline and external scripts alike.
  • Non-blocking: load JS after the page is done, i.e. after window.onload.
    • defer: IE4+ and Firefox 3.5+.
    • Dynamic script elements — the DOM lets you build the page in JS, including its own scripts:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementsByTagName("head")[0].appendChild(script);

What is eval

  • Parses a string as JS and runs it.
  • Should be avoided: unsafe, and slow (two passes — parse, then execute).
← back to index