Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question
add comment

4 Answers

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.

  • Serving the HTML and the JS separately has the advantage that a client can cache the JS. This requires you to send appropriate headers so that the client does not issue a new request each time. Caching is problematic if you want to perform an update and thus want to invalidate the client caches. One method is to include a version number in the filename, e.g. /static/mylibrary-1.12.2.js.

    If the JS is in a separate file you cannot restrict access to it: It is difficult (technically: impossible) to tell if a request to a JS file was made because you referenced it on your HTML page, or because somebody wants to download it directly. You can however use cookies and refuse to serve clients that don't transmit certain cookies (but that would be silly).

  • Serving the JS inside the HTML increases the size of each page – but this is OK if a client is unlikely to view multiple pages. Because the client does not issue a separate request for the JS, this strategy loads the page faster – for the first time at least, but there is a break-even point where caching is better. You can include the JS e.g. via PHP.

    Here the client does not need separate access to the JS file, which can be hidden if you like. But a anyone can still view the JS code inside the HTML.

Other strategies to minimize load times include

  • JS minification which reduces the size of the JS file you serve. As minification only happens once when deploying the code, this is a very efficient method to save bytes. OTOH this makes your code harder to understand for interested visitors.

    Related to minification is the practice of combinining all your JS files in a single file. This reduces the number of necessary requests.

  • Compression, which adds a computational overhead for each request on both the client and the server. However the time spent (de-)compressing is usually smaller than the time spent transmitting the uncompressed data. Compression is usually handled transparently by the server software.

These techniques also apply to other resources like images.

  • Images can be inlined into HTML or CSS with data-URLs. This is only practical for small, simple images as the base64-encoding inflates the size. This can still be faster than another request.
  • Multiple small images (icons, buttons) can be combined into a single image, and then extracted as sprites.
  • Images can be reduced by the server to the size in which they are actually used on the website, which saves bandwidth. Compare thumbnail images.
  • For some graphics, text-based images like SVG can be a lot smaller.
share|improve this answer
add comment

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.

share|improve this answer
add comment

I'm designing a one page website

If you literally just have one page then yes, it is better (from a performance point of view) to serve everything in the one file... stylesheets, JavaScript and even images (small images inlined with data-URIs). This eliminates the additional HTTP requests required to retrieve external resources which are relatively slow.

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.)

Can I change the permissions to deny the users requests for the code, but the html page can still call the code?

No. At best the code can be obfuscated in order to "hide" it from the casual observer, but it offers no real protection.

share|improve this answer
1  
Why the neg vote? Whilst it is better for development and multi page sites to have separate/external files, the OP in this case is specifically asking about a "one page website" and whether it is "faster to load". Minimising HTTP requests should be a priority in this instance. You can (and should) still develop with multiple files, but that is not the question being asked. –  w3d Jan 12 at 16:52
add comment

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 *.js file and load it via <script> tags.

Regarding your second point, no you can not deny user or browser to view your code, there is something called obfuscation which will make your code harder to read, however performance will degrade.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.