If I'm designing a one page website, is it better to create external file for my JS code, or just put it in the html code? Is putting it on the page faster to load? Can I change the permissions to deny the users requests for the code, but the html page can still call the code?
- Anybody can ask a question
- Anybody can answer
- The best answers are voted up and rise to the top
You should put your JS code in a separate file because this makes it easier to test and develop. The question of how you serve the code is a different matter.
Other strategies to minimize load times include
These techniques also apply to other resources like images.
Client side JS code has to be seen by the browser (that is, if the page needs to use JS directly) - that means it has to bee downloaded by the browser.
You cannot have a browser use JS on the page if it cannot download it.
In that respect, it doesn't make a whit of difference if you inline the JS or put it in a file, though common practice is to use a JS file (separation of concerns for one).
If you have code that you do not wish to expose through to the browser, you will need to use server side code (say node.js, php, perl, asp.net, jsp - there are so many options) and interact with it from the browser - either on initial page loads or using AJAX.
The resulting file should be gzipped before serving, which will massively reduce the size of the all-text response.
You should still consider having large images external to the page, as there are limits to the size of data-URIs and browser compatibility. (eg. IE8 has a limit of 32KB, which equates to an actual file size of about 23KB due to the nature of the base64 encoding.)
No. At best the code can be obfuscated in order to "hide" it from the casual observer, but it offers no real protection.
Well it depends on amount of code, and how serious are you about being a programmer/software engineer versus just a coder. I worked with bunch of designers who put short snippets of code directly into HTML, and while I cringed – it actually worked.
Though it's not something I would do myself, and if you do want to know best practices of software development I strongly advise you to pu everything in external
Regarding your second point, no you can not deny user or browser to view your code, there is something called
It is better to create an external file for your JS code. It is also better to have one or two files that you serve to the client. But, it's also better to have your JS code split across multiples files for maintainability issues. To be able to do this, you can use preprocessors like Gulp that'll combine your different JS files to one file.
Serving less files is better since the client will have less HTTP requests to handle.
Yes, obviously it is faster since you only do one request for the HTML, while you'd do many requests (at least 2) with your JS code as an external. This is only if your JS code isn't minified in either side, and this doesn't take into account how harder it'll be to maintain your code if it's all in one single HTML page.
No you can't. JS code, like CSS code and HTML code is static content. That means once it's in the browser, the client can download it and its content entirely. Every single file, image, script is open to be downloaded. But, you can minify/uglify your code so that it's harder for a human being to use it. That is only a consequence of uglification, which was made for performance first.