Inline small javascript

> > Inline small JS

Updated: June 23rd 2015

html file with javascript inlined

What is inlined javascript?

  • When javascript is in an html file between script tags it is inlined
  • In-lining JS simply means putting your javascript into your HTML file instead of an external JS file



Why inline javascript?

The benefit this provides is the reduction of files the browser has to download prior to displaying your web page.

Often your webpages will be calling several javascript files externally (example: widget.js).

The thing is, most of those files are tiny. They only have a few lines of code. If you find you have such files they should likely be inlined into your HTML to save the external file calls.

How to inline JS

Basically you just copy the contents of your external JS file and paste them between script tags into your HTML.

It looks like this:

<script>
YOUR JAVASCRIPT HERE
</script>

What does this do?

Putting your JS into your HTML will save the web browser a round trip to the server, since you are no longer asking for a seperate external file for the browser to load to see and execute your JS.

Tools

To examine how javascript is being used on your pages, this site has two online tools.






Patrick Sexton by