Thursday, August 6, 2015

CH7 & CH8 - High Performance Web Sites

CHAPTER 7, Rule 7: Avoid CSS Expressions

  1. This rule is only for IE browsers as CSS expressions are not available in other browsers.
  2. Example of such an expression:
    background-color: expression( (new Date()).getHours( )%2 ? "#B8D4FF" : "#F08A00" );
    JavaScritpt is used to write an expression which makes the background color alternates every hour.
  3. CSS expressions are evaluated more than what we expect, they are reevaluated for various events including resize, scrolling, and mouse movements.
  4. This may cause a performance issue.
  5. The author mentioned a way to overcome this issue, but i believe it is better not to use CSS expression at all as the rule says.

CHAPTER 8, Rule 8: Make JavaScript and CSS External

  1. The title advises to make the JS and CSS external not internal. However, this chapter introduces many advice.
  2. In general, when the JS and CSS are external, you will get the benefit of browser's cache. On the other side, inline JS and CSS will be loaded faster if there is no cache in the browser (i.e. first visit to page).
  3. Think about combining all CSS in one file and all JS in one file.  This has the benefit of subjecting the user to only one HTTP request, but it increases the amount of data downloaded on a user’s first page view.
  4. Think about categorizing your pages into a handful of page types and then create a single script and stylesheet for each one.
  5. some websites' homepages are not used frequently, so having JS and CSS embedded internally could be a good idea ( remember that the browser deletes the long time unused cached content even if it is not expired).
Post-Onload download
  1. In some critical pages, you can embed the JS and CSS files internally, and add a javascript function to download them. 
  2. By that, the first page access will be served by the internal JS and CSS, the subsequent access will be served by the cached downloaded JS and CSS.
  3. there is an example of such a function in the book.

Dynamic Inlining
  1. Another idea, as we don't know what is stored in the browser cache, we can use a cookie as an indicator. 
  2. If the cookie is absent, the JavaScript or CSS is inlined. If the cookie is present, it’s likely the external component is in the browser’s cache and external files are used.
  3. On the first page visit, there will be no cookie, JS and CSS will be inlined and the cookie will be set.
  4. In the subsequent requests, the cookie will be there so the JS and CSS will be rendered as external links and will be served by the browser cache.

No comments:

Post a Comment