<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d8211560\x26blogName\x3dTech+Tips,+Tricks+%26+Trivia\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://mvark.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://mvark.blogspot.com/\x26vt\x3d-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
An architect's notes, experiments, discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks


Learning Resources for Building High Performance Websites

I have high regard for Steve Souders & Peter-Paul Koch. Their knowledge and contributions to the Web Development community are exemplary. Steve is the man behind YSlow, a nifty tool that analyzes web pages and tells you why they're slow based on the rules for high performance web sites.

Steve recently finished teaching a course on High Performance Web Sites at Stanford. He has graciously shared the material from the class on the class web site & also interesting guest lectures. All these resources are great fodder for web developers.

As part of their course, the students studied popular websites to identify performance issues in them. Their findings confirm that websites that follow Performance best practices have a high YSlow Grade and load the fastest. Craigslist.org (YSlow Grade:96) & Windows Live (YSlow Grade:94) top their charts while Fox News Channel (YSlow Grade:24) & ESPN (YSlow Grade:28) are at the bottom.

The Q&A from the Midterm Exam & Final Exam are good brain teasers. Sample this -
How many connections per hostname is suggested in the HTTP spec? Do the five most popular browsers follow this recommendation?
2
no, Firefox 3, IE8, Safari 3.1+, Opera 9.60, and Chrome all support 4 or more. IE6 & 7 are still 2.

What are the two request headers that can be used to determine if a cached resource is valid (i.e., used as part of a Conditional GET request)? If the resource is valid, what status code does the web server return?
If-Modified-Since, If-None-Match
304 Not Modified ("304" and "Not Modified" are also valid answers)

Name three potential drawbacks to using a CDN, and a way to mitigate these drawbacks.
your performance can be affected by your competitors, you don't have direct control, if the CDN's performance degrades so does yours
you can use two CDNs to hedge your bets

Name two browsers (including major version #) that support parallel script loading?
IE8, Safari 4 are the biggies. Also Android 1, iPhone 2, Konqueror 4, Opera 9, and some Blackberries.

How much does gzip compression typically reduce transfer sizes?
70%

Which trigger busy indicators?
script in iframe
script DOM element
script defer
document.write script tag

What's the benefit of splitting resource downloads across multiple domains? In general, how many domains should you shard across?
You can get more parallel downloads by splitting resources across multiple domains. The ideal number of domains is 2-4.

List two pros and two cons of using iframes.
pros:
embedding content from another web site
sandboxing 3rd party JavaScript
asynchronous loading of external scripts

cons:
most expensive DOM element
blocks parent's onload

List the seven types of CSS selectors and give an example of each.
ID: #navbar {}
class: .navbar {}
type: A {}
descendant: UL LI {}
child: UL > LI {}
adjacent sibling: UL + P {}
universal: [color: red] {}

Also see:
HOW TO improve the front-end performance of a website - II

Labels: , , ,

Tweet this | Google+ it | Share on FB

« Home | Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »

»

Post a Comment