title: Safari on iOS waits 10-30s before loading JavaScript at bottom of page
body: <p>I'm looking for help understanding a bizarre loading delay on iOS. I have this exact HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;img src="img/potatoes0.png"/&gt;
  &lt;img src="img/potatoes1.png"/&gt;
  &lt;img src="img/potatoes2.png"/&gt;
  &lt;img src="img/potatoes3.png"/&gt;
  &lt;img src="img/potatoes4.png"/&gt;
  &lt;img src="img/potatoes5.png"/&gt;
  &lt;img src="img/potatoes6.png"/&gt;
  &lt;img src="img/potatoes7.png"/&gt;
  
  &lt;script src="js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>…plus eight identical images of potatoes and a copy of jQuery, all hosted on a remote web server.</p>
  
  <p>This page loads pretty much instantly in a normal browser, but Safari on an iPhone (or in the iOS simulator on my computer) waits 11 seconds before loading the JS:</p>
  
  <p><a href="https://i.stack.imgur.com/1cPBk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1cPBk.png" alt=""></a></p>
  
  <ul>
  <li>The images all load basically at once, then the browser waits around 10 seconds before starting to load the JS.</li>
  <li>I've confirmed with Wireshark that the request doesn't go out until around the ten second mark, the delay is <em>not</em> server-side.</li>
  <li>If I add more images, the delay increases (e.g. to 30 seconds), even though the images still take well under a second to all load.</li>
  <li>If I add more JavaScript files, the browser loads them all simultaneously after the delay.</li>
  </ul>
  
  <p>What the heck is going on?</p>