JavaScript和HTML：在两个单独的文件中还是在一个HTML文件中？

Question

Is there any difference when we write both HTML and JavaScript code in a single .html file or write HTML code in a .html file and JavaScript in a .js file separately ? I mean functionality in both cases is the same ?

ex. here : https://github.com/tomconte/solarchain-dashboard HTML and JavaScript are written in two separate .html and .js files and in top of .js file is mentioned: NOTE: Need to compile with browserify viz.js -o main.js .

I mean if JavaScript code in viz.js file is written in index.html file, do we still need to use browserify to compile JavaScript code ?

index.html file : https://github.com/tomconte/solarchain-dashboard/blob/master/index.html

viz.js file : https://github.com/tomconte/solarchain-dashboard/blob/master/viz.js

Answer 1

To in two separate files or in a single HTML file?

No difference.

Just browser has to send an extra http request to load the file when you add js file in <script> tag.

But it is a good practice to write your code in separate js file, so it would be easy to modify it and reflect those changes in all the html files wherever that js file is linked otherwise you'll have to change js code in every file etc etc

Answer 2

Keeping the javascript separately in a file will improve page load performance. Inlining the javascript inside the html file can block rendering of html.

In the inline script, the time is taken up running the script, which might change the DOM. Trying to render the DOM while it's mutating is a recipe for a mess. So rendering only happens at points when the JS is stalled, and therefore the DOM is stable.

While waiting for an external script to download, the running of scripts is stalled, so the DOM can be rendered safely. The downloaded JS won't be run until the rendering is complete.

So this is one reason the files html files are separated from javascript files.

Also maintenance of Javascript in files will be easier than embedded in html.