Databases
StackOverflow2013
Postsdbo
POCan JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?
    primarykey
    data
    text
    <p>I am in the process of optimising a website, with the main aim of improving the overall download times of web pages. I have been applying as many of the techniques recommended by the Yahoo Developer Network's <a href="http://developer.yahoo.com/performance/rules.html" rel="nofollow">"Best Practices for Speeding Up Your Web Site"</a>.</p> <p>Now, the stats show that we have a lot of visitors that first access the website via:</p> <p>the stand-alone search engine page HTTP error handlers - i.e. our custom "404 Not Found” page other miscellaneous stand-alone pages</p> <p>Please note that these so-called "stand-alone pages” exist independently from the template system which is responsible for the layout and structure of the pages from the website proper. They have their own style sheet(s) and scripts (and therefore exist independently of the template system's CSS and JS files also).</p> <p>Now, these page types are more intermediary pages than content pages. A good example of their general purpose would be that of a <a href="http://en.wikipedia.org/wiki/Landing_page#Reference_landing_page" rel="nofollow">reference landing page</a>. I thought that it would be a good idea to use a technique like <strong>post-onload</strong> to “prime” the user's cache ready for their next move (which will nearly <em>always</em> be part of the main template system).</p> <p>The script by Steve Sounders is:</p> <p><strong><a href="http://stevesouders.com/examples/post-onload.php" rel="nofollow">post-onload.php</a>:</strong></p> <pre><code>&lt;script&gt; function doOnload() { // Do the downloading awhile AFTER the onload. setTimeout("downloadComponents()", 1000); } window.onload = doOnload; // Download external components dynamically using JavaScript. function downloadComponents() { downloadCSS("http://stevesouders.com/hpws/testsm.css?t=1388138263"); downloadJS("http://stevesouders.com/hpws/testsma.js?t=1388138263"); downloadJS("http://stevesouders.com/hpws/testsmb.js?t=1388138263"); downloadJS("http://stevesouders.com/hpws/testsmc.js?t=1388138263"); } // Download a stylesheet dynamically. function downloadCSS(url) { var elem = document.createElement("link"); elem.rel = "stylesheet"; elem.type = "text/css"; elem.href = url; document.body.appendChild(elem); } // Download a script dynamically. function downloadJS(url) { var elem = document.createElement("script"); elem.src = url; document.body.appendChild(elem); } &lt;/script&gt; </code></pre> <p>What I would like to know is this:</p> <p><strong>Is it possible to re-write the two functions that perform basically the same thing as <code>downloadCSS(url)</code> and <code>downloadJS(url)</code>, __without__ it actually being applied to the containing web page?</strong></p> <p>In effect, I am looking for <code>downloadCSS(url)</code> / <code>downloadJS(url)</code> functions that acts as a pre-load for the next web page's external CSS/JS files, which will behave much like the way the HTML5 spec intends the <code>@prefetch</code> attribute to be implemented). I basically want the files downloaded via <strong>post-onload</strong> to be in the cache ready.</p> <p>If not, any other suggestions on how to perform the same task would be amazing!</p> <p>Thanks in advance! </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJordan Clark
    1. USJordan Clark
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCan JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCan JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCan JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSuppose, On a single page you have 20 links of another pages. Now ,how would you come to know **which link** is going to be your _next page_?
      singulars
      1. POCan JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?
      1. USHitesh Gaur
    2. COSo basically, load a lot more css that isn't needed on the current page at all, just so it's cached on the next page, makes sense?
      singulars
      1. POCan JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?
      1. USadeneo
    3. COA good question, HI2 – because the other 20 pages will invariably use the same template system, and therefore require the same CSS/JavaScript files and presentational images. I just though that, seeing as the site-search page is light-weight anyway, then may be a good time to get them into the cache “in the background,” as the other pages are a bit heavier than the one mentioned.
      singulars
      1. POCan JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?
      1. USJordan Clark
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload