{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 老娘就宠你 的问题《If I keep JavaScript at bottom or keep JavaScript》','https://www.manongdao.com/q-481098.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
If I keep JavaScript code at bottom or keep JavaScript code in <head> inside document.ready, are both same thing?
I'm confused between these two methodologies, http://api.jquery.com/ready/ and http://developer.yahoo.com/performance/rules.html#js_bottom.
Is there any benefit to putting JavaScript code at bottom (just before </body>) even if I keep the code inside.
$(document).ready(function() {
// code here
});
As JavaScript is attached in
<head>
<script type="text/javascript" src="example.js"></script>
</head>
Even with the script at the bottom of the HTML document, the DOM may not be fully loaded. All closed elements above the script will typically be ready, a DOM ready event may be necessary in corner cases.
It's important to consider what the JavaScript is actually doing on your page when deciding where to put it. In most cases, the time it takes to load and run JavaScript makes placing it at the end of the page more logical. However, if the page rendering itself depends on Ajax calls or similar, this might not be the case.
Here's a good read on the subject of
document.ready()not being appropriate for all JS.In General, your should put your Javascript files at the bottom of your HTML file.
That is even more important if you're using "classical"
<script>tag files. Most browsers (even modern ones) will block theUI threadand therefore the render process of yourHTML markupwhile loading & executing javascript.That in turn means, if you're loading a decent amount of Javascript at the top of your page, the user will expire a "slow" loading of your page, because he will see your whole markup after all your script has been loaded and executed.
To make this problem even worse, most browsers will not download javascript files in a parallel mode. If you have a something like this:
your browser will
and while doing so, both the
UI threadand the rendering process are blocked.Some browsers like
Chromefinally started to load script files in parallel mode which makes that whole problem a little bit less of an issue.Another way to "workaround" that problem is to use
dynamic script tag insertion. Which basically means you only load one javascript file over a<script>tag. This (loader) script then dynamically creates<script>tags and inserts them into your markup. That works asyncronously and is way better (in terms of performance).The Yahoo! Developer site is saying that if you put JavaScript at the bottom of the page, it won't block loading of other resources by the browser. This will make the page's initial load quicker.
jQuery is specifying a function to load when the entire page has loaded.
If you have a function which executes on page load, it won't matter whether you include it in
<head>or at the bottom of the page, it will be executed at the same time.Position of
<script>tag don't involve your script if you usedocument.ready. It seems JavaScript is charged faster when placed before</body>but I'm not sure.They are not the same thing as the
readyevent is fired when the DOM tree has been built, while scripts at the end of the page may actually execute afterward.Either way, they're both safe entry points for your app's execution.