How to avoid redundant script tags in an html page?

1

So, I’ve always peddled back end development. And recently have taken up a front end project.
Essentially, I’ve inherited a front end module & need to add a few things to it.

<html>
<head> Old Page </head>
<body>
<div id="...1...">
<script>...</script>
...
</div>
<div id="..2....">
<script>...</script>
...
</div>

<div id="...3..."><div>
<script>...</script></div>
...
</div>
</body>
</html>

If you notice, there are 3 tags embedded into the page & similarly there are many across the pages. How do I reduce this dependency? Is there someway, I can replace this with a marker which will expand to execute the scripts written in some centralized location?

2

Redundant would imply they aren’t needed.

I’m assuming that they are still needed (afterall, you want to put them in), but you mean you want to insert them at build time?

If you control the back end generation of the page, that’s not difficult.

The current site I’m working on uses a boilerplate page template that looks like this:


<!DOCTYPE html>
<!-- PHOTOGRAPHY, DESIGN AND CODE BY MICHEAL HALL ... I'VE LOST COUNT OF HOW MANY TIMES I'VE BUILT THIS SITE O.o -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta name="description" content="{{meta-description}}"> <meta name="keywords" content="{{meta-keywords}}">

<title>{{page-title}}</title>

{{css}}
  
</head>

<body data-pagename="{{pagename}}">

	{{navigation}}

	<div class="container-fluid carousel_container slide_up hidden-sm-down" data-mediadisplaybreakpoint="hidden-sm-down"></div>
	<div class="container body"></div>
	<div id="footer" class="footer container-fluid">
		{{footer}}
	</div>
	
	{{fragments}}
	{{js}}
	
	<script>
	
		$( document ).ready( function(){
			UTILS.initialize_page();
		});
	
	</script>

</body>

</html>

Simple, small, contains just the barebones common to all pages needed by the site. The rest are tags replaced during site build with content appropriate to the page.

Depending on a build switch, the

{{css}}
{{js}}

tags are replaced with style and script tags which either point to a localhost or to an online CDN.

During development, where I may not be online, I use my local, non-minified copies. When I’m done, I’ll change the switch and build the site using the CDN hosted, minified versions before I upload it.

What replaces the js and css tags is controlled by a site configuration file.

But you have to control the back end build yourself. On my end, I’ve written myself a command line tool I can use to automate all of my page building/outputting, image resizing, etc., etc.

As you’re a back end guy, I imagine it wouldn’t be all that difficult to accomplish.

A final thing to consider is whether or not those script tags are inserted where they are for performance reasons. JS loading/parsing is blocking and it’s generally considered best practice to put your JS at the bottom of the body tag so that all CSS and page content can load without blocking and the JS hits the page at the end.

But, if you need the JS to execute as soon as possible, you can insert it right where it’s needed in the page, and it will execute as the page is loaded and parsed.

Only you can say if that is why those script tags are where they are. If you move them and the page breaks or looks crap when loading, you’ll have your answer. :slight_smile:

~Micheal

3

Thanks! I’m looking for a full front-end solution. Is it possible to give a string which will automatically invoke & execute a javascript function?

4

I’m not totally sure what you mean.

Do you mean a string which will load the script and execute it? That’s all a <script>

tag is.

A directive that tells the page to load the script at the url give and execute it.

If you mean dynamically adding a script tag in the page, that’s possible - I’ve never had a use for it.

jQuery even has a getScript utility method for that:

getScript documentation

I’m not clear on why you need that though? Or if that is what you want?

Javscript is run in the browser, the browser needs to load the script to run it … is there are reason you are trying to get rid of the script tags? It’s very common to have more than one. I’m not used to seeing them sprinkled throughout a page, but like I said, you could gather them all and place them at the end of the body tag.

Another alternative is to gather all of the scripts you will need into one script file and have only one tag on the page.

You lose any advantage to using CDN hosted scripts (which, if they are popular resources, often exist in the user’s cache and thus do not need to be loaded for your site). Additionally, you will have to rebuild your script package any time a change is made. And finally, it adds a hefty weight to your initial page load - delaying the entire page from showing until all HTML, CSS and JS are loaded.

So … what exactly are you trying to accomplish?

~Micheal

5

There are two plugins in Gulp that will allow you to autowire in static resources. They are inject and wiredep. I’m not sure how you would modify it to place the script tags in specific locations in the html file though. It works by you configuring your gulpfile.js to point to where your scripts are. Then you put comments in your HTML file to specify where the scripts should go. Here is the link to the plugin on NPM https://www.npmjs.com/package/gulp-inject/.