Table of Contents

1. Document Object Model
2. Progressive enhancement vs graceful degradation
3. Optimizing a site's assets / resources
4. Serving site assets from multiple domains
5. Ways to decrease page load (perceived or actual load time)
6. Long-polling, websockets and SSE
7. The importance of standards and standards bodies
8. The process from the time you type in a URL to it finishing loading on your screen
9. Projects using tabs instead of spaces or vice versa
10. API explanation
11. Bower package management

Document Object Model

The Document Object Model is a cross-platform and language independent convention for representing and interacting with objects in HTML, XML & XHTML documents. (taken from Wikipedia)

To render a document such as an HTML page, most web browsers use an internal model similar to the DOM. The nodes of every document are organized in a tree structure, called the DOM tree, with topmost node named "Document object". When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen. The DOM is also the way JavaScript transmits the state of the browser in HTML pages.

Web browsers rely on layout engines to parse HTML into a DOM. Some layout engines, such as Trident/MSHTML, are associated primarily or exclusively with a particular browser, such as Internet Explorer. Others, such as Blink, WebKit, and Gecko, JavaScript rendered in HTML pages, collection of web pages shared by a number of browsers, such as Google Chrome, Opera, Safari, and Firefox. The different layout engines implement the DOM standards to varying degrees of compliance.

Source: http://en.wikipedia.org/wiki/Document_Object_Model

Progressive enhancement vs graceful degradation

Progressive Enhancement has the following principles:

• Basic content and functionality should be accessible to all web browsers
• Sparse, semantic markup contains all content
• Enhanced layout & behaviour is provided by externally linked CSS and JavaScript
• End-user web browser preferences are respected

Graceful Degradation provides fall-backs for older browsers

Source: http://en.wikipedia.org/wiki/Progressive_enhancement

Optimizing a site's assets / resources

• File concatenation
• Minification
• CDN Hosted
• Caching
• Use task runner like Grunt / Gulp

Serving site assets from multiple domains

This can increase the number of assets a browser can download in parallel.

• IE7 allows only 2 concurrent connections
• IE8 and Chrome allows 6
• Firefox allows 8

Be aware that additional DNS lookups would be involved and could be 150ms or longer. This added delay could easily offset any benefit of parallel downloads.

Ways to decrease page load (perceived or actual load time)

Profiling a web page usually involves a tool such as Firebug to determine what components (i.e. images, CSS files, HTML documents, and JavaScript files) are being requested by the user, how long the component takes to load, and how big it is.

• Save images in the right format to reduce their file size * Minify your CSS and JavaScript and combine files to reduce HTTP requests
• Use server-side compression to reduce file sizes
• Avoid inline CSS and JavaScript - if you use a lot of CSS and JavaScript in your HTML document, you won’t be taking advantage of the web browser’s caching features.
• Monitor website performance
• For a website it’s responsible for getting/sending HTTP requests/responses to the right people and serves all of your web page components. If your web server isn’t performing well, you won’t get the maximum benefit of your optimization efforts * Use Google Webmaster Tools

Long-polling, websockets and SSE

Regular HTTP:

• A client requests a webpage from a server
• The server calculates the response
• The server sends the response to the client

AJAX Polling:

• A client requests a webpage from a server using regular HTTP
• The requested webpage executes JavaScript which requests a file from the server at regular intervals (e.g. 0.5 seconds)
• The server calculates each response and sends it back, just like normal HTTP traffic

AJAX Long-Polling:

• The difference with long-polling is the server does not immediately respond with the requested information but waits until there's new information available
• When there's new information available, the server responds with the information
• The client receives the new information and immediately sends another request to the server re-starting the process

HTML5 Server Sent Events (SSE) / EventSource:

• A client requests a webpage from a server using regular HTTP
• The requested webpage executes JavaScript which opens a connection to the server. The server sends an event to the client when there's new information available in real-time. Server will need to have an event loop
• Not possible to connect with a server from another domain

HTML5 Websockets:

• A client requests a webpage from a server using regular HTTP
• The requested webpage executes JavaScript which opens a connection with the server
• The server and the client can now send each other messages when new data (on either side) is available in real-time. Server will need to have an event loop
• With WebSockets it is possible to connect with a server from another domain
• It is also possible to use a third party hosted WebSockets server, for example Pusher or others. This way you'll only have to implement the client side

The importance of standards and standards bodies.

Standards bodies such as the World Wide Web Consortium (W3C) were created as forums to establish agreement across the industry and among vendors. Other standards groups have formed since, most notably the HTML5-focused Web Hypertext Application Technology Working Group (WHATWG).

The process from the time you type in a URL to it finishing loading on your screen

• Enter the URL to the address bar
• A request will be sent to the DNS server based on your network configuration
• DNS will route you to the real IP of the domain name. The DNS layer can help direct clients to different servers based on geographical location to help with load balancing and latency minimization, and one server can respond to requests from many different DNS names.
• A request (with complete HTTP header) will be sent to the server (with IP to identify)'s 80 port (suppose we don't specify another port) A browser can make different types of requests (GET, POST, HEAD, etc.), and usually includes several different headers including cookies, browser capabilities, language preferences, etc.
• Server will search the listening ports and forward the request to the app which is listening to 80 port (let's say nginx here) or to another server for load balancing.
• nginx will try to match the URL to its configuration and serve as an static page directly, or invoke the corresponding script interpreter (e.g PHP/Python) or other app to get the dynamic content (with DB query, or other logics)
• Most browsers usually maintain a cache in order to avoid downloading stuff many times, and use various techniques to determine whether the cached version of a file is valid.
• HTML will be sent back to the browser with a complete HTTP response header
• Browser will parse the DOM of HTML using its parser
• External resources (JS/CSS/images/flash/videos..) will be requested in sequence for JS, it will be executed by JS engine for CSS, it will be rendered by CSS engine and HTML's display will be adjusted based on the CSS (also in sequence or not?)
• If there's an iframe in the DOM, then a separate same process will be executed from step 1-10

Projects using tabs instead of spaces or vice versa

Conform to conventions and stay consistent. Suggest using EditorConfig plugins (http://editorconfig.org)

API Explanation

Application Programming interface

https://zapier.com/learn/apis/

Bower package management

http://css-tricks.com/whats-great-bower/