What is the common practice these days, <script> tags before the closing </body>, or placing them in the <head>?

 

A couple of years ago I read an article saying that its a better idea to put them before the </body> as any DOM manipulation wouldn't start until the HTML and DOM has finished loading, however, I've been reading the last couple of days that in modern browsers this isn't a problem anymore and javascript wouldn't get executed until the DOM is loaded anyway.

 

Since I read the article I've always put all my <script> tags just before the </body> without any problems, however I had a recent problem using PayPal's checkout.js only on Apple devices, which I fixed by placing the <script> tag including PayPal's file in the <head>, which is what got me thinking.

The problem with JS in the head isn't if if starts executing before the DOM is loaded. Just wrap your code in an event handler function called on DOM ready. The real problem with JS in the beginning of the document is that it blocks the loading of your HTML. If you place your scripts just before </body> the HTML will start rendering before loading the scripts. Modern browsers might be able to load external scripts and HTML simultaneously but the scripts will probably still block the loading of the page due to the sharing of bandwidth.

That basically sums up the article I read a couple of years ago and the reason I started placing the scripts before the </body>, I've never had a problem with it till yesterday like I said.

 

I think I'll continue to place them at the bottom unless I have to, like with PayPal.

 

Funny thing is PayPal worked fine on every other device and browser, it wasn't until we went live and people using Apple said they had problems that we found out it didn't work, and not having an Apple device myself I had trouble debugging it, in the end I downloaded Safari for windows and saw undefined errors in the console log, I had the random idea to place the code in the head and it worked fine

Blame PayPal for this. Most of the time it's safe to put the scripts before the </body> but as you have discovered this doesn't work for everything. So you just have to test each one on all devices

Blame PayPal for this. Most of the time it's safe to put the scripts before the </body> but as you have discovered this doesn't work for everything. So you just have to test each one on all devices

 

I would assume that this is not a Paypal issue and more how it's been consumed. Paypal employs some of the best JS developers in the industry (Doug Crockford being one of them) So I'd find it hard to believe this is an issue on their part (They will be employing TDD and other forms of automated tests on their entire stack).

 

You shouldn't be running scripts individually and instead they should all be bundled as a single file. Unit tests on your own part ensure you've not written any bugs.

 

Rather than just dumping in scrips it's best of interface with the APIs these services provide. Here is PayPals REST API https://developer.paypal.com/docs/api/

Edited November 28, 20169 yr by rbrtsmith

I agree with you and use the PayPal API a lot. The problem is iOS and some browsers. I've raised tickets with PayPal about this and other issues (with Edge for example) and they have acknowledged there are some bugs need fixing.

I can't think of a reason why this would happen, I think the issue lies with your code and not PayPal's. People give PayPal a bad rep, but they hire very good developers.

 

If you're getting undefined errors, you may have included the function call before checkout.js, or checkout.js is being loaded asynchronously and the contents of your script tag have been parsed before the library it depends on.

 

It could be a naming conflict between one of your scripts and checkout.js causing problems, but this is highly unlikely.

 

Lastly, ensure that you're loading the script directly from PayPal and not self-hosting, this is the recommended method in their docs https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/add-paypal-button/. If your setup is the same as theirs I would create a blank HTML document and implement checkout.js using the instructions provided in the link above, that way you have an easier environment to debug in.

The checkout.js file was direct from PayPal, not self hosted, and was just before the closing body tag just after the jQuery include, it worked in every browser and device I tested it on Sandbox mode, and when I switched it to production and did a test payment from my personal paypal to business paypal it all worked fine, it was only after we went live that users on Apple reported been unable to checkout using PayPal, and not having an Apple device I couldn't test it myself.

 

After a couple of days testing and debugging using Safari on Windows I had the random idea to move the JS files to the <head>, and it worked fine in Safari, and I drove to my local McDonalds to test it on an iPad there (They've got dumbed down kidified iPads on some tables now, but the browser is still there) and it worked fine. Moving the <script> tags was the only change, nothing in the core PHP files that generate the payment information.

 

It's fine now, and we've had lots of succesful orders with it.

 

Robert, I've only been doing Javascript for around a year/18 months now, so I'm still quite new to it (I've been doing PHP for just over 10 years, and basic HTML/CSS for almost 15 years) so I'm constantly learning, I've had thoughts about putting all the Javascript in one file before, and its something I've been wanting to experiment with locally (I learn best by doing) but I've not had chance yet due to working on customers websites, and I'd rather do something I know that works on a customers website rather than mess about and experiment.

Hmm i avoid anything 'pre-body' with js unless it's required to save the world. What I use is a js loader before the closing body to load everything non-critical to the site before interaction. By the sounds of things PayPal is non critical until they click 'pay now'?

The problem with writing scripts at the head of a page is blocking. The browser must stop processing the page until the script is download, parsed and executed. The reason for this is pretty clear, these scripts might insert more into the page changing the result of the rendering, they also may remove things that don't need to be rendered, etc.

• Place library script such as the jQuery library in the head section.

• Place script that impacts the render of the page at the end of the body (before the body closure).

• do NOT place script in the markup such as <input onclick="myfunction()"/> - better to put it in event handlers in your script body instead.

• If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.

I am not working with PayPal as much so i have no idea to the issue you have mention.

Hope it helps...

The problem with writing scripts at the head of a page is blocking. The browser must stop processing the page until the script is download, parsed and executed. The reason for this is pretty clear, these scripts might insert more into the page changing the result of the rendering, they also may remove things that don't need to be rendered, etc.

• Place library script such as the jQuery library in the head section.

• Place script that impacts the render of the page at the end of the body (before the body closure).

• do NOT place script in the markup such as <input onclick="myfunction()"/> - better to put it in event handlers in your script body instead.

• If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.

I am not working with PayPal as much so i have no idea to the issue you have mention.

Hope it helps...

 

Do not place library scripts into the head. All scripts impact the render as they must be parsed before the browser can continue on rendering.

Edited December 29, 20169 yr by rbrtsmith