Since my first course in Javascript 5 years ago, I was taught like a good web developer that you should always put your javascript declarations in the header tag of your HTML page. The reasoning behind this is quite logical. If you\u2019re attaching and element events to functionality (such as a buttons \u201conclick\u201d event) you want that functionality defined before a user sees the button.<\/p>\n
<\/p>\n
This tradition is starting to break though. More recently, we are wrapping all the javascript of our page in a large \u201conload\u201d event (or in jQuery, the $(function() { .. }) to ensure the DOM loads before. We attach events to buttons after\u00a0<\/i>the page is loaded. The reasoning behind this is it allows the user to see the page starting to load more quicky, even if functionality isn\u2019t available right away. So, if we\u2019re waiting on the onload even anyways, then why isn\u2019t loading external javascript files the last thing we do anyways?<\/p>\nAll HTML Page Types<\/h2>\n
This is a simple change you can apply to your websites right now. Try it! Take all the javascript declarations and put them as the last\u00a0<\/i>thing that your page loads. If you have and <script> tags throughout your application that run onload, you won\u2019t need to move anything because they will naturally run after the javascript libraries load (however, if you are using jQuery and have encapsulated code in the $(function() { \u2026 } declaration, this will of course need to be moved after\u00a0<\/i>your javascript imports).<\/p>\n
Your page content should now load before functionality giving you a boost in speed and\u00a0<\/i>give the user a more responsive looking website.<\/p>\nRazor Pages<\/h2>\n
Razor has simplified this process even more with their _Layout pages. Using \u201cRenderSection\u201d, for each of your content pages you can pull all the pages javascript together and put it in a section called scripts.<\/p>\n
index.cshtml<\/strong><\/p>\n [html] Then, you simply modify your _Layout.cshtml page like so.<\/p>\n _Layout.cshtml<\/strong> If you\u2019re implementing this on an existing site, you might have to do some thorough testing to make sure none of your scripts are running before the declarations. For simpler sites, or ones that have been well coded without heavy reliance on external libraries (jQuery, bootstrap, etc \u2026) you should have no problem applying this paradigm to your pages.<\/p>\n For anyone coding new websites, code your pages loading external javascript upfront!<\/p>\n","protected":false},"excerpt":{"rendered":" Since my first course in Javascript 5 years ago, I was taught like a good web developer that you should always put your javascript declarations in the header tag of your HTML page. The reasoning behind this is quite logical. If you\u2019re attaching and element events to functionality (such as a buttons \u201conclick\u201d event) you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-297","post","type-post","status-publish","format-standard","hentry","category-technology"],"yoast_head":"\n
\n<!– HTML Content here –>
\n@section scripts
\n{
\n<script type="text\/javascript">
\n\t\/\/ javascript here
\n<\/script>
\n}
\n[\/html]<\/p>\n
\n[html]
\n<!– Header content –>
\n<body>
\n@RenderBody()
\n@Scripts.Render(\u201c~bundles\/jquery\u201d)
\n@RenderSection(\u201cscripts\u201d, required: false)
\n<\/body>
\n[\/html]<\/p>\nCaution<\/h2>\n