Skip to content

Move javascript to bottom of the page #5815

Closed
wants to merge 2 commits into from

9 participants

@gaurish
gaurish commented Apr 11, 2012

with rails templates, we promote "Best practices" in web development. Hence, we should move all JavaScripts at bottom of the page which is also one of the "Best Practices". It improves performance.

Further, if anyone does not want to follow best practices & move javascript block in head. it can be simply moved back. Its just a template which people would customize to their own needs.

More info on why it is important can be found here: http://developer.yahoo.com/performance/rules.html#js_bottom

@drogus
Ruby on Rails member
drogus commented Apr 13, 2012

👍, but can you keep proper indentation?

@adimircolen

+1

@gaurish
gaurish commented Apr 13, 2012

@drogus
Done!

@drogus
Ruby on Rails member
drogus commented Apr 13, 2012

After discussing this with some of the core team members I think that's not something that should be the default. The problem is such approach will work only for 100% unobtrusive UJS sites. While this is often the case, it may be confusing for beginners.

This thing alone will not usually have huge impact on page load time, so probably it's better to leave it to advanced developers that know what they're doing.

@gaurish
gaurish commented Apr 14, 2012

For beginners, Instead of "confusing". Don't you think it would be a good thing instead? Because it would make them think about best practices of modern web development from get go. And if they wish to ignore the best practice, javascript can be moved back into head in just 2secs; so the beginner's confusion argument seem as an non-issue.

But doing this change, we would be promoting "best practices" which would be cool. And just to mention; Clean, Semantic and accessible HTML with cached, external JS and CSS trumps inline-stuff every day.

PS: this is my humble opinion, please feel free to disagree

@oscardelben

👍 I think we should promote what we think is the best way

@oscardelben

I would, however remove the html comment.

@gaurish
gaurish commented Apr 15, 2012

@oscardelben
Done! 😄

@jeremy
Ruby on Rails member
jeremy commented Apr 18, 2012

This breaks inline js in surprising ways. It's easy to move back to the head, but only after serious head/desk injury.

Conversely, it's easy to move to the bottom. We could include a comment on the bottom, instead, mentioning that you can move your scripts there as long as you're careful, well-informed, and 100% ujs.

@arunagw
Ruby on Rails member
arunagw commented Apr 18, 2012

@gaurish please make changes as @jeremy suggested and squash commits into one commit.

Thanks :-)

lest and others added some commits Apr 9, 2012
@lest lest no need in temporary array in number_to_phone helper 06674f0
@gaurish gaurish with rails templates, we promote "Best practices" in web development.
Hence, we should move ALL JavaScripts at bottom of the page which would lead to better page load time.

Hence a comment has been added encouraging developers to move js at bottom of the page
f48d0fa
@gaurish
gaurish commented Apr 21, 2012

@arunagw
Changes made & squashed changes into commit but for some reason previous unrelated commit is showing up.

@jeremy
Yes, comment might be a good place to start without breaking compat

@arunagw
Ruby on Rails member
arunagw commented Apr 21, 2012

@gaurish New PR?

@gaurish
gaurish commented Apr 21, 2012

here:
#5921

@gaurish gaurish closed this Apr 21, 2012
@tkrotoff

If you move JavaScript at the bottom of the page (which is good), you should also create a default placeholder for the use of javascript_tag:

# application.html.erb
<%= yield :javascript %>
# my_view.html.erb
<% content_for :javascript do %>
  <%= javascript_tag do %>
    $(document).ready(function() {
      // My JS code here
    });
  <% end %>
<% end %>

See http://www.leorodriguez.me/2011/08/how-to-put-javascript-at-bottom-on.html
See http://stackoverflow.com/questions/2464595/including-inline-javascript-using-content-for-in-rails
See http://stackoverflow.com/a/390196

This is necessary (i.e otherwise it won't work) in the case your JavaScript inside javascript_tag depends on a library (think of jQuery) that is inserted at the bottom of the page.
You need your JavaScript to be declared after the library it uses.

Let's enforce a default name for the placeholder that most people will use. This way it becomes obvious and people don't have to google for answers like I did.

@erichmenge

@tkrotoff The problem with that is that it encourages obtrusive use of javascript, which is bad.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.