Node.js/Express/Jade Javascripts not loading in correct sequence

Problem

Say I have this in a .jade file

doctype 5
html
 head
  title= title
  link(rel='stylesheet', href='/stylesheets/style.css')
  script(src='/javascripts/ocanvas-2.2.2.min.js', type='text/javascript')
  script(src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js")
body
 script(src='/javascripts/main.js')

The main.js file is supposed to use various functions from ocanvas which is included previously.

However, in my node.js server it is unable to do so because ocanvas for some reason loads after the main.js in the terminal running the server:

 GET /stylesheets/style.css 304 1ms
 GET /javascripts/main.js 304 1ms
 GET /javascripts/ocanvas-2.2.2.min.js 304 0ms

Why is it not loading in the sequence that is in the jade file?

Problem courtesy of: btru

Solution

The browser notices that it has cached versions of those resources, and so it sends conditional requests to check if they’ve been changed. (The 304 means that they haven’t.) This doesn’t necessarily have to happen in any particular order, and a browser is free to perform any optimizations in loading resources it wants, too.

Solution courtesy of: Ryan

Discussion

I notice your body tag is at the same height of your html tag, which could cause the problem. Indent the body tag.

Discussion courtesy of: asgoth

This recipe can be found in it's original form on Stack Over Flow.