Issue link: https://read.uberflip.com/i/1146286
The Best of Both Worlds | 59 Component reuse The reuse rate is low. Many home pages are the only page a user visits on the site, so there is really no reuse. Analyzing these metrics, there's an inclination toward inlining over using external files. Home pages have one more factor that tips the scale toward inlining: they have a high demand for responsiveness, even in the empty cache scenario. If a company decides to launch a campaign encouraging users to set their home pages to the com- pany's site, the last thing they want is a slow home page. For the company's home page campaign to succeed, the page must be fast. There's no single answer that applies to all home pages. The factors highlighted here must be evaluated for the home page in question. If inlining is the right answer, you'll find helpful information in the next section, which describes two techniques that have the benefit of inlining while taking advantage of external files (when possible). The Best of Both Worlds Even if all the factors point to inlining, it still feels inefficient to add all that Java- Script and CSS to the page and not take advantage of the browser's cache. Two tech- niques are described here that allow you to gain the benefits of inlining, as well as caching external files. Post-Onload Download Some home pages, like Yahoo! home page and My Yahoo!, typically have only one page view per session. However, that's not the case for all home pages. Yahoo! Mail is a good example of a home page that often leads to secondary page views (pages that are accessed after the initial page, such as those for viewing or composing email messages). For home pages that are the first of many page views, we want to inline the Java- Script and CSS for the home page, but leverage external files for all secondary page views. This is accomplished by dynamically downloading the external components in the home page after it has completely loaded (via the onload event). This places the external files in the browser's cache in anticipation of the user continuing on to other pages. Post-Onload Download http://stevesouders.com/hpws/post-onload.php The post-onload download JavaScript code associates the doOnload function with the document's onload event. After a one-second delay (to make sure the page is com- pletely rendered), the appropriate JavaScript and CSS files are downloaded. This is done by creating the appropriate DOM elements ( script and link, respectively) and assigning the specific URL: