{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', '推荐 Emotional °昔 的问题《[removed] DOM load events, execution sequence, and》','https://www.manongdao.com/q-45101.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I just realized that I lack the fundamental knowledge of what exactly happens as a page is being loaded into a browser.
Assume I have a structure like this:
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
</head>
<body>
...
<script type="text/javascript" id="middle">
// some more JS here...
</script>
...
<script src="last.js" type="text/javascript"></script>
</body>
Here are the questions I have:
What sequence are things happening in? First the DOM then the JS is executed, is it vice-versa, or is it simultaneous (or as soon as the JS files finish downloading, without any regard to the DOM)? I know that scripts are loaded in order.
Where does
$(document).ready()fit in? In Firebug's Net tab I seeDOMContentLoadedevent and theloadevent. Is$(document).ready()triggered when theDOMContentLoadedevent fires? Couldn't find any concrete info on this (everyone merely mentions "when the DOM is loaded").What exactly does "when the DOM is loaded" mean? That all HTML/JS has been downloaded and parsed by the browser? Or just the HTML?
Is the following scenario possible: there is a
$(document).ready()which calls code inlast.js, but runs before last.js has loaded? Where would it most likely be (infirst.jsor the inline code block)? How can I prevent this scenario?
I want to undestand the big picture of what happens when and what depends on what (if at all).
Javascript is executed as it is seen. Usually, the browser stops parsing the page as soon as it sees a
<script>tag, downloads and runs the script, and then keeps going. This is why it's commonly advised to put<script>tags at the bottom: so the user doesn't have a blank page while the browser waits for the scripts to download.However, starting from Firefox 3.5, scripts are downloaded in the background while the rest of the page is rendered. In the now-unusual event that the script uses
document.writeor similar, Firefox will back up and redraw as necessary. I don't think other browsers do this at the moment, but I wouldn't be surprised if it were forthcoming, and IE at least supports adeferattribute in the<script>tag that will defer loading the script until after the page is loaded.DOMContentLoadedis exactly that: it fires as soon as the DOM is loaded. That is, as soon as the browser has parsed all of the HTML and created a tree of it internally. It does NOT wait for images, CSS, etc. to load. The DOM is all you usually need to run whatever Javascript you want, so it's nice to not have to wait for other resources. However, I believe only Firefox supportsDOMContentLoaded; in other browsers,ready()will just attach an event to regular oldonload.Javascript is guaranteed to run in the order it appears in your HTML, so just make sure your function is defined before you try to attach it to an event.
http://javascript.about.com/od/hintsandtips/a/exeorder.htm should help you answer that
basically: first all the data is loaded (the html), then the js the code within the head/body which is not in a function or ready or something like that is executed first. from there it goes about the scripts sequentially
its important to note that js takes precedence over ie. css loading - so form a performance perspective you should have the js at the bottom of the page.
so @4: you dont need to prevent that scenarion because first.js is always being read/executed before last.js