DOM Ready vs Inline

<!DOCTYPE html>
<html>
  <head lang="en">
    <title>Our webpage</title>
    <script type="text/javascript" src="initLoggers.js"></script>      
  </head>
  <body>
    <div id="main-content"></div>
    <div id="logger"></div>        
    
    <script type="text/javascript">log('Inline JS at bottom of BODY. Loading jQuery...');</script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>        
    <script type="text/javascript" src="ourApplication.js"></script>
  </body>
</html>

log('jQuery loaded.');

jqLoaded = true;

$(document).ready(function(){
  log('DOM Ready fired');
  $('#main-content').append('Style!');
});  

log('Inline JS appending content...', true);      
$('#main-content').append('Gangnam ');

// get the current time difference between page
// load and when this func was invoked
function getTimeDiff() {        
  return new Date().getTime() - performance.timing.navigationStart;
}          
var $log, jqLoaded = false;
function log(message) {
  if (jqLoaded) {
    $log = $log || $('#logger');
    $log.append('<p><b>' + getTimeDiff() + '</b>ms :: ' + message);
  }
  if (window.console) {
    console.log(getTimeDiff() + 'ms ::' + message);
    if (console.timeStamp){
      console.timeStamp(message);
    }
  }
  
}      
log('On HEAD, starting...');